<!--  -->
<template>
    <div class="goals">
        <SmallNav />
        <div class="goals-content boderAndRadius">
          <div class="goals-content-name">
            <InfoHeader :obj="{
                name:obj.currentApprovalStaffName,
                departmentName:obj.departmentName
              }"/>
              <div>

              </div>
          </div>
          <div class="goals-content-tabbar">
            <el-tabs
              :value="activeId"
             >
              <el-tab-pane
              v-for="(i,index) in obj.recortModelDtos"
              :key="i.id"
              :label="i.name"
              :name="String(i.id)">
                   <div  class="goals-content-tabbar-table">
                  <div class="goals-content-tabbar-table-header commonFont">
                    <span style="width:30%">指标名称</span>
                    <span style="width:30%">考核标准</span>
                    <span style="width:30%">权重</span>
                    <span style="width:10%">操作</span>
                  </div>
                  <div
                    style="justify-content:center;"
                    v-if="handleFilter(i.detailDtos).length===0"
                   class="goals-content-tabbar-table-content commonFont items">
                    暂无指标
                  </div>
                  <draggable
                    v-model="i.tagetLibItems"
                    :options='options1'
                    >
                  <div
                    class="goals-content-tabbar-table-content commonFont items"
                    v-for="(j,indexJ) in handleFilter(i.detailDtos)"
                    :key="indexJ"
                    >
                      <div style="width:30%"><i style="margin-right:6px;"  class="my-handle el-icon-s-operation"></i>{{j.target}}</div>
                      <div style="width:30%">{{j.keyResult}}</div>
                      <div style="width:30%">{{ Math.round((j.checkWeight * 100)*1000)/1000}}%</div>
                      <div style="width:10%">
                            <el-button
                          @click="hanidleEdit(j,indexJ,index)"
                          type="text"
                          size="small">
                          编辑
                        </el-button>
                        <el-button
                          @click="handleDelateWeidu(j,indexJ,index)"
                          type="text"
                          size="small">
                          删除
                        </el-button>
                      </div>
                  </div>
                  </draggable>
                  <div style=" padding: 10px;font-size:16px;" class="commonFont">
                    <div>
                      业务指标权重：{{handleGetWeight(i)}}%/{{Math.round((i.weight * 100)*1000)/1000}}%
                    </div>
                    <div>
                      所有指标总权重: {{ Math.round((obj.weight * 100)*1000)/1000}}%
                    </div>
                  </div>
                  <div style=" padding: 10px;">
                    <!-- <el-button size="mini"  plain>选择指标项</el-button> -->
                    <el-button  @click="hanidleEdit(i,-1,index)" size="mini" plain>增加指标项</el-button>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <popup-right v-if="showIndicators" @cancel='handleCancelZhibiao' @submit="handleSubmitZhibiao" :title="zhibiaoTitle">
            <div slot="content" class="weiduManage">
              <el-form label-position="left" ref="formIndicators" :model="formIndicators" :rules="ruleIndicators" label-width="180px">
                   <el-form-item label="指标类型">
                     <el-select v-model="formIndicators.type"  disabled placeholder="请选择维度类型">
                      <el-option
                        v-for="i in dimensionsList"
                        :key="i.id"
                        :label="i.name"
                        :value="i.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="target" label='指标名称'>
                    <el-input clearable size="small" v-model="formIndicators.target"></el-input>
                  </el-form-item>
                   <el-form-item label="考核标准" prop="keyResult">
                    <el-input size="small" clearable  type="textarea"  v-model="formIndicators.keyResult"></el-input>
                  </el-form-item>
                   <el-form-item label="权重" prop="weight">
                     <el-input size="small" @input.native="$handleInputInt('formIndicators.checkWeight')"  clearable  v-model="formIndicators.checkWeight">
                       <template slot="append">%</template>
                     </el-input>
                  </el-form-item>
              </el-form>
            </div>
          </popup-right>
          <div class="goals-bottom">
            <div class="goals-bottom-content">
              <el-button size='small' @click="handleSaveDetail()" plain>暂存</el-button>
                <el-button size='small' type="primary" @click="handleGetNext" >提交</el-button>
            </div>
          </div>
    </div>
</template>

<script>
import SmallNav from '@/components/kpi-layout/SmallNav'
import InfoHeader from '@/components/InfoHeader'
import PopupRight from '@/components/PopupRight'
import draggable from 'vuedraggable'
import {getDimensions} from '@/api/data'
import { apiResultGetDetail, apiSaveDetail, apiSaveapproval } from '@/api/assessment'
export default {
  data () {
    return {
      zhibiaoTitle: '添加指标',
      showIndicators: false,
      dimensionsList: [],
      formIndicators: {},
      ruleIndicators: {
        target: [{ required: true,
          message: '请输入指标名称',
          trigger: 'blur' }
        ],
        keyResult: [{ required: true,
          message: '请输入考核标准',
          trigger: 'blur' }
        ],
        checkWeight: [{ required: true,
          message: '请输入权重大小',
          trigger: 'blur' }
        ]
      },
      activeId: null,
      obj: {
        recortModelDto: []
      },
      options1: {
        group: 'names',
        draggable: '.items',
        handle: '.my-handle',
        scroll: true,
        sort: true, // 内部排序列表
        delay: 0, // 以毫秒为单位定义排序何时开始。
        touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
        disabled: false, // 如果设置为真，则禁用sortable。
        store: null, // @see Store
        animation: 150 // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
      }
    }
  },
  components: {
    SmallNav,
    InfoHeader,
    draggable,
    PopupRight
  },
  computed: {},
  beforeMount () {},
  mounted () {
    this.handleGetDimensions()
    this.handleGetTbale()
  },
  methods: {
    async handleGetNext () {
      for (let i in this.obj.recortModelDtos) {
        if (!this.obj.recortModelDtos[i].isTrue) {
          this.$message.error(this.obj.recortModelDtos[i].name + '维度内的权重和必须为' + Math.round((this.obj.recortModelDtos[i].weight * 100) * 1000) / 1000)
          return
        }
      }
      let res1 = await apiSaveDetail(this.obj)
      if (res1.code !== 200) {
        this.$message.error(res1.msg)
        return
      }
      const obj = {status: 1, menuName: this.tableInfo.result ? '提交了结果值' : '提交了评分'}
      const params = Object.assign({}, {resultRecordId: this.$route.query.id || ''}, obj)
      let res = await apiSaveapproval(params)
      if (res.code !== 200) {
        this.$message.error(res.msg)
        return
      }
      this.$message({
        message: res.msg,
        type: 'success'
      })
      history.go(0)
    },
    handleGetWeight (arr) {
      const weight = arr.detailDtos.reduce((num, i) => {
        num += i.isDelete !== 1 ? i.checkWeight : 0
        return num
      }, 0)
      arr.isTrue = weight === arr.weight
      return Math.round((weight * 100) * 1000) / 1000
    },
    async handleSaveDetail (params = this.obj) {
      console.log('params: ', params)
      for (let i in params.recortModelDtos) {
        if (!params.recortModelDtos[i].isTrue) {
          this.$message.error(params.recortModelDtos[i].name + '维度内的权重和必须为' + Math.round((params.recortModelDtos[i].weight * 100) * 1000) / 1000)
          return
        }
      }
      let res = await apiSaveDetail(params)
      if (res.code !== 200) {
        this.$message.error(res.msg)
        return
      }
      this.$message({
        message: res.msg,
        type: 'success'
      })
      this.handleGetTbale()
    },
    // 获取维度类型
    async handleGetDimensions () {
      try {
        let res = await getDimensions()
        if (res.code !== 200) {
          this.dimensionsList = []
          return
        }
        res = res.data
        this.dimensionsList = res
      } catch (error) {
        this.$message.error(error.msg)
      }
    },
    handleCancelZhibiao () {
      this.showIndicators = false
    },
    handleSubmitZhibiao () {
      this.$refs.formIndicators.validate((v) => {
        if (v) {
          if (this.formIndicators.index === -1) {
            this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].detailDtos.push(Object.assign({}, this.formIndicators, {checkWeight: this.formIndicators.checkWeight / 100}))
            console.log('this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].: ', this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex])
          } else {
            this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].detailDtos[this.formIndicators.index] = Object.assign({}, this.formIndicators, {checkWeight: this.formIndicators.checkWeight / 100})
          }
          this.showIndicators = false
        }
      })
    },
    handleAddIndicators (item) {
      console.log(item)
      this.showIndicators = true
      this.formIndicators = Object.assign({}, item)
    },
    // 编辑
    hanidleEdit (item, index, type) {
      if (index === -1) {
        this.formIndicators = {}
      } else {
        this.formIndicators = Object.assign({}, item)
        this.formIndicators.checkWeight = this.formIndicators.checkWeight * 100
      }
      this.formIndicators.dazhibiaoIndex = type
      this.formIndicators.index = index
      this.formIndicators.type = item.type
      this.showIndicators = true
    },
    handleDelateWeidu (item, index, type) {
      if (item.id) {
        item.isDelete = 1
        this.$forceUpdate()
        return
      }
      this.obj.recortModelDtos[type].detailDtos = this.obj.recortModelDtos[type].detailDtos.filter(i => i !== item)
      this.$forceUpdate()
    },
    handleFilter (item) {
      return item ? item.filter(i => !i.isDelete) : []
    },
    async handleGetTbale (id = this.$route.query.id) {
      let res = await apiResultGetDetail({id})
      if (res.code !== 200) return
      this.obj = res.data
      this.activeId = String(res.data.recortModelDtos[0].id)
      console.log('res: ', res)
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.goals{
  margin-bottom: 100px;
  position: relative;
  .my-handle{
    cursor: move ;
  }
  &-bottom{
    position: fixed;
    height: 60px;
    border-top: 1px solid @borderColor;
    padding: 0 80px;
    width: 100%;
    background: #fff;
    bottom: 0;
    left: 0;
    &-content{
      width: 1360px;
      margin: 0 auto;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  &-content{
    padding: 28px;
    &-name{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &-title{
      margin: 0 0 10PX 0;
      display: flex;
      align-items: center;
      &-img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      &-right{
        margin-left: 20px;
        display: flex;
        flex-direction: column;
      }
    }
    &-tabbar{
      &-table{
        &-header{
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 60px;
          background: rgb(231, 231, 231);
          border-bottom: 1px solid @borderColor;
          span{
            padding:0 0 0 20px;
          }
        }
        &-content{
           display: flex;
            align-items: center;
          height: 60px;
          border-bottom: 1px solid @borderColor;
          justify-content: space-between;
          div{
            padding:0 0 0 20px;
          }
        }
      }
    }
  }
}
</style>
