<script setup>
import { onMounted, watch, ref, reactive } from "vue";
import { useI18n } from "vue-i18n";

import tagadder from "@/components/tagadder.vue";
import dateTimePicker from "@/components/dateTimePicker.vue";

import TomSelect from "tom-select";
import "tom-select/dist/css/tom-select.css";

const { t, locale } = useI18n();

function functionupdataTitle() {
  document.title = "Operations." + t("purchase.add_part");
}

//货币类型
const currency_type = reactive({
  1: "RMB",
  2: "MOP",
  3: "HKD",
  4: "USD",
});
//成本类型
const cost_type = reactive({
  1: t("cost_type.unit_price"),
  2: t("cost_type.freight"),
});
function update_cost_type() {
  cost_type["1"] = t("cost_type.unit_price");
  cost_type["2"] = t("cost_type.freight");
}

//订单状态
const order_status = reactive({
  1: t("order_status.pending_order"),
  2: t("order_status.order_placed"),
  3: t("order_status.in_transit"),
  4: t("order_status.completed"),
  5: t("order_status.refund_requested"),
  6: t("order_status.returning"),
  7: t("order_status.refunded"),
  8: t("order_status.lost_package"),
});

function update_order_status() {
  order_status["1"] = t("order_status.pending_order");
  order_status["2"] = t("order_status.order_placed");
  order_status["3"] = t("order_status.in_transit");
  order_status["4"] = t("order_status.completed");
  order_status["5"] = t("order_status.refund_requested");
  order_status["6"] = t("order_status.returning");
  order_status["7"] = t("order_status.refunded");
  order_status["8"] = t("order_status.lost_package");
}

const cost_sheet_tab = reactive([]);
// 表单对象
const cost_sheet = reactive({
  type: "1",
  int: 1,
  cost: 0.0,
  currency_type: "1",
});

function del_cost(key) {
  cost_sheet_tab.splice(key, 1);
}
function add_cost() {
  cost_sheet_tab.push(JSON.parse(JSON.stringify(cost_sheet)));
  // var t = {
  //   type: cost_type[cost_sheet.type],
  //   int: cost_sheet.int,
  //   cost: cost_sheet.cost,
  //   currency_type: currency_type[cost_sheet.currency_type],
  // };
  // cost_sheet_tab.push(t);
  //console.log(t);
}

onMounted(() => {
  functionupdataTitle();
  //sele_init();
});
// 监听语言变化，更新标题
watch(locale, () => {
  functionupdataTitle();
  update_cost_type();
  update_order_status();
});
</script>

<template>
  <div class="page-header d-print-none">
    <div class="container-xl">
      <div class="row g-2 align-items-center">
        <div class="col">
          <h2 class="page-title">添加订单</h2>
        </div>
      </div>
    </div>
  </div>
  <div class="page-body">
    <div class="container-xl">
      <div class="row row-cards">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">订单信息</h4>
            </div>
            <div class="card-body">
              <div class="mb-3">
                <label class="form-label required">标题</label>
                <input
                  type="text"
                  class="form-control"
                  name="example-text-input"
                  placeholder="输入订单标题"
                />
              </div>
              <div class="mb-3">
                <label class="form-label"
                  >备注 <span class="form-label-description">0/100</span></label
                >
                <textarea
                  class="form-control"
                  name="example-textarea-input"
                  rows="6"
                  placeholder="Content.."
                ></textarea>
              </div>
            </div>

            <div class="card-header">
              <h4 class="card-title">采购途径</h4>
            </div>
            <div class="card-body">
              <div class="mb-3">
                <label class="form-label">URL</label>
                <input
                  name="url"
                  type="url"
                  class="form-control"
                  placeholder="http"
                  value=""
                />
                <div class="mt-3">
                  <label class="form-label">样式备注</label>

                  <tagadder placeholder="添加样式"></tagadder>
                </div>

                <div class="mt-3">
                  <label class="form-label">成本</label>

                  <table
                    v-show="cost_sheet_tab.length"
                    class="table table-vcenter card-table table-striped"
                  >
                    <thead>
                      <tr>
                        <th>类型</th>
                        <th>数量</th>
                        <th>费用</th>
                        <th>总价</th>
                        <th>货币</th>
                        <th class="w-1">操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(value, key) in cost_sheet_tab">
                        <td>{{ cost_type[value.type] }}</td>
                        <td class="text-secondary">{{ value.int }}</td>
                        <td class="text-secondary">{{ value.cost }}</td>
                        <td class="text-secondary">
                          {{ value.cost * value.int }}
                        </td>
                        <td class="text-secondary">
                          {{ currency_type[value.currency_type] }}
                        </td>
                        <td>
                          <button
                            class="btn btn-outline-danger"
                            @click="del_cost(key)"
                          >
                            Del
                          </button>
                        </td>
                      </tr>
                      <!-- <tr>
                        <td>运输</td>
                        <td class="text-secondary">1</td>
                        <td class="text-secondary">5</td>
                        <td class="text-secondary">MOP</td>
                        <td>
                          <button class="btn btn-outline-danger">Del</button>
                        </td>
                      </tr> -->
                    </tbody>
                  </table>

                  <div class="row g-5">
                    <div class="col-xl-2">
                      类型
                      <select
                        ref="select_type"
                        class="form-control"
                        placeholder="选择费用类型"
                        autocomplete="off"
                        value="1"
                        v-model="cost_sheet.type"
                      >
                        <option v-for="(value, key) in cost_type" :value="key">
                          {{ value }}
                        </option>
                      </select>
                    </div>
                    <div class="col-xl-3">
                      数量
                      <input
                        type="number"
                        class="form-control"
                        min="1"
                        value="1"
                        v-model="cost_sheet.int"
                      />
                    </div>
                    <div class="col-xl-3">
                      费用
                      <input
                        type="number"
                        class="form-control"
                        step="0.01"
                        min="0"
                        value="0.0"
                        v-model="cost_sheet.cost"
                      />
                    </div>
                    <div class="col-xl-2">
                      货币
                      <select
                        ref="select_beast"
                        class="form-control"
                        placeholder="选择货币类型"
                        autocomplete="off"
                        value="1"
                        v-model="cost_sheet.currency_type"
                      >
                        <option
                          v-for="(value, key) in currency_type"
                          :value="key"
                        >
                          {{ value }}
                        </option>
                      </select>
                    </div>
                    <div class="col-xl-2">
                      操作
                      <button
                        class="form-control btn btn-outline-primary"
                        @click="add_cost"
                      >
                        添加
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="card-header">
              <h4 class="card-title">其他状态</h4>
            </div>
            <div class="card-body">
              <div class="mb-3">
                <div class="row g-5">
                  <div class="col-xl-4">
                    <label class="form-label required">更新时间</label>
                    <dateTimePicker></dateTimePicker>
                  </div>
                  <div class="col-xl-4">
                    <label class="form-label">快递单号</label>
                    <input
                      type="text"
                      class="form-control"
                      placeholder="输入快递单号"
                      value=""
                    />
                  </div>
                  <div class="col-xl-4">
                    订单状态
                    <select
                      ref="select_beast"
                      class="form-control"
                      placeholder="选择订单状态"
                      autocomplete="off"
                      value="1"
                    >
                      <option v-for="(value, key) in order_status" :value="key">
                        {{ value }}
                      </option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-footer text-end">
              <div class="d-flex">
                <button class="btn btn-link">Cancel</button>
                <button type="submit" class="btn btn-primary ms-auto">
                  Send data
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style></style>
