<template>
  <div class="task_detail_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 v-if="info.point_config">

        <van-cell-group class="task_detail_list_box">
          <van-cell v-show="info.status == 1" :title="info.owner_name+'悬赏的'+(info.pt_code=='BF'?'B分':info.pt_code=='AF'?'A分':'绩效分')+'任务'" title-class="head" label-class="sign">
            <template slot="label">
              <span class="color_yellow">{{info.status_mark}}</span>
            </template>
            <template slot="title">
              <span><Wxopendata type="userName" :openid="info.owner_name"></Wxopendata>悬赏的{{info.pt_code=='BF'?'B分':info.pt_code=='AF'?'A分':'绩效分'}}任务</span>
            </template>
            <template slot="icon">
              <userImage v-show="info.receiver_id != 0" class="fl"  :img_url="info.receiver_img_url" :user_name="info.receiver_name"  style="margin-right: 0.2rem"></userImage>
              <userImage v-show="info.receiver_id == 0" class="fl"  :img_url="info.owner_img_url" :user_name="info.owner_name"  style="margin-right: 0.2rem"></userImage>
              <!-- <userImage class="fl"  :img_url="info.owner_img_url" :user_name="info.owner_name"  style="margin-right: 0.2rem"></userImage> -->
            </template>
            <template slot="right-icon">
              <span class="record">{{info.point_config.base_point}}</span>
            </template>
          </van-cell>
          <van-cell :border="false" v-show="info.status == 2" :title="info.receiver_name">
            <template slot="label">
              <span class="color_yellow">{{info.status_mark}}</span>
            </template>
            <template slot="title">
              <span><Wxopendata type="userName" :openid="info.receiver_name"></Wxopendata></span>
            </template>
            <template slot="icon">
              <!-- <userImage :id="info.reviewer_id" style="margin-right: 0.2rem"></userImage> -->
              <userImage v-show="info.receiver_id != 0" class="fl"  :img_url="info.receiver_img_url" :user_name="info.receiver_name"  style="margin-right: 0.2rem"></userImage>
              <userImage v-show="info.receiver_id == 0" class="fl"  :img_url="info.owner_img_url" :user_name="info.owner_name"  style="margin-right: 0.2rem"></userImage>
            </template>
            <template slot="right-icon">
              <span class="">{{info.point_config.base_point}}</span>
            </template>
          </van-cell>
          <van-cell :border="false" :title="info.task_name" title-class="task_name" style="margin-top:0.24rem;"></van-cell>
          <div class="">
            <span class="title"></span>
            <span></span>
          </div>
          <van-cell :border="false" title="任务描述" v-if="info.task_remark != ''" title-class="title color_ccc task_detail" value-class="text-left" :value="info.task_remark"></van-cell>
          <van-cell :border="false" title="任务类型" title-class="title color_ccc task_detail" value-class="text-left" :value="info.pt_code=='BF'?'B分':info.pt_code=='AF'?'A分':'绩效分'"></van-cell>
          <van-cell :border="false" title="截止时间" title-class="title color_ccc task_endtime" value-class="text-left" :value="info.end_time"></van-cell>
          <van-cell :border="false" title="逾期扣分" title-class="title color_ccc task_delayrecord" value-class="text-left" :value="info.point_config.timeout_deduction_point+'分/天'"></van-cell>
          <van-cell v-if="info.department_info.length > 0" title="可见范围" title-class="title color_ccc task_delayrecord" value-class="text-left">
            <template  slot="default">
               <span v-for="(items,index) in info.department_info" :key="index">
                 <Wxopendata type="departmentName" :openid="items.name"></Wxopendata>
                </span>
            </template>
          </van-cell>
          <van-cell title="图片" title-class="title color_ccc task_img" value-class="text-left" v-show="info.task_file_list.length > 0">
            <template slot="default">
              <van-image @click="open_img(index)" style="margin-right: 0.1rem" v-for="(item,index) in info.task_file_list" :key="index" :src="item" width="50" height="50" radius="5" type="contain"  />
            </template>
          </van-cell>
        </van-cell-group>

        <!-- <van-cell-group class="padding-cell-group">
          <div class="tip">审批人</div>
          <div class="">
            <van-image
              round
              width="1rem"
              height="1rem"
              :src="info.reviewer_img_url"
               type="contain"
            />
            <div style=" font-size: 0.2rem;">{{info.reviewer_name}}</div>
          </div>
        </van-cell-group> -->

        <div class="confirm_buttom" style="padding: 0.32rem" v-show="info.status == '1' && shoe_btn && user_id != info.owner_id && info.reviewer_id != user_id">
          <van-button type="info" block @click="receive_tasks">领取任务</van-button>
        </div>

<!--        <div class="confirm_buttom" style="padding: 0.32rem" v-show="info.status == '2' && shoe_btn && user_id != info.owner_id && info.reviewer_id != user_id">
          <van-button type="info" block @click="complete_task(info)">完成任务</van-button>
        </div> -->
      </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 {Panel, Image, Dialog, ImagePreview, ActionSheet} from 'vant'
import moment from 'moment'
Vue.use(Image).use(ImagePreview).use(ActionSheet)

Vue.use(Panel).use(Image).use(Dialog).use(ImagePreview)
export default {
  // 数据
  data () {
    return {
      The_current_account: false,
      actions: [],
      sheet_show: false,

      title: '任务详情',
      info: {},
      get_id: this.$route.query.task_id,
      time: moment().format('YYYY-MM-DD HH:mm'),
      shoe_btn: false,
      user_id: this.$store.getters.user_info.id
    }
  },
  // 组件
  components: {
    userImage
  },

  // 方法
  methods: {
    // 删除
    sheet_select (action) {
      if (action.name == '编辑任务') {
        this.$router.push({name: 'compile_temp_task', query: {info: JSON.stringify(this.info)}})
      }
      if (action.name == '删除任务') {
        this.$dialog.confirm({
          title: '删除任务',
          message: '删除此任务将会删除其相关记录和积分数据，确认删除吗？'
        }).then(() => {
          this.delete_task()
        })
      }
    },
    // 删除任务
    delete_task () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
      request('DELETE', '/api/integral/task', {task_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()
        } else {
          this.$toast(res.data.msg)
        }
      })
    },

    // 打开图片
    open_img (index) {
      ImagePreview({
        images: this.info.task_file_list,
        startPosition: index,
        closeable: true
      })
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },
    // 积分
    get_point_type (d) {
      let point_type = this.$store.getters.point_types, name = ''
      point_type.forEach(v => {
        if (this.info.pt_id == v.id) {
          name = v.name
        }
      })

      return name
    },
    // 判断当前账号与发布工作者是否同一人；
    The_current_none (data) {
      // app PC兼容写法
      const user_info = (window.plus && JSON.parse(plus.storage.getItem('user_info'))) || JSON.parse(localStorage.getItem('user_info')) || this.$store.getters.user_info
      // let user_info =JSON.parse(plus.storage.getItem('user_info'))  || JSON.parse(localStorage.getItem('user_info')) || this.$store.getters.user_info
      if (data.owner_id == user_info.data.id) {
        this.The_current_account = true
      } else {
        this.The_current_account = false
      }
    },
    get_task_detail () {
      let self = this
      self.showLoading()
      request('get', '/api/integral/task', {task_id: self.get_id}).then((res) => {
        if (res.data.code == '1') {
          this.The_current_none(res.data.data)
          self.info = res.data.data
          self.shoe_btn = moment(this.time) < moment(this.info.expire_time)
          if (self.info.status == 1 && self.info.status_mark == '待领取') {
            self.actions = [{name: '编辑任务'}, { name: '删除任务' }]
          } else {
            self.actions = [{ name: '删除任务' }]
          }
        } else {
          self.$toast(res.data.msg)
        }
        this.$toast.clear()
      }).catch((e) => {
        self.$toast(e)
      })
    },
    receive_tasks () {
      let self = this
      self.showLoading()
      request('post', '/api/integral/task', {task_id: self.info.id}).then((res) => {
        if (res.data.code == 1) {
          self.$toast.clear()
          self.$toast(res.data.msg)
          self.$keep_alive_update('update_task_list', {task_id: self.info.id})
          self.$route_back()
        } else {
          self.$toast.clear()
          self.$toast(res.data.msg)
        }
      }).catch((e) => {
        self.$toast.clear()
      })
    },
    complete_task (item) {
      this.$router.push({name: 'process', query: {work_id: item.id, progress: 100}})
    }
  },
  // 生命周期 --- 创建完成
  mounted () {
    this.get_task_detail()
  },
  //
  keep_alive_update: {
    // 运用缓存更新方法来完成返回后的更新
    update_repetitive_info: function (vm, data) {
      vm.get_task_detail()
    }
  }
}
</script>
<style scoped>

.body_com{height: calc(100% - 1rem); position: relative;}
.body_com /deep/ .van-cell {
  padding: 0.1rem 0.32rem;
  font-size: 0.32rem;
}
.tip{
    font-size: 0.32rem;
    color: #333;
    margin-bottom: 0.2rem;
}
.padding-cell-group{
  padding: 0.2rem 0.32rem;
}
.task_file .van-image{
  margin-right: 0.2rem;
  border: 1px #f1f1f1 solid;
}
.task_file span{
  display: block;
  margin-bottom: 0.2rem;
}
.title{
  width: 1.5rem;
  flex: none;
}
.task_detail_box .head span{
  color:0.32rem;
  font-weight:bold;
}
.task_detail_box .sign span{
  font-size:0.28rem;
  font-weight:normal;
}
.task_detail_box .record{
  font-size:0.4rem;
  font-weight:bold;
  line-height: 1rem;
}
.task_detail_box .task_name span{
  font-size:0.36rem;
}
.task_detail_box .text-left{
  font-size:0.36rem;
  color:#303133;
}
.task_detail_box .confirm_buttom{
  /* position: absolute;
  bottom:0; */
  width: calc(100vw - 0.64rem);
}
.task_detail_box .task_detail_list_box{
  padding:0.32rem 0;
}
</style>
