<template>
  <div>
    <el-card shadow="never" class="mt5">
      <div slot="header" class="clearfix">
        <span>意见信息</span>
      </div>
      <div>
        <el-form ref="postForm" :model="postForm" :rules="rules">
          <el-form-item label="处理意见" label-width="80px" required>
            <el-select :disabled="$attrs.readOnly"
                       placeholder="常用审批语"
                       v-model="templateComment"
                       @change="handleSelectChange">
              <el-option
                v-for="dict in dict.type.template_comments"
                :key="dict.value"
                :value="dict.value"
                :label="dict.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="comment">
            <el-input type="textarea" :rows="5" :readonly="$attrs.readOnly" v-model="postForm.comment"></el-input>
          </el-form-item>
          <el-form-item label="处理结果" label-width="80px" prop="pass">
            <el-select v-model="postForm.pass" :disabled="$attrs.readOnly">
              <el-option
                v-for="dict in dict.type.apply_results"
                :key="dict.value"
                :value="dict.value"
                :label="dict.label"
              ></el-option>

            </el-select>
          </el-form-item>
        </el-form>
        <el-row v-if="!$attrs.readOnly" type="flex" justify="center" class="mb20">
          <el-button type="primary" size="small" @click="handleSubmit">确认提交</el-button>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {complete} from '@/api/smartSchool/indexMould/myTask/teacherLeaveInfo'

export default {
  name: 'TaskResolve',
  dicts: ['template_comments', 'apply_results'],
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    instanceId: {
      type: [String, Number],
      default: ''
    },

  },
  data() {
    return {
      postForm: {
        comment: '',
        pass: 'true'
      },
      // 意见模板
      templateComment: '',
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      rules: {
        comment: [{required: true, message: '处理意见不能为空', trigger: 'change'}],
        pass: [{required: true, message: '处理结果不能为空', trigger: 'change'}]
      }
    }
  },

  methods: {
    /** 处理意见模板选中 */
    handleSelectChange(value) {
      this.postForm.comment = this.selectDictLabel(this.dict.type.template_comments, value);
    },

    /** 【提交】按钮 */
    handleSubmit() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.$modal.loading('正在提交数据，请稍等...')
          complete({
            taskId: this.$attrs.taskId,
            instanceId: this.instanceId,
            comment: this.postForm.comment,
            pass: this.postForm.pass
          })
            .then(response => {
              this.$modal.closeLoading()
              this.$message.success('提交成功')
              // this.$emit('submit')
              this.$emit('closePage')
            })
            .catch(error => {
              this.$modal.closeLoading()
            })
        }
      })
    }
  }
}
</script>

<style scoped>
.task-footer {
  margin: 25px auto;
}
</style>
