<!--
  @description: 评标进度表格
  @author: yf
  @routerPath:
  @date: 2020-8-24 17:28:58
-->
<template>
  <div>
    <div class="progress">
      <ul>
        <li v-for="(item, ind) in driveList" v-if="item.isShow==='01'" :key="item.taskNo" class="fl progressLi">
          <el-button :disabled="setDisabled(item)" size="small" :class="checkedIndex === ind?'checkedSelect progressBtn fl':'progressBtn fl'" @click="switchStep(item,ind)">
            {{ item.taskName }}
          </el-button>
        </li>
      </ul>
    </div>
    <div>
      <template v-if="metaExpertInfo">
        <el-tabs v-model="activeName" @tab-click="switchExpert">
          <el-tab-pane v-for="(item, index) in expertList" :key="index" :label="item.expertName" :name="index+''" />
          <el-tab-pane v-if="expertList.length" :name="expertList.length+''" label="汇总" />
        </el-tabs>
      </template>
      <template>
        <router-view :key="new Date()*1" :expert-info="currentExpertInfo" :drive-info="currentDrive" @showOpenDetail="showOpenDetail" />
      </template>
    </div>
  </div>
</template>

<script>
/* api接口*/
import {
  listEvalProcedureByPackId,
  listProcurementEvalExpertInfo
} from '@/api/procurement/procurementEvaluation'
export default {
  components: {},
  props: {
    getTenderBase: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      driveList: [], // 驱动列表
      activeName: '0',
      expertList: [], // 评委信息列表
      currentExpertInfo: {}, // 当前专家信息,默认第一位
      currentDrive: {}, // 当前驱动信息
      driveInfo: { // 当前驱动信息
        packId: '', // 标包id
        taskNo: '' // 驱动编号
      },
      metaType: this.$route.meta.type, // 路由meta type信息
      metaExpertInfo: this.$route.meta.expertInfo, // 路由meta expertInfo true展示专家
      driveDataPath: this.$route.fullPath, // 路由地址
      checkedIndex: 0 // 当前选中的下标
    }
  },
  computed: {
    key() {
      return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化驱动信息
    initData() {
      this.driveList = []
      listEvalProcedureByPackId(this.getTenderBase.packId).then(res => {
        this.driveList = res.data
        this.$emit('getStepBackInfo')
        // 初始化页面进入签到表格页
        //  如果是评审管理的驱动再进行跳转
        if (this.driveDataPath !== undefined && this.driveDataPath === '/procurement/procurementDrive/procurementDocumentsPurchase/evaluationResults') {
          res.data.forEach((item, ind) => {
            if (item.taskName === '签到' && item.isShow === '01' && ind === 0) {
              this.$router.push({
                path: item.requestUrl
              })
              // 更新metaType、metaExpertInfo值
              this.metaType = this.$route.meta.type
              this.metaExpertInfo = this.$route.meta.expertInfo
              // 初始化高亮、专家列表
              this.activeName = '1'
              this.expertList = []
              this.currentExpertInfo = {}
              // 保存当前驱动信息
              this.currentDrive = item
            }
          })
        }
      })
    },
    // 切换专家
    switchExpert(tab) {
      // 判断是否为汇总
      if (tab.name === (this.expertList.length + '')) {
        // 判断是否为符合性评审汇总
        if (this.metaType === 'complianceReview') {
          this.$router.push({
            path: '/procurement/procurementDrive/procurementDocumentsPurchase/evaluationResults/preliminaryReviewSummary'
          })
          // 更新metaType、metaExpertInfo值
          this.metaType = this.$route.meta.type
          this.metaExpertInfo = this.$route.meta.expertInfo
          return
        }
        // 判断是否为商务经济汇总
        if (this.metaType === 'commercialTechnicalReview') {
          this.$router.push({
            path: '/procurement/procurementDrive/procurementDocumentsPurchase/evaluationResults/businessEconomicReviewSummary'
          })
          // 更新metaType、metaExpertInfo值
          this.metaType = this.$route.meta.type
          this.metaExpertInfo = this.$route.meta.expertInfo
          return
        }
        return
      }
      // 设置点击专家为当前专家
      const index = tab.name * 1
      this.currentExpertInfo = this.expertList[index]
      // 判断是否是从汇总页跳转到专家评审页
      if (this.metaType === 'complianceReview') {
        // 符合性评审
        this.$router.push({
          path: '/procurement/procurementDrive/procurementDocumentsPurchase/evaluationResults/preliminaryReview'
        })
        // 更新metaType、metaExpertInfo值
        this.metaType = this.$route.meta.type
        this.metaExpertInfo = this.$route.meta.expertInfo
        return
      }
      // 判断是否为商务经济汇总页调转专家评审
      if (this.metaType === 'commercialTechnicalReview') {
        this.$router.push({
          path: '/procurement/procurementDrive/procurementDocumentsPurchase/evaluationResults/businessEconomicReview'
        })
        // 更新metaType、metaExpertInfo值
        this.metaType = this.$route.meta.type
        this.metaExpertInfo = this.$route.meta.expertInfo
        return
      }
    },
    // 切换驱动
    switchStep(item, ind) {
      this.$nextTick(() => {
        // 点击的下标为当前下标
        this.checkedIndex = ind
        // 开启详细评审按钮取消
        this.$emit('openDetailEvalStatus', false)
        this.$router.push({
          path: item.requestUrl
        })
        // 更新metaType、metaExpertInfo值
        this.metaType = this.$route.meta.type
        this.metaExpertInfo = this.$route.meta.expertInfo
        // 初始化高亮、专家列表
        this.activeName = '0'
        this.expertList = []
        this.currentExpertInfo = {}
        // 保存当前驱动信息
        this.currentDrive = item
        // 设置当前驱动信息
        const data = {
          packId: this.getTenderBase.packId,
          taskNo: item.taskNo
        }
        this.driveInfo = data
        // 判断是否为初审、商务经济评审
        if (this.metaType === 'complianceReview' || this.metaType === 'commercialTechnicalReview') {
          listProcurementEvalExpertInfo(data).then(res => {
            this.expertList = res.data.evalExpertList
            // 默认第一位为初始信息
            this.currentExpertInfo = this.expertList[0]
          })
        }
      })
    },
    // 判断是否为禁用按钮
    setDisabled(item) {
      // 进程状态 00未开始 01进行中
      if (item.processStatus === '00') {
        return true
      }
      return false
    },
    // 子组件传递过来的值 开启详细状态按钮的值
    showOpenDetail(val) {
      this.$emit('openDetailEvalStatus', val)
    }
  }
}

</script>
<style lang="less" scoped>
@import "~@/assets/style/common/public.less";
/deep/.el-tabs__content {
    overflow: hidden;
    position: relative;
    margin-top: -10px;
}
.expertName {
  display: inline-block;
  margin: 5px 16px 13px 0;
  cursor: pointer;
  color: @hyacinthine;
}
.progress {
  padding: 0 10px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: @french-grey;
}
 ul li::after {
float: left;
content: " ";
display: block;
height: 18px;
width: 25px;
margin: 7px;
background-image: url('../../../../assets/img/procurement/procurementEvaluation/arrow.png');
}
.progress ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.progress ul li{
  margin-top: 10px;
}
.progress ul li:last-child:after {
  display: none;
}
.progressLi .checkedSelect{
  background:#027BD0;
  color: #fff;
  // border: 1px solid #fff;
}
</style>

