<!--  -->
<template>
  <div class="performance">
    <SmallNav />
    <div class="performance-content boderAndRadius">
      <!-- <div class="performance-content-top">
            <div class="performance-content-top-left">
               <el-select size="small" v-model="form.value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </div>
            <div class="performance-content-top-right">
               <el-button size="small" @click="handleChangeTtitle" plain>沟通管理</el-button>
               <el-button size="small" plain>管理</el-button>
            </div>
          </div> -->
      <div class="performance-content-title">
        <InfoHeader :obj="{
                name:obj.currentApprovalStaffName,
                departmentName:obj.departmentName
                }" />
        <div class="performance-content-title-right">
          <el-button
            size="mini"
            @click="handleZhiding"
            type="primary"
          >制定目标</el-button>
        </div>
      </div>
      <div class="performance-content-center">
        <div
          class="performance-content-center-item"
          :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.status ===1 && !i.isActive"
                  style="color:#3ba1ff;margin:0 0 0 4px;font-weight:800;"
                  class="el-icon-check"
                ></i></span>
              <i
                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.status ===1 && !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
          v-if="obj.length !==0"
          :obj='obj'
        />
      </div>
      <div 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
                src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2346299354,1694591848&fm=26&gp=0.jpg"
                alt=""
              >
            </div>
            <div>
              <span>{{i.staffName}}</span><span class="mubiao">#{{i.optDesc}}#</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <popup-right
      v-if="right.showRight"
      @cancel='handleCancel'
      @submit="handleSubmit"
      :footer='true'
      :title="form.item.flowName"
    >
      <div
        slot="content"
        class="chooseManage"
      >
        <div
          class='chooseManage-item'
          :key="index"
          v-for="(i,index) in form.item.flowDetailRespList"
        >
          {{i}}
        </div>
        <!-- <div v-for="i in rightList" :key="i.id" class="chooseManage-item" >
                  <el-checkbox :true-label='1' :false-label='0' :disabled='i.isDisable===1' :checked='i.isDisable===1' v-model='i.isSelect'></el-checkbox><span class='commonFont' style="margin:0 0 0 10px;">{{i.staffName}} </span>
              </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 { apiResultRecordDetail, apiResultGetDetail } from '@/api/assessment'
import tables from './components/table'

export default {
  data () {
    return {
      right: {
        showRight: false
      },
      form: {},
      formList: {
        flowRecordList: [],
        resultCommentList: []
      },
      obj: {
        recortModelDtos: []
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }]
    }
  },
  components: {
    SmallNav,
    InfoHeader,
    PopupRight,
    tables
  },
  computed: {},
  beforeMount () { },
  mounted () {
    this.handleList()
    this.handleGetTbale()
  },
  methods: {
    // 制定目标
    handleZhiding () {
      this.$router.push({
        name: 'assessment-goals',
        query: {
          id: this.$route.query.id
        }
      })
    },
    async handleGetTbale (id = 226) {
      let res = await apiResultGetDetail({ id })
      this.obj = res.data
      console.log('res: ', res)
    },
    handleRight (item) {
      console.log('item: ', item)
      this.form.item = item
      this.right.showRight = true
    },
    handleCancel () {
      this.right.showRight = false
    },
    handleSubmit () {
      this.right.showRight = false
    },
    async handleList () {
      // resultRecordId = == this.$route.query.id
      let res = await apiResultRecordDetail({ resultRecordId: 215 })
      if (res.code !== 200) return
      for (let i in res.data.flowRecordList) {
        if (res.data.flowRecordList[i].status !== 1) {
          res.data.flowRecordList[i - 1].isActive = true
          break
        }
      }
      this.formList = res.data
      console.log('res: ', res)
    },
    handleChangeTtitle () {
      // this.$route
      console.log('this.$route: ', this.$route.meta.title = '123')
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.performance {
  overflow: auto;
  .chooseManage-item {
    padding: 24px 0;
    border-bottom: 1px solid @borderColor;
  }
  &-content {
    padding: 28px;
    margin: 10px 0;
    // 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: 16px;
        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>
