<template>
  <el-dialog
  title="新建查询策略"
  :visible.sync="dialogVisible"
  width="60%"
  :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="策略名称">
        <el-input size="mini" v-model="form.strategyName" v-validate="'required'" ></el-input>
      </el-form-item>

      <el-form-item label="查询条件">
        <el-row v-for="(item,index) in form.querys" :key="index">
          <el-col :span="6">
            <el-select size="mini" v-model="item.field" clearable placeholder="请选择" @change="changeField(item)" >
              <el-option :label="option.label" :value="option" v-for="(option,index) in fieldOptions " :key="index" ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6" >
            <el-select size="mini" v-model="item.operation" clearable placeholder="请选择" :disabled="item.field && item.field.options && item.field.options.length>0">
              <el-option :label="queryOP.label" :value="queryOP.value" v-for=" (queryOP,index) in queryOPs" :key="index"></el-option>
            </el-select>
          </el-col>
          <el-col :span="9">
            <el-select size="mini" v-model="item.value" v-if="item.field && item.field.options && item.field.options.length>0" clearable placeholder="请选择">
              <el-option :label="value" :value="value" v-for="(value,index) in item.field.options" :key="index" ></el-option>
            </el-select>

            <el-input size="mini" v-model="item.value" v-else placeholder="2019-10-21 - 2019-11-19"></el-input>

          </el-col>
          <el-col :span="3">
            <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="removeQuerys(item)"></el-button>
          </el-col>
        </el-row>
        <el-link type="primary" :underline="false" @click="addQuerys"><i class="el-icon-plus"></i>添加查询条件</el-link>

      </el-form-item>

      <el-form-item label="是否默认">
        <el-switch size="mini" v-model="form.isDefault"></el-switch>
      </el-form-item>
     
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleCancle">取 消</el-button>
      <el-button size="mini" type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import utils from "@/utils.js";
import service from "@/service.js";
import { Promise } from "q";
import { setTimeout } from "timers";

export default {
  name: 'ht-add-query-strategy',  

  props: {
    fieldOptions: Array,
    dialogVisible: false,
    tableCode:String
  },

  methods: {
    onSubmit: function(){
      
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.$emit("queryStrategyCancle");
        })
        .catch(_ => {});
    },
    handleCancle(){
      this.$emit("queryStrategyCancle");
    },
    save(){
      this.$validator.validateAll().then(validate => {
        if(validate){
          this.$emit("queryStrategySave",this.form);
        }else{
          this.$message.error('表单验证失败，请检查');
        }
      });
    },
    addQuerys(){
      this.form.querys.push({});
    },
    removeQuerys(item){
      this.form.querys.remove(item);
    },
    changeField(item){
      if(item.field.options && item.field.options.length>0){
        item.operation = "EQ"
      }
      item.property = item.field.value;
    }

  },

  data() {
    return {
      form:{
        querys:[{}],
        tableCode: this.tableCode
      },
      queryOPs:[
        {
          label:"等于",
          value:"EQ"
        },{
          label:"等于忽略大小写",
          value:"EIC"
        },{
          label:"小于",
          value:"LT"
        },{
          label:"大于",
          value:"GT"
        },{
          label:"小于等于",
          value:"LE"
        },{
          label:"大于等于",
          value:"GE"
        },{
          label:"不等于",
          value:"NE"
        },{
          label:"相似",
          value:"LK"
        },{
          label:"左相似",
          value:"LFK"
        },{
          label:"右相似",
          value:"RHK"
        },{
          label:"为空",
          value:"ISNULL"
        },{
          label:"非空",
          value:"NOTNULL"
        },{
          label:"在...之间",
          value:"BETWEEN"
        },{
          label:"在...中",
          value:"IN"
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
div[aria-invalid='true'] >>> .el-input__inner, div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
.el-row{
  margin-bottom: 10px;
}
.el-col{
  padding-left: 10px;
}
</style>