<template>
  <div class="taskfile_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" class="headerbar no-down-icon" left-arrow>
      <template slot="right">
        <div style="padding:0 0.32rem;"  @click="sheet_show = true">
          <van-icon name="ellipsis" v-if="The_current_account" />
        </div>
      </template>
    </van-nav-bar>

    <div class="body_com has_header">
      <scroller>
        <van-cell class="efficiency_list" size="large">
          <template slot="icon">
            <userImage :user_name="info.employee_name" :img_url="info.img_url" width="1rem" height="1rem" style="margin-right: 0.12rem;" ></userImage>
          </template>
            <template slot="title">
            <span><Wxopendata type="userName" :openid="info.employee_name"></Wxopendata></span>
            <div style="color: #909399;" v-if="info.dept_list.length > 0">
              <span v-for="(item, index) in info.dept_list" :key="index"><em v-if="index > 0">，</em><Wxopendata type="departmentName" :openid="item.depart_name"></Wxopendata></span>
            </div>
              <div style="color: #909399;" v-if="info.dept_list.length == 0">暂无部门</div>
          </template>
          <template slot="default">
              <div style="float: right;text-align: center;padding:0 0.1rem;" v-if="info.status == 4">
                   <span class="point-span"> {{info.point_config.review_point}}</span>
                  <div style="color: #909399;">最终分</div>
              </div>

            <div style="float: right;text-align: center;padding:0 0.1rem;">
                <span class="point-span"> {{info.point_config.base_point}}</span>
                <div style="color: #909399;">{{info.pt_name}}</div>
            </div>
          </template>
        </van-cell>
        <van-cell-group :border="false" class="task_detail_group">
          <van-cell :border="false">
            <template slot="title">
              <div class="time">
                <span>工作内容</span>
                <span class="timeExactly" style="white-space: pre-line;">{{info.task_name}}</span>
              </div>
            </template>
          </van-cell>
          <!-- <van-cell :title="info.task_name" class="name"> -->

          </van-cell>
          <van-cell :border="false">
            <template slot="title">
              <div class="time">
                <span>截止时间</span>
                <span class="timeExactly">{{info.expire_time}}</span>
                <span style="padding-left: 10px;" class="color_red" v-show="info.expire_day > 0">逾期{{info.expire_day}}天</span>
              </div>
            </template>
          </van-cell>
          <van-cell v-if="info.point_config.timeout_deduction_point*1 > 0" :border="false">
            <template slot="title">
              <div class="time">
                <span>逾期扣分</span>
                <span class="timeExactly">{{info.point_config.timeout_deduction_point}}分/天</span></div>
            </template>
          </van-cell>
          <van-cell :border="false">
            <template slot="title">
              <div class="time">
                <span>任务备注</span>
                <span class="timeExactly" style="white-space: pre-line;">{{info.task_remark}}</span>
              </div>
            </template>
          </van-cell>

          <van-cell :border="false">
            <template slot="title">
              <div class="time">
                <span>审批人　</span>
                <span class="timeExactly"><Wxopendata type="userName" :openid="info.reviewer_name"></Wxopendata></span></div>
            </template>
          </van-cell>

          <van-cell :border="false">
            <template slot="title">
              <div class="time">
                <span>发布人　</span>
                <span class="timeExactly"><Wxopendata type="userName" :openid="info.publisher_name"></Wxopendata></span></div>
            </template>
          </van-cell>

          <van-cell :border="false">
            <template slot="title">
              <div class="time">
                <span>积分种类</span>
                <span class="timeExactly">{{info.pt_name}}</span></div>
            </template>
          </van-cell>

          <van-cell :border="false" v-if="info.task_file_list.length!=0">
            <template slot="title">
              <div class="time">
                <span>任务图片</span>
                <span><van-image v-for="(items,index) in info.task_file_list" :key="index" @click="open_image(info.task_file_list)" width="45" height="45" radius="3" :src="items" /></span></div>
            </template>
          </van-cell>

        </van-cell-group>

        <van-cell-group class="point" v-if="info.point_config.standard && info.point_config.standard.super_satisfied * 1 > 0">
          <van-cell v-if="info.point_config.standard" title="评分标准">
            <template slot="label">
              <van-grid slot="label" :border="false">
                <van-grid-item text="超预期">
                  <template slot="icon">
                    {{info.point_config.standard.super_satisfied}}
                  </template>
                </van-grid-item>
                <van-grid-item text="满意">
                  <template slot="icon">
                    {{info.point_config.standard.satisfied}}
                  </template>
                </van-grid-item>
                <van-grid-item text="合格">
                  <template slot="icon">
                    {{info.point_config.standard.qualified	}}
                  </template>
                </van-grid-item>
                <van-grid-item text="不合格">
                  <template slot="icon">
                    {{info.point_config.standard.unqualified}}
                  </template>
                </van-grid-item>
              </van-grid>
            </template>
          </van-cell>
        </van-cell-group>

        <van-panel class="schedule" @click="info.employee_id == $store.getters.user_info.id && info.status == 1 ? $router.push({name: 'process', query: {work_id: info.id, progress: info.progress}}) : null" style="margin: 0.2rem 0;" title="任务进度" :status="info.employee_id == $store.getters.user_info.id && info.status == 1 && info.progress != 100 ? '更新进度' : ''" >
          <div slot="default">
            <van-slider class="task_slider" v-model="info.progress" active-color="#ee0a24" bar-height="0.2rem" disabled style="opacity:1"	>
            <template slot="button">
              <div class="custom-button" :class="info.progress == '0'?'custom-button-left':info.progress == '100'?'custom-button-right':''">{{info.progress}}%</div>
            </template>
            </van-slider>
          </div>
        </van-panel>

        <!-- <van-cell-group style="display: none;" v-show="info.progress == 100">
          <div class="reviewer_info_title">审批</div>
          <van-cell>
            <template slot="icon">
              <van-image :src="info.reviewer_img" style="margin-right: 0.2rem" width="40px" height="40px" round type="contain"  />
            </template>
            <template slot="title">
              <div class="reviewer_info">
                {{info.reviewer_name}}
                <span v-if="info.status == 2">待审批</span>
                <span v-if="info.status == 3">退回</span>
                <span class="suss" v-if="info.status == 4">已审批</span>
                <span v-if="info.status == 5">发布者撤回</span>
              </div>
            </template>
          </van-cell>
        </van-cell-group> -->

        <div class="task">
          <van-row>
            <van-col span="16">
              <van-tabs v-model="active">
                  <van-tab title="任务过程"></van-tab>
                  <van-tab title="记分记录"></van-tab>
              </van-tabs>
            </van-col>
            <van-col span="8" style="background:#fff;border-bottom:0.02rem #efefef solid;">
              <div v-if="active == 0 && info.employee_id == $store.getters.user_info.id && (info.status < 3)"   @click="remberOne" class="rember">+记一条</div>
              <div v-if="active != 0 && (info.employee_id != $store.getters.user_info.id) && (info.status < 3)" @click="noteone"  class="rember">记分</div>
            </van-col>
          </van-row>
          <div ref="scoringNotice" style="clear: both;">
            <van-notice-bar v-if="active != 0 && (info.employee_id != $store.getters.user_info.id) && (info.status < 3) && novice" wrapable mode="closeable" @close="closeNotice">记分不会立即生效，评审时可根据此记录打分</van-notice-bar>
          </div>

          <van-cell-group v-if="info.process !== null && info.process.list !== null" v-for="(item, index) in info.process.list" :key="index" v-show="info.process.list !== null && active != 0 && item.point != 0"  :border="false">
            <div style="color:#FFCC00;padding: 0.16rem 0 0 0.32rem;" v-if="index == 0">合计
              <template v-if="point_total > 0">+{{point_total}}</template>
              <template v-if="point_total <= 0">{{point_total}}</template>
            </div>

            <van-cell label-class="changsize" :title="item.recorder">
              <template slot="icon">
                  <van-image :src="item.img_url?item.img_url:'static/images/defalut_custmer_headicon.png'" round width="46px" height="46px" style="margin-right: 0.12rem;" type="contain"  />
              </template>
              <template slot="title">
                <span><Wxopendata type="userName" :openid="item.recorder"></Wxopendata></span>
              </template>
              <template slot="label">
                <div class="right_time">{{item.time}}</div>
                <div v-if="item.point*1 > 0">+{{item.point}}</div>
                <div v-if="item.point*1 < 0">{{item.point}}</div>
                <div>{{item.remark}}</div>
                <div v-if="active != 0 && (info.employee_id != $store.getters.user_info.id) && (info.status < 3)">
                  <van-icon name="delete" color="#909399" style="float: right;" size="0.5rem" @click="delItem(index,'point')" />
                </div>
              </template>
            </van-cell>
          </van-cell-group>
          <van-cell-group style="background: none;" v-show="active == 0 &&  text_list.length == 0" >
            <noTask src="static/images/noTask.png" detail_text="还没有任务记录去记一条吧" />
          </van-cell-group>

          <van-cell-group v-if="info.process !== null && info.process.list !== null" v-for="(item, index) in info.process.list" :key="index"  v-show="active == 0 && item.point == 0" :border="false">
            <div class="task_record_list clear">
              <van-image class="fl" :src="item.img_url?item.img_url:'static/images/defalut_custmer_headicon.png'" round width="46px" height="46px" style="margin-right: 0.12rem;" type="contain"  />
              <span class="fr" style=" width: 72vw;">
                <div class="clear">
                  <span class="fl" style="color:#606266;font-size: 16px;"><Wxopendata type="userName" :openid="item.recorder"></Wxopendata></span>
                  <span class="fr" style="color: #909399;font-size: 14px;">{{item.time}}</span>
                </div>
                <div style="margin-top: 0.1rem;font-weight:400;" >{{item.remark}}</div>
              </span>
              <van-icon v-if="active == 0 && info.employee_id == $store.getters.user_info.id && (info.status == 1) && info.progress != 100" name="delete" color="#909399" style="float: right; position: absolute;right: 0.1rem;bottom: 0.1rem;" size="0.5rem" @click="delItem(index,'work')" />
            </div>
          </van-cell-group>

          <van-cell-group style="background: none;" v-show="active != 0 && point_list.length == 0" >
            <noTask src="static/images/noTask.png" detail_text="还没有记分记录去记一条吧" />
          </van-cell-group>

        </div>

        <div v-if="text_list.length != 0 || point_list.length != 0 " style="height: 2rem;"></div>
      </scroller>
      <van-image-preview v-model="show" :images="imageSrc"></van-image-preview>
      <div style="padding:0.32rem;width: 90%;position: fixed;bottom: 0;" v-if="info.reviewer_id == $store.getters.user_info.id && info.status == 2">
        <van-button block type="info" @click="go_approval">去审批</van-button>
      </div>
      <div style="padding:0.32rem;width: 90%;position: fixed;bottom: 0;" v-if="info.employee_id == $store.getters.user_info.id && info.status == 1">
        <van-button block type="info" @click="complete_task(info)">完成</van-button>
      </div>
    </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 noTask from '@/components/common/noTask'
import userImage from '@/components/common/user_image'
import {Image, Panel, Tab, Tabs, Progress, Slider, ImagePreview, Col, Row, ActionSheet, NoticeBar } from 'vant'
Vue.use(Image).use(Panel).use(Tab).use(Tabs).use(Progress).use(Slider).use(ImagePreview).use(Col).use(Row).use(ActionSheet).use(NoticeBar)
export default {
  components: {
    noTask, userImage
  },
  // 数据
  data () {
    return {
      The_current_account: false,

      active: 0,
      numberslider: 0,
      active1: 'running',
      title: '工作详情',
      filter: {
        page: 1,
        type: 'all',
        status: 'waiting'
      },
      info: {
        date: 0,
        employee_id: 0,
        employee_name: '',
        expire_time: '',
        id: 0,
        dept_list: [],
        month: 0,
        performance_data: [],
        point_config: {},
        process: [],
        progress: 0,
        pt_id: 0,
        pt_name: '',
        publisher_id: 0,
        publisher_name: '',
        reviewer_id: 0,
        reviewer_name: '',
        source_type: 0,
        source_type_mark: '',
        status: 0,
        status_mark: '',
        task_file_list: [],
        task_name: '',
        task_remark: ''
      },
      process: [],
      checked: false,
      point_total: 0,
      point_list: [],
      text_list: [],
      types_list: {},
      imageSrc: [],
      show: false,
      sheet_show: false,
      actions: [],
      novice: false
    }
  },
  created () {
    if (this.$route.query.task_id) {
      this.info.id = this.$route.query.task_id
      this.get_point_types()
      this.get_user_info()
    }
    if (this.$route.query.isJx) {

    }
  },
  methods: {
    // 完成任务
    complete_task (item) {
      this.$router.push({name: 'process', query: {work_id: item.id, progress: 100}})
    },

    getLocalStorage () {
      if (!localStorage.getItem('taskFileNotice') || (window.plus && !plus.storage.getItem('taskFileNotice'))) {
        this.novice = true
      } else {
        this.novice = false
      }
    },
    closeNotice () {
      window.plus ? plus.storage.setItem('taskFileNotice') : localStorage.setItem('taskFileNotice', true)
      this.getLocalStorage()
    },

    sheet_select (action, index) {
      if (action.name == '编辑任务') {
        if (this.$route.query.isJx) {
          // 编辑 从上一个页面传过来一些参数
          this.$router.push({name: 'compile_efficiency',
            query: {
              info: JSON.stringify(this.info),
              base_point: this.$route.query.base_point,
              surplus: this.$route.query.surplus
            }})
        } else {
          this.$router.push({name: 'compile_task', query: {info: JSON.stringify(this.info)}})
        }
      }
      if (action.name == '撤销任务') {
        this.$dialog.confirm({
          title: '撤销任务',
          message: '任务撤销后将不可恢复，确认撤销吗？'
        }).then(() => {
          this.delete_task(0)
        })
      }
      if (action.name == '删除任务') {
        this.$dialog.confirm({
          title: '删除任务',
          message: '删除此任务将会删除其相关记录和积分数据，确认删除吗？'
        }).then(() => {
          this.delete_task(1)
        })
      }
    },
    // 撤销任务---删除任务
    delete_task (e) {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
      request(e == 0 ? 'post' : 'DELETE', e == 0 ? '/api/integral/work' : '/api/integral/work', e == 0 ? {work_id: this.info.id, status: 'refuse'} : {work_id: this.info.id}).then(res => {
        // console.log(e==0?'撤销我指派的':'删除我指派的')
        this.$toast.clear()
        if (res.data.code == 1) {
          if (e) {
            this.$keep_alive_update('update_efficiency_detail_word_list', this.info)
          } else {
            this.$keep_alive_update('update_efficiency_detail_word_list_undo', this.info)
          }
          this.$route_back()
        } else {
          this.$toast(res.data.msg)
        }
      })
    },
    open_image (index) {
      this.imageSrc = index
      this.show = true
    },
    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]
      }
    },
    go_approval () {
      if (this.types_list[this.info.pt_id].code == 'JX') {
        this.$router.push({name: 'integral_approval_performance', query: {review_id: this.info.review_id, task_id: this.$route.query.task_id}})
      } else {
        this.$router.push({name: 'integral_approval_integral', query: {review_id: this.info.review_id}})
      }
    },
    noteone () {
      if (this.info.process.list) {
        localStorage.setItem('task_process_array', JSON.stringify(this.info.process.list))
      } else {
        localStorage.setItem('task_process_array', JSON.stringify([]))
      }
      this.$router.push({name: 'integral_noteone', query: {work_id: this.info.id, employee_name: this.info.employee_name}})
    },
    remberOne () {
      if (this.info.process.list) {
        localStorage.setItem('task_process_array', JSON.stringify(this.info.process.list))
      } else {
        localStorage.setItem('task_process_array', JSON.stringify([]))
      }
      this.$router.push({name: 'remberOne', query: {work_id: this.info.id}})
    },
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },

    // 判断当前账号与发布工作者是否同一人；
    current_none (data) {
      // APP PC 兼容写法(如果下方无效 用这个)
      var userInfo = this.$store.getters.user_info
      if (data.publisher_id == userInfo.id) {
        this.The_current_account = true
      } else {
        this.The_current_account = false
      }
      this.actions = []
      // 这里比较复杂，因为团队绩效的工作详情跟我的发布的工作详情都调用这个页面
      if (data.status == 1) {
        if (data.pt_id != 1) {
          this.actions.push({ name: '编辑任务' })
          this.actions.push({ name: '删除任务' })
        } else if (data.pt_id == 1 && this.$route.query.isJx) {
          this.actions.push({ name: '编辑任务' })
          this.actions.push({ name: '删除任务' })
        } else {
          this.actions.push({ name: '删除任务' })
        }
      } else {
        this.actions.push({ name: '删除任务' })
      }
    },

    get_user_info () {
      let self = this
      self.showLoading()
      request('get', '/api/integral/work', {work_id: self.info.id}).then((res) => {
        self.$toast.clear()
        if (res.data.code == '1') {
          this.current_none(res.data.data)// 传入当前任务的信息，包含发布者
          self.info = res.data.data
          self.text_list = []
          self.point_list = []
          self.point_total = 0
          if (self.info.process.list && self.info.process.list.length > 0) {
            for (let i in self.info.process.list) {
              self.point_total += self.info.process.list[i].point * 1
              if (self.info.process.list[i].point != 0) {
                self.point_list.push(self.info.process.list[i])
              } else {
                self.text_list.push(self.info.process.list[i])
              }
            }
          }
        } else {
          self.$toast(res.data.msg)
        }
      })
    },
    delItem (index, type) {
      let self = this
      this.$dialog.confirm({
        title: '提示',
        message: '确定永久删除此项?'
      }).then(() => {
        let data = {
          work_id: this.info.id,
          process: JSON.parse(JSON.stringify(this.info.process.list))
        }
        data.process.splice(index, 1)
        request('post', '/api/integral/work', data).then(res => {
          if (res.data.code == 1) {
            self.info.process.list.splice(index, 1)
            self.getTotalData()
          } else {
            self.$toast(res.data.msg)
          }
        }).catch(e => {
          self.$toast.clear()
        })
      })
    },
    getTotalData () {
      let self = this
      request('get', '/api/integral/work', {work_id: self.info.id}).then((res) => {
        if (res.data.code == '1') {
          const info = res.data.data
          if (info.process !== null) {
            self.point_total = info.process.total
          }
        }
      })
    }
  },
  mounted () {
    this.getLocalStorage()
  },
  keep_alive_update: {
    update_task_progress: function (vm, data) {
      vm.info.progress = data
    },
    update_task_detail: function (vm, data) {
      vm.get_user_info()
    },
    update_integral_approval_performance: function (vm, data) {
      if (data.action == 'complete') {
        vm.info.status = 1
      } else {
        vm.info.status = 2
      }
    },
    update_approval_detail: function (vm, data) {
      vm.get_user_info()
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
  .body_com{height: calc(100% - 1rem); position: relative;}
  .add_btn{
    background-color: #26A2FF;
    border-radius: 50%;
    width: 1.12rem;
    height: 1.12rem;
    position: fixed;
    right: .48rem;
    bottom: 1.04rem;
    text-align: center;
    .van-icon{
      line-height: 1.12rem;
    }
  }
  .van-cell__value{
    text-align: right;
  }
  .time {
    color: #909399;
    font-size:0.28rem;
    display: flex;
    span{
      display: table-cell;
      vertical-align: middle;
      word-wrap: break-word;
      word-break: break-all;
      white-space: nowrap;
      font-size: inherit;
    }
    .van-image{
      border: 1px #ccc solid;
      margin-left: 0.2rem;
    }
  }
  .timeExactly {
    color: #303133;
    padding-left:0.16rem;
    font-size:0.28rem;
  }
  .date {
    color: #303133;
    font-size: 18px;
  }
  .van-panel__header-value {
    color: #26A2FF;
    font-size:0.28rem;
  }
  .van-progress {
    width: 100%;
    margin: 0 auto;
  }
  .van-tabs__line {
    background-color: #26A2FF;
  }
  .changsize {
    font-size: 0.32rem;
    color: #303133;
  }
  .rember {
    font-size:0.28rem;
    height: 1rem;
    line-height:1rem;
    color:#26A2FF;
    float:right;
    padding-right:0.32rem;
  }
  .taskfile_box /deep/ .efficiency_list .van-cell__value .team_info{
    display:table-cell;
    text-align: left;
    padding-left: 0.12rem;
  }
  /deep/ .efficiency_list .van-cell__value .team_record{
    display:table-cell;
    text-align: right;
  }
  .taskfile_box .team{
    padding:0.1rem 0 0.2rem;
  }
  .taskfile_box  .head_title{
    color:#303133;
    padding:0.24rem 0.32rem 0rem 0.24rem;
  }
  .taskfile_box .head_title:after{
    border:none;
  }
  .taskfile_box .schedule /deep/ .van-progress{
    margin:0.24rem auto;
    font-size:0.28rem;
  }
  .taskfile_box .review /deep/ .van-cell__title span{
    line-height:0.8rem;
  }
  .taskfile_box .task{
    margin:0.24rem 0;
  }
  .taskfile_box .task /deep/ .van-tabs__wrap{
    height: 1rem;
    line-height: 1rem;
  }
  .taskfile_box .task /deep/ .van-col{
    height: 1rem;
    line-height: 1rem;
  }
  .taskfile_box .task /deep/ .van-row .van-col .van-ellipsis{
    width:2rem;
    line-height:1rem;
  }
  .taskfile_box .task /deep/ .van-row .van-col .van-ellipsis .van-tab__text{
    font-size:0.32rem;
  }
  .taskfile_box .task /deep/ .van-tabs__line{
    width:2rem !important;
  }
  .taskfile_box .task /deep/ .van-cell__title{
    position: relative;
  }
  .taskfile_box .task .right_time {
    float:right;
    position: absolute;
    top:0;
    right:0;
    color:#999;
  }
  .taskfile_box .point /deep/ .van-grid{
    margin:0.32rem 0rem;
  }
  .taskfile_box .point /deep/ .van-grid .van-grid-item .van-grid-item__content{
    margin:0;
    padding:0;
    border-right:0.02rem #efefef solid;
  }
  .taskfile_box .point /deep/ .van-grid .van-grid-item:nth-last-child(1) .van-grid-item__content{
    border-right:none;
  }
  .taskfile_box .schedule /deep/ .van-panel__header:after{
    border-bottom:none;
  }
  .van-panel__content{
    padding: 0 0.32rem 0.5rem;
  }
  .taskfile_box .task_slider{
    position:relative;
    display: inline-block;
  }
  .taskfile_box .task_slider /deep/ .van-slider__bar{
    // background-image: linear-gradient(45deg,#4ECFFF, #26A2FF) !important;
    background-color:#26A2FF !important;
  }
  .taskfile_box .task_slider /deep/ .van-slider__bar .custom-button {
    width: 1rem;
    margin-top:0.4rem;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background:#26A2FF;
    border-radius: 100px;
  }
  .taskfile_box .task_slider /deep/ .van-slider__bar .custom-button-left{
    margin-top: 0;
    margin-left:1rem;
  }
  .taskfile_box .task_slider /deep/ .van-slider__bar .custom-button-right{
    margin-top: 0;
    margin-right:1rem;
  }
  .taskfile_box .task_slider /deep/ .van-slider__bar .custom-button-font{
    font-size: 0.26rem;
    text-align: center;
    color: #323233;
    padding: 0.3rem 1.4rem 0 0;
  }
  .taskfile_box .task_slider /deep/ .van-slider__bar .custom-button-font-show{
    display:block;
  }
  .taskfile_box .task_slider /deep/ .van-slider__bar .custom-button-font-hide{
    display:none;
  }
  /deep/ .van-grid-item__icon-wrapper{font-size:0.4rem; color: #323233;font-weight: normal;line-height: 0.5rem;}
  /deep/ .van-grid-item__text{font-size:0.28rem; color:rgb(144, 147, 153); font-size:0.24rem;}
  .point-span{font-size:0.36rem; color:#646566;}
  .task_detail_group .van-cell{
    padding:0.1rem 0.32rem 0.1rem;
  }
  .task_detail_group .name{
    padding-bottom:0.2rem;
  }
  .task_detail_group{padding:0.16rem 0;}
  .task_record_list{
    padding: 0.24rem 0.32rem 0.32rem;
    font-size: 0.32rem;
    position: relative;
  }
  .reviewer_info_title{
    padding-left: 0.32rem;
    padding-top: 0.2rem;
    position: relative;
    // border-bottom: 1px #ebedf0 solid;
    &&::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      top: -50%;
      right: -50%;
      bottom: -50%;
      left: -50%;
      border: 0 solid #ebedf0;
      -webkit-transform: scale(.5);
      transform: scale(.5);
    }
  }
  .reviewer_info{
    line-height: 0.80rem;
    span{
      color: chocolate;
      margin-left: 0.2rem;
    }
  }
  .company_dept_img {
    width: 1.4rem;
    height: 1.4rem;
  }
  [class*=van-hairline]::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: none;
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }

</style>
