<template>
  <div>
    <van-nav-bar title="审批" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header">
      <scroller>
        <van-cell-group>
          <van-cell required>
            <Mtextarea name="意见" v-validate="'required|min:3'" v-model="data.remark" :text_max="100" placeholder="填写意见（选填）"></Mtextarea>
          </van-cell>
        </van-cell-group>
        <van-collapse v-model="point_list_show" style="margin-top:0.2rem;" :accordion="true" v-if="source_id > 0 && point_list.length > 0">
          <van-collapse-item :title="'记分记录（'+(point_total>0?'+':point_total<0?'-':'')+point_total+'分）'" name="1">
            <!-- point_list.length -->
            <van-cell-group v-for="(item, index) in point_list" :key="index" :border="false">
              <div style="color:#FFCC00;padding: 0.16rem 0 0 0.32rem;" v-if="index == 0 && item.point != 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" class="point-cell" :title="item.recorder">
                <template slot="icon">
                  <van-image :src="item.img_url?item.img_url:'static/images/defalut_custmer_headicon.png'" round width="36px" height="36px" style="margin-right: 0.12rem;" type="contain"  />
                </template>
                <template slot="label">
                  <div class="right_time">{{item.time}}</div>
                  <div style="font-size:0.28rem; color:#333;" v-if="item.point*1 > 0">+{{item.point}}</div>
                  <div style="font-size:0.28rem; color:#333;" v-if="item.point*1 < 0">{{item.point}}</div>
                  <div style="color:#323233;">{{item.remark}}</div>
                </template>

              </van-cell>
            </van-cell-group>
          </van-collapse-item>
        </van-collapse>
        <div style="padding:0 0.32rem; padding-top:0.2rem;color:#999; font-size:0.28rem;" v-if="false && info.task_remark != ''">评分标准：{{info.task_remark}}</div>
        <div v-if="source_id > 0 && point_list.length > 0" style="padding:0 0.32rem; padding-top:0.2rem;color:#999; font-size:0.28rem;">任务积分：{{task_point>0?'+':task_point<0?'-':''}}{{task_point}}分， 记录累计：{{point_total>0?'+':point_total<0?'-':''}}{{point_total}}分</div>
        <van-cell-group>
          <!-- <van-field label="积分" name="积分"  v-validate="'required'" v-model="data.point" placeholder="请输入积分" required /> -->
        <NumberInput title="积分"  required v-model="data.point" name="积分" v-validate="'required'"></NumberInput>
        </van-cell-group>

        <van-cell-group>
          <div class="tip" slot="title">奖票多用于优秀表现和重要事项的表彰
          </div>
          <van-cell center title="发放奖票">
            <template #right-icon>
              <van-switch v-model="ticket_count" size="24"/>
            </template>
          </van-cell>
        </van-cell-group>

        <van-cell-group>
          <!-- <EmployeeSelectorCell title="递交审批"  v-model="reviewer" :multi="false"></EmployeeSelectorCell> -->
        </van-cell-group>
        <div style="padding:0.32rem;">
          <van-button size="large" @click="send" type="info">提交</van-button>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import Mtextarea from '@/components/common/Mtextarea'
import EmployeeSelectorCell from '@/components/common/EmployeeSelectorCell'
import NumberInput from '@/components/common/NumberInput'
import request from '@/utils/request'
import Vue from 'vue'
import { Collapse, CollapseItem, Switch, Image} from 'vant'

Vue.use(Image)
Vue.use(Collapse)
Vue.use(Switch)
Vue.use(CollapseItem)
export default {
  name: 'performance',
  components: {
    Mtextarea, EmployeeSelectorCell, NumberInput
  },
  data () {
    return {
      point_list_show: [],
      source_id: 0,
      ticket_count: false,
      data: {
        review_id: 0,
        action: 'complete',
        rule_id: 0,
        item_id: 0,
        point: 0,
        reviewer_id: 0,
        remark: '',
        ticket_count: 0
      },
      info: {
        date: 0,
        employee_id: 0,
        employee_name: '',
        expire_time: '',
        id: 0,
        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: ''
      },
      reviewer: [],
      point_list: [],
      text_list: [],
      point_total: 0,
      task_point: 0
    }
  },
  methods: {
    get_work_info (id) {
      let self = this
      self.$toast.loading({
        message: '正在加载'
      })
      request('get', '/api/integral/work', {work_id: id}).then((res) => {
        self.$toast.clear()
        if (res.data.code == '1') {
          self.info = res.data.data
          self.text_list = []
          self.point_list = []
          self.point_total = 0
          if (self.info.process.list) {
            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)
        }
      })
    },
    get_data () {
      let self = this
      self.$toast.loading({
        message: '正在加载'
      })
      request('get', '/api/integral/review', {review_id: this.data.review_id}).then(res => {
        self.$toast.clear()
        self.data.point = res.data.data.point
        self.source_id = res.data.data.source_id
        self.task_point = res.data.data.point
        if (res.data.data.source_id > 0) {
          self.get_work_info(res.data.data.source_id)
        }
      }).catch(e => {

      })
    },
    auto_set_point () {
      this.data.point = this.point_total + this.task_point
    },
    post_data () {
      let self = this
      self.send_loading = true
      self.$toast.loading({
        message: '正在处理'
      })
      request('post', '/api/integral/review', self.data).then(res => {
        if (res.data.code == 1) {
          self.send_loading = false
          self.$toast.clear()
          self.$toast.success(res.data.msg)
          self.data.task_id = self.$route.query.task_id
          self.$keep_alive_update('update_integral_approval_performance', self.data)
          self.$keep_alive_update('update_approval_list', self.data)// 提交成功后更新缓存列表
          setTimeout(() => {
            self.$route_back()
          }, 500)
        } else {
          self.$route_back()
        }
      }).catch(e => {
        self.send_loading = false
        self.$toast.clear()
      })
    },
    send () {
      let self = this
      self.$validator.validateAll().then(result => {
        if (!result) {
          self.$notify({ type: 'danger', message: self.$validator.errors.items[0].msg })
        } else {
          self.post_data()
        }
      })
    }
  },
  watch: {
    ticket_count (val) {
      if (val) {
        this.data.ticket_count = 1
      } else {
        this.data.ticket_count = 0
      }
    },
    reviewer (val, old) {
      if (val.length == 0) {
        this.data.reviewer_id = 0
      } else {
        this.data.reviewer_id = val[0].id
      }
    }
  },
  created () {
    if (this.$route.query.review_id) {
      this.data.review_id = this.$route.query.review_id
    }
    this.get_data()
  }
}
</script>

<style scoped>
  /deep/ .van-cell__title{
    position: relative;
  }
  /deep/ .van-collapse-item__content{padding:0;}
  .right_time {
    float:right;
    position: absolute;
    top:0;
    right:0;
    color:#999;
  }
  .body_com {
    height: calc(100% - 0.92rem);
    position: relative;
  }
  /deep/ .point-cell .van-cell__title span{color:#999;}
</style>
