<script setup lang="ts">
import { ElForm } from "element-plus";
import { computed, reactive, ref, watchEffect } from "vue";
import { cost_rules, inv_tag, add_tax } from "./commodityCost/config/configs";
import RemoteSelect from "/@/components/RemoteSelect";
import { useResponseHandle } from "/@/hooks";
import { useRoute, useRouter } from "vue-router";

import BasicDescriptions, {
  type DescriptionColumn
} from "/@/components/BasicDescriptions";

import { httpCatlist, httpAdd } from "/@/api/InvoiceSaleSettings/commodityCost";

let cachecode = "";
let init = true;

const props = defineProps<{
  title: string;
  detail: any;
  columns: Array<DescriptionColumn>;
  backRoute: string;
  name?: string;
}>();

const formRef = ref<InstanceType<typeof ElForm>>(null);
const responseHandle = useResponseHandle();
const inv_tag_options = ref([...inv_tag]);
const { push } = useRouter();
const { query } = useRoute();
const rules = reactive({ ...cost_rules });

const spuCode = computed(() => query.id as string);
const taxs = ref<Array<string>>([]);

const formData = reactive({
  cat_code: "",
  cat_name: "",
  inv_good_name: "",
  tax: "",
  inv_tag: "0",
  is_discount: "0",
  addTax: ""
});

function handleSave() {
  formRef.value.validate(async isVaild => {
    if (!isVaild) return;

    const { code, message } = await httpAdd({
      spuCode: spuCode.value,
      ...formData,
      cat_code: formData.cat_name ? formData.cat_code : cachecode
    });

    responseHandle({
      code,
      message,
      handler: () => push(props.backRoute)
    });
  });
}

function handleSelectCategory(category) {
  if (!category) {
    formData.tax = "";
    formData.cat_name = "";
    return (taxs.value = []);
  }

  const { tax, cat_name } = category;
  taxs.value = tax;
  formData.tax = tax[0];
  formData.cat_name = cat_name;
}

watchEffect(() => {
  const { is_discount } = formData;
  let tags: Array<string> = [];
  formData.inv_tag = "";
  //非优惠政策 -》 税率标识可选择为3 普通零税率和0非零税率
  if (is_discount === "0" || !is_discount) {
    tags = ["0", "3"];
    formData.addTax = "";
  } else {
    //优惠政策 => 税率标识可选择为 0/1/2
    tags = ["0", "1", "2"];
  }

  rules.addTax[0].required = !!is_discount;

  if (init) {
    formData.inv_tag = "0";
    init = false;
  }

  inv_tag_options.value = inv_tag.filter(i => tags.includes(i.value));
});

watchEffect(() => {
  if (!props.detail) return;
  const { good_name, inv_good_name, inv_cat_name, inv_tax } = props.detail;

  formData.cat_code = inv_cat_name || "";
  formData.inv_good_name = inv_good_name ? inv_good_name : good_name;
  formData.tax = inv_tax || "";

  console.log(formData);
});
</script>

<template>
  <div class="settings__content" bg-white>
    <h1 mb-2 font-bold>{{ title }}</h1>

    <BasicDescriptions
      v-if="detail"
      :data="detail"
      :columns="columns"
      label-width="130px"
      :col-number="2"
    />

    <div v-else v-loading="true" h-100px>详情加载中...</div>

    <div w-500px m-auto mt-5>
      <el-form
        label-width="120px"
        label-position="left"
        ref="formRef"
        :rules="rules"
        :model="formData"
      >
        <el-form-item label="商品类目设置" prop="cat_code">
          <RemoteSelect
            w-100
            is-root
            :api="httpCatlist"
            v-model="formData.cat_code"
            placeholder="请选择商品类目"
            response-label-prop="cat_name"
            response-val-prop="cat_code"
            request-prop="cat_name"
            @item-change="handleSelectCategory"
          />
        </el-form-item>
        <el-form-item label="商品名称" prop="inv_good_name">
          <el-input
            v-model="formData.inv_good_name"
            placeholder="请输入商品名称"
          />
        </el-form-item>

        <el-form-item label="是否有优惠政策" prop="is_discount">
          <el-select
            w-390px
            v-model="formData.is_discount"
            placeholder="请选择是否包含优惠政策"
          >
            <el-option label="否" value="0" />
            <el-option label="是" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="汇率标识" prop="inv_tag">
          <el-select
            w-390px
            v-model="formData.inv_tag"
            placeholder="请选择汇率标识"
          >
            <el-option
              v-for="(tag, index) in inv_tag_options"
              :key="index"
              :label="tag.label"
              :value="tag.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="税率" prop="tax">
          <el-select
            w-390px
            v-model="formData.tax"
            :disabled="taxs.length === 0"
            placeholder="请输入税率"
          >
            <el-option
              v-for="(t, index) in taxs"
              :key="index"
              :label="t"
              :value="t"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="增值税管理内容" prop="addTax">
          <el-select
            w-390px
            v-model="formData.addTax"
            :disabled="formData.is_discount === '0'"
            placeholder="请选择增值税管理税内容"
          >
            <el-option
              v-for="(t, i) in add_tax"
              :key="i"
              :label="t.label"
              :value="t.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <div flex justify-center>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.settings__content {
  padding: 20px !important;
}
</style>
