<template>
  <div class="box">
    <div class="search">
      <el-date-picker v-model="date" :clearable="false" type="month" @change="getData" placeholder="选择月" value-format="yyyy-MM"></el-date-picker>
    </div>
    <div class="flex-box">
      <div class="flex-1 flex-box flex-v-ce">
        <div class="point">
          <div>{{dataList.base_point}}</div>
          <div>月平衡分</div>
        </div>
        <div class="point" v-if="dataList.status==3">
          <div>{{dataList.review_point}}</div>
          <div>最终得分</div>
        </div>
      </div>
      <div class="flex-box" style="height: 20px;">
        <el-dropdown>
          <span class="el-dropdown-link">终审人<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="dataList.reviewer_name"><WWOpenData type="userName" :openid="dataList.reviewer_name"></WWOpenData></el-dropdown-item>
            <el-dropdown-item class="fontColorF" v-else>无数据</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown style="margin-left: 20px;">
          <span class="el-dropdown-link">
            <el-tooltip placement="top">
              <div slot="content">发布人可修改/删除绩效</div>
              <span class="tips">?</span>
            </el-tooltip>
            发布人<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="dataList.publisher_name"><WWOpenData type="userName" :openid="dataList.publisher_name"></WWOpenData></el-dropdown-item>
            <el-dropdown-item class="fontColorF" v-else>无数据</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown style="margin-left: 20px;">
          <span class="el-dropdown-link">
            <el-tooltip placement="top">
              <div slot="content">监察员可查看次员工的月绩效，参与月终的绩效评审。</div>
              <span class="tips">?</span>
            </el-tooltip>
            监察员<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <template v-if="dataList.notice_info.length>0">
              <el-dropdown-item  v-for="(item, index) in dataList.notice_info" :key="index"><WWOpenData type="userName" :openid="item.name"></WWOpenData></el-dropdown-item>
            </template>
            <el-dropdown-item class="fontColorF" v-else>无数据</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
       </div>
    </div>
    <div class="table_page">
      <el-table :data="dataList.work_list" ref="dataList" tooltip-effect="dark" v-loading="loading" @row-click="openDetail" >
        <el-table-column prop="task_name" label="绩效工作" :width="400">
          <template slot-scope="scope">
            <div class="flex-box flex-v-ce">
              <el-progress type="circle" :percentage="scope.row.progress" :width="width"></el-progress>
              <span style="margin-left: 10px;">{{ scope.row.task_name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="expire_time" label="截止时间" align="center"></el-table-column>
        <el-table-column prop="base_point" label="权重" align="center">
          <template slot-scope="scope">
            <span>{{(scope.row.base_point/dataList.base_point*100).toFixed(0)}}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="base_point" label="工作绩效分" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-button type="text" v-show="scope.row.status == 1" @click.stop="isfulfilATaskButton(scope.row)">完成任务</el-button>
            <span v-show="scope.row.status == 2">待审批</span>
            <span v-show="scope.row.status == 3">退回</span>
            <span v-show="scope.row.status == 4">已审批</span>
            <span v-show="scope.row.status == 5">发布者撤回</span>
          </template>
        </el-table-column>
        <template slot="empty">
          <noData :isSolt="true">
              <template v-slot:default>
                <div class="fontColorF">我还没有绩效，找上级为我创建绩效</span></div>
              </template>
          </noData>
        </template>
      </el-table>
      <!-- table end -->

      <!-- <div class="page"> -->
        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.page"
          :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="this.perPage" layout="total, sizes, prev, pager, next"
          :total="this.total">
        </el-pagination> -->
      <!-- </div> -->
      <!-- pagination end -->
    </div>

    <!-- 抽屉3 -->
    <el-drawer :visible.sync="drawer3"  :with-header="false" :before-close="handleClose">
      <div class="drawer_title">绩效工作详情</div>
      <div class="drawer_box" style="overflow: auto; height: calc(100vh - 81px);" v-if="workDetailData"  v-loading="loading" >
        <div class="flex-box flex-v-ce">
          <userImage class="user_img person_imghead" width="46px" height="46px" :user_name="workDetailData.employee_name" :img_url="workDetailData.img_url"></userImage>
          <div class="d_userMessage">
            <div><WWOpenData type="userName" :openid="workDetailData.employee_name"></WWOpenData></div>
            <div v-if="workDetailData.dept_list[0]"><WWOpenData type="userName" :openid="workDetailData.dept_list[0].dept_name"></WWOpenData></div>
          </div>
        </div>
        <ul>
          <li class="flex-box">
            <div class="label">任务内容</div>
            <div class="content_text">{{workDetailData.task_name}}</div>
          </li>
          <li class="flex-box">
            <div class="label">任务备注</div>
            <!-- <div class="content_text">{{workDetailData.task_remark}}</div> -->
            <textarea class="flex-1" disabled="disabled" v-model="workDetailData.task_remark"  style="border: none;height:100px">
            </textarea>
          </li>
          <li class="flex-box">
            <div class="label">绩效分</div>
            <div class="content_text yellow">{{workDetailData.point_config.base_point}}</div>
          </li>
          <li class="flex-box" v-if="workDetailData.point_config.review_point">
            <div class="label">最终分</div>
            <div class="content_text yellow">{{workDetailData.point_config.review_point}}</div>
          </li>
          <li class="flex-box">
            <div class="label">创建时间</div>
            <div class="content_text">{{workDetailData.create_time}}</div>
          </li>
          <li class="flex-box">
            <div class="label">截止时间</div>
            <div class="content_text">{{workDetailData.expire_time}}</div>
          </li>
          <li class="flex-box" v-if="workDetailData.point_config.timeout_deduction_point>0">
            <div class="label">逾期扣分</div>
            <div class="content_text">{{workDetailData.point_config.timeout_deduction_point}}</div>
          </li>
          <li class="flex-box">
            <div class="label">审批人</div>
            <div class="content_text"><WWOpenData type="userName" :openid="workDetailData.reviewer_name"></WWOpenData></div>
          </li>
          <li class="flex-box">
            <div class="label">积分种类</div>
            <div class="content_text">{{workDetailData.pt_name}}</div>
          </li>
        </ul>
        <div class="d_progress">
          <div class="flex-box">
            <div class="flex-1">工作进度（{{workDetailData.progress}}%）</div>
            <div class="fontColorF addJf" @click.stop="isSlider=true" v-if="workDetailData.employee_id==userId && workDetailData.status==1">+更新进度</div>
          </div>
          <el-progress :percentage="workDetailData.progress"></el-progress>
        </div>
      <el-tabs v-model="activeName" >
        <el-tab-pane label="工作记录" name="work">
          <div class="flex-box">
            <div class="flex-1"></div>
            <div class="fontColorF addJf" @click="isOne=true" v-if="workDetailData.employee_id==userId&&workDetailData.status==1 || workDetailData.employee_id==userId&&workDetailData.status==2">+记一条工作记录</div>
          </div>
          <div class="work_box" style="padding-top:10px">
            <div class="flex-box work_item" v-for="(item,index) in text_list">
                <userImage class="user_img person_imghead" width="40px" height="40px" :user_name="item.recorder" :img_url="item.img_url"></userImage>
                <div class="work_right flex-1">
                  <div class="flex-box">
                    <div class="d_name flex-1"><WWOpenData type="userName" :openid="item.recorder"></WWOpenData></div>
                    <div class="d_date">{{item.time}}</div>
                  </div>
                  <div class="d_content">{{item.remark}}</div>
                </div>
            </div>
            <div v-if="!text_list[0]" class="fontColorF" style="text-align: center;">暂无工作记录</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="记分记录" name="participation">
          <div class="flex-box"  style="padding-bottom: 10px;border-bottom: 1px solid #f1f1f1;">
            <div class="flex-1 fontColorF"><span v-if="point_total>0">合计：{{point_total}}</span> </div>
            <div class="fontColorF addJf" @click="isIntegral=true" v-if="workDetailData.reviewer_id==userId&&workDetailData.status==1 || workDetailData.reviewer_id==userId&&workDetailData.status==2">+记分</div>
          </div>
          <div class="work_box" style="padding-top:10px">
            <div class="flex-box work_item" v-for="(item,index) in point_list">
                <userImage class="user_img person_imghead" width="40px" height="40px" :user_name="item.recorder" :img_url="item.img_url"></userImage>
                <div class="work_right flex-1">
                  <div class="flex-box">
                    <div class="d_name flex-1"><WWOpenData type="userName" :openid="item.recorder"></WWOpenData>
                    <span class="blue" v-if="item.point>0">+{{item.point}}</span>
                    <span class="green" v-if="item.point<0">{{item.point}}</span>
                    </div>
                    <div class="d_date">{{item.time}}</div>
                  </div>
                  <div class="d_content">{{item.remark}}</div>
                </div>
            </div>
            <div v-if="!point_list[0]" class="fontColorF" style="text-align: center;">暂无记分记录</div>
          </div>
        </el-tab-pane>
      </el-tabs>
        <!--
          <div class="flex-box d_footer" v-if="workDetailData.reviewer_id==userId&&workDetailData.status==2">
          <div class="flex-1"></div>
          <el-button @click="drawer3=false">取消</el-button>
          <el-button type="primary" @click="openSp()">审批</el-button>
        </div> -->
      </div>
    </el-drawer>
    <!-- 更新进度 -->
    <el-dialog title="更新进度" :visible.sync="isSlider" :before-close="publicClose" width="40%">
        <div class="slider">
          <div class="fontColorF">拖动滑杆更新进度</div>
          <el-slider v-model="progress" :marks="{0:'0%'}"></el-slider>
        </div>
        <span slot="footer">
          <el-button @click="publicClose()">取消</el-button>
          <el-button type="primary" @click="sliderSend">完成</el-button>
        </span>
    </el-dialog>
    <!-- 完成任务弹窗 -->
    <!-- <el-dialog title="任务备注" @close='isfulfilATaskClose' :visible.sync="isfulfilATask"  width="35%">
        <el-input
          type="textarea"
          :rows="3"
          maxlength="100"
          show-word-limit
          placeholder="请输入备注(选填)"
          v-model="isfulfilATaskTextarea">
        </el-input>
        <span slot="footer">
          <el-button @click="isfulfilATask = false">取消</el-button>
          <el-button type="primary" @click="isfulfilATasks">完成任务</el-button>
        </span>
    </el-dialog> -->
    <!-- 完成任务抽屉 -->
    <el-drawer
      :custom-class="'drawer_details'"
      :visible.sync="isfulfilATask"
      @close='isfulfilATaskClose'
      wrapperClosable
      :with-header="false"
      size="500px">
      <div class="details_title">完成绩效工作</div>
      <div class="details_content">
        <el-form label-width="80px">
          <el-form-item label="任务备注" prop="remark">
            <el-input v-model="isfulfilATaskTextarea" placeholder="请输入任务备注(选填)" show-word-limit maxlength="20" type="textarea" :rows="3" max="20"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="isfulfilATask = false">取消</el-button>
            <el-button type="primary" @click="isfulfilATasks">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <!-- 记一条 -->
    <el-dialog title="记一条" :visible.sync="isOne" :before-close="publicClose" width="40%">
        <div class="flex-box">
          <div style="width: 80px;">工作记录</div>
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
        </div>
        <span slot="footer">
          <el-button @click="publicClose()">取消</el-button>
          <el-button type="primary" @click="one">完成</el-button>
        </span>
    </el-dialog>
    <!-- 记分记录 -->
    <el-dialog title="记分" :visible.sync="isIntegral" :before-close="publicClose" width="40%">
        <el-form :model="integral" ref="integral" label-width="80px">
          <el-form-item label="记录"  prop="text" :rules="[{ required: true, message: '记录不能为空'}]">
            <el-input type="textarea" :rows="3" v-model="integral.text"></el-input>
          </el-form-item>
          <el-form-item label="记分"  prop="num" :rules="[{ required: true, message: '记分不能为空'},{ type: 'number', message: '积分必须为数字值'}]">
            <div class="num" :class="[integral.type=='1'?'add':'jian']"></div>
            <el-input placeholder="请输入内容" v-model.number="integral.num">
              <el-select v-model="integral.type" slot="prepend" placeholder="请选择" style="width: 80px;">
                <el-option label="奖分" value="1"></el-option>
                <el-option label="扣分" value="2"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="publicClose()">取消</el-button>
          <el-button type="primary" @click="integralSend('integral')">完成</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import noData from '@/components/noData'
  export default {
    name: 'my_performance',
    data() {
      return {
        isfulfilATaskID:0,
        isfulfilATask:false,//完成任务弹窗
        isfulfilATaskTextarea:'',//完成任务备注
        width: 46,
        page: 1,
        perPage: 10,
        total: 0,
        loading: false,
        employee_id:this.$store.getters.user_info.id,
        userId:this.$store.getters.user_info.id,
        employee_name: JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP')) || JSON.parse((localStorage.getItem('SET_EMPLOYEE_MAP'))),
        date: this.$moment().format('YYYY-MM'),
        dataList: {
          notice_info:[]
        },
        dialogVisible: false,
        showDetails: false,
        detail_loading: false,
        detail_info: {process:{list:[]}},

        workDetail:'',
        workDetailData:'',
        drawer3: false,
        activeName: '',
        isSlider:false,
        isOne:false,
        isIntegral:false,
        textarea:'',//记录一条内容
        integral:{
          text:'',
          num:0,
          type:"1",
        },
        text_list:[],
        point_list:[],
        point_total:0,
        progress:0,

      };
    },
    components:{noData},
    mounted() {
      this.getData();
    },
    methods: {
      handleClose(){
        this.activeName="";
        this.drawer3=false;
        this.getData();
      },
      integralSend(formName){
        var self=this;
        var items=this.workDetailData.process.list || [];
        var process={
              img_url: this.$store.getters.user_info.img_url,
              point:this.integral.type=="1" ?this.integral.num:'-'+this.integral.num,
              recorder_id: this.$store.getters.user_info.id,
              recorder: this.$store.getters.user_info.name,
              remark: this.integral.text,
              time: this.$moment().format('YYYY-MM-DD HH:mm')
            }
        var data={
            work_id:this.workDetail.id,
            process:[],
          }
        items.unshift(process);
        data.process=items;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.$http('post','/api/integral/work',data).then(res => {
                if (res.data.code == 1) {
                  self.openDetail();
                  self.publicClose();
                } else {
                self.$message.error(res.data.msg);
                }
            }).finally(() => {

            });
          }
          })
      },
      one(){
          if(!this.textarea){
            this.$message.error("请输入备注内容");
            return
          }
          var self=this;
          var items=this.workDetailData.process.list || [];
          var process={
              img_url: this.$store.getters.user_info.img_url,
              point: 0,
              recorder_id: this.$store.getters.user_info.id,
              recorder: this.$store.getters.user_info.name,
              remark: this.textarea,
              time: this.$moment().format('YYYY-MM-DD HH:mm')
            }
          var data={
            work_id:this.workDetail.id,
            process:[],
          }
        items.unshift(process);
        data.process=items;
        self.$http('post','/api/integral/work',data).then(res => {
            if (res.data.code == 1) {
                self.publicClose();
                self.openDetail();
            } else {
              self.$message.error(res.data.msg);
            }
        })
      },
      //关闭完成任务弹窗执行
      isfulfilATaskClose(){
        this.isfulfilATask = false;
        this.isfulfilATaskTextarea = '';//清空
      },
      //点击完成任务按钮，弹出弹窗
      isfulfilATaskButton(obj){
        this.isfulfilATaskID = obj.id
        this.isfulfilATask = true
      },
      //完成任务
      isfulfilATasks(){
        let data = {
          work_id:this.isfulfilATaskID,
          state:1,
          remark:this.isfulfilATaskTextarea
        }
        this.$http('post','/api/integral/work',data).then(res => {
          if (res.data.code == 1) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
          this.isfulfilATask = false
          this.getData();
          this.isfulfilATaskTextarea = '';
          }
        }).catch(()=>{
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
        })
      },
      //更新进度
      sliderSend(){
        var self=this;
        let data = {
          work_id: self.workDetailData.id,
          progress: self.progress,
        }
        self.$http('post','/api/integral/work',data).then(res => {
          if (res.data.code == 1) {
            self.openDetail();
            self.isSlider=false;
          }else{
            self.$message.error(res.data.msg);
          }
        })
      },
      //打开工作详情
      openDetail(item){
        var self=this;
        self.drawer3=true;
        this.loading = true
        if(item){this.workDetail=item;}
        self.$http('get',`/api/integral/work?work_id=${this.workDetail.id}`).then(res => {
            if (res.data.code == 1) {
              this.loading = false
              self.workDetailData=res.data.data;
              self.progress=self.workDetailData.progress;
              self.text_list = []
              self.point_list = []
              self.point_total = 0
              if (self.workDetailData.process.list && self.workDetailData.process.list.length > 0) {
                for (let i in self.workDetailData.process.list) {

                  self.point_total += self.workDetailData.process.list[i].point * 1

                  if (self.workDetailData.process.list[i].point != 0) {

                    self.point_list.push(self.workDetailData.process.list[i])
                  } else {

                    self.text_list.push(self.workDetailData.process.list[i])
                  }
                }
              }
            setTimeout(function(){
               self.activeName="work"
            },400)
            }else{
              this.loading = false
              self.$message.error(res.data.msg);
            }
        })
      },
      //公共弹窗关闭
      publicClose(){
        this.add_reviewer_show=false;
        this.isSlider2=false;
        this.selectItem="";

        //工作详情
        this.isIntegral=false;
        this.isOne=false;
        this.isSlider=false;
        this.textarea='',//记录一条内容
        this.integral={
          text:'',
          num:0,
          type:"1",
        }
        this.add_employee_show=false;
      },

      getEmployeeName(id){
        for (const key in this.employee_name) {
          if(this.employee_name[key].id == id){
            return this.employee_name[key].name
          }
        }
      },
      getData(){
        let self = this
        self.loading = true
        self.$http('get','/api/integral/performance/info',{employee_id: self.employee_id, month: self.date}).then((res) => {
          if (res.data.code == 1) {
            self.dataList = res.data.data||[]
            self.total = res.data.data.work_count
          } else {
            self.$message.error(res.data.data.msg)
          }
        }).finally(() => {
          self.loading = false
        })
      },
      handleSizeChange: function(val) {
        this.perPage = val;
        this.page = 1;
        this.getData();
      },
      //页码变更
      handleCurrentChange: function(val) {
        this.page = val;
        this.getData();
      }
    }
  };
</script>

<style lang="scss" scoped="scoped">
  $blue:#26A2FF;
  $red:#F56C6C;
  $yellow:#E6A23C;
  $green:#67C23A;
  $fontColorZ:#303133;
  $fontColorF:#909399;
  $fontColorT:#C0C4CC;

  /deep/ :focus{
    outline:0;
  }
  .box{
    overflow: hidden;
    padding: 20px;
    .details_content{
        margin-top: 10px;
      .el-row{
        margin-bottom: 10px;
        font-size: 14px;
      }
    }
    .search{
      padding-bottom: 20px;
    }
    .point div:nth-child(1){
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .page{
      text-align: center;
      padding: 20px 0;
    }
    .tips{
      background: $fontColorF;
      border-radius: 50%;
      width: 14px;
      height: 14px;
      color: #fff;
      display: inline-block;
      font-size: 12px;
      line-height: 14px;
      text-align: center;
    }
  }
  .btn_click{
    color: #909399;
    &:hover{
      color: #7e7e7e;
    }
  }

  .green{
   color: #67c23a;
  }
  .blue{
    color:#26a2ff;
    cursor: pointer;
  }
  .fontColorF{
    color:#909399;
  }
  .yellow{color: #e6a23c;}
  .input_text{
    margin-bottom: 20px;
    padding-left: 100px;
  }
  .drawer_box{
    padding:0 20px;
    .d_userMessage{
      margin-left: 10px;
    }
    .d_userMessage div:nth-child(1){
      font-size: 16px;
      margin-bottom: 8px;
    }
    .d_userMessage div:nth-child(2){
      font-size: 12px;
      color: $fontColorF;
    }
    ul{
      padding: 12px 0;
      border-bottom: 1px solid #f1f1f1;
    }
    li{
      padding: 6px 0;
    }
    li .label{
      width: 80px;
      text-align: left;
      color: $fontColorF;
    }
    .content_text{
      flex:1
    }
    .d_progress{
      padding: 12px 0;
      border-bottom: 1px solid #f1f1f1;
      margin-bottom: 10px;
    }
    .work_box{}
    .d_footer{
      position: fixed;
      bottom: 20px;
      right: 20px;
    }
    .work_right{
      margin-top: 10px;
      margin-left: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f1f1f1;
    }
    .d_name{
      color: $fontColorZ;
      margin-bottom: 10px;
    }
    .d_date{
      color: $fontColorF;
    }
    .work_item{
       margin-bottom: 10px;
    }
    .addJf{
      font-size: 13px;
      cursor: pointer;
      margin-bottom: 5px;
      padding: 5px;
    }
    .addJf:hover{
      color: $blue;
    }
  }
  .slider{
    padding: 30px 20px;
  }
  .num{
    position: absolute;
    height: 20px;
    width: 20px;
    z-index: 999;
    left: 85px;
  }
  .add:before{
    position: absolute;
    content: "+";
    color: $red;
  }
  .jian:before{
    position: absolute;
    content: "-";
    color: $green;
  }

  .border{
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    width: 100%;
    cursor: pointer;
  }
	.drawer_title{
		font-size: 18px;
		padding: 20px;
    border-bottom:1px #efefef solid;
    margin-bottom: 20px;
  }
  .box {
  overflow: hidden;
  padding: 20px;
  .header {
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
  }
  .point{
    margin-right: 20px;
  }
  .point div:nth-child(1) {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .point div:nth-child(2) {
   color: $fontColorF;
  }
  .page {
    text-align: center;
    padding: 20px 0;
  }
  .tips {
    background: $fontColorT;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
  }
  .demo-ruleForm{
    padding: 0 20px;
  }
}

   /deep/ .el-table tr:hover{
    cursor:pointer
  }
</style>
