<template>
<div>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
             label-width="120px">
      <el-row  :gutter="15">
        <el-col :span="12">
          <el-form-item label="施工单位年份" prop="unitId"
                        :rules="[
                 ]">
            <el-input readonly v-model="inputForm.yearOfEvaluation" placeholder="施工单位年份"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="施工单位名称" prop="unitId"
                :rules="[
                 ]">
              <el-input readonly v-model="inputForm.evaName" placeholder="施工单位名称"></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="扣分大类" prop="classId"
                :rules="[
                  {required: true, message:'扣分大类不能为空', trigger:'blur'}
                 ]">
                <el-select v-model="inputForm.classId" placeholder="请选择" @change="selectGoodsByGroupId($event)"  style="width: 100%;">
                          <el-option
                            v-for="item in bigClass"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                      </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="扣分小类" prop="subClassId"
                :rules="[
                  {required: true, message:'扣分小类不能为空', trigger:'blur'}
                 ]">
                <el-select v-model="inputForm.subClassId" placeholder="请选择" @change="selectVeto($event)"  style="width: 100%;">
                          <el-option
                            v-for="item in subClass"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                      </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item v-if="inputForm.veto != 1" label="扣分" prop="deductPoints"
                :rules="[
                  {required: true,  message:'扣分分数不为空', trigger:'blur'},
                  {validator: isNumberZero, trigger:'blur'}
                 ]">
              <el-input type="number" v-model="inputForm.deductPoints" placeholder="请填写扣分"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="扣分详情" prop="deductionDetails"
                :rules="[
                  {required: true,  message:'扣分详情不为空', trigger:'blur'},
                 ]">
              <el-input type="textarea" resize="none" :autosize="{ minRows: 4, maxRows: 4 }" v-model="inputForm.deductionDetails" placeholder="请填写扣分详情"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="日期" prop="deductionDate"
                :rules="[
                  {required: true,  message:'扣分日期不为空', trigger:'blur'},
                 ]">
                <el-date-picker
                      style="width: 100%;"
                      readonly
                      v-model="inputForm.deductionDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择扣分日期">
                    </el-date-picker>
           </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="veto=== '1'" label="是否否决" prop="veto"
                        :rules="[
                  {required: true,  message:'是否否决不能为空', trigger:'blur'},
                 ]">
            <el-select v-model="inputForm.veto" placeholder="请选择"  style="width: 100%;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        isNumberZero: (rule, value, callback) => {
          const reg = /^[+]?[1-9]+$/
          if (!reg.test(value)) {
            return callback(new Error('情输入正确的扣分分数'))
          }
          this.$http.get(`/database/datalink/dataSource/checkEnName?oldEnName=${this.inputForm.oldEnName}&enName=${value}`).then(({data}) => {
            if (!data.success) {
              return callback(new Error('连接英文名已存在!'))
            } else {
              return callback()
            }
          })
        },
        inputForm: {
          id: '',
          yearOfEvaluation: '',
          unitId: '',
          classId: '',
          subClassId: '',
          deductPoints: '',
          deductionDetails: '',
          deductionDate: '',
          veto: '',
          evaName: ''
        },
        options: [ {
          value: '0',
          label: '否'
        }, {
          value: '1',
          label: '是'
        }],
        bigClass: [],
        subClass: [],
        veto: '0',
        unitId: '',
        bigClassId: '',
        classId: '',
        subClassId: ''
      }
    },
    components: {
    },
    methods: {
      init (method, id, classId) {
        this.method = method
        this.inputForm.id = id
        this.unitId = id
        if (method === 'add') {
          this.title = `新建扣分详情`
        } else if (method === 'edit') {
          this.title = '扣分'
        } else if (method === 'view') {
          this.title = '查看扣分详情'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/deductiondetails/deductionDetails/getSummary?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data.deductionDetails)
              this.created()
              this.loading = false
            })
            this.$http({
              url: `/deductiondetails/deductionDetails/getBigClass?id=0`,
              method: 'get'
            }).then(({data}) => {
              this.bigClass = data.bigClass
              this.inputForm.classId = classId
              this.veto = '0'
              this.loading = false
              this.$http({
                url: `/deductiondetails/deductionDetails/getSubClass?id=${this.inputForm.classId}`,
                method: 'get'
              }).then(({data}) => {
                console.log('111')
                console.log(data)
                this.subClass = data.subClass
                this.loading = false
              })
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.inputForm.unitId = this.unitId
            this.loading = true
            console.log(this.inputForm)
            this.$http({
              url: `/deductiondetails/deductionDetails/insertDetails`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList')
              }
              this.loading = false
            })
          }
        })
      },
      created: function () {
        const aData = new Date()
        this.value = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate()
        this.inputForm.deductionDate = this.value.toString()
      },
      selectGoodsByGroupId (val) {
        this.$http({
          url: `/deductiondetails/deductionDetails/getSubClass?id=${this.inputForm.classId}`,
          method: 'get'
        }).then(({data}) => {
          console.log(data)
          this.subClass = data.subClass
          this.inputForm.subClassId = ''
          this.loading = false
        })
      },
      selectVeto (val) {
        console.log(val)
        this.$http({
          url: `/deductiondetails/deductionDetails/getVeto?id=${this.inputForm.subClassId}`,
          method: 'get'
        }).then(({data}) => {
          console.log(data)
          this.veto = data.veto
          this.inputForm.veto = '0'
          this.loading = false
        })
      }

    }
  }
</script>
