<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="fileFlow.title"
    width="700px"
    okText="确认到账"
    @cancel="resetFields"
    :confirmLoading="loading"
    @ok="handleSubmit"
  >
    <div class="pt-2px pr-3px">
      <BasicForm @register="registerForm">
        <template #text="{ model, field }">
          {{ model[field] }}
        </template>
        <template #img="{ model }">
          <PreviewGroup>
            <Image style="overflow: hidden;height: 100%;object-fit: cover;" :height="80" :width="80" v-for="item in model.payImgArray" :key="item" :src="item" :size="200" />
          </PreviewGroup>
        </template>
      </BasicForm>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, h, onMounted, reactive, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Image } from 'ant-design-vue';
  import {
    partAllList,
    faultAllList,
    checkRegister,
    partInfo,
    partInfo,
    checkRegisterInfo,
    checkAccount,
  } from '/@/api/spares';
  import { TableImg } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { uploadApi } from '/@/api/product/index';
  const { t } = useI18n();
  export default defineComponent({
    components: { BasicModal, BasicForm, Image, PreviewGroup: Image.PreviewGroup, },
    props: {
      userData: { type: Object },
    },
    emits: ['update', 'register'],
    setup(props, { emit }) {
      const n = ref(1);
      const repairId = ref('');
      const fileFlow = reactive({
        file: null,
        title: '发件登记',
        repairId: null,
        cameraType: 0,
        type: 2, //2-普通发票，3-专用发票
        faultList: [],
      });
      const loading = ref(false);
      const { createMessage, createConfirm } = useMessage();
      let schemas: FormSchema[] = [
        {
          field: 'repairId',
          component: 'Input',
          label: '维修单号',
          slot: 'text',
          colProps: {
            span: 24,
          },
        },
        {
          field: 'deviceInfo',
          component: 'Input',
          label: '设备信息',
          slot: 'text',
          colProps: {
            span: 18,
          },
        },
        {
          field: 'payAmount',
          component: 'Input',
          label: '应收金额',
          slot: 'text',
          colProps: {
            span: 24,
          },
        },
        {
          field: 'payImgArray',
          component: 'Input',
          label: '付款凭证',
          slot: 'img',
          colProps: {
            span: 24,
          },
        },
        {
          field: 'checkAccountImg',
          component: 'Upload',
          label: '到账回单',
          required: true,
          rules: [{ required: true, message: t('common.uploadMessge') }],
          itemProps: {
            validateTrigger: 'blur',
          },
          componentProps: {
            api: uploadApi,
            // fileFlow:true,
            maxNumber: 6,
            maxSize: 5,
            accept: ['jpeg', 'jpg', 'png'],
          },
          colProps: {
            span: 12,
          },
        },
      ];
      const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
        labelWidth: 100,
        schemas: schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });
      onMounted(() => {});
      // getFaultList();
      let addListFunc = () => {};
      const [register, { closeModal }] = useModalInner((data) => {
        repairId.value = data?.repairId;
        data && onDataReceive(data);
      });
      async function getFaultList() {
        const res = await faultAllList({});
        fileFlow.faultList = res.map((item) => {
          return {
            ...item,
            label: item.faultMsg,
            value: item.faultId,
          };
        });
      }

      function onDataReceive(data) {
        console.log('openOutModal', data, repairId.value);
        resetFields();
        // updateSchema({
        //   field: 'faultIds',
        //   componentProps: {
        //     options: fileFlow.faultList,
        //   },
        // });
        fileFlow.type = data.type;
        fileFlow.cameraType = data.cameraType;
        setFieldsValue({
          ...data,
          remark: '',
          deviceInfo: t(`routes.scene.tableType.${data.cameraType}`) + data.cameraSnCode,
        });
      }
      const handleSubmit = async () => {
        const { checkAccountImg, repairId } = await validate();
        try {
          createConfirm({
            iconType: 'warning',
            title: () => h('span', '温馨提示'),
            content: '确定提交到账登记吗?',
            onOk: async () => {
              loading.value = true;
              await checkAccount({ checkAccountImg, repairId });
              loading.value = false;
              createMessage.success(t('common.optSuccess'));
              closeModal();
              emit('update');
            },
            onCancel: () => {
              loading.value = false;
            },
          });
        } catch (error) {
          loading.value = false;
          console.log('not passing', error);
        }
      };
      return {
        register,
        registerForm,
        fileFlow,
        handleSubmit,
        addListFunc,
        resetFields,
        loading,
        t,
      };
    },
  });
</script>