<script>
import { defineComponent } from 'vue'

export default defineComponent({
  beforeRouteEnter (to, from, next) {
    if (to.query.name) {
      to.meta.title = '履职记录-' + to.query.name
    }
    next()
  }
})
</script>
<script setup name='deputyActivityRecord'>
import { reactive, ref, onMounted, h } from 'vue'
import { getDeputyActivityRecord } from '@/http/apis/expertManage/expertStore'
import MeetingProjectDialog from '@/pages/expertManage/reviewMeeting/components/meetingProjectDialog.vue'
import { useRoute } from 'vue-router'
import EvaluateDialog from '@/pages/expertManage/expertStore/deputyActivityRecord/components/evaluateDialog.vue'
const route = useRoute(),
  tableListRef = ref(),
  total = ref(0),
  // 列表数据
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '会议名称',
      key: 'meetingName',
      prop: 'meetingName',
      minWidth: '80',
      showOverflowTooltip: true
    },
    {
      label: '评审项目',
      slot: 'projectName',
      minWidth: '100',
      showOverflowTooltip: true
    },
    {
      label: '评审时间',
      key: 'createOn',
      prop: 'createOn',
      width: '180'
    },
    {
      label: '是否参会',
      key: 'inviteStatus',
      prop: 'inviteStatus',
      width: '150',
      render: row => h('span', '是')
    },
    {
      label: '是否请假',
      key: 'expertStatus',
      prop: 'expertStatus',
      width: '150',
      render: row => h('span', row.expertStatus === 5 ? '是' : '否')
    },
    {
      label: '是否评价',
      key: 'hasJudge',
      prop: 'hasJudge',
      width: '150',
      render: row => h('span', row.hasJudge ? '是' : '否')
    },
    {
      label: '操作',
      slot: 'action',
      width: '100',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await getDeputyActivityRecord({
      ...pageParams,
      expertId: route.query.id
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  // 查看项目
  viewProject = (data) => {
    meetingProjectDialogData.value.visible = true
    meetingProjectDialogData.value.meetingId = data.meetingId
  },
  meetingProjectDialogData = ref({
    visible: false,
    meetingId: undefined
  }),
  close = () => {
    meetingProjectDialogData.value.visible = false
  },
  // 履职评价
  evaluateDialogData = reactive({
    visible: false,
    data: {},
    isEdit: true
  }),
  evaluateDialogRef = ref(),
  showEvaluateDialog = (data, isEdit) => {
    evaluateDialogData.data = data
    evaluateDialogData.isEdit = isEdit
    evaluateDialogData.visible = true
  },
  closeEvaluateDialog = (flag) => {
    evaluateDialogData.visible = false
    flag && getTableData()
  }
onMounted(() => {
  getTableData()
})
</script>

<template>
  <div class="">
    <el-card class="box-card">
      <table-list
        ref="tableListRef"
        :column="column"
        :data="data"
        :total="total"
        @get-table-data="getTableData"
      >
        <template #projectName="{scope}">
          <a @click="viewProject(scope.row)">查看</a>
        </template>
        <template #action="{scope}">
          <a v-if="!scope.row.hasJudge" @click="showEvaluateDialog(scope.row,true)">履职评价</a>
          <a v-else @click="showEvaluateDialog(scope.row,false)">查看评价</a>
        </template>
      </table-list>
    </el-card>
    <meeting-project-dialog :visible="meetingProjectDialogData.visible" :meeting-id="meetingProjectDialogData.meetingId" @close="close" />
  </div>
  <evaluate-dialog
    ref="evaluateDialogRef"
    :visible="evaluateDialogData.visible"
    :data="evaluateDialogData.data"
    :is-edit="evaluateDialogData.isEdit"
    @close="closeEvaluateDialog"
  />
</template>

