<template>
  <div class="manager-form">
    <el-row :gutter="gutter">
      <el-col
        :span="vertical ? 24 : item.span || defaultSpan"
        v-for="item in queryItems"
        :key="item.key"
      >
        <!-- 自定义表单类型 -->
        <template v-if="item.type == 'slot'">
          <slot :name="item.slot"></slot>
        </template>
        <!-- cascader类型 -->
        <template v-else-if="item.type == 'cascader'">
          <el-form-item :size="size" :label="item.label + ':'" :prop="item.key">
            <span v-if="command === 'detail'||item.disabled">
              {{ item.displayText }}
            </span>
            <el-cascader
              v-show="command !== 'detail'||item.disabled"
              :options="managerForm.staticData[item.dataTree]"
              :props="item.defaultprops"
              :ref="'cascader' + item.key"
              clearable
              filterable
              v-model="queryModel[item.key]"
              :show-all-levels="false"
              :placeholder="item.placeholder"
              @translate="handleTranslate($event, item)"
              @change="
                value =>
                  item.changeHandle &&
                  item.changeHandle(value)
              "
              :change-on-select="item.changeOnSelect || false"
              style="width:100%"
            >
            </el-cascader>
          </el-form-item>
        </template>
        <!-- input类型 -->
        <template v-else-if="item.type == 'input'">
          <el-form-item :size="size" :label="item.label + ':'" :prop="item.key">
            <span v-if="command === 'detail'||item.disabled">
              {{ queryModel[item.key] }}
            </span>
            <el-input
              v-else
              :type="item.inputType || 'text'"
              v-model="queryModel[item.key]"
              :placeholder="item.placeholder"
              @input="value => handleQueryChange(item.key, item.label, value)"
            >
            </el-input>
          </el-form-item>
        </template>
        <!-- inputNumber类型 -->
        <template v-else-if="item.type == 'inputNumber'">
          <el-form-item :size="size" :label="item.label + ':'" :prop="item.key">
            <span v-if="command === 'detail'||item.disabled">
              {{ queryModel[item.key] }}
            </span>
            <el-input-number
              v-else
              v-model="queryModel[item.key]"
              :placeholder="item.placeholder"
              @input="value => handleQueryChange(item.key, item.label, value)"
            ></el-input-number>
          </el-form-item>
        </template>
        <!-- select类型 -->
        <template v-else-if="item.type == 'select'">
          <el-form-item :size="size" :label="item.label + ':'" :prop="item.key">
            <span v-if="command === 'detail'||item.disabled">
              {{ item.displayText }}
            </span>
            <el-select
              v-show="command !== 'detail'||item.disabled"
              :placeholder="item.placeholder"
              v-model="queryModel[item.key]"
              :ref="'select' + item.key"
              :multiple="item.multiple || false"
              :clearable="item.clearable || false"
              :filterable="item.filterable || false"
              :remote="item.remote || false"
              :remote-method="
                query => {
                  remoteMethod(
                    query,
                    item.option,
                    item.optionLabel,
                    item.optionValue
                  )
                }
              "
              @change="
                value =>
                  item.changeHandle &&
                  item.changeHandle(value)
              "
              @translate="handleTranslate($event, item)"
              style="width: 100%"
            >
              <el-option
                v-for="item_child in managerForm.staticData[item.option]"
                :label="item_child[item.optionLabel]"
                :key="item_child[item.optionValue]"
                :value="item_child[item.optionValue]"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
        <!-- select Double 类型 -->
        <template v-else-if="item.type == 'selectDouble'">
          <div style="display: flex; alignitems: center; margintop: 2px">
            <el-select
              :placeholder="item.placeholderLabel"
              v-model="queryModel[item.keyLabel]"
              :clearable="item.clearableLabel || false"
              style="width: 37%"
            >
              <el-option
                v-for="item_child in managerForm.staticData[item.optionLabel]"
                :label="item_child[item.optionLabelKeyName]"
                :key="item_child[item.optionLabelValueName]"
                :value="item_child[item.optionLabelValueName]"
              ></el-option>
            </el-select>
            <span>：</span>
            <el-select
              :placeholder="item.placeholder"
              v-model="queryModel[item.key]"
              :clearable="item.clearable || false"
              style="width: 58%"
            >
              <el-option
                v-for="item_child in managerForm.staticData[item.option]"
                :label="item_child[item.optionLabel]"
                :key="item_child[item.optionValue]"
                :value="item_child[item.optionValue]"
              ></el-option>
            </el-select>
          </div>
        </template>
        <!-- treeSelect类型
        <template v-else-if="item.type == 'treeSelect'">
          <el-form-item
            :size="size"
            :label="item.label + ':'"
            class="selectTree"
            :prop="item.key"
          >
            <el-tree-select
              :value="item.value"
              key-name="label"
              @clear="clear(item.ref)"
            >
              <div
                v-if="item.showSearch"
                class="filter-input"
                style="padding: 0 15px 8px"
              >
                <el-input
                  placeholder="输入关键字进行过滤"
                  :value="item.filterText"
                  @input="val => search_change(val, item.ref)"
                ></el-input>
              </div>
              <el-tree
                v-model="queryModel[item.key]"
                :ref="item.ref"
                node-key="dataId"
                :data="managerForm.staticData[item.dataTree]"
                @check-change="check_change(item.ref)"
                :filter-node-method="filterNode"
                show-checkbox
                accordion
                highlight-current
              ></el-tree>
            </el-tree-select>
          </el-form-item>
        </template> -->
        <!-- treeSelect树形选择器 -->
        <template v-else-if="item.type === 'treeSelect'">
          <el-form-item :size="size" :label="item.label + ':'" :prop="item.key">
            <span v-if="command === 'detail'||item.disabled">
              {{ item.displayText }}
            </span>
            <manager-tree-select
              v-show="command !== 'detail'||item.disabled"
              ref="treeSelect"
              v-model="queryModel[item.key]"
              :data="managerForm.staticData[item.dataTree]"
              @translate="handleTranslate($event, item)"
              :multiple="item.multiple || true"
            >
            </manager-tree-select>
          </el-form-item>
        </template>
        <!-- datetime类型 -->
        <template v-else-if="item.type == 'datetime'">
          <el-form-item :size="size" :label="item.label + ':'" :prop="item.key">
            <span v-if="command === 'detail'||item.disabled">
              {{ queryModel[item.key] }}
            </span>
            <el-date-picker
              v-else
              v-model="queryModel[item.key]"
              :type="item.dataType || 'date'"
              :placeholder="item.placeholder"
              :clearable="item.clearable || true"
              :format="item.format"
              :value-format="item.valueFormat"
              @input="value => handleQueryChange(item.key, item.label, value)"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item :label="item.label+':'">
            <span>{{ queryModel[item.key] }}</span>
          </el-form-item>
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Emitter from 'ns-element/src/mixins/emitter';
export default {
  mixins: [Emitter],
  name: 'ManagerForm',
  componentName: 'ManagerForm',
  inject: ['managerForm'],
  props: {
    gutter: {
      type: Number,
      default: 20
    },
    command: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    vertical: {
      type: Boolean,
      default: false
    },
    queryItems: {
      // 查询表单渲染数据
      type: Array,
      default: () => []
    },
    queryModel: {
      type: Object,
      default: () => {}
    },
    defaultSpan: {
      type: Number,
      default: 6
    }
  },
  methods: {
    handleTranslate(val, item) {
      this.$set(item, 'displayText', val);
      this.dispatch('ManagerUi', 'handleQueryChange', {
        key: item.key,
        label: item.label,
        value: val
      });
    },
    handleQueryChange(key, label, value) {
      this.dispatch('ManagerUi', 'handleQueryChange', { key, label, value });
    },
    resetForm() {
      this.queryItems.map(item => {
        if (item.type === 'treeSelect') {
          this.$refs.treeSelect[0].clear(); // 取消勾选节点
        }
      });
    },
    search_change(val, refId) {
      this.queryItems.map((res, index) => {
        if (res.ref === refId) {
          res.filterText = val;
        }
      });
      this.$refs[refId][0].filter(val);
    },
    check_change(refId) {
      this.queryItems.map((res, index) => {
        if (res.ref === refId) {
          res.value = this.$refs[refId][0].getCheckedNodes();
        }
      });
    },
    clear(refId) {
      // 清空选择
      this.queryItems.map((res, index) => {
        if (res.ref === refId) {
          res.value = [];
        }
      });
      this.$refs[refId][0].setCheckedKeys([]);
    },

    filterNode(value, data, node) {
      if (!value) {
        node.expanded = false;
        return true;
      }
      return data.label.indexOf(value) !== -1;
    },
    remoteMethod(query, option, key, name) {
      console.log(query, option, key, name);
      if (query) {
        this.managerForm.staticData[option] = [
          {
            [key]: query,
            [name]: query
          }
        ];
      } else {
        this.managerForm.staticData[option] = [];
      }
    }
  }
};
</script>
