<template>
  <div style="overflow: auto" :style="{ height }">
    <div class="checked-box">
      <ul>
        <li v-for="module in props.dataScope" :key="module.id">
          <div class="menu">
            <span class="checked-box-label">{{ module.name }}</span>
            <div class="point">
              <div class="point-label" :style="{ width: scopeWidth }">
                <template v-for="(data, index2) in module.dataList" :key="index2">
                  <Tag v-if="index2 < 6" style="margin-bottom: 5px">
                    <span style="color: #1a1a1a">{{ data }}</span>
                  </Tag>
                </template>
              </div>
              <c-button type="primary" size="small" style="margin-bottom: 5px" @click="relationData(module)">
                配置
              </c-button>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <RoleDataModal
    v-if="labelKey"
    @register="registerDataModal"
    @get-select-result="setValue"
    :labelKey="labelKey"
    :searchColumns="searchColumns"
  />
</template>
<script setup>
  import { reactive, ref, provide } from 'vue';
  import { Tag } from 'ant-design-vue';
  import { Button as CButton, useModal, render } from '@jdlinker/ui';
  import RoleDataModal from '../RoleDataModal.vue';
  import { listDbTableColumns, queryBySourceId, relationRuledData } from '../role.api';
  import { underLine2CamelCase, useRoleStore } from '@jdlinker/func';
  import { onlyMessage } from '@jdlinker/utils';

  const roleStore = useRoleStore();
  const emit = defineEmits(['success']);
  const [registerDataModal, { openModal: openDataModal }] = useModal();
  const props = defineProps({
    dataScope: {
      type: Array
    },
    height: {
      type: String,
      default: '222px'
    },
    scopeWidth: {
      type: String,
      default: '460px'
    },
    sourceId: {
      type: String
    }
  });
  const selectValues = reactive({
    value: [],
    change: false
  });
  const currentId = ref();
  const labelKey = ref();
  const searchColumns = ref([]);
  const relationData = async (record) => {
    if (!record.tableName) {
      onlyMessage('请先配置业务数据表！', 'warning');
      return;
    }
    searchColumns.value = [];
    currentId.value = record.id;
    labelKey.value = record.labelKey;
    const tableColumns = [];
    const listColumn = record.listColumn.split(',');
    const dictColumn = record.dictColumn.split(',');
    const searchColumn = record.searchColumn.split(',');
    const res = await listDbTableColumns({ tableName: record.tableName });
    res.forEach((item) => {
      const findIndex = listColumn.findIndex((val) => val.trim() === item.columnName);
      if (findIndex !== -1) {
        const tableColumn = {};
        if (item.stringPrecision >= 100) {
          tableColumn.width = 140;
        } else {
          tableColumn.width = 80;
        }
        tableColumns.push({
          align: 'center',
          ellipsis: true,
          title: item.columnComment,
          dataIndex: item.columnName,
          ...tableColumn,
          customRender: ({ text }) => {
            return dictColumn && dictColumn.findIndex((val) => val.trim() === item.columnName) !== -1
              ? render.renderDict(text, underLine2CamelCase(item.columnName))
              : text;
          }
        });
      }
      const searchIndex = searchColumn.findIndex((val) => val.trim() === item.columnName);
      if (searchIndex !== -1) {
        searchColumns.value.push({
          label: item.columnComment,
          field: item.columnName,
          component: 'JInput'
        });
      }
    });

    queryBySourceId({ sourceId: props.sourceId }).then((res) => {
      if (res) {
        selectValues.value = res;
        openDataModal(true, {
          record,
          tableName: record.tableName,
          tableColumns,
          isUpdate: true,
          showFooter: true
        });
      }
    });
  };

  provide('selectValues', selectValues);
  const setValue = (options) => {
    relationRuledData({
      checkList: options,
      sourceId: props.sourceId,
      ruleId: currentId.value,
      type: roleStore.type
    }).then((res) => {
      console.log('setValue...', res);
      if (res) {
        emit('success');
        onlyMessage('配置成功', 'success');
      }
    });
  };
</script>
<style scoped lang="less">
  @import './index.less';
  :deep(.ant-btn.ant-btn-sm) {
    font-size: 12px;
    height: 20px;
  }
</style>
