<template>
    <!-- 新增条件 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="visible" :close-on-click-modal="false" :before-close="cancel"
      class="dialogClass" width="45%">
      <div class="addDia">
        <el-form :model="form" ref="diaform" :rules="rules" class="diaform" label-width="100px">
          <el-form-item label="字段" prop="fieldEg">
            <el-select v-model="form.fieldEg" placeholder="请选择" style="width:100%;" @change="handleChangeFiled">
                <el-option
                    v-for="item in entityArray"
                    :key="item.value"
                    :label="item.columnChnName"
                    :value="item.columnName">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="比较" prop="compare">
            <el-select v-model="form.compare" placeholder="请选择" style="width:100%;">
                <el-option
                    v-for="item in compareOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="值" prop="value">
            <template v-if="optionFieldObj.columnInputType==1 || optionFieldObj.columnInputType==3">
              <!-- 全宗号 -->
              <template v-if="optionFieldObj.columnName=='fonds_no'">
                <el-select v-model="form.value" placeholder="请选择" style="width:100%;">
                    <el-option
                        v-for="item in fondsList"
                        :key="item.fondscode"
                        :label="item.codeName"
                        :value="item.fondscode">
                    </el-option>
                </el-select>
              </template>
              <template v-else>
                <el-input size="small" v-model.trim="form.value"></el-input>
              </template>
            </template>
            <template v-else>
              <el-select v-model="form.value" placeholder="请选择" style="width:100%;">
                  <el-option
                      v-for="item in noteOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label">
                  </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-circle-check" size="mini" @click="sumbit('diaform')" type="primary">保存</el-button>
            <el-button icon="el-icon-circle-close" size="mini" @click="cancel" type="info">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </template>
  <script>
  import {getFondWithPage} from "@/api/system-management/allAdministration";
  import {getFindList} from "@/api/system-management/templateSetting"
    export default {
      props: {
        visible: {
          type: Boolean,
          default: () => false,
        },
        title: {
          type: String,
          default: () => "新增条件",
        },
        entityArray:{ // 实体字段
          type:Array,
          default:()=>[]
        },
        isOpenArchive:{ // 开放或者不开放
          type:Number,
          default:()=>0
        },
        treeRow:{
          type:Object,
          default:()=>{}
        },
        treeParentId:{ // 父节点
          type:Number,
          default:()=>0
        },
        form: {
          type: Object,
          default: () => {},
        },
      },
      data(){
        return {
          loading:false,
          fondsList:[], // 获取全宗
          noteOptions:[], // 获取字段对象的数据
          btnloading: false,
          optionFieldObj:{}, // 获取字段选中的对象
          compareOptions:[{label:'=',value:'='}],
          rules:{
            fieldEg:[{ required: true, message: '请选择', trigger: 'change' }],
            compare:[{ required: true, message: '请选择', trigger: 'change' }],
            value:[{ required: true, message: '请输入', trigger: 'blue' }]
          }
        }
      },
      methods: {
        // 获取全宗数据
        getFondWithPage(){
          getFondWithPage({
            limit: 1000
          }).then(res => {
            this.fondsList = res.body.list;
          });
        },
        // 改变字段选择时
        handleChangeFiled(val){
          this.form.value = '';
          this.entityArray.find(item=>{
            if(item.columnName == val){
              this.optionFieldObj = item;
            }
          })
          
          if(this.optionFieldObj.columnInputType == 2){
            // 获取对应字段的值
            let _note = this.optionFieldObj.note && JSON.parse(this.optionFieldObj.note).type;
            // 字典对应值
            this.getFindList(_note);
          }else if(this.optionFieldObj.columnInputType == 1){
            // 全宗号
            if(this.optionFieldObj.columnName == 'fonds_no'){
              //this.getFondWithPage();
            }
          }
        },
        // 获取字典中的值
        getFindList(filedValue){
          this.loading = true;
          getFindList({type:filedValue}).then((res)=>{
            if(res.code == 100){
              this.noteOptions = res.body.list;
            }
          }).finally(()=>{
            this.loading = false;
          })
        },
        sumbit(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
                if (this.title === "新增条件") {
                  let params = {
                    classId:this.treeParentId,
                    entityId:this.treeRow.id,
                    fieldCh:this.optionFieldObj.columnChnName,
                    fieldEg:this.form.fieldEg,
                    openType:this.isOpenArchive,
                    value:this.form.value
                  }
                  this.$emit('clickAdd',params)
                }
              }
          });
        },
        cancel() {
          this.$emit("cancel");
        },
      },
      mounted(){
        this.getFondWithPage();
      }
    };
  
  </script>
  <style lang="scss" scoped>
    .addDia {
      padding: 0 5%;
      .diaform {
  
        ::v-deep .el-form-item__label {
          font-weight: 500;
        }
      }
  
      ::v-deep.el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
  
  </style>
  