<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="意见反馈预览" width="30%">
    <BasicForm @register="registerForm">
      <template #iconSelect>
        <div style="width: 22vw; display: flex; flex-wrap: wrap">
          <template v-for="(item, index) in feedBackImgUrl" :key="index">
            <span style="display: none">{{ index }}</span>
            <div>
              <Upload list-type="picture-card" :openFileDialogOnClick="false">
                <img
                  style="width: 100%; height: 11vh"
                  @click="handlePreview(item)"
                  :src="item"
                  alt="avatar"
                />
              </Upload>
            </div>
          </template>
          <Modal
            :visible="previewVisible"
            :title="previewTitle"
            :footer="null"
            @cancel="handleCancel"
          >
            <img alt="example" style="width: 100%" :src="previewImage" />
          </Modal>
        </div>
      </template>
    </BasicForm>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { formSchema } from './config.data';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Upload } from 'ant-design-vue';
  import { Modal } from 'ant-design-vue';

  export default defineComponent({
    name: 'ContactDrawer',
    components: { BasicDrawer, BasicForm, Upload, Modal },
    emits: ['success', 'register'],
    setup(_) {
      const feedBackImgUrl = ref([]);
      const previewVisible = ref(false);
      const previewImage = ref('');
      const previewTitle = ref('');
      const [registerForm, { setFieldsValue, resetFields }] = useForm({
        labelWidth: 120,
        schemas: formSchema,
        showActionButtonGroup: false,
      });

      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
        await resetFields();
        feedBackImgUrl.value = [];
        setDrawerProps({ confirmLoading: false });
        await setFieldsValue(data.record);
        if (data.record.images) {
          const imageFormJson = JSON.parse(data.record.images);
          feedBackImgUrl.value = imageFormJson;
        }
        if (data.record.contact) {
          const contactFormJson = JSON.parse(data.record.contact);
          await setFieldsValue({
            email: contactFormJson.email,
            phone: contactFormJson.phone,
            qq: contactFormJson.qq,
          });
        }
      });
      const handlePreview = async (item) => {
        previewVisible.value = true;
        previewImage.value = item;
        previewTitle.value = '预览图片';
      };
      const handleCancel = () => {
        previewVisible.value = false;
      };
      return {
        registerDrawer,
        registerForm,
        feedBackImgUrl,
        handlePreview,
        previewVisible,
        handleCancel,
        previewImage,
        previewTitle,
      };
    },
  });
</script>