<template>
  <div class="my_task_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"  />
        </div>
      </template>
      <!-- <template slot="right">
        <span class="color-fff" v-if="info.reviewer_id == user_info.id" @click="temp_task_edit(info)">编辑</span>
      </template> -->
    </van-nav-bar>
    <div class="body_com has_header">
      <scroller class="scroller-top">
        <van-cell-group>
          <van-cell :border="false" :title="info.name"></van-cell>
          <van-cell class="task_content" :border="false" title="任务描述" :value="info.remark"></van-cell>
          <van-cell class="task_content" :border="false" v-if="info.point_config" title="任务积分" :value="info.point_config.base_point+info.pt_name"></van-cell>
          <van-cell class="task_content" :border="false" v-if="info.point_config" title="逾期扣分" :value="info.point_config.timeout_deduction_point+'分/天'"></van-cell>
          <van-cell class="task_content" :border="false" title="执行周期" :value="info.task_cycle_mark"></van-cell>

          <van-cell class="task_content task_content_last" :border="false" title="任务附件">
            <template slot="default">
              <van-grid :border="false" :column-num="6">
                <van-grid-item @click="open_img(index)" v-for="(item,index) in info.file_list" :key="index">
                  <van-image :src="item" width="40" height="40" type="contain" />
                </van-grid-item>
              </van-grid>
            </template>
          </van-cell>
        </van-cell-group>

        <van-cell-group class="padding-cell-group">
          <div class="tip">审批人</div>
          <div style="width:0.9rem; margin-top:0.16rem;">
              <userImage :user_name="info.reviewer_name" :id="parseInt(info.reviewer_id)"  width="0.8rem" height="0.8rem"  ></userImage>
            <div style=" font-size: 0.2rem; text-align: center;"><Wxopendata type="userName" :openid="info.reviewer_name"></Wxopendata></div>
          </div>
        </van-cell-group>

        <van-cell-group class="padding-cell-group" >
          <div class="tip">执行者</div>
          <div class="" style="margin-top:0.16rem;display: inline-block;margin-right: 0.2rem; width: 0.8rem;" v-if="info.target_info" v-for="(item,index) in info.target_info" :key="index">
            <userImage fontSize="0.28" :user_name="item.name" :id="parseInt(item.id)" width="0.8rem" height="0.8rem"></userImage>
            <div style="font-size: 0.2rem; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"><Wxopendata type="userName" :openid="item.name"></Wxopendata></div>
          </div>
        </van-cell-group>
      </scroller>
    </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 userImage from '@/components/common/user_image'
import Vue from 'vue'
import {Image, ImagePreview, ActionSheet} from 'vant'
Vue.use(Image).use(ImagePreview).use(ActionSheet)

export default {
  // 数据
  data () {
    return {
      actions: [{ name: '删除任务' }],
      sheet_show: false,
      title: '重复任务详情',
      info: {},
      get_id: this.$route.query.schedule_id,
      user_info: this.$store.getters.user_info
    }
  },
  // 组件
  components: {
    userImage
  },
  // 方法
  methods: {
    // 上拉菜单点击
    sheet_select (action) {
      if (action.name == '删除任务') {
        this.$dialog.confirm({
          title: '删除任务',
          message: '删除此任务后，将不再自动按周期发布任务，确认删除吗？'
        }).then(() => {
          this.delete_task()
        })
      }
      if (action.name == '编辑任务') {
        this.temp_task_edit()
      }
    },
    // 删除重复任务任务
    delete_task () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
      request('DELETE', '/api/integral/schedule', {schedule_id: this.info.id}).then(res => {
        this.$toast.clear()
        if (res.data.code == 1) {
          this.$keep_alive_update('update_efficiency_detail_word_list', this.info)
          this.$route_back()
          // this.$router.go(-1);
        } else {
          this.$toast(res.data.msg)
        }
      })
    },

    open_img (index) {
      ImagePreview({
        images: this.info.file_list,
        startPosition: index,
        closeable: true
      })
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },
    get_data () {
      let self = this
      self.showLoading()
      request('get', '/api/integral/schedule', {schedule_id: self.get_id}).then((res) => {
        if (res.data.code == '1') {
          self.info = res.data.data
        } else {
          self.$toast(res.data.msg)
        }
      })
    },
    //  进入详情
    temp_task_edit (info) {
      this.$router.push({name: 'temp_task_edit', query: {schedule_id: this.get_id}})
    }
  },
  keep_alive_update: {
    // 运用缓存更新方法来完成返回后的更新
    update_repetitive_list: function (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.data.schedule_id) {
        }
      }
    }
  },
  mounted () {
    this.get_data()
  }
}
</script>
<style scoped>
.body_com{height: calc(100% - 1rem); position: relative;}
.tip{
  font-size: 0.32rem;
}
.padding-cell-group{
  padding: 0.2rem 0.32rem;
}
.my_task_box /deep/ .van-tabs__wrap{
  display: block;
  text-align: center;
  height: 1rem;
  background: #e4e7eb;
}
.my_task_box /deep/ .van-tabs__wrap .van-tab__text{
  font-size:0.32rem;
}
.color-fff{
  color: #fff;
}
.task_content .van-cell__title span{color:#969799;}
  .task_content{padding:0.05rem 0.32rem;}
  .task_content /deep/ .van-cell__title{width:1.5rem; flex:none;-webkit-box-flex:unset;-webkit-flex:none;}
  .task_content /deep/ .van-grid-item__content{padding:0;}
.task_content /deep/ .van-cell__value{text-align: left; color:#323233;}
  .task_content_last{padding-bottom:0.32rem;}
</style>
