<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"></el-link>
          <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>
export default {
  name: "ht-add-query-strategy",
  props: {
    fieldOptions: Array,
    dialogVisible: Boolean,
    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>
