<script setup name='expertReview'>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { listReviewProject } from '@/http/apis/expertManage/expertReview'
import projectList from './components/projectList.vue'
import { storeToRefs } from 'pinia'
import store from '@/store'
import meetingsLeaveDialog from './components/meetingsLeaveDialog.vue'
const userInfo = storeToRefs(store.userStore).userInfo,
  listRef = ref(),
  router = useRouter(),
  searchForm = reactive({
    projectName: undefined,
    buildOrgName: undefined
  }),
  // 列表数据
  data = ref([]),
  total = ref(0),
  count = ref(0),
  getTableData = async (pageParams = listRef.value.pageParams) => {
    const res = await listReviewProject({
      ...pageParams,
      ...searchForm,
      reviewed: activeName.value,
      userId: userInfo.value.userId
    })
    console.log(activeName.value)
    data.value = res.data.records
    total.value = res.data.total
    if (activeName.value === 'false') {
      count.value = res.data.total
    }
  },
  // 查询
  search = () => {
    getTableData()
  },
  // 重置
  reset = () => {
    searchForm.projectName = undefined
    searchForm.buildOrgName = undefined
    listRef.value.pageParams.pageNumber = 1
    listRef.value.pageParams.pageSize = 10
    getTableData()
  },
  activeName = ref('false'),
  handleClick = ({ props }) => {
    activeName.value = props.name
    getTableData()
  },
  // 详情
  toDetail = (item, type) => {
    router.push({
      name: 'handleExpertReview',
      query: {
        projectId: item.projectId, // 项目id
        meetingId: item.meetingId, // 会议id
        isHeadman: item.isHeadman, // 是否组长
        reviewType: item.reviewType, // 评审类型
        type,
        reviewed: item.reviewed
      }
    })
  },
  // 会议请假
  meetingsLeaveDialogData = reactive({
    visible: false
  }),
  showMeetingsLeaveDialog = () => {
    meetingsLeaveDialogData.visible = true
  },
  closeMeetingsLeaveDialog = () => {
    meetingsLeaveDialogData.visible = false
  }

onMounted(() => {
  getTableData()
})
</script>

<template>
  <el-row class="box-card">
    <el-col :span="24">
      <el-card class="w-full search">
        <el-form
          :model="searchForm"
          size="small"
          label-suffix=":"
        >
          <el-row
            :gutter="16"
          >
            <el-col :span="8">
              <el-form-item label="项目名称">
                <el-input
                  v-model="searchForm.projectName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申报单位">
                <el-input
                  v-model="searchForm.buildOrgName"
                  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 tab-card">
        <template #header>
          <div class="flex justify-between items-center">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane :label="`待评审（${count}）`" name="false" />
              <el-tab-pane label="已评审" name="true" />
            </el-tabs>
            <el-button
              type="primary"
              plain
              size="small"
              @click="showMeetingsLeaveDialog"
            >会议请假</el-button>
          </div>
        </template>
        <project-list
          ref="listRef"
          :list-data="data"
          :total="total"
          @get-table-data="getTableData"
          @to-detail="toDetail"
        />
      </el-card>
    </el-col>
  </el-row>
  <meetings-leave-dialog :visible="meetingsLeaveDialogData.visible" @close="closeMeetingsLeaveDialog" />
</template>

<style lang='less' scoped>
.projectDynamicContainer{
  height: 540px;
  overflow: scroll;
  .projectDynamic {
  width: 100%;
  height: 150px;
  // background-color: #bfc;
  border-bottom: solid 1px rgba(216, 218, 223);
  margin-bottom: 10px;
  display: flex;
  .leftPart{
    width: 84px;
    height: auto;
    display: flex;
    justify-content: center;
  }
  .rightPart{
    flex: 1;
    height: auto;
    .checkDetail{
      color: rgba(0, 87, 255, 1);
      cursor: pointer;
    }
  }
  .projectAvartarStyle{
    width: 44px;
    height: 44px;
  }
}

}
.el-pagination {
  padding: 16px 16px 0 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}</style>
