<template>
  <div>
    <!-- 任务详情弹窗 -->
    <el-drawer :visible.sync="Delay_to_open"  :with-header="false" :size="'500px'" :before-close="handleClose" :custom-class="'drawer_details'">
      <div class="details_title">{{title}}</div>
      <div class="details_content" 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 class="flex-box">
              <div><WWOpenData type="userName" :openid="workDetailData.employee_name"></WWOpenData></div>
              <div v-if="workDetailData.review_status" style="margin-left: 8px;">
                <div class="yellow" v-if="workDetailData.review_status == 0">待处理</div>
                <div class="green" v-if="workDetailData.review_status ==1">已通过</div>
                <div class="red" v-if="workDetailData.review_status == 2">已驳回</div>
              </div>
            </div>
            <div v-if="detailType != 2 && workDetailData.dept_list[0]">{{workDetailData.dept_list[0].dept_name}}</div>
          </div>
          <!-- 为了在抽屉打开之后获取焦点 -->
          <el-button type="text" style="padding: 0; margin: 0; visibility: hidden;">test</el-button>
        </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>
            <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}}{{workDetailData.pt_name}}</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 v-show="showWork">
          <div class="d_progress">
            <div class="flex-box">
              <div class="flex-1">工作进度（{{workDetailData.progress}}%）</div>
              <!-- <div class="fontColorF addJf" @click="isSlider=true" v-if="workDetailData.employee_id==userId&& workDetailData.status==1">+更新进度</div> -->
            </div>
            <el-progress :percentage="workDetailData.progress"></el-progress>
          </div>
          <div v-if="Object.keys(workDetailData.process).length === 0">
            <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">+记一条工作记录</div> -->
                </div>
                <div class="work_box" style="padding-top:10px" v-if="workDetailData.process !== null && workDetailData.process.list !== null">
                  <div class="flex-box work_item" v-for="(item,index) in workDetailData.process.list" v-show="item.point == 0">
                    <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>
                        <i class="el-icon-delete delicon color-red" @click="delItem(index,'work')"></i>
                      </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">+记分</div> -->
                </div>
                <div class="work_box" style="padding-top:10px" v-if="workDetailData.process !== null && workDetailData.process.list !== null">
                  <div class="flex-box work_item" v-for="(item,index) in workDetailData.process.list" v-show="item.point != 0">
                    <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>
                        <i class="el-icon-delete delicon color-red" @click="delItem(index,'point')"></i>
                      </div>
                    </div>
                  </div>
                  <div v-if="!point_list[0]" class="fontColorF" style="text-align: center;">暂无记分记录</div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <!-- <el-row>
        <el-col :span="24">
          <el-button type="danger" @click="delItem">删除</el-button>
        </el-col>
      </el-row> -->
    </el-drawer>

  </div>
</template>

<script>
  export default {
    name: 'taskDetailsPopup',
    props:{
      title: {
        type: String,
        default: ''
      },
      visible: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number,
        default: 0
      },
      showWork: {
        type: Boolean,
        default: true
      },
      detailType: {
        type: String,
        default: ''
      }
    },
    data() {
      let getId = this.id
      return {
        Delay_to_open:false,//打开抽屉
        
        loading: false,
        workDetailData:{
          process:[],
          dept_list:[],
          point_config:{
            base_point: '0'
          }
        },
        itemId: getId,
        isOne: false,
        text_list:[],
        point_total:0,
        isIntegral:false,
        point_list:[],
        userId:this.$store.getters.user_info.id,
        activeName: "work",
        getDataUrl: '/api/integral/work',
        params: {}
      }
    },
    components: {},
    watch:{},
    mounted() {
      this.detailType == 2?this.getDataUrl = '/api/integral/schedule':this.getDataUrl = '/api/integral/work'
      this.$nextTick(() => {
        this.getData()
        this.Delay_to_open = this.visible//更换打开抽屉时机，避免打开两次
      })
    },
    methods: {
      // 关闭弹窗
      handleClose(){
        this.$emit('update:visible', false)
      },
      // 删除
      delItem(){
        console.log('删除')
      },
      // 获取数据
      getData(){
        let self = this
        self.loading = true
        let data =  this.detailType == 2?{schedule_id: this.id}:{work_id: this.id}
        self.$http('get',self.getDataUrl,data).then(res => {
					if (res.data.code == 1) {
            self.workDetailData = res.data.data
          }
          self.loading = false
				}).catch(e => {
          self.$message.error(e.data.msg)
          self.loading = false
        })
      }
    },
    // activated(){
    //   this.getData()
    // }
  }
</script>
<style lang="scss" scoped="scoped">
  .details_content{
    & .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: #909399;
    }
    & .d_progress{
      padding: 12px 0;
      border-bottom: 1px solid #f1f1f1;
      margin-bottom: 10px;
    }
    & ul{
      padding: 12px 0;
      border-bottom: 1px solid #f1f1f1;
      & li{
        padding: 6px 0;
      }
      & .label{
        width: 80px;
        text-align: left;
        color: #909399;
      }
      & .content_text{
        flex:1
      }
    }
  }
  .fontColorF{
    color:#909399;
  }
</style>
