<template>
  <div>
    <BasicTable @register="registerTable" rowKey="topicId">
      <template #toolbar>
        <PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'caseTypes'">
          <div class="cell">
            <a-tag
              color="blue"
              style="margin-right: 4px"
              v-for="(item, index) in record.caseTypes"
              :key="index"
              >{{ item }}</a-tag
            >
          </div>
        </template>
        <template v-else-if="column.key === 'roles'">
          <div class="cell">
            <a-tag
              color="blue"
              style="margin-right: 4px"
              v-for="(item, index) in record.roles"
              :key="index"
              >{{ item }}</a-tag
            >
          </div>
        </template>
      </template>
    </BasicTable>
    <a-modal
      class="thematicSetting-modal"
      v-model:open="openModal"
      :title="modalData.title"
      destroyOnClose="true"
    >
      <UseModal ref="modalForm" :modalData="modalData" @closeModal="closeModal" @submit="submit" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import UseModal from './UseModal/index.vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { columns, tableSetting, emptyTopicItem } from './util';
  import { LoadPage } from '@/api/sys/ThematicSetting';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { ref, reactive } from 'vue';
  import { message } from 'ant-design-vue';

  const openModal = ref(false);
  const modalData = reactive({
    title: '',
    topicId: '',
    type: '',
  });
  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
    api: LoadPage,
    ...tableSetting,
    afterFetch: (res) => {
      return res.map((item) => {
        return { ...item, caseTypes: item.caseTypes?.split(','), roles: item.roles?.split(',') };
      });
    },
  });
  const buttonClick = (type) => {
    const row = getSelectRows();
    if (row.length !== 1) {
      message.warning('请选择一条数据');
      return;
    }
    modalData.title = type === 'bindCaseTypes' ? '分配案件类型' : '分配角色';
    modalData.topicId = row[0].topicId;
    modalData.type = type;
    openModal.value = true;
  };
  const submit = () => {
    reload();
  };
  const closeModal = () => {
    openModal.value = false;
  };
</script>

<style lang="scss" scoped>
  .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-left: 10px;
    padding-right: 10px;
  }
</style>
<style lang="scss">
  .thematicSetting-modal {
    .ant-modal-footer > button {
      display: none;
    }
    .ant-modal-footer {
      margin-top: 0px;
      border-top: 0px;
    }
  }
</style>
