<template>
  <a class="integral-create-task-btn">
    <el-dialog
      append-to-body
      title="设置评分标准"
      :visible.sync="showScale"
      width="600px"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form
        :model="taskForm"
        ref="newTaskForm"
      
        @submit.native.prevent
        
        style="padding-right:20px;width: 70%;margin: 0 auto;"
      >
       <!-- <div style="width: 100%;display: flex;justify-content: space-between;font-size: 14px;color: #606266;">
           <div>任务标题</div>
           <div>比例(%)</div>
       </div> -->
       <el-form-item label="评分标准" label-width="100px" style="display: flex;justify-content: space-between;flex-direction: cloumn;">
          <div>比例(%)</div>
        </el-form-item>
        <el-form-item label="超预期" prop="very_satisfied" label-width="100px" style="display: flex;justify-content: space-between;flex-direction: cloumn;">
          <el-input
            style="width: 63px;height: 36px;"
            type="number"
            :value="taskForm.very_satisfied"
            v-model="taskForm.very_satisfied"
          ></el-input>
        </el-form-item>
        <el-form-item label="满意" prop="satisfaction" label-width="100px" style="display: flex;justify-content: space-between;flex-direction: cloumn;">
          <el-input
            style="width: 63px;height: 36px;"
            type="number"
            :value="taskForm.satisfaction"
            v-model="taskForm.satisfaction"
          ></el-input>
        </el-form-item>
        <el-form-item label="合格" prop="qualified" label-width="100px" style="display: flex;justify-content: space-between;flex-direction: cloumn;">
          <el-input
            style="width: 63px;height: 36px;"
            type="number"
            :value="taskForm.qualified"
            v-model="taskForm.qualified"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="不合格" prop="failed" label-width="100px" style="display: flex;justify-content: space-between;flex-direction: cloumn;">
          <el-input
            style="width: 63px;height: 36px;"
            type="number"
            :value="taskForm.failed"
            v-model="taskForm.failed"
          ></el-input>
        </el-form-item>
       
        </div>
      </el-form>
      <div class="exactly" style="color: #909399;font-size: 12px;width: 374px;margin-left:  163px;">
        <span>【合格】标准积分默认为100%（不可修改） </span><span>·各项标准积分=【合格】标准积分*对应百分比 </span>
        <span>·例如：【超预期】的比例为200%，当填写的【合格】积分为60分时，则超预期为60*200%=120</span>
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTaskClose('newTaskForm')">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="dialogTaskSend('newTaskForm')">确 定</el-button>
      </span>
    </el-dialog>

    
  </a>
</template>
<script>
  import Vue from 'vue'
  import qs from 'qs'
  import { getToken } from '@/utils/auth'
  import preview from '@/views/dashboard/components/preview/lib/index'
  import 'vue-photo-preview/dist/skin.css'
  Vue.use(preview, {
    tapToClose: false
  })
   
  export default {
   props: {
    iShow: {
      type: Boolean,
      default: false,
    },
  
   },
   watch: {
    iShow(val) {
      this.showScale = val;
      console.log( this.showScale )
    }
    
    },
    created() {
      console.log("jiazai")
      // this.dialogTaskClose();
      // this.getCorde();
    },
    name: 'TaskCreateBtn',
    data() {
      const taskFormRules = {
        // very_satisfied: [
        //   { required: true, message: '请输入超预期积分', trigger: 'blur' },
          
        // ],
        // satisfaction: [
        //   { required: true, message: '请输入满意积分', trigger: 'blur' }
        // ],
     
        // qualified: [
        //   { required: true, message: '请输入合格积分', trigger: 'blur'}
        // ],
        // failed: [
        //   { required: true, message: '请输入不合格积分', trigger: 'blur'}
        // ]
      }

      return {
        taskFormRules: taskFormRules,
        showScale: false,
        loading: false,
        taskForm: {
          very_satisfied: '',
          satisfaction: '',
          qualified: 100,
          failed: ''
        }
      }
    },
    methods: {
      dialogTaskSend(newTaskForm) {
     
          var params = this.taskForm;
          if(params.very_satisfied == '') {
            this.$message({
              type: 'error',
              message: '请输入超预期积分比例'
            })
            return;
          } else if(params.satisfaction == '' ) {
             this.$message({
              type: 'error',
              message: '请输入满意积分比例'
            })
            return;
          }else if(params.failed == '') {
              this.$message({
              type: 'error',
              message: '请输入不及格积分比例'
            })
          }else {

            this.$http('post','/integral.php/taskscorelevel/createUpdateScoreLevel',qs.stringify(this.taskForm)).then(res => {
             console.log(res)
             if(res.data.code == 1000) {
               this.$message({
                 type:'success',
                 message: '设置成功',
               })
               this.$emit('chngeShow')
             }

           })

          }
           
         
        
      },
      handleClose() {
        this.$emit('chngeShow')
      },
      
       dialogTaskClose(newTaskForm) {
         console.log( this.$emit);
        this.$emit('chngeShow')
        this.$refs[newTaskForm].resetFields();
      },
      getCorde() {
        console.log("dd")
        this.$http('get','/integral.php/taskscorelevel/getScoreLevel')
        .then(res => {
          console.log(res.data.code )
          if(res.data.code == 1000) {
            let { data = {} } = res.data;
            console.log( data.failed)
            this.taskForm.failed = data.failed;
            this.taskForm.qualified = 100;
            this.taskForm.very_satisfied = data.very_satisfied;
            this.taskForm.satisfaction = data.satisfaction;
          }
        })
        
      }
    },
   
  }
</script>
<style scoped>
 /deep/ .el-form-item .el-form-item__label {
     font-weight: normal;
 }
  /deep/ .el-input__inner::-webkit-outer-spin-button,
 /deep/ .el-input__inner::-webkit-inner-spin-button {
   -webkit-appearance: none!important;
   appearance: none!important;
}
.exactly span {
  display: inline-block;
  margin-bottom: 4px;
}
</style>

