<template>
  <BasicModal
    centered
    v-bind="$attrs"
    @register="registerProcessModal"
    :title="modalTitle"
    width="950px"
    @ok="handleOk"
    destroyOnClose
    @visible-change="visibleChange"
  >
    <Row>
      <BasicTable
        :columns="columns"
        v-bind="config"
        :useSearchForm="true"
        :formConfig="formConfig"
        :api="projectList"
        :searchInfo="searchInfo"
        :rowSelection="rowSelection"
      />
    </Row>
  </BasicModal>
</template>
<script lang="ts">
  import { defineAsyncComponent, defineComponent, ref, unref } from 'vue';
  import { BasicModal, useModalInner, useSelectBiz, selectProps, render, BasicTable } from '@jdlinker/ui';
  import { useAttrs } from '@jdlinker/func';
  import { projectList } from '../../components/role.api';
  import { Row } from 'ant-design-vue';

  export default defineComponent({
    name: 'ProcessModal',
    components: {
      Row,
      //此处需要异步加载BasicTable
      BasicModal,
      BasicTable: defineAsyncComponent(() => BasicTable)
    },
    props: {
      ...selectProps,
      //选择框标题
      modalTitle: {
        type: String,
        default: '关联项目'
      }
    },
    emits: ['register', 'getSelectResult'],
    setup(props, { emit }) {
      //注册弹框
      const [registerProcessModal, { closeModal }] = useModalInner();
      const attrs = useAttrs();
      //表格配置
      // @ts-ignore
      const config = {
        bordered: true,
        size: 'small',
        canResize: false,
        rowKey: unref(props).rowKey
      };
      const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
      const [{ rowSelection, indexColumnProps, visibleChange, getSelectResult }] = useSelectBiz(projectList, getBindValue);
      // @ts-ignore
      const searchInfo = ref(props.params);

      //查询form
      const formConfig = {
        baseColProps: {
          md: 6,
          lg: 8
        },
        labelWidth: 80,
        actionColOptions: {
          style: {
            textAlign: 'right'
          }
        },
        schemas: [
          {
            label: '项目名称',
            field: 'projectName',
            component: 'JInput'
          },
          {
            label: '项目类型',
            field: 'projectType',
            component: 'JDictSelectTag',
            componentProps: () => {
              return {
                dictCode: 'projectType'
              };
            }
          }
        ]
      };
      //定义表格列
      const columns = [
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'projectName',
          ellipsis: true,
          width: 120
        },
        {
          title: '项目类型',
          align: 'center',
          dataIndex: 'projectType',
          customRender: ({ text }) => {
            return render.renderDict(text, 'projectType');
          },
          width: 100
        },
        {
          title: '项目位置',
          align: 'center',
          dataIndex: 'location',
          ellipsis: true,
          width: 200
        },
        {
          title: '楼栋总数',
          align: 'center',
          dataIndex: 'buildSum',
          slots: { customRender: 'category' },
          width: 60
        }
      ];

      /**
       * 确定选择
       */
      function handleOk() {
        getSelectResult((options, values) => {
          //回传选项和已选择的值
          emit('getSelectResult', options, values);
          //关闭弹窗
          closeModal();
        });
      }

      return {
        config,
        handleOk,
        searchInfo,
        registerProcessModal,
        indexColumnProps,
        visibleChange,
        projectList,
        formConfig,
        getBindValue,
        columns,
        rowSelection
      };
    }
  });
</script>
<style lang="less" scoped>
  :deep(.jeecg-basic-table-form-container) {
    padding: 0;
  }
  :deep(.ant-form) {
    padding: 0;
  }
  :deep(.jeecg-basic-table .ant-table-wrapper .ant-table.ant-table-bordered .ant-table-title) {
    min-height: 0;
  }
  :deep(.jeecg-basic-table-form-container .ant-form) {
    padding: 4px 4px 10px 4px;
    margin-bottom: 0;
  }
  :deep(.jeecg-basic-table .ant-table-wrapper) {
    padding: 0;
  }
</style>
