<template>
  <div class="app-container goodsOrder">
    <div class="orderTable">
      <!--列表表头-->
      <div class="title">

        <div class="titleTop">
          <el-steps :active="active">
            <el-step
              v-for="(item, i) in stepList"
              :key="i"
              :class="{ refuse: item.status === 3 }"
              :title="item.statusStr"
            >
              <div slot="description">{{ item.time }}</div>
              <div slot="icon">{{ item.name }}</div>
            </el-step>
          </el-steps>
        </div>
        <div class="titleCenter">
          <span>考核月份：<b>{{checkMonth}}</b></span>
          <span>员工姓名：<b>{{ staffName }}</b></span>
          <span>一级部门：<b>{{ department1 }}</b></span>
          <span>二级部门：<b>{{ department2 }}</b></span>
          <span>三级部门：<b>{{ department3 }}</b></span>
          <span >直属上级:<b>{{ superStaff }}</b></span>



        <div class="titleBottom">
          <div class="bottom" v-show="this.auth.commit == 1" >
            <p><span style="cursor: pointer" @click="commitApprovalYes('你确认要提交审批吗？')">提交审批</span></p>
          </div>

          <div class="bottom" v-show="this.auth.approvel == 1">
            <p>
              <span  @click="commitApprovalAddOrUpdate(1)">
                <label :class="'label bg-order my_pointer'">审批</label>
              </span>
            </p>
          </div>

          <div class="bottom" v-show="this.auth.confirmCommit == 1">
            <p><span style="" @click="commitApprovalYes('你要确认得分吗？')">确认得分</span></p>
          </div>

          <div class="bottom" v-show="this.auth.reject === 1">
            <p><span  @click="commitApprovalAddOrUpdate(5)" ><label :class="'label bg-danger my_pointer'">驳回</label></span></p>
          </div>

          <div class="bottom" v-show="this.auth.uploadFile === 1 ">
            <p><span  @click="uploadDownFile(1)" ><label :class="'label bg-info my_pointer'">上传附件（{{fileCount}}）</label></span></p>
          </div>

          <div class="bottom" >
            <p><span  @click="uploadDownFile(2)" ><label :class="'label bg-info my_pointer'">下载附件（{{fileCount}}）</label></span></p>
          </div>
        </div>
        </div>

      </div>
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        :cell-style="cellStyle"
        :max-height="clientHeight"
        v-loading.body="loading"
        element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="考核维度" prop="checkRange" align="center" width="80"></el-table-column>
        <el-table-column label="目标/指标" prop="target" align="left" width="200">
          <template slot-scope="scope">
            <div v-html="scope.row.target"  class="rich">
            </div>
          </template>
        </el-table-column>

        <el-table-column label="关键结果" prop="keyResult" align="left" width="350">
          <template slot-scope="scope" >
            <div v-html="scope.row.keyResult"  class="rich">
            </div>
          </template>

        </el-table-column>
        <el-table-column label="考核权重" prop="checkWeight" align="center" >
          <template slot-scope="scope">
            <div class="conatnt-name">
              <span style="color: blue">{{ scope.row.checkWeight | getcheckWeightStr }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="考核结果（员工填写）" prop="checkResult" width="350" align="left">
          <template slot-scope="scope">
            <div v-html="scope.row.checkResult" class="rich">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="直属上级评分(100%）" prop="superScore"  align="left" width="160"></el-table-column>
        <el-table-column label="得分" prop="acquireScore" align="center">
          <template slot-scope="scope">
            <div class="conatnt-name">
              <span style="color: red">{{ scope.row.acquireScore  }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="评分说明（直属上级填写）" width="300" prop="scoreComment">
          <template slot-scope="scope">
            <div v-html="scope.row.scoreComment" class="rich">
            </div>
          </template>
        </el-table-column>
        <el-table-column width="80" label="操作" v-if="(auth.add === 1 || auth.edit == 1) && hasOperator" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" style="margin-left:0px;" @click="handleAddOrUpdate(0,scope.row.type )" v-if="scope.row.isAdd===1 &&  auth.add == 1 ">添加</el-button>
            <el-button size="mini" style="margin-left:0px;" @click="handleAddOrUpdate(scope.row.id,scope.row.type)" v-if="scope.row.isEdit > 0 && auth.edit == 1">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <approval-add-or-update v-if="approvalVisible" ref="approvalAddOrUpdate" @refreshDataList="getDataList"></approval-add-or-update>
      <upload-add-or-update v-if="uploadVisible" ref="uploadAddOrUpdate" @refreshDataList="getDataList"></upload-add-or-update>
    </div>
  </div>
</template>

<script>
import {getStaffResultDetail, commitApproval} from '@/api/api_result'
import AddOrUpdate from './recorddetail-add-or-update'
import ApprovalAddOrUpdate from './approval-add-or-update.vue'
import UploadAddOrUpdate from './upload-add-or-update.vue'

export default {
  created () {
    console.log(window.innerHeight)
    this.clientHeight = window.innerHeight - 273
    console.log(this.clientHeight)
    this.stepList.forEach(item => item.name = item.name.slice(-2))
  },
  filters: {
    getcheckWeightStr (val) {
      if (isNaN(val)) {
        val = '0'
      }
      val = val * 100
      let sign = (val === (val = Math.abs(val)))
      val = Math.floor(val * 100 + 0.50000000001)
      let cents = val % 100
      val = Math.floor(val / 100).toString()
      if (cents < 10) {
        cents = '0' + cents
      }
      for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
        val = val.substring(0, val.length - (4 * i + 3)) + ',' + val.substring(val.length - (4 * i + 3))
      }
      return (((sign) ? '' : '-') + val + '.' + cents) + '%'
    }
  },
  data () {
    return {
      active: 3,
      type: 1,
      hasOperator: false,
      recordResultId: 0,
      tableData: [],
      yeJiCheckNum: 4,
      wenHuaJiaZhiGuanNum: 2,
      lastResultNum: 2,
      commentNum: 1,
      checkMonth: '',
      staffName: '',
      department1: '',
      department2: '',
      department3: '',
      superStaff: '',
      addOrUpdateVisible: false,
      approvalVisible: false,
      uploadVisible: false,
      loading: false,
      auth: [],
      recordType: 0,
      fileCount: 0,
      clientHeight: 0,
      stepList: [
        { name: '转成', time: '03-23 11:21', status: 1, statusStr: '通过' },
        { name: '转成是', time: '03-23 11:21', status: 2, statusStr: '未提交' },
        { name: '转成去', time: '03-23 11:21', status: 3, statusStr: '拒绝' },
        { name: '转成饿', time: '03-23 11:21', status: 1, statusStr: '通过' },
        { name: '转成个是', time: '03-23 11:21', status: 2, statusStr: '未提交' }
      ]
    }
  },
  components: {
    AddOrUpdate,
    ApprovalAddOrUpdate,
    UploadAddOrUpdate
  },
  activated () {
    if (this.$route.query.id >= 0) {
      this.recordResultId = this.$route.query.id
      this.recordType = this.$route.query.recordType
    }
    this.getDataList()
  },
  methods: {
    getDataList (id = this.recordResultId) {
      this.recordResultId = id
      getStaffResultDetail({
        'recordResultId': id,
        'recordType': this.recordType
      }).then(data => {
        if (data && data.code === 0) {
          this.tableData = data.list
          this.yeJiCheckNum = data.yeJiCheckNum
          this.wenHuaJiaZhiGuanNum = data.wenHuaJiaZhiGuanNum
          this.lastResultNum = data.lastResultNum
          this.commentNum = data.commentNum
          this.checkMonth = data.checkMonth
          this.staffName = data.staffName
          this.department1 = data.department1
          this.department2 = data.department2
          this.department3 = data.department3
          this.superStaff = data.superStaff
          this.auth = data.auth
          this.recordType = data.recordType
          this.recordResultId = data.recordResultId
          if (this.tableData.find(item => item.isAdd === 1 || item.isEdit === 1)) {
            this.hasOperator = true
          }
          this.$router.replace({path: '/recorddetail', query: {id: this.recordResultId, recordType: 3}})
        } else {
          this.tableData = []
        }
        this.dataListLoading = false
        this.addOrUpdateVisible = false
        this.approvalVisible = false
        this.fileCount = data.fileCount || 0
      })
    },
    // 新增 / 编辑
    handleAddOrUpdate (id, type) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.addOrUpdate.init(id, type, this.recordResultId, this.auth, this.recordType)
        }, 500)
      })
    },
    commitApprovalAddOrUpdate (val) {
      this.approvalVisible = true
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.approvalAddOrUpdate.init(this.recordResultId, this.auth, val)
        }, 500)
      })
    },
    uploadDownFile (val) {n
      this.uploadVisible = true
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.uploadAddOrUpdate.init(this.recordResultId, this.auth, val)
        }, 500)
      })
    },
    commitApprovalYes (msg = '确定要提交审批吗?') {
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        commitApproval({
          'recordResultId': this.recordResultId,
          'status': 2
        }).then(data => {
          if (data) {
            if (data.code === 0) {
              this.getDataList()
            }
            this.$message({
              message: data.msg,
              type: 'success',
              duration: 1500,
              onClose: () => {
              }
            })
          } else {
            this.$message.error('网络异常')
          }
        })
      }).catch(() => {
      })
    },
    cellStyle ({row, column, rowIndex, columnIndex}) {
      if (rowIndex === this.yeJiCheckNum || rowIndex === this.yeJiCheckNum + this.wenHuaJiaZhiGuanNum + 1 || rowIndex === this.yeJiCheckNum + this.wenHuaJiaZhiGuanNum + this.lastResultNum + 2) {
        return 'background:#DABBAF ;font-weight:bolder!important;'
      } else {
        return ''
      }
    },
    objectSpanMethod ({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: this.yeJiCheckNum,
            colspan: 1
          }
        } else if (rowIndex === this.yeJiCheckNum) {

        } else if (rowIndex === (this.yeJiCheckNum + 1)) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else if (rowIndex >= (this.yeJiCheckNum + 1 + this.wenHuaJiaZhiGuanNum) && rowIndex <= (this.yeJiCheckNum + 1 + this.wenHuaJiaZhiGuanNum + this.lastResultNum)) {

        } else if (rowIndex > this.yeJiCheckNum + 1 + this.wenHuaJiaZhiGuanNum + this.lastResultNum) {

        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      if (rowIndex === this.yeJiCheckNum) {
        if (columnIndex === 0) {
          return [1, 2]
        } else if (columnIndex === 1) {
          return [0, 0]
        }
      }

      if (rowIndex >= this.yeJiCheckNum + 1 && rowIndex < this.yeJiCheckNum + 1 + this.wenHuaJiaZhiGuanNum) {
        if (columnIndex === 1) {
          return [1, 2]
        } else if (columnIndex === 2) {
          return [0, 0]
        }
      }
      if (rowIndex === this.yeJiCheckNum + 1 + this.wenHuaJiaZhiGuanNum) {
        if (columnIndex === 0) {
          return [1, 2]
        } else if (columnIndex === 1) {
          return [0, 0]
        }
      }
      if (rowIndex >= (this.yeJiCheckNum + 1 + this.wenHuaJiaZhiGuanNum) && rowIndex <= this.yeJiCheckNum + 1 + this.wenHuaJiaZhiGuanNum + this.lastResultNum) {
        if (columnIndex === 0) {
          return [1, 2]
        } else if (columnIndex === 1) {
          return [0, 0]
        }
      }
      if (rowIndex > this.yeJiCheckNum + 1 + this.wenHuaJiaZhiGuanNum + this.lastResultNum) {
        if (columnIndex === 0) {
          return [1, 1]
        } else if (columnIndex === 1) {
          return [1, 1]
        } else if (columnIndex === 2) {
          return [1, 7]
        } else {
          return [0, 0]
        }
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.app-container {
  .el-steps{
    margin: 20px;

  }
  /deep/ .el-step__head{
    .el-step__icon.is-text{
      border: 2px solid;
      width: 40px;
      height: 40px;
      color: #999;
      border-color: #ccc;
    }
    .el-step__line{
      top: 20px;
      left: 46px;
      width: calc(100% - 53px);
      background: #ccc;
    }
    &.is-finish{
      .el-step__icon.is-text{
        color: #fff;
        border-color: #3E8EF7;
        background: #3E8EF7;
      }
    }
  }
  /deep/ .el-step__main{
    .el-step__description{
      text-indent: -10px;
      color: #999;
    }
    .el-step__title{
      width: 50px;
      text-indent: -10px;
      text-align: center;
      font-weight: bold;
      &.is-finish{
        color: #333;
      }
      &.is-process{
        color: #888;
      }
      &.is-wait{
        color: #ccc;
      }
    }
  }
  font-size: 14px;

  .tip {
    color: red;
    padding-left: 10px;
    padding-top: 5px;
  }

  .export {
    text-align: right;
    margin: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    a {
      margin: 0px 20px 0px 4px;
    }
  }

  .uploadDiv {
    display: inline-block;
  }

  .orderTable {
    margin-bottom: 10px;
    font-size: 12px;

    .title {
      display: flow;
      justify-content: space-between;
      align-items: flex-end;
      background-color: #D9EDF7;
      border: 2px solid #BCE8F1;
      color: #31708f;

      .titleLine {
        margin: 10px 0px;

        span {
          margin: 18px;
          cursor: pointer;
        }

        .logEdit {
          color: blue;
        }

        .logEdit:hover {
          text-decoration: underline;
        }
      }

      .titleTop {
        width: 100%;
        word-wrap: break-word;

        span {
          display: inline-block;
          margin: 5px 15px;
        }
      }

      .titleCenter {
        margin-top: 5px;
        width: 100%;
        word-wrap: break-word;

        span {
          display: inline-block;
          margin: 0 10px;
        }
      }

      .titleBottom{
        margin:5px;
        font-weight:bold;
        font-size:14px;
        color:#7266ba;
        height: 30px;

        .bottom{
          float: right;
          color: blue;
          width: 120px;
          height: 30px;
          text-align: left;
          p{
            margin: 5px 0;
          }
          .des{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          span{
            margin-left: 20px;
          }
        }
      }

    }

    .typeItem {
      margin-bottom: 5px;
    }

  }

  .relation {
    padding: 5px 0 15px;
  }

  .contEdit {
    color: #23b7e5;
    cursor: pointer;
  }
}

.goodsLog {
  height: 500px;
  overflow-y: scroll
}

.refund-wrapper {
  width: 80%;

  .item-line {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .left-content {
    text-align: right;
    width: 120px;
    margin-right: 20px;

    .left-tip {
      color: red;
    }
  }

  .right-content {
    width: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    p {
      margin: 0;
    }

    .right-item {
      margin-top: 10px;
    }

    .middle-tip {
      margin-bottom: 15px;
    }

    .tip {
      color: red;
      font-size: 12px;
    }
  }
}

.deliver-title {
  font-weight: bold;
  margin-bottom: 20px;
}

.igo-form-item {
  width: 160px;
}

// 包裹信息相关样式
.package-content {
  position: relative;

  .package-name {
    position: absolute;
    bottom: 30px;
    left: 10px;
  }

  .package-delete {
    position: absolute;
    bottom: 25px;
    left: 400px;
  }
}

.package-btn {
  margin-left: 10px;
}

.package_info {
  margin-bottom: 10px;
  font-weight: bold;
}

// 计算按钮相关样式
.calculation-box {
  position: relative;

  .calculation-btn {
    position: absolute;
    bottom: -20px;
    left: 70px;
  }
}

.remark-list {
  margin-top: -25px;
  list-style: none;
  margin-bottom: 20px;

  .remark-state-box {
    color: #999;

    span {
      margin-right: 40px;
    }

    .isSolve {
      color: red;
    }
  }
}

.item-err {
  color: red;
  line-height: 1;
  position: absolute;
  top: 111%;
  left: 146px;
  font-size: 12px;
}
.label{
  display: inline-block;
  padding: 3px 5px;
  font-size: 75%;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}
// label状态
.bg-info {
  color: #dcf2f8;
  background-color: #23b7e5;
}
.bg-order {
  color: #dcf2f8;
  background: #1f07d2;
}
.bg-type{
  color: #dcf2f8;
  background-color: #4e3692;
}
.bg-success {
  color: #c6efd0;
  background-color: #27c24c;
}
.bg-danger {
  color: #ffffff;
  background-color: #f05050;
}
.bg-gray {
  color: #ffffff;
  background-color: #666;
}
.tableTitle{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  background-color: #D9EDF7;
  border: 2px solid #BCE8F1;
  color: #31708f;
}
//图标
.icon-img{
  display:inline-block;
  vertical-align:-2px;
  width:12px;
  height:14px;
  background-position:center center;
  background-size:12px 14px;
}
.icon-through{
  background-image:url("~@/assets/img/icon/icon-through.png");
}
.icon-audit-success{
  background-image:url("~@/assets/img/icon/icon-audit-success.png");
}
.icon-audit-fail{
  background-image:url("~@/assets/img/icon/icon-audit-fail.png");
}
.icon-confirm-good{
  background-image:url("~@/assets/img/icon/icon-confirm-goods.png")
}
.icon-returnMoney{
  background-image:url("~@/assets/img/icon/icon-returnMoney.png")
}
.icon-returnGood{
  background-image:url("~@/assets/img/login/bbb.png")
}
.thumb-wrapper {
  padding: 2px;
  border: 1px solid #dee5e7;
}
.underline:hover{
  cursor:pointer;
  text-decoration:underline;
}
.red{
  color:red;
}
.blue{
  color:blue;
}
b{
  font-size:14px;
}
.page {
  text-align: right;
  padding: 15px;
}


.my_pointer{
cursor: pointer
}
</style>
