<script setup name="reviewMeeting">
import { h, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import ElTree from '@/components/elTree/index.vue'
import { meetingList } from '@/http/apis/expertManage/reviewMeeting'
import MeetingProjectDialog from './components/meetingProjectDialog.vue'
import { getIsShowRegionTree, getTreeParams } from '@/utils/getIsShowRegionTree'

const
  router = useRouter(),
  searchForm = reactive({
    name: undefined,
    projectName: undefined,
    times: undefined
  }),
  tableListRef = ref(),
  total = ref(0),
  // 列表数据
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '会议名称',
      key: 'meetingName',
      prop: 'meetingName',
      minWidth: '180',
      showOverflowTooltip: true
    },
    {
      label: '评审项目',
      key: 'projectName',
      slot: 'projectName',
      minWidth: '80'
    },
    {
      label: '评审时间',
      key: 'startTime',
      prop: 'startTime',
      width: '290',
      render: row => h('span', row.startTime + '~' + row.endTime)
    },
    {
      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: 'inviteType',
      prop: 'inviteType',
      width: '80',
      render: row => h('span', row.inviteType === 1 ? '随机抽取' : '指定抽取')

    },
    {
      label: '抽取状态',
      key: 'inviteStatus',
      prop: 'inviteStatus',
      width: '80',
      render: row => h('span', !row.inviteStatus ? '抽取中' : '抽取结束')
    },
    {
      label: '名单确认状态',
      key: 'confirmedRoster',
      prop: 'confirmedRoster',
      width: '120',
      render: row => [
        h(
          'span',
          {
            class: `${row.confirmedRoster ? 'text-success' : ''}`
          },
          row.confirmedRoster ? '已确认' : '未确认'
        )
      ]
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      width: '180'
    },
    {
      label: '操作',
      slot: 'action',
      width: '80',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  getTree = (value) => {
    searchForm.regionCode = value.regionCode
    searchForm.regionLevel = value.regionLevel
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await meetingList({
      ...pageParams,
      ...searchForm,
      startTime: searchForm.times?.[0] || undefined,
      endTime: searchForm.times?.[1] || undefined,
      times: undefined
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.name = undefined
    searchForm.projectName = undefined
    searchForm.times = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  // 新增会议
  toAddMeeting = (data) => {
    router.push({ name: 'addMeeting' })
  },
  checkDetail = (row) => {
    router.push({ name: 'meetingDetail', query: { id: row.meetingId }})
  },
  // 查看项目
  viewProject = (data) => {
    meetingProjectDialogData.value.visible = true
    meetingProjectDialogData.value.meetingId = data.meetingId
  },
  meetingProjectDialogData = ref({
    visible: false,
    meetingId: undefined
  }),
  close = () => {
    meetingProjectDialogData.value.visible = false
  }

onMounted(() => {
  if (!getIsShowRegionTree(['SUPER_ADMIN', 'REGION_MANAGER', 'EXPERT_ADMIN'])) getTableData()
})
</script>
<template>
  <el-row>
    <el-col
      v-if="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER','EXPERT_ADMIN'])"
      style="padding-right: 16px"
      :span="4"
    >
      <elTree :params="getTreeParams({'SUPER_ADMIN':false,'REGION_MANAGER':false,'EXPERT_ADMIN':true})" @get-tree="getTree" />
    </el-col>
    <el-col :span="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER','EXPERT_ADMIN'])?20:24">
      <el-card class="w-full search">
        <el-form
          :model="searchForm"
          size="small"
          label-suffix=":"
        >
          <el-row
            :gutter="16"
            class="mb-16"
          >
            <el-col :span="12">
              <el-form-item label="会议名称">
                <el-input
                  v-model="searchForm.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评审项目">
                <el-input
                  v-model="searchForm.projectName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row
            :gutter="16"
          >
            <el-col :span="16">
              <el-form-item label="评审时间">
                <el-date-picker
                  v-model="searchForm.times"
                  type="datetimerange"
                  :editable="false"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="btn">
                <div class="flex">
                  <el-button
                    type="primary"
                    @click="search"
                  >查询</el-button>
                  <el-button
                    @click="reset"
                  >重置</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="w-full mt-8">
        <template #header>
          <div class="flex justify-between">
            <span>列表</span>
            <div>
              <el-button
                type="primary"
                size="small"
                icon="Plus"
                @click="toAddMeeting"
              >新增会议</el-button>
            </div>
          </div>
        </template>
        <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 @click="checkDetail(scope.row)">详情</a>
          </template>
        </table-list>
      </el-card>
    </el-col>
  </el-row>
  <meeting-project-dialog :visible="meetingProjectDialogData.visible" :meeting-id="meetingProjectDialogData.meetingId" @close="close" />
</template>
<style lang='less' scoped>
</style>
