<template>
  <div class="efficiency_detail_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow class="headerbar no-down-icon">

      <template slot="right">
        <div style="padding:0 0.32rem;" @click="openEdit()" v-show="revoke_show && ($store.getters.user_info.id == info.publisher_id)">
          <van-icon name="ellipsis" />
        </div>
      </template>
    </van-nav-bar>
    <YearMonthPicker v-model="date_value"></YearMonthPicker>
    <div class="body_com has_header">
      <div class="no_package-center" v-if="info.employee_id == 0">
        <noData  src="static/images/nomerits.png" detail_text="暂无绩效包，请创建绩效包" v-if="plus_btn"  />
        <noData  src="static/images/nomerits.png" detail_text="暂无绩效包，请创建绩效包" v-if="!plus_btn"  />
        <div class="no_package">
          <van-button @click="create_package"  v-show="plus_btn" type="info">去创建绩效包</van-button>
        </div>
      </div>

      <scroller v-else>
        <van-cell-group style="margin-top:1px;" v-if="info.employee_id > 0">
          <van-cell class="efficiency_list" :title="info.employee_name" size="large">
            <template slot="icon">
              <userImage style="margin-right:0.16rem;" :img_url="info.employee_img_url" :user_name="info.employee_name" width="0.9rem" height="0.9rem"></userImage>
            </template>
            <template slot="title">
              <div class="team_info">
                <span style="display:block;font-size:0.32rem;font-weight:bold;color:#303133"><Wxopendata type="userName" :openid="info.employee_name"></Wxopendata></span>
                <span style="display:inline-block;font-size:0.28rem;color:#909399;" v-for="(item,index) in dept_name" :key="index"><Wxopendata type="departmentName" :openid="item.depart_name"></Wxopendata><span v-if="(dept_name.length-index)>1">,</span></span>
              </div>
            </template>
            <template slot="right-icon">
              <div class="team_record">
                <span style="display:block;font-size:0.32rem;font-weight:bold;color:#303133;">{{info.base_point}}</span>
                <span style="display:block;font-size:0.28rem;color:#909399;">月平衡分</span>
              </div>
              <div class="team_record" style="padding-left: 0.1rem;" v-show="info.status == 3">
                <span style="display:block;font-size:0.32rem;font-weight:bold;color:#303133;">{{info.review_point}}</span>
                <span style="display:block;font-size:0.28rem;color:#909399;">最终得分</span>
              </div>
            </template>
          </van-cell>
          <van-cell is-link class="approval_laebl" @click="show_approval_popup = true">
            <template slot="title">
              <div class="approval_list">
                <span>终审人<userImage style="margin-right:0.16rem; display: inline-block;" :img_url="info.reviewer_img_url" :user_name="info.reviewer_name" width="0.52rem" height="0.52rem"></userImage></span>
                <span>发布人<userImage style="margin-right:0.16rem; display: inline-block;" :img_url="info.publisher_img_url" :user_name="info.publisher_name" width="0.52rem" height="0.52rem"></userImage></span>
              </div>
            </template>
          </van-cell>
        </van-cell-group>

        <van-cell-group style="text-align: center;background-color: rgb(245, 245, 245);margin-top: 0.2rem;" :border="false">
          <noData detail_text="暂无绩效工作" :list="info.work_list" />
        </van-cell-group>

       <div v-if="info.work_list && info.employee_id > 0" :style="info.reviewer_id == $store.getters.user_info.id && info.review_performance == 1?'padding-bottom:70px':''">
          <van-cell-group v-if="info.work_count>0">
            <van-cell  title-style="font-weight:bold;" :title="'工作('+info.work_count+')'">
              <template slot="right-icon">
                <van-checkbox v-model="checked">只看未完成</van-checkbox>
              </template>
            </van-cell>

            <van-cell class="detail_list" v-for="(item,index) in info.work_list" :key="index" v-if="checked && item.status == 1" :title="item.task_name" @click="show_task(item)" is-link>
              <template slot="icon">
                <van-circle
                  v-model="item.progress"
                  :rate="item.progress"
                  :speed="100"
                  size="1rem"
                  color="#26A2FF"
                  :text="item.progress + '%'"
                  style="margin-right:0.2rem;"
                />
              </template>
              <template slot="label">
                <span style="color:#26A2FF;margin-right:0.16rem;">{{item.base_point}}</span><span style="font-size:0.28rem;">权重 {{(item.base_point/info.base_point*100).toFixed(0)}}%</span>
              </template>
            </van-cell>
            <van-cell-group style="text-align: center;background-color: rgb(245, 245, 245);margin-top: 0.2rem;" v-show="uncompleList.length == 0 && checked" :border="false">
              <noData detail_text="暂无未完成绩效工作" />
            </van-cell-group>

            <van-cell v-if="!checked " v-for="(item,index) in info.work_list" :key="index" :title="item.task_name" @click="show_task(item)" is-link>
              <template slot="icon">
                <van-circle
                  v-model="item.progress"
                  :rate="item.progress"
                  :speed="100"
                  size="1rem"
                  color="#26A2FF"
                  :text="item.progress + '%'"
                  style="margin-right:0.2rem;"
                />
              </template>
              <template slot="label">
                <span style="color:#26A2FF;margin-right:0.16rem;">{{item.base_point}}</span><span style="font-size:0.28rem;">权重 {{(item.base_point/info.base_point*100).toFixed(0)}}%</span>
                <span class="approval_status font-size028" v-show="item.status == 2">待审批</span>
                <span class="approval_status font-size028" v-show="item.status == 4">已审批</span>
              </template>
            </van-cell>
          </van-cell-group>
          <div v-show="info.work_list == undefined && info.work_list.length == 0 && !checked" style="text-align: center;background-color: #F5F7FA;margin-top: 0.2rem; height: 50vh">
            <noData  detail_text="暂无绩效工作"/>
          </div>
          <div style="height: 2rem;"></div>
        </div>
      </scroller>

      <div style="padding:0.32rem;position: fixed;bottom: 0;width: 90%;" v-if="info.reviewer_id == $store.getters.user_info.id && info.status != 3 ">
        <van-button @click="adopt_btn" type="info" block>通过</van-button>
      </div>
      <div class="add_btn" @click="add_effciency" v-show="plus_btn && (info.status == 1 || info.status == 2)">
        <van-icon name="plus" size="0.44rem" color="#fff" />
      </div>

      <van-popup v-model="show_approval_popup" class="approval_popup" position="right">
        <div :style="'padding-top:' + bar_height + 'px;background-color: #26A2FF;'"></div>
        <van-nav-bar title="审批监察人员" left-text="返回" @click-left="show_approval_popup = false" left-arrow></van-nav-bar>
        <div class="body_com has_header">
          <scroller>
            <div class="color_ccc approval_popup_tip">终审人对绩效作最终评审和打分</div>
            <van-cell-group :border="false">
              <van-cell>
                <template slot="icon">
                  <userImage  :img_url ="info.reviewer_img_url" :user_name="info.reviewer_name" width="0.96rem" height="0.96rem" fontSize="0.38"  style="margin-right: 0.24rem;"></userImage>
                </template>
                <template slot="title">
                  <span><Wxopendata type="userName" :openid="info.reviewer_name"></Wxopendata></span>
                </template>
              </van-cell>
            </van-cell-group>

            <div class="color_ccc approval_popup_tip">发布人可修改/删除绩效</div>
            <van-cell-group :border="false">
              <van-cell>
                <template slot="icon">
                  <userImage  :img_url ="info.publisher_img_url" :user_name="info.publisher_name" width="0.96rem" height="0.96rem" fontSize="0.38"  style="margin-right: 0.24rem;"></userImage>
                </template>
                <template slot="title">
                  <span><Wxopendata type="userName" :openid="info.publisher_name"></Wxopendata></span>
                </template>
              </van-cell>
            </van-cell-group>

            <div class="color_ccc approval_popup_tip">监察员参与绩效评审和监督</div>
            <van-cell-group :border="false">
              <van-cell v-for="(item,index) in info.notice_info" :key="index">
                <template slot="icon">
                  <userImage  :img_url ="item.img_url" :user_name="item.name" width="0.96rem" height="0.96rem" fontSize="0.38"  style="margin-right: 0.24rem;"></userImage>
                </template>
                <template slot="title">
                  <span><Wxopendata type="userName" :openid="item.name"></Wxopendata></span>
                </template>
              </van-cell>
            </van-cell-group>
          </scroller>
        </div>
      </van-popup>
    </div>
    <van-action-sheet v-model="sheet_show" :actions="actions" @select="sheet_select" cancel-text="取消" close-on-click-action @cancel="sheet_show = false"/>
  </div>
</template>
<script>
import request from '@/utils/request'
import Vue from 'vue'
import YearMonthPicker from '@/components/common/YearMonthPicker'
import userImage from '@/components/common/user_image'
import moment from 'moment'
import {Image, Circle, Checkbox, CheckboxGroup, Collapse, CollapseItem, ActionSheet, Dialog} from 'vant'
Vue.use(Image).use(Circle).use(Checkbox).use(CheckboxGroup).use(Collapse).use(CollapseItem).use(ActionSheet).use(Dialog)
export default {
  name: 'efficiency_detail',
  // 数据
  data () {
    return {
      bar_height: '',
      tips: '暂无绩效工作',
      title: '绩效',
      filter: {
        page: 1,
        type: 'all',
        status: 'waiting'
      },
      uncompleList: [],
      compleList: [],
      list: null,
      info: {},
      checked: false,
      date_value: '',
      get_date: '',
      employee_id: 0,
      dept_name: '',
      types_list: {},
      plus_btn: true,
      complete_NoData: false,
      show_approval_popup: false,
      collapse_show: ['0'],
      show_adopt_btn: true,
      sheet_show: false,
      actions: [{ name: '修改绩效' }],
      revoke_show: true
    }
  },
  mounted () {
    if (this.$route.query.employee_id !== undefined) {
      this.employee_id = this.$route.query.employee_id
      let employee_map = this.$store.getters.employee_map[this.employee_id]
      if (employee_map !== undefined && employee_map.superior_list !== undefined && employee_map.superior_list.length > 0) {
        employee_map.superior_list.forEach(e => {
          if (this.$store.getters.user_info.id == e.id) {
            this.plus_btn = true
          }
        })
      }
    } else {
      this.plus_btn = false
    }
    this.get_point_types()
    if (window.plus) {
      this.bar_height = window.plus.navigator.getStatusbarHeight()
    }
    if (this.$route.query.date) {
      this.get_date = this.$route.query.date || moment().format('YYYY-MM')
      this.date_value = this.$route.query.date || moment().format('YYYY-MM')
    } else {
      this.get_date = moment().format('YYYY-MM')
      this.date_value = moment().format('YYYY-MM')
    }
  },
  // 组件
  components: {
    YearMonthPicker,
    userImage,
    Dialog
  },
  watch: {
    date_value (val) {
      this.get_user_info(val)
      this.get_date = val
    },
    'checked' (val) {
      if (val) {
        this.info.work_list.forEach(e => {
          if (e.status == 1) {
            this.uncompleList.push(e) // return false
          }
        })
      } else {
        this.info.work_list.forEach(e => {
          if (e.status == 4) {
            this.compleList.push(e)
          }
        })
      }
    },
    'info.work_list': {
      deep: true,
      handler (val) {
        if (val.find(element => element.progress == 100) != undefined) {
          this.revoke_show = false
        } else {
          this.revoke_show = true
        }
      }
    }
  },
  computed: {
    hasNoticeInfo () {
      return Array.isArray(this.info.notice_info) && this.info.notice_info.length > 0
    }
  },
  // 方法
  methods: {
    openEdit () {
      this.sheet_show = true
    },
    sheet_select (action, index) {
      this.sheet_show = false
      if (action.name == '修改绩效') {
        this.$router.push({name: 'efficiency_edit', query: {employee_id: this.employee_id, month: this.get_date}})
      }
    },
    // 显示通过按钮
    show_adopt_btn_fun (list) {
      if (list.work_list.length > 0) {
        list.work_list.forEach(element => {
          if (element.status != 4) {
            this.show_adopt_btn = false
          }
        })
      } else {
        this.show_adopt_btn = false
      }
    },
    get_depts (employee_id) {
      // let ret = []
      let department = this.$store.getters.employee_map[employee_id].department
      if (department.length > 0) {
        // for (let i in department) {
        //   console.log(department[i])
        //   ret.push(department[i].dept_name)
        // }
        // return ret.toString()
        return department
      } else {
        return '暂无部门'
      }
    },
    adopt_btn () {
      let review_point = 0
      let sum = 0
      this.info.work_list.forEach(item => {
        if (item.status == 4) {
          review_point += Number(item.review_point)
        } else {
          sum += 1
        }
      })
      if (sum > 0) {
        Dialog.confirm({
          title: '温馨提示',
          message: `当前员工还有<span class="color_red"> ${sum} </span>条绩效工作未评分，建议您先确认每项工作已评分,再对员工做整月的绩效评审`,
          confirmButtonText: '好的',
          cancelButtonText: '继续审批'
        }).then((res) => {
        }).catch((err) => {
          this.$router.push({name: 'package_approval', query: {month: this.get_date, employee_id: this.employee_id, review_point: review_point}})
        })
      } else {
        this.$router.push({name: 'package_approval', query: {month: this.get_date, employee_id: this.employee_id, review_point: review_point}})
      }
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },
    get_user_info (date) {
      let self = this
      self.showLoading()
      var employeeMap = window.plus ? JSON.parse(plus.storage.getItem('SET_EMPLOYEE_MAP')) : JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP'))
      request('get', '/api/integral/performance/info', {employee_id: self.employee_id, month: date}).then((res) => {
        self.$toast.clear()
        if (res.data.code == '1') {
          var data = res.data.data
          // 头像存在缓存问题
          if (data.notice_info.length > 0) {
            data.notice_info.forEach((item) => {
              item.img_url = employeeMap[item.id].img_url
            })
          }
          self.info = data
          self.dept_name = self.get_depts(self.info.employee_id)
          self.show_adopt_btn_fun(self.info)
        } else {
          self.$toast(res.data.msg)
        }
      })
    },

    show_task (item) {
      let self = this
      let point_total = 0
      for (let i in self.info.work_list) {
        point_total += self.info.work_list[i].base_point * 1
      }
      this.$router.push({name: 'taskFile', query: {task_id: item.id, isJx: true, base_point: this.info.base_point, surplus: this.info.base_point - point_total}})
    },
    // 添加绩效
    add_effciency () {
      let self = this
      let point_total = 0
      for (let i in self.info.work_list) {
        point_total += self.info.work_list[i].base_point * 1
      }
      self.$router.push({name: 'efficiency_add',
        query: {
          reviewer_id: self.info.reviewer_id,
          reviewer_name: self.info.reviewer_name,
          package_id: self.info.id,
          employee_id: self.$route.query.employee_id,
          base_point: self.info.base_point,
          surplus: self.info.base_point - point_total
        }})
    },
    create_package () {
      let self = this
      this.$router.push({name: 'efficiency_create_package', query: {target_id: self.$route.query.employee_id, package_date: self.get_date, type: 'edit'}})
    },
    get_point_types () {
      let self = this
      for (let i in this.$store.getters.point_types) {
        self.types_list[this.$store.getters.point_types[i].id] = this.$store.getters.point_types[i].name
      }
    }
  },
  keep_alive_update: {
    efficiency_detail_update (vm, data) {
      vm.get_user_info(vm.get_date)
    },
    update_efficiency_detail (vm, data) {
      for (let i in vm.info.work_list) {
        if (vm.info.work_list[i].id == data.work_id) {
          vm.info.work_list[i].progress = data.progress
          if (data.progress == 100) {
            vm.info.work_list[i].status = 2
          }
        }
      }
    },
    update_integral_approval_performance (vm, data) {
      vm.get_user_info(vm.get_date)
    },
    update_efficiency_detail_word_list (vm, data) {
      vm.get_user_info(vm.get_date)
    }
  },
  created () {
    let manage_scope = this.$store.getters.user_info.employee_detail.manage_scope
    if (this.$route.query.employee_id != undefined) {
      this.employee_id = this.$route.query.employee_id
      let id = this.$route.query.employee_id
      if (manage_scope.length > 0) {
        this.plus_btn = manage_scope.find(item => {
          return item.id == id
        })
      } else {
        this.employee_id = 0
        this.plus_btn = false
      }
    } else {
      this.plus_btn = false
    }

    if (this.$route.query.mine) {
      this.employee_id = this.$store.getters.user_info.id
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
.body_com{height: calc(100% - 1.92rem); position: relative;}
.add_btn{
  background-color: #26A2FF;
  border-radius: 50%;
  width: 1.12rem;
  height: 1.12rem;
  position: fixed;
  right: .48rem;
  bottom: 1.34rem;
  text-align: center;
  .van-icon{
    line-height: 1.12rem;
  }
}
.van-cell__value{
  text-align: right;
}

.efficiency_detail_box /deep/ .efficiency_list .van-cell__value{
  display:table;
}
.efficiency_detail_box /deep/ .efficiency_list .van-cell__value .team_info{
  display:table-cell;
  text-align: left;
  padding-left: 0.12rem;
}
.efficiency_detail_box /deep/ .efficiency_list .van-cell__value .team_record{
  display:table-cell;
}
.team_record span{
  text-align: center;
}
.efficiency_detail_box /deep/ .van-cell-group .van-cell__title{
  // font-weight:bold;
}
.efficiency_detail_box /deep/ .van-checkbox .van-checkbox__label{
  font-size:0.28rem;
}
  .van-cell__right-icon{margin-top:0.3rem;}
  /deep/ .van-checkbox__label{color:#909399;}
  .approval_title{line-height: 0.8rem; font-size:0.32rem; }
  .approval_status{color:#FF9600; margin-left:0.16rem;}
  .approval_status.font-size028{color:#FF9600; font-size:0.28rem; margin-left:0.16rem;}
.no_package{
  font-size: 0.32rem;
  text-align: center;
  color: rgb(170, 170, 170);
  padding-bottom: 0.4rem;
}

  .no_package-center {
    position: fixed;
    top: 1.92rem;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .approval_list{
    line-height: 0.52rem;
    span{
      line-height: 0.52rem;
      display: inline-block;
      padding-right: 0.2rem;
      .van-image{
        vertical-align: middle;
        padding: 0 0.1rem;
      }
    }
  }
  .approval_laebl{
    .van-cell__right-icon{
      margin-top: 0;
    }
  }
  .approval_popup{
    width: 100vw;
    height: 100vh;
    .approval_popup_tip{
      padding: 0.24rem 0.32rem;
      background-color: rgb(245, 245, 245);
      font-size: 0.28rem;
    }
    .van-cell-group{
      margin-top: 0;
    }
    .van-cell__title{
      line-height: 0.96rem;
      color: #303133;
      span{
        font-size: 0.4rem;
      }
    }
  }
  // detail_list{
  //   padding-bottom: 70px;
  // }
</style>
