<template>
  <BasicModal
    :maskClosable="false"
    width="1000px"
    v-bind="$attrs"
    @register="registerModal"
    :title="getTitle"
    @ok="handleSubmit"
    :destroyOnClose="true"
  >
    <div class="p-4">
      <a-spin :spinning="spinning">
        <BasicForm @register="registerForm" :label-col="labelCol">
          <template #slider="{ model, field }">
            <a-row>
              <a-col :span="20">
                <a-slider v-model:value="model[field]" :min="0" :max="100" :step="1" />
              </a-col>
              <a-col :span="4" class="text-center align-middle leading-9">
                {{ model[field] ? model[field] + '%' : 0 + '%' }}
              </a-col>
            </a-row>
          </template>
          <template #map>
            <div class="w-full h-72 border-2"></div>
          </template>
        </BasicForm>
      </a-spin>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, reactive, onMounted } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { accountFormSchema } from './account.data';
  import { filterRoleList } from '/@/api/system/system';
  import { addJcgltkjcsj } from '/@/api/datamanager/inspectionManagement/skyInspectionManagement';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { TOption } from '/@/views/rule/linkedge/config/config.data';
  import { number } from 'vue-types';

  export default defineComponent({
    name: 'AccountModal',
    components: {
      BasicModal,
      BasicForm,
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const spinning = ref(false);
      const roleOptions = ref<TOption[]>([]);
      const isUpdate = ref(true);
      const rowId = ref(number);
      const postData = reactive({});

      const getRoleList = async () => {
        const res = await filterRoleList();
        console.log(res);
        roleOptions.value = res.map((m) => {
          return {
            label: m.name,
            value: m.id,
          };
        });
      };
      onMounted(async () => {
        await getRoleList();
      });

      const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
        labelWidth: 100,
        schemas: accountFormSchema,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 18,
        },
      });

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        await resetFields();
        setModalProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;
        if (unref(isUpdate)) {
          try {
            spinning.value = true;
            rowId.value = data.record.id;
            setFieldsValue(data.record);
            spinning.value = false;
          } catch (error) {
            spinning.value = false;
          }
        }
      });
      const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

      async function handleSubmit() {
        setModalProps({ confirmLoading: true });
        try {
          const { createMessage } = useMessage();
          const values = await validate([
            'id',
            'jclx',
            'sjlx',
            'tcid',
            'tcmc',
            'sjtcid',
            'xh',
            'tmd',
            'bz',
          ]);

          Object.assign(postData, values);
          const data = preProcessData(postData as any);
          if (unref(isUpdate)) {
            data.id = Number(values.id);
            data.sjtcid = data.sjtcid || null;
          } else {
            data.tmd = data.tmd || 0;
          }
          data.sjtcid = data.sjtcid || null;

          const res = await addJcgltkjcsj(data, unref(isUpdate));
          if (res.code != -1) {
            closeModal();
            emit('success');
            createMessage.success(unref(isUpdate) ? '编辑成功' : '新增成功');
          } else {
            createMessage.error(unref(isUpdate) ? '编辑失败' : '新增失败');
          }
        } finally {
          setTimeout(() => {
            setModalProps({ confirmLoading: false });
          }, 300);
        }
      }

      function preProcessData(data) {
        Object.keys(data).forEach((item) => {
          if (typeof data[item] === 'undefined' || data[item] === null || data[item] === '') {
            delete data[item];
          }
        });
        return data;
      }

      return {
        labelCol: { style: { width: '80px' } },
        registerModal,
        registerForm,
        handleSubmit,
        getTitle,
        roleOptions,

        spinning,
      };
    },
  });
</script>
<style scoped lang="less">
  :deep(.vben-basic-tree) {
    width: 100% !important;
  }

  :deep(.is-unflod) {
    display: none !important;
  }

  :deep(.is-flod) {
    display: none !important;
  }
</style>
