
<template>
    <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="1400px" @ok="handleOk" destroyOnClose @visible-change="visibleChange">
    <a-row :gutter="5">
      <a-col :md="12" :sm="24">
        <a-card :style="{ minHeight: '613px', overflow: 'auto' }">
          <BasicTable
              ref="tableRef"
              :columns="columns"
              v-bind="config"
              :useSearchForm="true"
              :formConfig="formConfig"
              :api="getMetricList"
              :searchInfo="searchInfo"
              :rowSelection="rowSelection"
              :showIndexColumn="false"   
              @rowClick="handleRowSelection"
              @selectionChange="handleRowSelection"
            ></BasicTable>
        </a-card>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-card :style="{ minHeight: '613px', overflow: 'auto' }">
            <BasicTable
                title="选择参数列表"
                :columns="columnsRight"
                :dataSource="havedSelData"
                :pagination="false"
                :scroll="{ y: 450 }"
                maxHeight="80"
              >
            </BasicTable>
        </a-card>
      </a-col>
    </a-row>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getMetricList } from '/@/api/common/api';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
  import { selectProps } from '/@/components/Form/src/jeecg/props/props';
  import { useAttrs } from '/@/hooks/core/useAttrs';

  export default defineComponent({
    name: 'MetricSelectModal',
    components: {
      //此处需要异步加载BasicTable
      BasicModal,
      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
        loading: true,
      }),
    },
    props: {
      ...selectProps,
      modalTitle: {
        type: String,
        default: '指标选择',
      },
    },
    emits: ['register', 'getSelectResult'],
    setup(props, { emit, refs }) {
      const tableRef = ref();
      const havedSelData =  ref([])
      const [register, { closeModal }] = useModalInner(() => {
        setTimeout(() => {
          if (tableRef.value) {
            const values = selectValues["value"].map(item => item.split(":")[1]);
            tableRef.value.setSelectedRowKeys(values || []);
          }
        }, 800);
      });
      const attrs = useAttrs();
      //表格配置
  
      const config = {
        canResize: false,
        bordered: true,
        size: 'small',
        rowKey: unref(props).rowKey,
      };

      const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
      const [{ rowSelection,selectValues,indexColumnProps,visibleChange, getSelectResult}] = useSelectBiz(getMetricList, getBindValue);
      
      const searchInfo = ref(props.params);
      //查询form
      const formConfig = {
        labelWidth: 100,
        baseColProps: {
          md: 10,lg: 13
        },
        schemas: [
          {
            label: '指标名称',
            field: 'mtrcName',
            component: 'JInput',
          },
        ],
      };

    
      const columns = [
        {
            title: '指标编码',
            dataIndex: 'mtrcNo',
            width: 50,

        },
        {
          title: '指标名称',
          dataIndex: 'mtrcName',
          width: 100,
          align: 'left',
        },
      ];

      const columnsRight = [
        {
            title: '变量名',
            dataIndex: 'paramName',
            width: 50,
            edit:true,
        },
        {
            title: '指标编码',
            dataIndex: 'mtrcNo',
            width: 100,
        },
        {
          title: '指标名称',
          dataIndex: 'mtrcName',
          width: 150,
          align: 'left',
        },
      ];
     
      function handleOk() {
        const optionsTmp = havedSelData.value.map(item => ({
          label: `${item.paramName}:${item.mtrcName}`,
          value: `${item.paramName}:${item.mtrcNo}`
        }));
        const valuesTmp = havedSelData.value.map(item => `${item.paramName}:${item.mtrcNo}`);
        emit('getSelectResult', optionsTmp, valuesTmp);

        closeModal();
      }

  

      const tParam=['a','b','c','d','e','f','g','h','j','k','m','n','o','p','q']
      function handleRowSelection() {
        getSelectResult((options) => {
          const tmpAry = options.map((option, index) => ({
            mtrcNo: option.value,
            mtrcName: option.label,
            paramName: tParam[index]
          }));
          havedSelData.value = tmpAry;
        });
      }

      return {
        config,
        handleOk,
        searchInfo,
        register,
        indexColumnProps,
        visibleChange,
        getMetricList,
        formConfig,
        getBindValue,
        columns,
        columnsRight,
        rowSelection,
        handleRowSelection,
        havedSelData,
        tableRef
      };
    },
  });
</script>
