<template>
  <div>
    <TableProMax
        ref="ckProjectTableRef"
        :request-api="ckProjectPagerVoPager"
        :search-form-options="ckProjectTableSearchOptions"
        :columns="ckProjectTableColumns"
    >
      <template #tableHeader>
        <a-space>
          <a-button class="btn-success"
                    @click="saveOrUpdateCkProject(undefined,ckProjectTableRef?.requestGetTableData)">添加考核项目
          </a-button>
        </a-space>
      </template>
    </TableProMax>
  </div>
</template>

<script setup lang="tsx">
import {TableProMaxProps} from "@/types/components/table";
import {
  CkProjectDetailRes,
  CkProjectPagerQueryParams,
  CkProjectPagerVo
} from "@/types/views/unitManage/police/assessmentCriteria.ts";
import TableProMax from "@/components/table/TableProMax.vue";
import api from "@/axios";
import {ref} from "vue";
import {ComponentExposed} from "vue-component-type-helpers";
import {dictSelectNodes} from "@/config/dict.ts";
import {deleteDataModal} from "@/components/tsx/ModalPro.tsx";
import {message, Modal} from "ant-design-vue";
import {ColumnsType} from "ant-design-vue/es/table";
import {
  ckProjectDetail,
  deleteCkProjectById,
  saveOrUpdateCkGroup,
  saveOrUpdateCkItem,
  saveOrUpdateCkProject,
  saveOrUpdateCkStandard
} from "@/views/unitManage/police/assessmentCriteria/index.ts";

type CkProjectTableProps = TableProMaxProps<CkProjectPagerVo, CkProjectPagerQueryParams>

const ckProjectTableRef = ref<ComponentExposed<typeof TableProMax>>(null)
const ckProjectPagerVoPager: CkProjectTableProps['requestApi'] = (params) => {
  return api.post('/assessmentCriteria/ckProjectPagerVoPager', params)
}
const ckProjectTableSearchOptions: CkProjectTableProps['searchFormOptions'] = {
  name: {
    type: 'input',
    label: '名字'
  },
  type: {
    type: 'select',
    label: '类型',
    options: [{
      value: null,
      label: '全部'
    }, ...dictSelectNodes('EnterprisesUnitType')]
  }
}
const ckProjectTableColumns: CkProjectTableProps['columns'] = [
  {
    dataIndex: 'name',
    title: '考核项目'
  }, {
    dataIndex: 'type',
    title: '类型',
    customRender: ({text}) => text?.label
  }, {
    dataIndex: 'totalScore',
    title: '考核总分'
  }, {
    dataIndex: 'remark',
    title: '备注'
  }, {
    dataIndex: 'createUserName',
    title: '创建人'
  }, {
    dataIndex: 'createTime',
    title: '创建时间'
  }, {
    dataIndex: 'opt',
    title: '操作',
    customRender: ({record}) => {
      return <a-space>
        <a-button class="btn-warn" onClick={() => saveOrUpdateCkProject({
          snowFlakeId: record.snowFlakeId,
          name: record.name,
          totalScore: record.totalScore,
          remark: record.remark,
          type: record.type.value
        }, ckProjectTableRef.value?.requestGetTableData)}>编辑
        </a-button>
        <a-button class="btn-danger"
                  onClick={() => deleteCkProjectById(record.name, record.snowFlakeId, ckProjectTableRef.value?.requestGetTableData)}>删除
        </a-button>
        <a-button class="btn-purple" onClick={() => {
          const dataSource = ref<CkProjectDetailRes[]>([])
          const initData = async () => dataSource.value = await ckProjectDetail(record.snowFlakeId);
          const ckProjectDetailTableColumns: ColumnsType<CkProjectDetailRes> = [
            {
              dataIndex: 'groupName',
              title: '考核分组',
              customCell: (_record) => {
                return {
                  rowspan: _record.groupRowSpan
                }
              },
              customRender: ({record: _record}) => {
                return <div class={'flex-justify-between'}>
                  <div>
                    <p>{_record.groupName}({_record.groupTotalScore})</p>
                    <p>{_record.groupRemark}</p>
                  </div>
                  <div class="flex-column-center">
                    <a-dropdown trigger={['click']} v-slots={{
                      overlay: () => <a-menu>
                        <a-menu-item key="0">
                          <a-button type="text" style={{color: 'green'}} onClick={() => saveOrUpdateCkItem({
                            ckGroupId: _record.ckGroupId,
                            name: "",
                            type: 'radio'
                          }, initData)}>添加考核项
                          </a-button>
                        </a-menu-item>
                        <a-menu-item key="1">
                          <a-button type="text" style={'color:rgb(251, 177, 27)'} onClick={() => saveOrUpdateCkGroup({
                            snowFlakeId: _record.ckGroupId,
                            ckProjectId: record.snowFlakeId,
                            name: _record.groupName,
                            totalScore: _record.groupTotalScore,
                            remark: _record.groupRemark
                          }, initData)}>编辑
                          </a-button>
                        </a-menu-item>
                        <a-menu-item key="3">
                          <a-button type="text" style={'color:red'}
                                    onClick={() => deleteDataModal(_record.groupName, async () => {
                                      const resp = await api.delete('/assessmentCriteria/deleteCkGroupById', {ckGroupId: _record.ckGroupId}, {loading: true})
                                      message.success(resp.message)
                                      await initData()
                                    })}>删除
                          </a-button>
                        </a-menu-item>
                      </a-menu>
                    }}>
                      <a class="ant-dropdown-link">
                        操作
                      </a>
                    </a-dropdown>
                  </div>
                </div>
              }
            }, {
              dataIndex: 'itemName',
              title: '考核项',
              customCell: (_record) => {
                return {
                  rowspan: _record.itemRowSpan
                }
              },
              customRender: ({record: _record}) => {
                if (!_record.ckItemId) {
                  return '/'
                }
                return <div class="flex-justify-between">
                  <p>{_record.itemName}({_record.itemType?.label})
                  </p>
                  <a-dropdown trigger={['click']} v-slots={{
                    overlay: () => <a-menu>
                      <a-menu-item key="0">
                        <a-button type="text" style={{color: 'green'}} onClick={() => saveOrUpdateCkStandard({
                          ckItemId: _record.ckItemId,
                          name: '',
                          deductionPoints: 0
                        }, initData)}>
                          添加考核标准
                        </a-button>
                      </a-menu-item>
                      <a-menu-item key="1">
                        <a-button type="text" style={'color:rgb(251, 177, 27)'} onClick={() => saveOrUpdateCkItem({
                          snowFlakeId: _record.ckItemId,
                          ckGroupId: _record.ckGroupId,
                          name: _record.itemName,
                          type: _record.itemType.value,
                          remark: _record.itemRemark
                        }, initData)}>编辑
                        </a-button>
                      </a-menu-item>
                      <a-menu-item key="3">
                        <a-button type="text" style={'color:red'}
                                  onClick={() => deleteDataModal(_record.itemName, async () => {
                                    const resp = await api.delete('/assessmentCriteria/deleteCkItemById', {ckItemId: _record.ckItemId}, {loading: true})
                                    message.success(resp.message)
                                    await initData()
                                  })}>删除
                        </a-button>
                      </a-menu-item>
                    </a-menu>
                  }}>
                    <a class="ant-dropdown-link">
                      操作
                    </a>
                  </a-dropdown>
                </div>
              }
            }, {
              dataIndex: 'standardName',
              title: '标准',
              customRender: ({record: _record}) => {
                if (!_record.ckStandardId) {
                  return '/'
                }
                return <div class="flex-justify-between">
                  <p>{_record.standardName}扣{_record.deductionPoints}分</p>
                  <a-dropdown trigger={['click']} v-slots={{
                    overlay: () => <a-menu>
                      <a-menu-item key="1">
                        <a-button type="text" style={'color:rgb(251, 177, 27)'} onClick={() => saveOrUpdateCkStandard({
                          snowFlakeId: _record.ckStandardId,
                          ckItemId: _record.ckItemId,
                          name: _record.standardName,
                          deductionPoints: _record.deductionPoints
                        }, initData)}>编辑
                        </a-button>
                      </a-menu-item>
                      <a-menu-item key="3">
                        <a-button type="text" style={'color:red'}
                                  onClick={() => deleteDataModal(_record.itemName, async () => {
                                    const resp = await api.delete('/assessmentCriteria/deleteCkStandardById', {ckStandardId: _record.ckStandardId}, {loading: true})
                                    message.success(resp.message)
                                    await initData()
                                  })}>删除
                        </a-button>
                      </a-menu-item>
                    </a-menu>
                  }}>
                    <a class="ant-dropdown-link">
                      操作
                    </a>
                  </a-dropdown>
                </div>
              }
            }
          ]
          initData();
          Modal.info({
            title: `【${record.name}】详情`,
            icon: ' ',
            width: '80%',
            centered: true,
            content: () => <div style={{height: '80vh', overflow: 'auto'}}>
              <a-space>
                <a-button class="btn-success" onClick={() => saveOrUpdateCkGroup({
                  ckProjectId: record.snowFlakeId,
                  name: '',
                  totalScore: 0
                }, initData)}>添加考核分组
                </a-button>
              </a-space>
              <a-table
                  bordered
                  pagination={false}
                  class="margin-top-xs"
                  columns={ckProjectDetailTableColumns}
                  data-source={dataSource.value}
              ></a-table>
            </div>
          })
        }}>考核详情
        </a-button>
      </a-space>
    }
  }
]

</script>

<style scoped lang="scss">

</style>
