<template>
  <el-dialog
      v-drag
      title="设置规则"
      :visible.sync="show"
      id="sitingService"
      width="450px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      v-if="show"
  >
    <el-form
        :model="form"
        ref="forms"
        label-width="80px"
        :labelPosition="labelPosition"
    >
      <el-form-item label="必填" width="200" >
        <el-switch
            v-model="form.required"
            on-text="是"
            off-text="否"
            active-value="true"
            inactiove-value="false"
        ></el-switch>
      </el-form-item>
      <el-form-item label="校验" width="200" >
        <el-select
            @change="ruleChange"
            v-model="form.rule"
            placeholder="请选择校验规则"
        >
          <el-option
              v-for="item in ruleList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="表达式" width="200">
        <el-input
            type="text"
            placeholder="填写验证表达式"
            v-model="form.ruleText"
            maxlength="501"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>
import {
  getDataSet //获取校验字典列表
} from "./service"
export default {
  name: "ruleData.vue",
  data() {
    return {
      show:false,
      form:{
        required:false,
        rule:"",
        ruleText:""
      },
      ruleList:[],
      labelPosition:"left"

    }
  },
  methods:{
    getPage(data) {
      console.log("接收data", data)
      this.form={
        required:false,
        rule:"",
        ruleText:""
      }
      this.getDictionaryFun();
      this.id = data.id;
      if(data.ruleText && data.ruleText != "") {
        let tmpTule = eval(data.rule)
        console.log("tmpTule", tmpTule, tmpTule[0].required)
        this.form ={
          required:tmpTule[0].required,
          rule:data.ruleText,
          ruleText:data.ruleText
        }
      }

      this.show = true;
    },
    submit() {
      let params={
        required:this.form.required,
        id:this.id,
        ruleText:this.form.ruleText
      }
      this.$emit("regexpText", params)
      this.show = false;

    },
    ruleChange(data) {
      this.form.ruleText = this.getRuleText(this.form.rule)
      // let aaa = this.getRuleLabel("2222")
      // console.log("this.form.ruleText", this.form.ruleText)
    },
    //通过key获取value
    getRuleText(data) {
      let resData = "";
      this.ruleList.forEach(item=>{
        if(item.value == data) {
          resData=item.value
          return
        }
      })
      return resData
    },
    //获取校验字段字典
    async getDictionaryFun() {
      this.ruleList=[];
      let params ={
        condition: {keyword: "", catalogId: "FEBA20DB2383459E881CD25C619262EA"},
        pageNum: 1,
        pageSize: 50
      }
      let res = await getDataSet(params);
      console.log("res", res)
      if(res.code == 200) {
        for(let i = 0; i < res.content.rows.length; i++) {
          this.ruleList.push({
            value:res.content.rows[i].code,
            label:res.content.rows[i].name
          })
        }

      }
    },

  }
}
</script>

<style scoped>

</style>
