<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>
            <Mtextarea v-model="data.text" placeholder="完成了哪些工作(必填)" :text_max="100" :imgs_max="1" images speech :imgs.sync="data.imgs"></Mtextarea>
          </van-cell>
        </van-cell-group>
        <van-cell-group  class="tips" style="background: #F5F7FA;">
          <van-cell  title="觉得xxx今日工作表现不错，加分鼓励！" size="large" />
          <van-cell title="分数在审批时作为参考" size="large" />
        </van-cell-group>
        <van-panel>
          <div slot="header" class="point" style="background: #fff">
            <span class="culutar">计分</span>
            <van-button plain round type="info" size="small">加</van-button>
            <van-button plain round type="info" size="small">减</van-button>
          </div>
        </van-panel>
         <van-cell-group :border="false" class="allow">
          <van-field v-model="data.name"  placeholder="输入分值" />
        </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 Vue from 'vue'
  import Mtextarea from '@/components/common/Mtextarea'
  import { Panel,Button,Progress} from 'vant'
  Vue.use(Panel).use(Button).use(Progress)
  export default {
    name: "form_demo",
    components: {
      
      Mtextarea
    },
    data(){
      return {
        data: {
          
          text: '',
          imgs: [],
         
        },
        send_loading: false
      }
    },
    methods: {
     
      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;}
  .tips .van-cell {
      background: #f5f5f5;
      padding: 0.12rem 0.32rem 0.02rem 0.32rem;
  }
  .point {
      padding: 0.32rem 0 0 0.32rem;
  }
  .culutar {
      font-size:0.38rem;
      color:#303133;
      padding-right: 1.24rem;
   }
   .allow {
       margin-top: 0;
   } 
</style>
