<template>

  <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item ref="ruleName" label="规则名称:" prop="ruleName">
      <a-input v-model="form.ruleName" />
    </a-form-model-item>
    <!-- <a-form-model-item ref="ruleType" label="规则类型:" prop="ruleType">
      <a-select v-model="form.ruleType">
        <a-select-option v-for="(index, key) in ruleTypeArr" :key="key" :value="key">
          {{ index.dictLabel }}
        </a-select-option>
      </a-select>
    </a-form-model-item> -->

    <a-form-model-item ref="dimension" label="维度:" prop="dimension">
      <a-select v-model="form.dimensionStr">
        <a-select-option v-for="(index, key) in dimensionArr" :key="key" :value="key">
          {{ index.dictLabel }}
        </a-select-option>
      </a-select>
    </a-form-model-item>

    <a-form-model-item class="form-item-bar" ref="sqlString" label="自定义SQL:" prop="sqlString">
      <a-textarea v-model="form.sqlString" :auto-size="{ minRows: 3, maxRows: 5 }" />

      <a-button class="generateBtn" type="primary" size="small" >
        语义校验
      </a-button>
    </a-form-model-item>

    <a-form-model-item class="form-item-bar" ref="ruleDescribe" label="规则描述:" prop="ruleDescribe">
      <a-input v-model="form.ruleDescribe"/>
    </a-form-model-item>

    <a-form-model-item :wrapper-col="{ span: 14, offset: 8 }">
      <a-button type="stop" style="margin-right: 20px;" @click="handleOk">
        取消
      </a-button>

      <a-button type="add" @click="onSubmit">
        确定
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>

<script type="text/ecmascript-6">
import { getAdd, getUpdate, getRuleTypeArr, getDimensionStr } from '@/api/quality/rules'

export default {
  props: {},
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
      other: '',
      form: {
        ruleName: '',
        ruleType: '',
        dimension: '',
        dimensionStr: '',
        sqlString: '',
        ruleDescribe: ''
      },
      ruleTypeArr: [],
      dimensionArr: [],

      rules: {
        ruleName: [
          { required: true, message: '请输入规则名称', trigger: 'blur' }
        ],
        ruleTypeStr: [{ required: true, message: '请选择规则类型', trigger: 'blur' }],
        dimensionStr: [{ required: true, message: '请选择维度', trigger: 'change' }],
        sqlString: [{ required: true, message: '请输入自定义SQL', trigger: 'change' }],
        ruleDescribe: [{ required: true, message: '请输入规则描述', trigger: 'change' }]
      },
      submitType: null,
      modalVisible: true
    }
  },
  mounted() {
    this.getRuleTypeArr()
    this.getDimensionStr()
  },
  methods: {
    getRuleTypeArr() {
      getRuleTypeArr().then((res) => {
        this.ruleTypeArr = res.rows
      })
    },
    getDimensionStr() {
      getDimensionStr().then((res) => {
        this.dimensionArr = res.rows
      })
    },

    onSubmit() {
      //  console.log(`res--add--this.form`, this.form)

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.submitType === 'add') {
              console.log(`res--add--this.form`, this.form.ruleType)

            getAdd(this.form).then((res) => {
              // console.log(`res--add`, res)
              this.handleOk()
            })
          } else if (this.submitType === 'edit') {
            getUpdate(this.form).then((res) => {
              // console.log(`res--edit`, res)
              this.handleOk()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
   },

    handleOk() {
      this.$emit('handleOk')
    }
  }
}
</script>

<style lang='less' scoped>
/deep/.ant-form-item-children {
  position: relative;
  display: block;
}
.form-item-title {
  color: #000;
  font-weight: bold;
  text-indent: 2em;
}
.form-item-bar {
  position: relative;
  input {
    padding-right: 40px;
  }
  .copyBtn {
    position: absolute;
    right: -38px;
    top: 4px;
    border: none;
    background: none;
    /deep/.anticon-copy{
      font-size: 20px;
    }
  }
  .generateBtn {
    position: absolute;
    right: -80px;
    height: 32px;
    top: 1px;
  }
}

textarea {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}
/*滚动条样式*/
textarea::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}
textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.1);
}
textarea::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
