<template>
  <BasicModal
    v-bind="$attrs"
    destroyOnClose
    @register="register"
    title="创建配置"
    width="600px"
    @visible-change="handleShow"
    @ok="handleOk"
  >
    <BasicForm @register="registerForm" />
  </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 { manualPreform, exchangeRate } = useOrderInfo(orderStore);
      const loading = ref(true);
      const activeUser = ref();
      const info = ref();
      const searchData = ref({});
      const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
        searchData.value = data.data || {};
        activeUser.value = undefined;
        info.value = '';
      });

      const { customerCode: customerCodeOptions } = useOrderInfo(orderStore);
      var [registerForm, { getFieldsValue, validate }] = useForm({
        labelWidth: 80,
        schemas: [
          {
            field: 'settingValue',
            component: 'Select',
            label: '客户编码',
            rules: [{ required: true }],
            componentProps: {
              options: customerCodeOptions,
            },
            colProps: {
              span: 24,
            },
          },
          {
            field: 'relationValue',
            component: 'InputNumber',
            label: props.column === 1 ? '利润率' : '包装费用',
            rules: [{ required: true }],
            colProps: {
              span: 24,
            },
          },
        ],
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

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

      async function handleCalc() {
        const res = await orderGravity({
          ...searchData.value,
          designer: activeUser.value,
        });
        info.value = res?.rate || 0;
      }

      async function handleOk() {
        try {
          const values = getFieldsValue();
          await validate();
          const params = {
            settingCode: 'customerCode',
            settingName: '客户编码',
            settingValue: values.settingValue,
            settingType: 1,
            relationCode: props.column === 1 ? 'profitRate' : 'packetPrice',
            relationName: '包装费用',
            relationValue: values.relationValue,
          };

          await addConfig(params);
          emit('modal-success');
          closeModal();
        } catch (error) {
          console.log('%c [ error ]-108', 'font-size:13px; background:pink; color:#bf2c9f;', error);
        }
      }
      return {
        register,
        loading,
        handleShow,
        info,
        manualPreform,
        handleCalc,
        activeUser,
        exchangeRate,
        registerForm,
        handleOk,
      };
    },
  });
</script>
<style scoped>
  .empty-tips {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
</style>