<template>
  <div>
    <TableProMax ref="tableRef" :request-api="reqApi" :columns="columns">
    </TableProMax>
    <div>
      <a-modal v-model:open="open" :title="title" @ok="open = false" width="80%">
        <a-table :columns="TableColumns" :data-source="TableData" bordered >
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">
              <div>{{text}}{{column}}</div>
            </template>
          </template>
        </a-table>
      </a-modal>
    </div>
  </div>
</template>

<script setup lang="tsx">
import TableProMax from "@/components/table/TableProMax.vue";
import api from "@/axios";
import {TableProMaxProps} from "@/types/components/table";
import {
  AssessmentRecordPagerQueryParams,
  AssessmentRecordPagerVo, DeductedDetailRes,
} from "@/types/views/assessmentRecord.ts";
import {ComponentExposed} from "vue-component-type-helpers";
import { ref} from "vue";
import {Modal, TableColumnType} from "ant-design-vue";
const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
type TableProps = TableProMaxProps<AssessmentRecordPagerVo,AssessmentRecordPagerQueryParams>

const open = ref<boolean>(false);
const title = ref('扣分项')
const reqApi: TableProps['requestApi'] = (params) => api.post('/assessmentRecord/pager', params) //分页
const columns: TableProps['columns'] = [
  {
    dataIndex: 'enterprisesUnitName',
    title: '单位名称'
  }, {
    dataIndex: 'type',
    title: '类型',
    customRender: ({text}) => text?.label
  }, {
    dataIndex: 'ckProjectName',
    title: '考核项目'
  }, {
    dataIndex: 'totalScore',
    title: '总分'
  }, {
    dataIndex: 'deductionPointsTotal',
    title: '扣分',
    customRender:({record})=>{
      if (!record.deductionPointsTotal) {
        return  <a-tag color="green">0</a-tag>
      }
      return  <a-tag class="pointer" color="red" onClick={()=>deductedDetail(record)}>{record.deductionPointsTotal}</a-tag>
    }
  }, {
    dataIndex: 'result',
    title: '得分',
    customRender: ({record}) => record.totalScore - record.deductionPointsTotal
  }, {
    dataIndex: 'policeUnitName',
    title: '考核单位'
  }, {
    dataIndex: 'createUserName',
    title: '考核人'
  }, {
    dataIndex: 'createTime',
    title: '考核时间'
  }, {
    dataIndex: 'remark',
    title: '考核备注'
  }, {
    dataIndex: 'signature',
    title: '签字',
    customRender:({record})=>{
      return <a-button onClick={()=>{
        Modal.info({
          title: `${record.enterprisesUnitName}${record.ckProjectName} 签字结果`,
          content: () => <>
            <div>审核人签字: <a-image src={record.assessmentUserSignature}/>
            </div>
            <div>被审核单位人员签字: <a-image src={record.byAssessmentEnterprisesUnitUserSignature}/></div>
          </>
        })
      }}>查看</a-button>
    },
  }
]


const TableData = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
];
const sharedOnCell = (_, index) => {
  if (index === 4) {
    return { colSpan: 0 };
  }
};
const TableColumns: TableColumnType[] = [
  {
    title: 'Name',
    dataIndex: 'name',
    customCell: (_, index) => ({
      colSpan: index < 4 ? 1 : 5,
    }),
  },
  {
    title: 'Age',
    dataIndex: 'age',
    customCell: sharedOnCell,
  },
  {
    title: 'Home phone',
    colSpan: 2,
    dataIndex: 'tel',
    customCell: (_, index) => {
      if (index === 2) {
        return { rowSpan: 2 };
      }
      // These two are merged into above cell
      if (index === 3) {
        return { rowSpan: 0 };
      }
      if (index === 4) {
        return { colSpan: 0 };
      }
    },
  },
  {
    title: 'Phone',
    colSpan: 0,
    dataIndex: 'phone',
    customCell: sharedOnCell,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    customCell: sharedOnCell,
  },
];
const deductedDetail = async (res:any)=>{
  const {data} = await api.get<DeductedDetailRes[]>('/assessmentRecord/deductedDetail', {assessmentRecordId: res.snowFlakeId})
  open.value = true
  console.log(data)
}






</script>

<style scoped lang="scss">

</style>