<template>
  <div class="efficiency_task_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow>
    </van-nav-bar>
    <div class="body_com has_header">
      <scroller ref="my_scroller">
        <van-cell-group>
          <div class="tip" slot="title">任务按预期完成可得月平衡分，最终得分根据实际情况上下浮动</div>
          <van-field required label="月平衡分" name="月平衡分" type="Number" v-model="score" placeholder="请输入分值" />
        </van-cell-group>
        <van-cell-group>
          <div class="tip" slot="title">建议部门经理或人事主管作为月绩效终审人</div>
          <EmployeeSelectorCell bar-title="选择终审人" required v-validate="'required'" title="终审人" use_employee_list :employee_list="reviewed_score" v-model="reviewed"  :multi="false" />
        </van-cell-group>
        <van-cell-group>
          <div class="tip" slot="title">监察员可查看此员工的月绩效，参与月终的绩效评审</div>
          <EmployeeSelectorCell title="监察员"  bar_title="选择监察员"  :can_select_dept="false" :max="10" :dept_multi="false" v-model="inspector" />
        </van-cell-group>
        <div style="padding: 0.32rem">
          <van-button type="info" block @click="sava_btn">保存</van-button>
        </div>
      </scroller>
      <van-popup v-model="show_date" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          :min-date="minDate"
          :formatter="formatter"
          @confirm="datetime_confirm"
          @cancel="datetime_cancel"
        />
      </van-popup>
    </div>

  </div>
</template>
<script>
import request from '@/utils/request'
import moment from 'moment'
import Vue from 'vue'
import EmployeeSelectorCell from '@/components/common/EmployeeSelectorCell'
import EmployeeSelector from '@/components/common/EmployeeSelector'

import {DatetimePicker, ActionSheet} from 'vant'
Vue.use(DatetimePicker).use(ActionSheet)
export default {
  name: 'efficiency_task_edit',
  // 数据
  data () {
    return {
      package_id: 0,
      title: '修改绩效工作',
      include_self: false,
      currentDate: new Date(),
      show_date: false,
      datetime: '',
      performance_ex: false,
      executor_scope: [],
      employee_list: [],
      implement: 0,
      reviewed_score: [],
      reviewed: [],
      score: '',
      inspector: [],
      notice_ids: '',
      minDate: new Date(),
      actions: [{ name: '修改绩效' }]
    }
  },
  mounted () {
    if (this.$route.query.target_id) {
      let employee = this.$store.getters.employee_map[this.$route.query.target_id]
      if (employee) {
        if (employee.img_url == '') {
          employee.img_url = 'static/images/defalut_custmer_headicon.png'
        }
        this.employee_list = [employee]
        this.implement = this.$route.query.target_id
      }
    }
    if (this.$store.getters.user_info.employee_detail.manage_scope.length > 0) {
      this.executor_scope = this.$store.getters.user_info.employee_detail.manage_scope
    }
    if (this.$route.query.package_date) {
      let datetime = this.$route.query.package_date
      this.datetime = datetime
    }
    this.get_info()
  },
  // 组件
  components: {
    EmployeeSelectorCell, EmployeeSelector
  },
  watch: {
    implement (val) {
      this.get_performance_info()
    },
    datetime (val) {
      this.get_performance_info()
    }
  },
  // 方法
  methods: {
    get_info () {
      let self = this
      self.showLoading()
      request('get', '/api/integral/performance/info', {employee_id: this.$route.query.employee_id, month: this.$route.query.month}).then((res) => {
        self.$toast.clear()
        if (res.data.code == '1') {
          self.score = res.data.data.base_point
          self.package_id = res.data.data.id
          self.employee_list = [{
            id: res.data.data.employee_id,
            name: res.data.data.employee_name,
            img_url: res.data.data.employee_img_url
          }]
          self.reviewed_score = self.$store.getters.employee_map[res.data.data.employee_id].superior_list

          self.reviewed = [{
            id: res.data.data.reviewer_id,
            name: res.data.data.reviewer_name,
            img_url: res.data.data.reviewer_img_url
          }]
          self.inspector = res.data.data.notice_info
        } else {
          self.$toast(res.data.msg)
        }
      }).catch((e) => {
      })
    },
    sheet_select (action, index) {
      if (action.name == '修改绩效') {
        this.post_data()
      }
    },
    intersection (arr) {
      const arrSet = []
      const intersectionSet = new Set()
      arr.forEach(items => {
        arrSet.push(new Set(items.map(item => item.id)))
        items.forEach(item => intersectionSet.add(item.id))
      })

      return [...intersectionSet].filter(item => arrSet.every(set => set.has(item)))
    },

    get_performance_info () {
      let self = this
      if (self.implement == 0 || self.datetime == '') {
        return false
      }
      request('get', '/api/integral/performance/info', {employee_id: self.implement, month: self.datetime}).then((res) => {
        if (res.data.code == '1') {
          if (res.data.data.id > 0) {
            self.performance_ex = true
            self.$dialog.confirm({
              confirmButtonText: '去看看',
              message: self.employee_list[0].name + self.datetime.substring(self.datetime.length - 2, self.datetime.length) + '已有绩效，前去看看?'
            }).then(() => {
              self.efficiency_detail()
            })
          } else {
            self.performance_ex = false
          }
        }
      }).catch((e) => {
      })
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    datetime_confirm (data) {
      this.show_date = false
      this.datetime = moment(data).format('YYYY-MM')
    },
    datetime_cancel () {
      this.show_date = false
    },
    post_data () {
      let self = this
      if (this.score % 100 > 0) {
        this.$toast('月平衡分请输入100的倍数')
        return false
      }
      self.notice_ids = []
      for (let i in self.inspector) {
        self.notice_ids.push(self.inspector[i].id)
      }
      let data = {
        package_id: self.package_id,
        base_point: self.score,
        reviewer_id: self.reviewed[0].id,
        notice_ids: self.notice_ids,
        type: 2
      }
      self.showLoading()
      request('put', '/api/integral/performance', data).then((res) => {
        if (res.data.code == 1) {
          self.$toast.clear()
          self.$toast.success(res.data.msg)
          self.$keep_alive_update('efficiency_detail_update', {})
          setTimeout(() => {
            self.$route_back()
          }, 500)
        } else {
          self.$toast.clear()
          self.$toast(res.data.msg)
        }
      }).catch((e) => {
        self.$toast.clear()
      })
    },
    sava_btn () {
      let self = this
      self.$validator.validate().then(result => {
        if (!self.score) {
          self.$notify({ type: 'danger', message: '请输入月平衡分'})
        } else if (Number.isInteger(Number(self.score)) === false) {
          self.$notify({ type: 'danger', message: '月平衡分必须是整数'})
        } else if (self.reviewed.length == 0) {
          self.$notify({ type: 'danger', message: '请选择终审人'})
        } else {
          self.post_data()
        }
      })
    }
  }

}
</script>
<style rel="stylesheet/less" lang="less" scoped>
.body_com{height: calc(100% - 1rem); position: relative;}
.tip{
  font-size: .24rem;
  color: #909399;
  line-height: .34rem;
  background-color: rgb(245, 245, 245);
  span{
    color: #26a2ff;
    text-decoration: underline;
  }
}
.red{
  color: #F56C6C;
}
.efficiency_task_box /deep/ .van-datetime-picker .van-picker__cancel{
  width: 50%;
}
.efficiency_task_box /deep/ .van-datetime-picker .van-picker__cancel:nth-child(1){
  color:#323232;
  border-right:none;
}
.efficiency_task_box /deep/ .selected_btn .van-button--primary{
  background:#238dfa;
  border:0.02rem solid #238dfa;
}
.efficiency_task_box /deep/ .bottom_menu .selected_box .name_mini{
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
