<template>
  <BasicModal
    :maskClosable="false"
    width="1000px"
    v-bind="$attrs"
    @register="registerModal"
    title="详情"
    :showCancelBtn="false"
    :showOkBtn="false"
    disabled
  >
    <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" disabled />
              </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, unref, onMounted } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { accountFormSchemaT } from './account.data';
  import { filterRoleList } from '/@/api/system/system';

  import { TOption } from '/@/views/rule/linkedge/config/config.data';
  export default defineComponent({
    name: 'AccountModal',
    components: {
      BasicModal,
      BasicForm,
    },
    emits: ['success', 'register'],
    setup(_) {
      const spinning = ref(false);
      const roleOptions = ref<TOption[]>([]);
      const isUpdate = ref(true);
      const rowId = ref('');

      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 }] = useForm({
        labelWidth: 100,
        schemas: accountFormSchemaT,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 18,
        },
      });

      const [registerModal, { setModalProps }] = useModalInner(async (data) => {
        await resetFields();
        setModalProps({ confirmLoading: false });
        if (unref(isUpdate)) {
          try {
            spinning.value = true;
            rowId.value = data.record.id;
            setFieldsValue(data.record);
            spinning.value = false;
          } catch (error) {
            spinning.value = false;
          }
        }
      });
      function onSearch(data) {
        console.log(data);

        window.open('dataSupport/groundDisasterId/thematicGallery');
      }

      return {
        registerModal,
        registerForm,
        roleOptions,

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

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

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

  :deep(.ant-select-selection-item) {
    color: rgba(0, 0, 0, 0.85) !important;
  }
  :deep(.ant-input-number-disabled) {
    color: rgba(0, 0, 0, 0.85) !important;
  }
</style>
