<script name="meetingsLeaveDialog" setup>
import { ref, reactive, watch, h } from 'vue'
import meetingProjectDialog from '../../reviewMeeting/components/meetingProjectDialog.vue'
import store from '@/store'
import leaveDialog from './leaveDialog.vue'
import { meetingListForLeave } from '@/http/apis/expertManage/expertReview'
import { storeToRefs } from 'pinia'
const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    }
  }),
  userInfo = storeToRefs(store.userStore).userInfo || {},
  emits = defineEmits(['close']),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '会议名称',
      key: 'meetingName',
      prop: 'meetingName',
      minWidth: '180',
      showOverflowTooltip: true
    },
    {
      label: '评审类型',
      key: 'meetingTypeName',
      prop: 'meetingTypeName'
    },
    {
      label: '评审项目',
      key: 'projectName',
      slot: 'projectName',
      minWidth: '80'
    },
    {
      label: '联系人/联系方式',
      key: 'contact',
      prop: 'contact',
      minWidth: '180',
      render: row => h('span', row.connecter + '/' + row.contact)
    },
    {
      label: '是否参与',
      key: 'isAbsent',
      prop: 'isAbsent',
      width: '80',
      render: row => h('span', row.expertStatus === 3 || row.expertStatus === 5 ? '是' : '否')
    },
    {
      label: '是否请假',
      key: 'isAbsent',
      prop: 'isAbsent',
      width: '80',
      render: row => h('span', row.expertStatus === 5 ? '是' : '否')
    },
    {
      label: '会议状态',
      key: 'status',
      prop: 'status',
      width: '80',
      render: row => [
        h('span', {
          class: ['dot mr-4', `${row.status === 1 ? 'bg-success' : row.status === 3 ? 'bg-danger' : ''}`]
        }),
        h(
          'span',
          {
            class: `${row.status === 1 ? 'text-success' : row.status === 3 ? 'text-danger' : ''}`
          },
          row.status === 1 ? '正常' : '已取消'
        )
      ]
    },
    {
      label: '评审时间',
      key: 'startTime',
      prop: 'startTime',
      width: '280',
      render: row => h('span', row.startTime + '~' + row.endTime)
    },
    {
      label: '操作',
      slot: 'action',
      width: '80',
      fixed: 'right'
    }
  ]),
  tableData = ref(),
  total = ref(0),
  tableListRef = ref(),
  getTableData = async (pageParams = tableListRef.value?.pageParams) => {
    const res = await meetingListForLeave({
      ...pageParams,
      expertId: userInfo.value.userId
    })
    total.value = res.data.total
    tableData.value = res.data.records
  },
  // 查看项目
  viewProject = (data) => {
    meetingProjectDialogData.value.visible = true
    meetingProjectDialogData.value.meetingId = data.meetingId
  },
  meetingProjectDialogData = ref({
    visible: false,
    meetingId: undefined
  }),
  closeMeetingProjectDialog = () => {
    meetingProjectDialogData.value.visible = false
  },
  // 请假
  leaveDialogData = reactive({
    visible: false,
    data: undefined
  }),
  leave = (data) => {
    leaveDialogData.visible = true
    leaveDialogData.data = data
  },
  closeLeaveDialog = (flag) => {
    leaveDialogData.visible = false
    flag && getTableData()
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      getTableData()
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="会议请假"
    width="80%"
    @close="emits('close')"
  >
    <table-list
      ref="tableListRef"
      :column="column"
      :total="total"
      :data="tableData"
      @get-table-data="getTableData"
    >
      <template #projectName="{scope}">
        <a @click="viewProject(scope.row)">查看</a>
      </template>
      <template #action="{scope}">
        <a v-if="scope.row.expertStatus !== 5" @click="leave(scope.row)">请假</a>
        <span v-else>-</span>
      </template>
    </table-list>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('close')">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <meeting-project-dialog :visible="meetingProjectDialogData.visible" :meeting-id="meetingProjectDialogData.meetingId" @close="closeMeetingProjectDialog" />
  <leave-dialog :visible="leaveDialogData.visible" :data="leaveDialogData.data" @close="closeLeaveDialog" />
</template>

