<!--  -->
<template>
  <div class="performance">
    <SmallNav v-if="!isNoRouter" />
    <div v-if="isNoRouter"
         style="margin:20px 0;"
         class="commonFont">我的绩效</div>
    <div class="performance-content boderAndRadius">
      <div v-if="isNoRouter"
           class="isNoRouter commonFont">
        <el-cascader style="width:210px;"
                     v-if="isNoRouter"
                     :key="key"
                     v-model="startId"
                     size="mini"
                     :props="props"
                     :options="timeOptions"
                     @change="handleChange"></el-cascader>
      </div>

      <div v-if="!isNoList"
           class="performance-content-title">
        <InfoHeader :obj="{
                src:obj.avatar || '',
                name:obj.staffName,
                departmentName:obj.departmentName
                }" />
        <div class="performance-content-title-right">
          <UseButton :obj='obj'
                     :resultRecordId='resultRecordId'
                     v-if="isShow && !tableInfo.result && !tableInfo.score && obj.recortModelDtos.length !==0"
                     :formList='formList'
                     :tableInfo.sync='tableInfo' />
        </div>
      </div>
      <div v-if="!isNoList"
           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 v-if="!isNoList"
           class="performance-content-bottom">
        <tables :resultRecordId='String(resultRecordId)'
                :tableAuth='formList.auth'
                :tableInfo.sync='tableInfo'
                v-if="obj.recortModelDtos.length !==0"
                :obj='obj' />
      </div>
      <div v-if="!isNoList">
        <div v-if="formList.resultCommentList.length !== 0 "
             class="performance-content-jilu">
          <div class="performance-content-jilu-title commonFont">
            记录
          </div>
          <div v-for="(i) in formList.resultCommentList"
               :key="i.id"
               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">
                <InfoHeader :isShow='false'
                            :obj='{src:i.avatar}' />
              </div>
              <div>
                <span>{{i.staffName}}</span><span class="mubiao">#{{i.optDesc}}#</span>
              </div>
            </div>
            <div class="comment"
                 v-if="i.comment">
              <pre>{{i.isShow?i.comment:(i.comment.substring(0,12)+'...')}}</pre>
              <div style="width:40px;flex-shrink:0; cursor: pointer;"
                   @click="handleShow(i)">{{!!i.isShow?'收起':'展开'}}</div>
            </div>
          </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 :resultRecordId='resultRecordId'
                       :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'
import { getStartsData } from '@/api/report'
export default {
  props: {
    isNoRouter: {
      type: Boolean,
      deafult: false
    }
  },
  data () {
    return {
      isNoList: false,
      key: 0,
      startIds: '',
      timeOptions: [{
        startId: 0,
        time: '月度',
        children: []
      }, {
        startId: 1,
        time: '自定义',
        children: []
      }],
      props: {
        value: 'startId',
        label: 'time',
        expandTrigger: 'hover',
        level: true
      },
      startId: [],
      resultRecordId: null,
      isShow: false,
      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.handleGetTbale({ id: this.$route.query.id || '' })
    if (this.isNoRouter) {
      await this.handleStartsReq()
    }

    await this.handleList()
  },
  methods: {
    handleShow (item) {
      item.isShow = !item.isShow
      console.log(item)
      this.$forceUpdate()
    },
    async handleChange (item) {
      this.startId = item
      await this.handleGetTbale({ startId: item[1] })
      await this.handleList()
    },
    // 为了不分页直接传999
    async handleStartsReq (type, handleNode) {
      let params = {
        currentPage: 1,
        cycleType: type,
        pageSize: 999
      }
      for (let j in this.timeOptions) {
        // params.startId
        try {
          let res = await getStartsData({
            currentPage: 1,
            cycleType: this.timeOptions[j].startId,
            pageSize: 999
          })
          res = res.data
          this.key += 10
          this.timeOptions[j].children = res.list.map(i => {
            if (i.startId === this.startIds) {
              this.startId = [this.timeOptions[j].startId, i.startId]
            }
            return i
          })
        } catch (error) {
          console.log(error)
        }
      }
    },
    async handleGetTbale (params, type = false) {
      if (!type) this.$loadingStart()
      let res = await apiResultGetDetail(params)
      if (!type) this.$loadingEnd()
      this.isNoList = res.code !== 200
      if (res.code !== 200) {
        this.resultRecordId = ''
        if (!this.isNoRouter) {
          this.$message.error(res.msg)
        }
        return
      }
      this.startIds = res.data.startId
      this.resultRecordId = res.data.id
      res.data.recortModelDtos = res.data.recortModelDtos.concat([{ name: '总分', detailDtos: [] }])
      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 () {
      this.isShow = false
      let res = await apiResultRecordDetail({ resultRecordId: this.resultRecordId || this.$route.query.id || '' })
      if (res.code !== 200) return this.$message.error(res.msg)
      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
      this.formList.resultCommentList = this.formList.resultCommentList.map(i => {
        i.isShow = false
        return i
      })
      this.isShow = true
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.isNoRouter {
  display: flex;
  margin: 0 0 28px 0;
  align-items: center;
}
.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: 600px;
      display: flex;
      justify-content: space-between;
      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>
