<template>
  <div class="thematicSetting-modal-container">
    <BasicTable @register="registerTable" :rowKey="isCaseType ? 'itemDetailId' : 'id'">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'enabledMark'">
          <a-tag v-if="record.enabledMark == 1" color="green">启用</a-tag>
          <a-tag v-else color="red">禁用</a-tag>
        </template>
        <template v-else-if="column.key === 'status'">
          <a-tag v-if="record.status == 0" color="green">启用</a-tag>
          <a-tag v-else color="red">禁用</a-tag>
        </template>
      </template>
    </BasicTable>
    <div class="modal-footer">
      <a-button style="margin-right: 10px" @click="closeModal">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, defineEmits, onMounted, onBeforeUnmount, ref, computed } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import {
    GetTopicRelevance,
    GetCaseTypeList,
    GetRoleList,
    AddTopicCaseType,
    AddTopicRole,
  } from '@/api/sys/ThematicSetting';
  import { caseTypesColumns, rolesColumns } from '../util';
  import { message } from 'ant-design-vue';

  const formRef = ref();
  const selectedList = ref([]);
  const props = defineProps(['modalData']);
  const emit = defineEmits(['closeModal', 'submit']);
  const isCaseType = computed(() => props.modalData.type === 'bindCaseTypes');
  const [registerTable, { setSelectedRowKeys, getSelectRowKeys, clearSelectedRowKeys }] = useTable({
    api: isCaseType.value ? GetCaseTypeList : GetRoleList,
    pagination: false,
    showIndexColumn: false,
    rowSelection: {
      type: 'checkbox',
    },
    columns: isCaseType.value ? caseTypesColumns : rolesColumns,
    afterFetch: (res) => {
      setSelectedRowKeys(selectedList.value);
      if (!isCaseType.value) {
        res = res.map((item) => {
          return {
            ...item,
            id: item.id.toString(),
          };
        });
      }
      return res;
    },
  });
  const submit = () => {
    if (isCaseType.value) {
      AddTopicCaseType({
        topicId: props.modalData.topicId,
        relevanceIds: getSelectRowKeys(),
      })
        .then((res) => {
          message.success('添加成功');
          emit('submit');
          closeModal();
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      AddTopicRole({
        topicId: props.modalData.topicId,
        relevanceIds: getSelectRowKeys(),
      })
        .then((res) => {
          message.success('添加成功');
          emit('submit');
          closeModal();
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };
  const closeModal = () => {
    emit('closeModal');
  };
  const clearModalData = () => {
    formRef?.value?.resetFields();
  };
  onMounted(() => {
    GetTopicRelevance({
      code: isCaseType.value ? 'TopicCaseType' : 'TopicRole',
      topicId: props.modalData.topicId,
    })
      .then((res) => {
        selectedList.value = res;
      })
      .catch((err) => {
        console.log(err);
      });
  });
  onBeforeUnmount(() => {
    clearSelectedRowKeys();
    clearModalData();
  });
</script>

<style lang="scss" scoped>
  .thematicSetting-modal-container {
    padding: 10px 25px;
    .modal-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
</style>
<style lang="scss">
  .thematicSetting-modal-container {
    .ant-table-body {
      height: initial !important;
      max-height: 400px !important;
    }
  }
</style>
