<template>
  <el-form ref="search_form_wrapper" inline-message size="small" :label-width="labelWidth" v-bind="$attrs">
    <el-row :gutter="20">
      <el-col v-for="(item) in formItemList" :key="item.prop" :span="item.span||8">
        <el-form-item :label="formatColon(item.label)" :label-width="item.width || labelWidth">
          <el-input v-model="searchInfo[item.prop]" v-if="item.type==='input'"
                    :placeholder="item.placeholder||'请输入'"></el-input>
          <el-select v-model="searchInfo[item.prop]" v-else-if="item.type==='select'"
                     :filterable="item.filterable||false" :placeholder="item.placeholder||'请选择'" v-bind="item.otherAttr"
                     v-on="item.otherEvent">
            <el-option v-for="(option,optionIndex) in item.options" :key="optionIndex"
                       :label="option[item.optionsProp?item.optionsProp.label:'label']"
                       :value="option[item.optionsProp?item.optionsProp.value:'value']"></el-option>
          </el-select>
          <!-- 树状选择器 -->
          <el-cascader v-model="searchInfo[item.prop]" v-else-if="item.type==='cascader'" v-bind="item.otherAttr"
                       :options="item.options" ref="cascader" :props="item.optionsProp" @change="cascaderChange(item)"
                       :placeholder="item.placeholder||'请选择'" v-on="item.otherEvent"></el-cascader>
          <!-- <cpt-date :type="item.type"
                    v-model="searchInfo[item.prop]"
                    v-else-if="item.type.includes('date')"></cpt-date> -->
          <el-date-picker v-if="item.type.includes('date')" v-model="searchInfo[item.prop]" :type="item.type"
                          :placeholder="item.placeholder||'请选择'"
                          :value-format="item.type.includes('time')?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'"
                          v-bind="item.otherAttr" v-on="item.otherEvent"></el-date-picker>
          <enoRemoteSearch :initValue="searchInfo[item.prop]" v-model="searchInfo[item.prop]"
                           v-else-if="item.type==='remoteSearch'" v-bind="item.otherAttr" @change="remoteSearch"
                           :trigger-on-focus="true" :placeholder="item.placeholder||'请选择'"
                           :url="item.searchUrl">

          </enoRemoteSearch>
          <!-- 自定义内容 -->
          <slot v-if="item.type==='custom'" :name="item.slotName">

          </slot>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "cptFormRender",
  data() {
    return {
    };
  },
  props: {
    formItemList: {
      type: Array,
      require: true
    },
    searchObject: {
      type: Object,
      require: true
    },
    labelWidth: {
      type: String,
      default: "100px"
    }
  },
  computed: {
    searchInfo: {
      get: function () {
        let object = this.searchObject;
        this.formItemList.forEach(value => {
          this.$set(
            object,
            [value.prop],
            object[value.prop] || value.dataType || ""
          );
          if (value.type === "remoteSearch") {
            this.searchType = value.searchType;
            this.sarchProp = value.prop;
          }

        });
        return object;
      },
    }
  },
  watch: {
    // formItemList:{
    //   handler(newval,oldval) {
    //         this.formList = newval
    //   }
    // },
    //切换tab，搜索条件改变
    // formItemList(val) {
    //     console.log(val)
    //     if(this.$eno.test.empty(val))return
    //     val.forEach(value => {
    //         this.$set(
    //             this.searchInfo,
    //             [value.prop],
    //             this.searchInfo[value.prop] || value.dataType || ""
    //         );
    //     });
    //     // this.$set(this.searchInfo,'state',)
    //     console.log(this.searchInfo)
    // }
  },
  created() {
    // console.log(this.formItemList)
  },
  methods: {
    /*远程搜索数据*/
    getTypeList: function (data, cb) {
      this.$http[this.searchType]
        .read({
          current: this.$store.state.pageIndex,
          size: this.$store.state.pageSize
        })
        .then(response => {
          if (response.code === "200") {
            let results;
            results = data ?
              response.data.records.filter(value => {
                return value.name.includes(data);
              }) :
              response.data.records;
            cb(results);
          } else {
            this.$message({
              type: "error",
              message: response.data || "获取失败"
            });
          }
        });
    },

    /*选中目标*/
    selectTarget: function (item) {
      this.searchInfo[this.sarchProp] = item.id;
    },
    cascaderChange(item) {
      if(item.optionsProp && !item.optionsProp.multiple){
        this.$refs.cascader.forEach(item => {
          item.dropDownVisible = false;
        });
      }
    },
    /*远程搜索*/
    remoteSearch: function (item, prop) {
      // this.initName[prop.prop] = item.name;
    },
    /* 格式化冒号-使用中文冒号 */
    formatColon(label){
      let reg = /:|：/
      if(!reg.test(label)){
        return label+"："
      }else{
        return label.replace(':','：')
      }
    }
  }
};
</script>

<style lang="less" scoped>
.el-form {
  .el-row {
    .el-col {
      .el-form-item {
        width: 100%;
        margin-bottom: 12px;

        /deep/ .el-form-item__label {
          padding-right: 0;
        }

        /deep/ .el-form-item__content {

          .el-input {
            width: 100%;
            // max-width: 300px;

            .el-input__inner {
              padding-left: 12px !important;
            }
          }

          .el-cascader,
          .el-select {
            width: 100%;

            .el-input__suffix {
              .el-input__suffix-inner {

                .el-icon-arrow-up,
                .el-icon-arrow-down {
                  &::before {
                    content: "\e78f" !important;
                  }

                  &::after {
                    content: "" !important;
                  }
                }

                .el-select__caret {
                  display: flex;
                  padding-left: 5px;

                  &::after {
                    content: "\e78f";
                    color: #979797;
                  }

                  &:before {
                    // content: "\e78f";
                    color: #979797;
                  }
                }
              }

              .el-icon-arrow-down {
                color: #979797;
                transform: rotateZ(180deg);
              }

              .el-icon-arrow-down.is-reverse {
                transform: rotateZ(0deg);
              }
            }
          }

          .dateRangePicker {
            .el-date-editor {
              width: 100%;
              max-width: 130px;

              .el-input__inner {
                padding-left: 0 !important;
              }
            }
          }

          .el-date-editor {
            width: 100%;

            .el-input__icon {
              line-height: 32px;
            }

            .el-range-separator {
              line-height: 30px;
            }

            .el-range-input {
              line-height: 32px;
            }
          }
        }
      }
    }
  }
}
</style>
