<template>
  <div>
    <van-nav-bar title="审批" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header integral_approval_box">
      <scroller>
        <van-cell-group>
          <van-cell>
            <Mtextarea class="integral_approval_des" v-model="data.text" placeholder="填写意见（选填）" :text_max="90" :imgs_max="1" images speech :imgs.sync="data.imgs"></Mtextarea>
          </van-cell>
        </van-cell-group>

        <van-collapse class="intergral_record" v-model="activeNames" >
          <van-collapse-item title="记分记录" name="1">
            <div style="display:block;text-align: left">
              <div class="header_icon">
                <img :src="'static/images/logo.png'" class="company_dept_img"/>
              </div>
              <div class="name">我是文炜</div>
              <div class="date">2020-12-31</div>
              <div class="point">+10</div>
              <div class="content">评分标准：评分标准的内容评分标准的内容评分标准的内容</div>
            </div>
          </van-collapse-item>
        </van-collapse>

        <div class="intergral_record_grading">
          <span class="des_short" v-if="intergral_record==0">评分标准：评分标准的内容评分标准的内容评分标准的内容</span>
          <span class="des_long" v-if="intergral_record==1">评分标准：评分标准的内容评分标准的内容评分标准的内容评分标准的内容评分标准的内容评分标准的内容</span>
          <span class="expand" v-if="intergral_record==0" @click='intergral_record = 1'  style="color:#238dfa;display: inline-block;">展开</span>
        </div>
        <div class="intergral_record_score"><span>任务积分120,积分记录+10，建议评分</span><span style="color:#238dfa"> 130</span></div>

        <van-cell-group>
          <van-field v-model="data.name" name="评分" label="评分" placeholder="输入分值" v-validate="'required'"/>
        </van-cell-group>

        <van-cell-group>
          <EmployeeSelectorCell title="提交审批" v-model="data.employee_list" :max="1"></EmployeeSelectorCell>
        </van-cell-group>

        <div style="padding:0.32rem;">
          <van-button size="large" @click="data_verify" type="info" :loading="send_loading" >提交</van-button>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import Mtextarea from '@/components/common/Mtextarea'
import EmployeeSelectorCell from '@/components/common/EmployeeSelectorCell'
import RuleCategorySelectorCell from '@/components/common/RuleCategorySelectorCell'
import CategorySelectorCell from '@/components/common/CategorySelectorCell'
import Vue from 'vue'
import { Collapse, CollapseItem } from 'vant'

Vue.use(Collapse)
Vue.use(CollapseItem)

export default {
  name: 'integral_approval',
  components: {
    Mtextarea, EmployeeSelectorCell, RuleCategorySelectorCell, CategorySelectorCell
  },
  data () {
    return {
      activeNames: ['1'],
      intergral_record: 0,
      data: {
        name: '',
        pwd: '',
        text: '',
        imgs: [],
        employee_list: [],
        rule_list: [],
        rule_cate: []
      },
      show_dept_selector: false,
      send_loading: false
    }
  },
  methods: {
    confirm (data) {
    },
    show_rule_selector () {
      this.show_dept_selector = true
    },
    data_verify () {
      let self = this
      self.$validator.validateAll().then(result => {
        if (!result) {
          self.$notify({ type: 'danger', message: self.$validator.errors.items[0].msg })
        } else {
          self.send()
        }
      })
    },
    send () {
      let self = this
      self.send_loading = true
      self.$toast.loading({
        message: '正在处理'
      })
      request('post','',self.data).then(res => {
        self.send_loading = false
        self.$toast.clear()
      }).catch(e => {
        self.send_loading = false
        self.$toast.clear()
      })
    }
  },
  created () {

  }
}
</script>
<style scoped>
  .body_com{height: calc(100% - 0.92rem); position: relative;}
  .integral_approval_box .intergral_record{
    margin-top:0.2rem;
  }
  .integral_approval_box .intergral_record /deep/ .van-cell{
    padding: 0.32rem !important;
  }
  .integral_approval_box .intergral_record /deep/ .van-cell__right-icon{
    color:#E4E7ED;
  }
  .integral_approval_box .intergral_record .header_icon{
    display:inline-block;
    vertical-align: top;
    width:0.72rem;
    height:0.72rem;
    margin-right:0.12rem;
  }
  .integral_approval_box .intergral_record .header_icon img{
    width:100%;
    height:auto;
  }
  .integral_approval_box .intergral_record .name{
    display:inline-block;
    vertical-align: top;
    width:3.8rem;
    font-size:0.32rem;
    color:#909399;
  }
  .integral_approval_box .intergral_record .date{
    position:absolute;
    display:inline-block;
    right:0.32rem;
    vertical-align: top;
    text-align: right;
    width:2rem;
    font-size:0.28rem;
    color:#909399;
  }
  .integral_approval_box .intergral_record .point{
    display:block;
    font-size:0.32rem;
    color:#303133;
    line-height:0.5rem;
    padding-left: 0.95rem;
    margin-top: -0.2rem;
    margin-bottom: 0.08rem;
  }
  .integral_approval_box .intergral_record .content{
    display:block;
    padding-left: 0.9rem;
    font-size:0.32rem;
    color:#303133;
  }
  .integral_approval_box .intergral_record_grading{
    padding:0.24rem 0.32rem;
  }
  .integral_approval_box .intergral_record_grading .des_short{
    display:inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
    width:84%;
    font-size:0.28rem;
    color:#909399;
  }
  .integral_approval_box .intergral_record_grading .des_long{
    display:inline-block;
    vertical-align: top;
    font-size:0.28rem;
    color:#909399;
  }
  .integral_approval_box .intergral_record_grading .expand{
    position:absolute;
    display:inline-block;
    vertical-align: top;
    text-align: right;
    width:10%;
    right:0.32rem;
    font-size:0.28rem;
    color:#909399;
  }
  .integral_approval_box .intergral_record_score{
    padding:0 0.32rem;
    font-size:0.28rem;
    color:#909399;
  }
</style>
