<template>
  <BasicModal
    v-bind="$attrs"
    destroyOnClose
    @register="register"
    title="创建配置"
    width="600px"
    @visible-change="handleShow"
    @ok="handleOk"
  >
    <a-space direction="vertical" style="width: 100%">
      <div
        ><span style="margin-right: 8px">客户编码：</span>
        <a-select
          ref="select"
          style="width: 100%"
          v-model:value="customerCode"
          :options="customerCodeOptions"
      /></div>
      <div
        ><span style="margin-right: 8px; width: 80%">固定成本：</span>
        <a-input v-model:value="fixCost"
      /></div>
      <div
        ><span style="margin-right: 8px; width: 80%">提成比例：</span>
        <a-input v-model:value="ratio" />
      </div>
      <div
        ><span style="margin-right: 8px; width: 80%">西班牙提成比例：</span>
        <a-input v-model:value="spainRatio" />
      </div>
      <div
        ><span style="margin-right: 8px; width: 80%">年份：</span>
        <a-select v-model:value="year" style="width: 100%">
          <a-select-option v-for="y in yearOptions" :key="y" :value="y">{{ y }}</a-select-option>
        </a-select>
      </div>
      <!-- <div
        ><span style="margin-right: 8px; width: 80%">生产提成单价：</span>
        <a-input v-model:value="price" />
      </div> -->
    </a-space>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, defineEmits } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { orderGravity } from '/@/api/project/order';
  import { useOrderStoreWithOut } from '/@/store/modules/order';
  import { useOrderInfo } from '/@/hooks/component/order';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { addConfig } from '/@/api/sys/config';

  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      column: { type: Number },
    },
    emits: ['modal-success'],
    setup(props, { emit }) {
      const orderStore = useOrderStoreWithOut();
      const loading = ref(true);
      const activeUser = ref();
      const info = ref();
      const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
        listAll.value = data;
      });
      //获取现有的列表
      const listAll = ref();
      const fixCost = ref();
      const ratio = ref();
      const spainRatio = ref();
      const price = ref();
      const year = ref(new Date().getFullYear().toString());
      // Generate year options from 2023 to current year
      const currentYear = new Date().getFullYear();
      const yearOptions = ref<string[]>([]);
      for (let y = 2023; y <= currentYear; y++) {
        yearOptions.value.push(y.toString());
      }
      // const relationValue = ref();
      const customerCode = ref();
      const relationValue = ref([
        {
          relationCode: 'fixCost',
          relationName: '固定成本',
          relationValue: '',
        },
        {
          relationCode: 'ratio',
          relationName: '提成比例',
          relationValue: '',
        },
        {
          relationCode: 'spainRatio',
          relationName: '西班牙提成比例',
          relationValue: '',
        },
        // {
        //   relationCode: 'price',
        //   relationName: '生产提成单价',
        //   relationValue: '',
        // },
      ]);
      const { customerCode: customerCodeOptions } = useOrderInfo(orderStore);

      function handleShow(visible: boolean) {
        if (visible) {
          loading.value = true;
          // setModalProps({ loading: true, confirmLoading: true });
          setModalProps({ loading: false, confirmLoading: false });
        }
      }

      // 格式化百分比值，去除百分号并除以100
      function formatPercentage(value) {
        if (!value) return '';
        // 检查值是否包含百分号
        if (typeof value === 'string' && value.includes('%')) {
          // 去除百分号并转为数值，然后除以100
          return (parseFloat(value.replace('%', '')) / 100).toString();
        }
        // 如果没有百分号但是是数值，直接除以100
        return value;
      }

      async function handleOk() {
        try {
          relationValue.value[0].relationValue = fixCost.value;
          relationValue.value[1].relationValue = formatPercentage(ratio.value);
          relationValue.value[2].relationValue = formatPercentage(spainRatio.value);
          await addConfig({
            settingCode: 'customerCode',
            settingName: '客户提成成本配置',
            settingValue: customerCode.value,
            settingType: 3,
            relationCode: 'costSettingItem',
            relationName: year.value,
            costSettingItemVOS: relationValue.value,
          });
          emit('modal-success');
          closeModal();
        } catch (error) {
          console.log('%c [ error ]-108', 'font-size:13px; background:pink; color:#bf2c9f;', error);
        }
      }
      return {
        register,
        loading,
        handleShow,
        info,
        activeUser,
        fixCost,
        ratio,
        spainRatio,
        price,
        customerCode,
        year,
        yearOptions,
        customerCodeOptions,
        handleOk,
      };
    },
  });
</script>
<style scoped>
  .empty-tips {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
</style>