<template>
  <BasicModal
    v-bind="$attrs"
    :title="title"
    @register="registerInnerModal"
    @ok="handleSubmit"
    @cancel="resetForm"
    :width="1000"
  >
    <template #footer>
      <div v-if="isUpdate !== 3">
        <a-button type="default" @click="handleCancle">取消</a-button>
        <a-button type="primary" @click="handleSubmit">确认</a-button>
      </div>
    </template>
    <BasicForm @register="registerForm">
      <template #areaCode="{ model, field }">
        <Cascader
          v-model:value="model.areaCode"
          :options="options"
          :changeOnSelect="true"
          expand-trigger="hover"
          placeholder="Please select"
          :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
        />
      </template>
    </BasicForm>
  </BasicModal>
</template>

<script setup lang="ts">
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { computed, ref, unref } from 'vue';
import {
  largeScreenInfo,
  infoAdd,
  infoUpdate,
  largeScreenAdd,
  largeScreenUpdate,
} from '@/api/basicInfo/tenement';
import { modalSchemas } from './info.data';
import { departmentTree } from '@/api/system/user';
import { addFullName } from '@/utils/helper/treeHelper';
import { postOptionSelect } from '@/api/system/post';
const postList = ref<Post[]>([]);
defineOptions({ name: 'InfoModal' });
import { Cascader } from 'ant-design-vue';


import { proCityList } from './area.ts';
const options = proCityList;

const areaCode = ref<string[]>([]);
const emit = defineEmits(['register', 'reload']);

const isUpdate = ref<number>(1);
const title = computed<string>(() => {
  return isUpdate.value === 1
    ? '编辑监控大屏分组信息;'
    : isUpdate.value === 2
    ? '新增监控大屏分组信息;'
    : '查看监控大屏分组信息';
});
/**
 * 初始化部门选择
 */
async function initDeptSelect() {
  // updateSchema
  const deptTree = await departmentTree();
  // 选中后显示在输入框的值 即父节点 / 子节点
  addFullName(deptTree, 'label', ' / ');
  await updateSchema([
    {
      field: 'deptId',
      componentProps: ({ formModel }) => ({
        treeData: deptTree,
        fieldNames: { value: 'id', label: 'label' },
        treeDefaultExpandAll: true,
        treeLine: { showLeafIcon: false },
        // 选中后显示在输入框的值
        treeNodeLabelProp: 'fullName',
        async onSelect(deptId: string | number) {
          /** 根据部门ID加载岗位 */
          const postListResp = await postOptionSelect(deptId);
          postList.value = postListResp;
          /** 变化后需要重新选择岗位 */
          formModel.postIds = [];
        },
      }),
    },
  ]);
}
const [registerInnerModal, { modalLoading, closeModal }] = useModalInner(
  async (data: { record?: Recordable; update: number }) => {
    modalLoading(true);
    const { record, update } = data;
    isUpdate.value = update;
    await initDeptSelect();
    if (isUpdate.value === 3) {
      setProps({ disabled: true });
    } else {
      setProps({ disabled: false });
    }
    if ((update === 1 || update === 3) && record) {
      const ret = await largeScreenInfo(record.id);
      ret.areaCode = JSON.parse(ret.areaCode);
      await setFieldsValue(ret);
    }
    modalLoading(false);
  },
);

const [registerForm, { setFieldsValue, resetForm, validate, setProps, updateSchema }] = useForm({
  labelWidth: 120,
  showActionButtonGroup: false,
  baseColProps: { span: 12 },
  schemas: modalSchemas,
});

async function handleSubmit() {
  try {
    modalLoading(true);
    const data = await validate();
    if (isUpdate.value === 1) {
      await largeScreenUpdate({ ...data, areaCode: JSON.stringify(data.areaCode) });
    } else {
      await largeScreenAdd({ ...data, areaCode: JSON.stringify(data.areaCode) });
    }
    emit('reload');
    closeModal();
    await resetForm();
  } catch (e) {
    console.warn(e);
  } finally {
    modalLoading(false);
  }
}
function handleCancle() {
  closeModal();
  resetForm();
}
</script>

<style scoped></style>
