<!--  -->
<template>
  <div class="performance">
    <SmallNav />
    <div class="performance-content boderAndRadius">
      <div class="performance-content-title">
        <InfoHeader :obj="{
                src:obj.avatar || '',
                name:obj.staffName,
                departmentName:obj.departmentName
                }" />
        <div class="performance-content-title-right">
          <UseButton :formList='formList' :tableInfo.sync='tableInfo'/>
        </div>
      </div>
      <div class="performance-content-center">
        <div
          class="performance-content-center-item commonFont"
          :class="{
                  active:i.isActive,
                  right:true,
                  left:index !==0
                }"
          v-for="(i,index) in formList.flowRecordList"
          :key="index"
        >
          <el-tooltip
            v-if="i.flowName !== '执行中'"
            class="item"
            effect="dark"
            :content="(index >= (formList.flowRecordList.length-1))?i.flowName:i.flowName +' : '+i.staffName"
            placement="top"
          >
            <div>
              {{index+1}}.{{i.flowName}} <span v-if="index !== (formList.flowRecordList.length-1)">:{{i.staffName}}
                <i
                  v-if="i.isGou && !i.isActive"
                  style="color:#3ba1ff;margin:0 0 0 4px;font-weight:800;"
                  class="el-icon-check"
                ></i></span>
              <i
                v-if="index !== formList.flowRecordList.length-1"
                style="cursor: pointer;"
                @click="handleRight(i)"
                class="el-icon-video-pause"
              ></i>
            </div>
          </el-tooltip>
          <el-tooltip
            v-if="i.flowName === '执行中'"
            class="item"
            effect="dark"
            placement="top"
          >
            <div slot="content">执行中”是员工在目标确认后，努力达成目标的一个过程，直到管理员发起评分。<br />管理员如何发起评分：返回上级页面&lt;考核详情&gt;，点击"开始评分"按钮发起。</div>
            <div>
              {{index+1}}.{{i.flowName}}<i class="el-icon-warning-outline" />:{{i.staffName}} <i
                v-if="i.isGou && !i.isActive"
                style="color:#3ba1ff;margin:0 0 0 4px;font-weight:800;"
                class="el-icon-check"
              ></i>
              <i
                style="cursor: pointer;"
                @click="handleRight(i)"
                class="el-icon-video-pause"
              ></i>
            </div>
          </el-tooltip>
        </div>
      </div>
      <div class="performance-content-bottom">
        <tables
          :auth='formList.auth'
          :tableInfo.sync='tableInfo'
          v-if="obj.recortModelDtos.length !==0"
          :obj='obj'
        />
      </div>
      <div v-if="formList.resultCommentList.length !== 0" class="performance-content-jilu">
        <div class="performance-content-jilu-title commonFont">
          记录
        </div>
        <div
          v-for="(i,index) in formList.resultCommentList"
          :key="index"
          class="performance-content-jilu-item commonFont"
        >
          <div class="performance-content-jilu-item-time">
            {{i.gmtCreate}}
          </div>
          <div class="performance-content-jilu-item-content">
            <div class="performance-content-jilu-item-content-img">
              <img
                onerror="javascript:this.src='/static/default.jpg';" :src="i.avatar|| ''"
                alt=""
              >
            </div>
            <div>
              <span>{{i.staffName}}</span><span class="mubiao">#{{i.optDesc}}#</span>
            </div>
          </div>
            <div class="comment" v-if="i.comment">
              <pre>{{i.comment}}</pre>
            </div>
        </div>
      </div>
    </div>
    <popup-right
      v-if="right.showRight"
      @cancel='handleCancel'
      @submit="handleSubmit"
      :footer='false'
      :title="form.item.flowName"
    >
      <div
        slot="content"
        class="chooseManage"
      >
        <div
          class='chooseManage-item'
          :key="index"
          v-for="(i,index) in form.item.flowDetailRespList"
        >
          <InfoHeader :obj="{
                src:i.avatar,
                name:i.staffName,
                departmentName:i.departName
                }"/>
          <div class="chooseManage-item-center">
            <el-tag  v-if='i.status===0' size="mini" type="warning">未确认</el-tag>
            <el-tag v-if='i.status===4' size="mini" >已跳过</el-tag>
            <el-tag  v-if='i.status===1' size="mini"  type="success">已确认</el-tag>
          </div>
          <div>
             <UseButton :info='i' :formList='formList' :tableInfo.sync='tableInfo'/>
          </div>
        </div>
      </div>
    </popup-right>
  </div>
</template>

<script>
import SmallNav from '@/components/kpi-layout/SmallNav'
import InfoHeader from '@/components/InfoHeader'
import PopupRight from '@/components/PopupRight'
import UseButton from './components/UseButton'
import { apiResultRecordDetail, apiResultGetDetail } from '@/api/assessment'
import tables from './components/table'

export default {
  data () {
    return {
      right: {
        showRight: false
      },
      form: {},
      formList: {
        flowRecordList: [],
        resultCommentList: [],
        auth: {}
      },
      obj: {
        recortModelDtos: []
      },
      tableInfo: {
        result: false,
        score: false
      }
    }
  },
  components: {
    SmallNav,
    InfoHeader,
    PopupRight,
    tables,
    UseButton
  },
  computed: {},
  beforeMount () { },
  async mounted () {
    await this.handleList()
  },
  methods: {
    async handleGetTbale (id = this.$route.query.id) {
      this.$loadingStart()
      let res = await apiResultGetDetail({ id })
      this.$loadingEnd()
      if (res.code !== 200) return this.$message.error(res.msg)
      this.obj = res.data
    },
    handleRight (item) {
      this.form.item = item
      this.right.showRight = true
    },
    handleCancel () {
      this.right.showRight = false
    },
    handleSubmit () {
      this.right.showRight = false
    },
    async handleList () {
      let res = await apiResultRecordDetail({ resultRecordId: this.$route.query.id })
      this.handleGetTbale()
      if (res.code !== 200) return
      const arr = res.data.flowRecordList.concat([])
      for (let i in res.data.flowRecordList) {
        arr.shift()
        res.data.flowRecordList[i][arr.some(j => j.status === 1) ? 'isGou' : 'isActive'] = true
        if (!arr.some(j => j.status === 1)) break
      }
      this.formList = res.data
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.performance {
  overflow: auto;
  .chooseManage-item {
    padding: 10px 0;
    border-bottom: 1px solid @borderColor;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-center{
      min-width: 200px;
      .center()
    }
  }
  &-content {
    .comment{
      width: 200px;
      margin: 0 0 0  50px;
      padding: 10px;
      background: rgb(240, 240, 240);
      border-radius: 4px;
      pre{
        white-space: pre;
          white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
              }
    }
    padding: 28px;
    margin: 10px 0 50px;
    // height: 700px;
    // overflow: auto;

    &-top {
      border-bottom: 1px solid @borderColor;
      padding-bottom: 20px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &-center {
      display: flex;
      flex-wrap: wrap;
      margin: 20px 0;

      &-item {
        text-align: center;
        padding: 10px 60px;
        margin: 4px 0;
        font-size: 12px;
        position: relative;
        background: #f5f5f5;
        position: relative;
      }
      .active {
        background: @fontBlue;
        color: #fff;
      }
      .left::before {
        content: "";
        width: 20px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: url(./img/left.png) no-repeat;
        background-size: 100% 100%;
      }
      .right::after {
        content: "";
        width: 20px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background: url(./img/right.png) no-repeat;
        background-size: 100% 100%;
      }
    }
    &-jilu {
      &-title {
        padding: 20px 0 10px 0;
      }
      &-item {
        padding: 0 0 0 10px;
        &-time {
          margin: 4px 0;
          font-size: 14px;
          position: relative;
        }
        &-time::before {
          position: absolute;
          left: -16px;
          top: 0;
          content: "";
          bottom: 0;
          margin: auto;
          width: 10px;
          height: 10px;
          background: @fontBlue;
          overflow: hidden;
          border-radius: 50%;
        }
        &-content {
          padding: 0 0 0 10px;
          display: flex;
          min-height: 60px;
          align-items: center;
          span {
            font-size: 14px;
          }
          .mubiao {
            color: @fontBlue;
            margin: 0 4px;
          }
          &-img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
