<template>
  <div class="app-container home">
    <div class="content-top">
      <el-card style="width: 49%;height: 330px">
        <div class="leftContent">
          <div class="commonTopInfo">
            <div class="base-info">
              <span>当前登录厅局：{{ mechanism }}</span>
              <span>{{ expertInfoData ? expertInfoData.expertName : 'xx专家' }}，您好</span>
              <span>欢迎登录专家库管理集约化平台</span>
            </div>
            <div class="contentTopBox">基础中心</div>
          </div>
          <div class="contentTopBox">
            <div :class="{ exportTop: roles.includes('expert'), unInfoBox: !expertInfoData }" class="leftUserInfo">
              <div v-if="roles.includes('expert')" class="userContent">
                <div v-if="expertInfoData" class="userContentLeft">
                  <el-image :src="expertInfoData.photograph !== null ? expertInfoData.photograph : avatarImage"
                            style="width: 130px; height: 130px" />
                </div>
                <div v-if="!expertInfoData" class="userContentLeft">
                  <el-image :src="avatarImage" style="width: 130px; height: 130px" />
                </div>
                <div v-if="expertInfoData" class="userContentRight">
                  <div :class="{ redBg: expertInfoData.startDate !== null && expertInfoData.endDate !== null }"
                       class="vacationBox">
                    <div v-if="expertInfoData.startDate !== null && expertInfoData.endDate !== null" class="timerInfo">
                      <span class="leftTitle">假期中：</span>
                      <div class="timeBox">
                        <span class="startTime">开始时间：{{ expertInfoData ? expertInfoData.startDate : '' }}</span>
                        <span class="endTime">结束时间：{{ expertInfoData ? expertInfoData.endDate : '' }}</span>
                      </div>
                    </div>
                    <span v-else>{{ expertStatus(expertInfoData.status) }}</span>
                  </div>
                  <div v-if="userStore.isInStore" class="integralBox">
                    <p>积分：{{ expertInfoData.pointCount !== null ? expertInfoData.pointCount : 0 }}</p>
                  </div>
                  <div v-if="userStore.isInStore" class="creditRatingBox">
                    <p>信用等级：{{ expertInfoData ? expertInfoData.creditName : '无' }}</p>
                  </div>
                </div>
              </div>
              <div v-if="roles.includes('expert')" class="bottomContent">
                <div class="workCompany">
                  <p>工作单位：{{ expertInfoData ? expertInfoData.workUnit : '暂无信息' }}</p>
                </div>
                <div class="workPost">
                  <p>职务：{{ expertInfoData ? expertInfoData.duty : '暂无信息' }}</p>
                </div>
              </div>
            </div>
            <div :class="{ exportRight: roles.includes('expert') }" class="rightDataInfo">
              <div v-if="roles.includes('expert')" class="zjRightData">
                <div class="commonItem blue">评审项目次数：{{ expertInfoData ? expertInfoData.reviewProjectCount : 0 }}
                </div>
                <div class="commonItem red">请假总次数：{{ expertInfoData ? expertInfoData.leaveCount : 0 }}</div>
                <div class="commonItem orange">专家互评人数：{{ expertInfoData ? expertInfoData.evaluateCount : 0 }}
                </div>
              </div>
              <div v-else class="commonRightData">
                <div class="statisticalDataBox">
                  <div
                    v-for="item in statisticalData"
                    :key="item.title"
                    :class="{ jgBorder: roles.includes('jg') }"
                    :style="{ 'color': item.color }"
                    class="statisticalDataItem"
                  >
                    <div class="titleBox">{{ item.title }}</div>
                    <div class="dataBox">{{ item.data }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 49%;height: 330px">
        <div class="rightContent">
          <div class="contentTopBox">快捷入口</div>
          <div class="contentPathBox">
            <div v-for="(item, index) in pathData" :key="item.path" :class="'pathBg' + index" class="contentPathItem"
                 @click="goPath(item.path)">
              {{ item.title }}
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="tableContent">
      <el-card>
        <div class="tabBox">
          <div
            v-for="(item, index) in tabData"
            :class="{ currentActive: currentItemValue === index }"
            class="tabItemBox"
            @click="switchActive(index)"
          >
            {{ item.title }}
            <template v-if="item.value !== undefined">
              (<em>{{ item.value }}</em
            >)
            </template>
          </div>
        </div>
        <div class="elTableBox">
          <el-table v-loading="loading" :data="projectList">
            <el-table-column label="序号" type="index" width="50" />
            <el-table-column v-for="item in tableColumn" :align="item.align" :label="item.label" :prop="item.prop">
              <template #default="scope">
                <dict-tag v-if="item.tagState" :options="expert_status" :value="parseInt(scope.row.status)"></dict-tag>
                <dict-tag v-else-if="item.tagType" :options="approval_type"
                          :value="parseInt(scope.row.approvalType)"></dict-tag>
                <dict-tag v-else-if="item.sex" :options="sys_user_sex" :value="parseInt(scope.row.sex)"></dict-tag>
                <dict-tag v-else-if="item.tagStage" :options="item_stage"
                          :value="parseInt(scope.row.itemStage)"></dict-tag>
                <span v-else-if="item.prop == 'auditTime'">{{ parseTime(scope.row.auditTime, '{y}-{m}-{d} {h}:{i}:{s}')
                  }}</span>
                <span v-else-if="item.prop == 'annualInspectionType'">
                  <dict-tag :options="annual_inspection_type" :value="scope.row.annualInspectionType" />
                </span>
                <span v-else :class="{ blue: item.stateName }">{{ scope.row[item.prop] || '-' }}</span>
              </template>
            </el-table-column>

            <el-table-column
              v-if="roles.includes('expert')"
              align="center"
              class-name="small-padding fixed-width"
              fixed="right"
              label="操作"
              width="240"
            >
              <template v-if="currentItemValue === 0" #default="scope">
                <div v-if="scope.row.acceptStatus == '0'">
                  <span style="cursor: pointer; color: #409EFF" @click="Accept(scope.row, 1)">接受</span>
                  <el-divider direction="vertical" />
                  <span style="cursor: pointer; color: #f56c6c" @click="Accept(scope.row, 2)">拒绝</span>
                </div>
                <div v-if="scope.row.acceptStatus != '0'">
                  <span style="color: #ddd">已接受</span>
                </div>
              </template>
              <template v-if="currentItemValue === 1" #default="scope">
                <div v-if="scope.row.acceptStatus != '0'">
                  <span style="color:#409EFF;cursor: pointer"
                        @click="Leave(scope.row)">请假</span>
                  <el-divider direction="vertical" />
                  <span style="color: #ddd">已接受</span>
                </div>
              </template>
              <template v-if="currentItemValue === 2" #default="scope">
                <el-button v-if="scope.row.status == '未评价'" link type="primary" @click="handleEvaluate(scope.row)">
                  评价
                </el-button>
                <el-button v-else link type="primary" @click="handleShow(scope.row)">详情</el-button>
              </template>
            </el-table-column>
            <el-table-column v-if="roles.includes('jg')" align="center" class-name="small-padding fixed-width"
                             fixed="right"
                             label="操作" width="240">
              <template v-if="currentItemValue === 0" #default="scope">
                <span v-if="scope.row.status != '1'" style="color: #36d; cursor: pointer"
                      @click="jumpToDetail('detail', scope.row)">详情</span>
                <span v-if="scope.row.status == '1'" style="color: #36d; cursor: pointer"
                      @click="jumpToDetail('approval', scope.row)">审批</span>
              </template>
              <template v-if="currentItemValue === 1" #default="scope">
                <el-button v-if="scope.row.status != '待审批'" link type="primary"
                           @click="handleAction(scope.row, false)">详情
                </el-button>
                <el-button v-else link type="primary" @click="handleAction(scope.row, true)">审批</el-button>
              </template>
              <template v-if="currentItemValue === 2" #default="scope">
                <el-button link type="primary" @click="jumpToInspection(scope.row)">
                  年检
                </el-button>
                <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column
              v-if="roles.includes('admin') || roles.includes('xm')"
              align="center"
              class-name="small-padding fixed-width"
              fixed="right"
              label="操作"
              width="240"
            >
              <template v-if="currentItemValue === 0" #default="scope">
                <el-button v-if="scope.row.status == '未评价'" link type="primary" @click="handleEvaluate(scope.row)">
                  评价
                </el-button>
                <el-button v-else link type="primary" @click="handleShow(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="elPaginationBox">
          <pagination
            v-show="total > 0"
            v-model:limit="queryParams.pageSize"
            v-model:page="queryParams.pageNum"
            :total="total"
            @pagination="getList"
          />
        </div>
      </el-card>
    </div>
    <el-dialog v-model="leaveDialog.visible" :before-close="Close" title="请假理由" width="560px">
      <el-form ref="leaveForm" :model="leaveDialog.form" :rules="leaveDialog.rules" label-width="0">
        <el-form-item label="" prop="result">
          <el-input v-model="leaveDialog.form.result" :rows="5" placeholder="请输入请假理由" resize="none"
                    type="textarea"></el-input>
        </el-form-item>
        <div style="font-size: 16px;font-weight: bold;margin-bottom: 16px;">选择代理专家</div>
        <el-form-item label="指定专家" label-width="70px">
          <el-select v-model="leaveDialog.form.expertId" placeholder="请选择专家" filterable style="flex:1;">
            <el-option
              v-for="item in expertOptions"
              :key="item.userId"
              :label="`${item.workUnit} - ${item.expertName}（${item.contact}）`"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="Close">取消</el-button>
          <el-button type="primary" @click="ConfimLeave">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <evaluateDialog v-model="showEvaluateDialog" :row="activeRow" type="mutual" @updatelist="getList" />
  </div>
</template>

<script lang="ts" setup>
import {
  HomeVO,
  HomeQuery,
  HomeForm,
  statisticalDataVO,
  pathDataVO,
  Header,
  ListVO,
  expertV0
} from '@/api/expert/homePage/types';
import { LeaveApprovalVO } from '@/api/leave/approval/types';
import {
  setLeave,
  setAccept,
  getPendingApprovalList,
  getMechanismLeaveApprovalList,
  getParticipatingProjectsList,
  listMutual,
  getExpertCount,
  getProductPanoramaCount,
  getAcceptProjectList,
  listToXm,
  getExpertInfoData,
  getExpertAllCount
} from '@/api/expert/homePage';
import useUserStore from '@/store/modules/user';
import avatarImage from '@/assets/images/avatar.png';
import evaluateDialog from '@/views/homePage/evaluateDialog/index.vue';
import { getUserProfile } from '@/api/system/user';
import { getTenantList } from '@/api/login';
import { delAnnualInspectionAudit, listAnnualInspectionAudit } from '@/api/annualInspection/annualInspectionAudit';
import { expertList } from '@/api/expert/portrait';

const router = useRouter();
const userStore = useUserStore();

const roles = ref(userStore.roles);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const { approval_type } = toRefs<any>(proxy?.useDict('approval_type'));
const { expert_status } = toRefs<any>(proxy?.useDict('expert_status'));
const { item_stage } = toRefs<any>(proxy?.useDict('item_stage'));
const { annual_inspection_type } = toRefs<any>(proxy?.useDict('annual_inspection_type'));

const total = ref(0);
const loading = ref(false);
const showEvaluateDialog = ref(false);
const activeRow = ref(null);
const projectList = ref([]);
const expertInfoData = ref<expertV0>(); // 专家信息
const statisticalData = ref<statisticalDataVO[]>([]);
const pathData = ref<pathDataVO[]>([]);
const currentItemValue = ref<number>(0);
const tabData = ref([]);
const tableColumn = ref<Header[]>([]);
const mechanism = ref('');
const initExpertEvaluationFormData = {};
const data = reactive<PageData<HomeForm, HomeQuery>>({
  form: { ...initExpertEvaluationFormData },
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  rules: {
    file: [{ required: true, message: '文件不能为空', trigger: 'blur' }]
  }
});
const { queryParams, form, rules } = toRefs(data);

const getUser = async () => {
  const res = await getUserProfile();
  if (!roles.value.includes('expert')) {
    expertInfoData.value = {
      expertName: res.data.user.userName,
      photograph: '',
      workUnit: '',
      duty: '',
      pointCount: 0,
      creditName: '',
      reviewProjectCount: 0,
      leaveCount: 0,
      evaluateCount: 0,
      startDate: '',
      endDate: ''
    };
  }
  const { data } = await getTenantList();
  const findData = data.voList.find((fitem) => fitem.tenantId === res.data.user.tenantId);
  mechanism.value = findData ? findData.companyName : '';
};

const getObtainStatisticsData = async () => {
  tabData.value = [];
  pathData.value = [];
  statisticalData.value = [];
  if (roles.value.includes('jg')) {
    pathData.value = [
      {
        title: '专家画像',
        path: '/expert/portrait'
      },
      {
        title: '专家查找',
        path: '/expert/expert/find'
      },
      {
        title: '财务管理',
        path: '/expertmoneyconfig/manage'
      },
      {
        title: '项目全景',
        path: '/project/fullView'
      }
    ];
    tabData.value = [
      {
        title: '待审批专家',
        value: 0
      },
      {
        title: '待审批请假',
        value: 0
      },
      {
        title: '待年检专家',
        value: 0
      }
      // {
      //   title: '待审批项目',
      //   value: 0
      // }
    ];
    statisticalData.value = [
      {
        title: '已入库专家总人数',
        data: 0,
        color: '#85c0da'
      },
      {
        title: '项目评审总数',
        data: 0,
        color: '#85c0da'
      },
      {
        title: '专家请假总次数',
        data: 0,
        color: '#85c0da'
      },
      {
        title: '黑名单专家人数',
        data: 0,
        color: '#f7b255'
      },
      {
        title: '优秀信用专家人数',
        data: 0,
        color: '#f7b255'
      },
      {
        title: '项目总结完成数',
        data: 0,
        color: '#f7b255'
      }
    ];

    const allCount = await getExpertAllCount().finally();
    statisticalData.value[0].data = allCount.data?.totalRegisteredExperts.toString();
    statisticalData.value[1].data = allCount.data?.totalProjectReviews.toString();
    statisticalData.value[2].data = allCount.data?.totalExpertLeaves.toString();
    statisticalData.value[3].data = allCount.data?.blacklistedExperts.toString();
    statisticalData.value[4].data = allCount.data?.outstandingCreditExperts.toString();
    statisticalData.value[5].data = allCount.data?.totalCompletedSummaries.toString();

    const pendingApprovalRes = await getPendingApprovalList(queryParams.value).finally();
    const annualInspectionParams = {
      ...queryParams.value,
      annualInspectionStatus: '1'
    };
    const annualInspectionRes = await listAnnualInspectionAudit(annualInspectionParams).finally();
    const mechanismLeaveParams = {
      ...queryParams.value,
      status: 0
    };
    const mechanismLeaveApprovalRes = await getMechanismLeaveApprovalList(mechanismLeaveParams).finally();
    tabData.value[0].value = pendingApprovalRes.total;
    tabData.value[1].value = mechanismLeaveApprovalRes.total;
    tabData.value[2].value = annualInspectionRes.total;
  } else if (roles.value.includes('expert')) {
    pathData.value = [
      {
        title: '学习资源',
        path: '/study/resource'
      },
      {
        title: '专家推荐',
        path: '/expert/recommend'
      },
      {
        title: '学习工具',
        path: '/study/tool'
      },
      {
        title: '请假申请',
        path: '/leave/log?type=leave'
      }
    ];
    tabData.value = [
      {
        title: '待接受项目',
        value: 0
      },
      {
        title: '待参评项目',
        value: 0
      },
      {
        title: '待互评专家',
        value: 0
      }
    ];
    const acceptProjectList = await getAcceptProjectList(queryParams.value).finally();
    const participatingProjectsRes = await getParticipatingProjectsList(queryParams.value).finally();
    const listMutualRes = await listMutual(queryParams.value).finally();
    tabData.value[0].value = acceptProjectList.total;
    tabData.value[1].value = participatingProjectsRes.total;

    const filterData = listMutualRes.rows?.filter((item) => item.status === '未评价') || [];
    tabData.value[2].value = filterData.length;
  } else if (roles.value.includes('admin') || roles.value.includes('xm')) {
    pathData.value = [
      {
        title: '专家抽取',
        path: '/extract'
      },
      {
        title: '专家查找',
        path: '/expert/expert/find'
      },
      {
        title: '项目全景',
        path: '/project/fullView'
      },
      {
        title: '项目维护',
        path: '/project/maintain'
      }
    ];
    statisticalData.value = [
      {
        title: '专家总人数',
        data: 0,
        color: '#85c0da'
      },
      {
        title: '项目总数',
        data: 0,
        color: '#85c0da'
      }
    ];
    tabData.value = [
      {
        title: '待评价专家',
        value: 0
      }
    ];
    const listToXmParams = {
      ...queryParams.value,
      status: 0
    };
    const listToXmRes = await listToXm(listToXmParams).finally();
    const expertCount = await getExpertCount().finally();
    const productPanoramaRes = await getProductPanoramaCount().finally();

    tabData.value[0].value = listToXmRes.total;
    statisticalData.value[0].data = expertCount.data.toString();
    statisticalData.value[1].data = productPanoramaRes.data.toString();
  } else if (roles.value.includes('superadmin')) {
  }
};
const getList = async () => {
  loading.value = true;
  projectList.value = [];
  if (roles.value.includes('jg')) {
    let ajaxJson = [
      {
        api: getPendingApprovalList,
        params: { ...queryParams.value }
      },
      {
        api: getMechanismLeaveApprovalList,
        params: { ...queryParams.value, status: 0 }
      },
      {
        api: listAnnualInspectionAudit,
        params: { ...queryParams.value, annualInspectionStatus: '1' }
      }
    ];
    const { api, params } = ajaxJson[currentItemValue.value];
    const { total: tl, rows } = await api(params).finally();
    total.value = tl;
    projectList.value = rows;
    loading.value = false;
  } else if (roles.value.includes('expert')) {
    let ajaxJson = [
      getAcceptProjectList,
      getParticipatingProjectsList,
      listMutual
    ];
    const api = ajaxJson[currentItemValue.value];
    const { total: tl, rows } = await api(queryParams.value).finally();
    if (currentItemValue.value == 2) {
      const resData = rows.filter(item => item.status === '未评价');
      total.value = resData.length;
      projectList.value = resData;
    } else {
      total.value = tl;
      projectList.value = rows;
    }
    loading.value = false;
  } else if (roles.value.includes('admin') || roles.value.includes('xm')) {
    if (currentItemValue.value === 0) {
      const queryParam = {
        ...queryParams.value,
        status: 0
      };
      await listToXm(queryParam).then((res) => {
        if (res.code === 200) {
          total.value = res.total;
          projectList.value = res.rows;
        }
        loading.value = false;
      })
        .catch(() => {
          loading.value = false;
        });
    }
  } else if (roles.value.includes('superadmin')) {
    pathData.value = [
      {
        title: '基础中心',
        path: ''
      },
      {
        title: '留痕管理',
        path: '/backStage/remain'
      },
      {
        title: '专家管理',
        path: '/expert/expert'
      },
      {
        title: '字典值管理',
        path: '/system/dict'
      }
    ];
    statisticalData.value = [
      {
        title: '平台入库总人数',
        data: 28872,
        color: '#85c0da'
      },
      {
        title: '项目总数',
        data: 28872,
        color: '#85c0da'
      },
      {
        title: '安全问题预警次数',
        data: 28872,
        color: '#85c0da'
      }
    ];
    tabData.value = [
      {
        title: '平台专家列表'
      },
      {
        title: '平台项目列表'
      }
    ];
  }
  getObtainStatisticsData();
};

const switchActive = async (indexValue: number) => {
  total.value = 0;
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 10;
  currentItemValue.value = indexValue;
  if (roles.value.includes('jg')) {
    switch (indexValue) {
      case 0:
        tableColumn.value = [
          {
            label: '姓名',
            prop: 'expertName',
            align: 'left',
            stateName: true
          },
          {
            label: '性别',
            prop: 'sex',
            align: 'left',
            sex: true
          },
          {
            label: '联系方式',
            prop: 'contact',
            align: 'left'
          },
          {
            label: '工作单位',
            prop: 'workUnit',
            align: 'left'
          },
          {
            label: '职务',
            prop: 'duty',
            align: 'left'
          },
          {
            label: '审批类型',
            prop: 'approvalType', // 审批类型 0 专家申请 1 信息变更
            align: 'left',
            tagType: true
          },
          {
            label: '状态', // 状态: 0：暂存 1：待审批 2：正常 3：拒绝
            prop: 'status',
            align: 'left',
            tagState: true
          }
        ];
        break;
      case 1:
        tableColumn.value = [
          {
            label: '编号',
            prop: 'gid'
          },
          {
            label: '假期开始时间',
            prop: 'startDate'
          },
          {
            label: '假期截止时间',
            prop: 'endDate'
          },
          {
            label: '申请人',
            prop: 'expertName'
          },
          {
            label: '请假事由',
            prop: 'leaveReason'
          },
          {
            label: '请假时间',
            prop: 'createTime'
          },
          {
            label: '审批结果',
            prop: 'status'
          }
        ];
        break;
      case 2:
        tableColumn.value = [
          {
            label: '年检编号',
            prop: 'annualInspectionSn'
          },
          {
            label: '年检名称',
            prop: 'annualInspectionName'
          },
          {
            label: '专家名称',
            prop: 'expertName'
          },
          {
            label: '电话',
            prop: 'contact'
          },
          {
            label: '身份证号',
            prop: 'idCard'
          },
          {
            label: '工作单位',
            prop: 'workUnit'
          },
          {
            label: '审核方式',
            prop: 'annualInspectionType'
          },
          {
            label: '审核时间',
            prop: 'auditTime'
          }
        ];
        break;
      default:
        tableColumn.value = [];
    }
  } else if (roles.value.includes('expert')) {
    switch (indexValue) {
      case 0:
        tableColumn.value = [
          {
            label: '项目编号',
            prop: 'productSn',
            align: 'left'
          },
          {
            label: '项目名称',
            prop: 'productName',
            align: 'left',
            stateName: true
          },
          {
            label: '项目负责单位',
            prop: 'productUnit',
            align: 'left'
          },
          {
            label: '项目负责人',
            prop: 'unitBy',
            align: 'left'
          },
          {
            label: '项目阶段',
            prop: 'itemStage',
            align: 'left',
            tagStage: true
          },
          {
            label: '项目评审开始时间',
            prop: 'reviewTime',
            align: 'left'
          }
        ];
        break;
      case 1:
        tableColumn.value = [
          {
            label: '项目编号',
            prop: 'productSn',
            align: 'left'
          },
          {
            label: '项目名称',
            prop: 'productName',
            align: 'left',
            stateName: true
          },
          {
            label: '项目负责单位',
            prop: 'productUnit',
            align: 'left'
          },
          {
            label: '项目负责人',
            prop: 'unitBy',
            align: 'left'
          },
          {
            label: '项目阶段',
            prop: 'itemStage',
            align: 'left',
            tagStage: true
          },
          {
            label: '项目评审开始时间',
            prop: 'reviewTime',
            align: 'left'
          }
        ];
        break;
      case 2:
        tableColumn.value = [
          {
            label: '专家姓名',
            prop: 'evaluateUser',
            align: 'left'
          },
          {
            label: '评审项目',
            prop: 'productName',
            align: 'left'
          },
          {
            label: '项目阶段',
            prop: 'itemStageName',
            align: 'left',
            tagStage: true
          },
          {
            label: '工作单位',
            prop: 'workUnit',
            align: 'left'
          },
          {
            label: '职务',
            prop: 'expertPost',
            align: 'left'
          },
          {
            label: '状态',
            prop: 'status',
            align: 'left'
          }
        ];
        break;
      default:
        tableColumn.value = [];
    }
  } else if (roles.value.includes('admin') || roles.value.includes('xm')) {
    switch (indexValue) {
      case 0:
        tableColumn.value = [
          {
            label: '专家姓名',
            prop: 'evaluateUser',
            align: 'left'
          },
          {
            label: '评审项目',
            prop: 'productName',
            align: 'left'
          },
          {
            label: '项目阶段',
            prop: 'itemStageName',
            align: 'left',
            tagStage: true
          },
          {
            label: '工作单位',
            prop: 'workUnit',
            align: 'left'
          },
          {
            label: '职务',
            prop: 'expertPost',
            align: 'left'
          },
          {
            label: '状态',
            prop: 'status',
            align: 'left'
          }
        ];
        break;
      default:
        tableColumn.value = [];
    }
  } else if (roles.value.includes('superadmin')) {
    switch (indexValue) {
      case 0:
        tableColumn.value = [
          {
            label: '专家项目',
            prop: 'planNum',
            align: 'left',
            stateName: true
          },
          {
            label: '所属机构',
            prop: 'planNum',
            align: 'left'
          },
          {
            label: '工作单位',
            prop: 'planNum',
            align: 'left'
          },
          {
            label: '职务',
            prop: 'planNum',
            align: 'left'
          },
          {
            label: '专业/学历',
            prop: 'planNum',
            align: 'left'
          },
          {
            label: '研究领域',
            prop: 'planNum',
            align: 'left'
          },
          {
            label: '专家来源',
            prop: 'planNum',
            align: 'left'
          }
        ];
        break;
      case 1:
        tableColumn.value = [
          {
            label: '项目编号',
            prop: 'planNum',
            align: 'left'
          },
          {
            label: '项目名称',
            prop: 'planNum',
            align: 'left'
          },
          {
            label: '工作单位',
            prop: 'planNum',
            align: 'left'
          },
          {
            label: '项目负责人',
            prop: 'planNum',
            align: 'left'
          },
          {
            label: '联系方式',
            prop: 'planNum',
            align: 'left'
          }
        ];
        break;
      default:
        tableColumn.value = [];
    }
  }
  await getList();
};

const getExpertInfoDataFn = async () => {
  const expertRes = await getExpertInfoData().finally();
  expertInfoData.value = expertRes.data;
};
//跳转审批/查看详情
const jumpToDetail = (type: string, row?: HomeVO) => {
  const _id = row?.expertId;
  router.push({ path: '/expert/approval/detail', query: { id: _id, type } });
};
// 请假审批
const handleAction = (row: LeaveApprovalVO, isApproval: boolean) => {
  let query = {
    id: row.gid,
    type: isApproval ? 'approval' : 'approvalShow'
  };
  router.push({
    path: '/leave/detail',
    query
  });
};

// 快解入口跳转
const goPath = (pathData: string) => {
  if (userStore.isInStore) {
    router.push({ path: pathData });
  } else {
    ElNotification({
      title: '提示',
      message: '暂无权限',
      type: 'error'
    });
  }
};

const leaveForm = ref<ElFormInstance>(null);
const leaveDialog = reactive({
  visible: false,
  activeRow: null,
  form: {
    result: '',
    expertId:''
  },
  rules: {
    result: [{ required: true, message: '请输入请假理由', trigger: 'blur' }]
  }
});
const expertOptions = ref([])
const getExpertLists = async () => {
  let res = await expertList();
  expertOptions.value = res.data || [];
};
const Leave = (row) => {
  leaveDialog.activeRow = row;
  leaveDialog.visible = true;
  getExpertLists();
};
const Close = () => {
  leaveForm.value.resetFields();
  leaveDialog.visible = false;
};
const ConfimLeave = async () => {
  leaveForm.value.validate(async (valid) => {
    if (!valid) return;
    const params = {
      itemId: leaveDialog.activeRow.itemId,
      itemStage: leaveDialog.activeRow.itemStage,
      reviewTime: leaveDialog.activeRow.reviewTime,
      leaveReason: leaveDialog.form.result
    };
    let res = await setLeave(params);
    if (res.code != 200) {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      });
      return;
    }

    ElNotification({
      title: '提示',
      message: '请假成功',
      type: 'success'
    });
    await getList();
    Close();
  });
};
const Accept = async (row, status) => {
  let params = {
    itemId: row.itemId,
    itemStage: row.itemStage,
    status
  };
  let res = await setAccept(params);
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  ElNotification({
    title: '提示',
    message: `${status == 1 ? '接收' : '拒绝'}成功`,
    type: 'success'
  });
  await getObtainStatisticsData();
  await getList();
};

// 评价
const handleEvaluate = async (row?: ListVO) => {
  showEvaluateDialog.value = true;
  activeRow.value = row;
};
// 查看评价详情
const handleShow = (row?: ListVO) => {
  const _id = row?.id;
  router.push({
    path: '/project/evaluate/detail',
    query: {
      id: _id,
      from: 'list'
    }
  });
};

const expertStatus = (value:any) => {
  let arr = ['暂存', '待审批', '工作中', '拒绝', '离职', '退休']
  return arr[value] || '';
};
const jumpToInspection = (row: any) => {
  const userId = row.userId;
  const expertId = row.expertId;
  router.push({ path: '/annualInspection/auditDetail', query: { userId, expertId } });
};
/** 删除按钮操作 */
const handleDelete = async (row: any) => {
  await proxy?.$modal.confirm('是否要删除该年检？').finally(() => (loading.value = false));
  await delAnnualInspectionAudit(row.id);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};
onActivated(() => {
  getList();
});

onMounted(() => {
  getUser();
  if (roles.value.includes('expert')) {
    getExpertInfoDataFn();
  }
  getObtainStatisticsData();
  switchActive(currentItemValue.value);
});
</script>

<style lang="scss" scoped>
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.content-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .leftContent {
    width: 100%;

    .commonTopInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;

      .base-info {
        display: flex;
        align-items: center;
        flex: 1;
        white-space: nowrap;

        span {
          padding-right: 20px;
        }
      }
    }

    .contentTopBox {
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;

      .leftUserInfo {
        width: 100%;

        &.unInfoBox {
          .userTop {
            width: 100%;
          }
        }

        &.exportTop {
          flex: 1;
          height: 260px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
        }

        .userContent {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .userContentRight {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            align-content: space-between;
            flex-wrap: wrap;
            margin-left: 40px;
            height: 130px;

            .integralBox {
              width: 100%;
            }

            .vacationBox {
              text-align: center;
              color: #1ab394;
              border-radius: 5px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              font-size: 18px;

              .timerInfo {
                text-align: left;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;

                .timeBox {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  flex-wrap: wrap;

                  .startTime {
                    width: 100%;
                    margin-bottom: 2px;
                  }
                }

                .leftTitle {
                  width: 50%;
                }

                em {
                  width: 100%;
                  text-align: center;
                  display: inline-block;
                }
              }

              &.redBg {
                color: #d9021d;
              }

              div {
                margin: 6px 0;
              }
            }
          }
        }

        .bottomContent {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;

          .workCompany {
            width: 60%;
            line-height: 20px;
          }

          .workPost {
            margin-left: 10px;
          }
        }
      }

      .rightDataInfo {
        width: 100%;

        &.exportRight {
          width: 40%;
        }

        .zjRightData {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          flex-wrap: wrap;

          .commonItem {
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            border: 1px solid #dddddd;
            border-radius: 10px;

            &:nth-child(2) {
              margin: 10px 0;
            }
          }
        }

        .commonRightData {
          height: 260px;

          .statisticalDataBox {
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;

            .statisticalDataItem {
              width: 180px;
              height: 180px;
              border-radius: 50%;
              text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;
              align-content: center;
              flex-wrap: wrap;
              border: 1px solid #dddddd;
              margin-bottom: 10px;

              &.jgBorder {
                width: 32%;
                height: 122px;
                border-radius: 5px;
              }

              .titleBox {
                width: 100%;
                margin-bottom: 30px;
              }
            }
          }
        }
      }
    }
  }

  .rightContent {
    .contentTopBox {
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;
    }

    .contentPathBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .contentPathItem {
        width: 49%;
        height: 120px;
        line-height: 120px;
        text-align: center;
        border-radius: 5px;
        margin-bottom: 13px;
        font-size: 20px;
        color: #ffffff;
        cursor: pointer;

        &.pathBg0 {
          background-color: #02cccc;
        }

        &.pathBg1 {
          background-color: #ec818e;
        }

        &.pathBg2 {
          background-color: #c281ff;
        }

        &.pathBg3 {
          background-color: #f59b25;
        }
      }
    }
  }
}

.tableContent {
  margin-top: 20px;

  .tabBox {
    margin: 10px 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .tabItemBox {
      cursor: pointer;
      margin-right: 30px;

      em {
        color: #d9021d;
      }
    }

    .currentActive {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        width: 70%;
        height: 2px;
        background-color: #5c90f9;
        top: 25px;
        left: 15%;
      }
    }
  }
}

:deep(.el-form-item__label) {
  height: 40px;
  line-height: 40px;
}

.uploadBox {
  width: 100%;
}

.blue {
  color: #3f9dc6;
}

.red {
  color: #d9021d;
}

.orange {
  color: #f59b25;
}

.green {
  color: #1ab394;
}
</style>
