<template>
  <div class="cms-form-magnifier">
    <div
      v-if="multiple"
      class="el-input-tag input-tag-wrapper custom-input-tag"
      :class="[size ? 'el-input-tag--' + size : '']"
      @click="focusTagInput"
    >
      <el-tag
        v-for="(tag, idx) in innerTags"
        :key="tag"
        :size="size"
        :closable="true"
        :disable-transitions="false"
        @close="remove(idx)"
      >
        <span v-if="idx !== innerTags.slice(0, 2) - 1">{{ tag }}</span>
        <span v-else>{{ tag }} + {{ innerTags.length }}</span>
      </el-tag>
    </div>
    <cms-form-input
      :value="value"
      v-bind="$attrs"
      @clear="clearEvents"
      :style="this.multiple && innerTags.length > 0 ? 'width: auto' : 'width: 100%'"
      :placeholder="placeholder"
      @input="updateVal"
      @focus="handleFocus"
    >
      <i class="el-input__icon el-icon-search" slot="suffix"> </i>
    </cms-form-input>
    <cms-modal
      :modal-width="modalWidth"
      :show-footer="false"
      :modal-height="modalHeight"
      v-if="magnifierVisible"
      v-model="magnifierVisible"
      :modal-title="magnifierTitle"
      @onCancel="handleCancel"
    >
      <cms-query-table
        ref="magnifierTable"
        :custom-refresh-table="true"
        :columns="columns"
        @cell-dblclick="cellDbClick"
        :pagination="pagination"
        :height="height"
        size="medium"
        :constant-load="constantLoad"
        @checkbox-all="onCheckTable"
        @checkbox-change="onCheckTable"
        :form-item-config="formItems"
        :show-search-form="showSearchForm"
        :search-method="searchClick"
        :query-params="queryParams"
        :request-call="requestCall"
      >
        <template v-for="item in formItems" :slot="item.prop">
          <slot :name="item.prop"></slot>
        </template>
        <slot name="columns"/>
      </cms-query-table>
      <template slot="footer">
        <cms-button key="submit" type="primary" @click="handleOk"> 确定</cms-button>
        <cms-button key="back" @click="handleCancel"> 返回</cms-button>
      </template>
    </cms-modal>
  </div>
</template>

<script>
import { CmsModalMix } from '../CmsModal/CmsModalMix'

export default {
  mixins: [ CmsModalMix ],
  name: "CmsFormMagnifier",
  data() {
    return {
      magnifierVisible: false,
      innerTags: [ ...this.value ],
    }
  },
  methods: {
    onCheckTable({ records }) {
      this.$emit("on-check", records);
    },
    searchClick() {
      this.$emit("searchMethod");
    },
    clearEvents() {
      const matchKey = this.matchKey;
      for (const key in matchKey) {
        console.log(
          "typeof this.formModel[key]",
          this.formModel[key],
          typeof this.formModel[key]
        );
        if (Array.isArray(this.formModel[key])) {
          this.formModel[key] = [];
        } else if (typeof this.formModel[key] == "string") {
          this.formModel[key] = undefined;
        } else if (typeof this.formModel[key] == "boolean") {
          this.formModel[key] = false;
        } else if (typeof this.formModel[key] == "object") {
          this.formModel[key] = {};
        }
      }
      this.$emit("clear");
    },
    updateVal(e) {
      this.$emit("input", e);
    },
    handleFocus() {
      this.magnifierVisible = true;
    },
    handleOk() {
      const table = this.$refs["magnifierTable"];
      const checkboxRecords = table.getTable().getCheckboxRecords();
      if (checkboxRecords.length > 0) {
        checkboxRecords.forEach((item) => {
          this.addTag(item.orgName);
        });
      }
    },
    handleCancel() {
      this.magnifierVisible = false;
    },
    reload() {
      this.$refs["magnifierTable"].reload();
    },
    addTag(tag) {
      tag = tag.trim();
      if (tag && !this.innerTags.includes(tag)) {
        this.innerTags.push(tag);
        return true;
      }
      return false;
    },
    focusTagInput() {
      if (this.readOnly || !this.$el.querySelector(".tag-input")) {
        return false;
      } else {
        this.$el.querySelector(".tag-input").focus();
      }
    },
    remove(index) {
      this.innerTags.splice(index, 1);
      this.tagChange();
      console.log("value---1");
      console.log(this.innerTags);
      console.log("value---2");
    },
    removeLastTag() {
      if (this.newTag) {
        return;
      }
      this.innerTags.pop();
      this.tagChange();
    },
    tagChange() {
      this.$emit("input", this.innerTags);
    },
    cellDbClick({ row }) {
      if (!this.closeBeforeConfirm) {
        return false;
      }
      if (typeof this.closeBeforeConfirm === 'function') {
        if (!this.closeBeforeConfirm(row)) {
          return false;
        }
      }
      if (this.matchKey) {
        const matchKey = this.matchKey;
        for (const key in matchKey) {
          this.formModel[key] = row[matchKey[key]];
        }
      }
      this.magnifierVisible = false;
      if (this.callback) {
        this.callback(row);
      }
      this.$emit("cell-dblclick", row);
    },
  },
  watch: {
    value() {
      this.innerTags = [ ...this.value ];
    },
  },
  props: {
    value: {
      type: [ String, Number, Array, Boolean ],
      default: () => {
        return "";
      },
    },
    footerValue: {
      type: String,
      default: () => {
        return "";
      },
    },
    size: {
      type: String,
      default: () => {
        return "default";
      },
    },
    /** 查询参数 */
    queryParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    pagination: {
      type: [ Boolean ],
      default: () => {
        return true;
      },
    },
    height: {
      type: [ String, Number, Boolean ],
      default: () => {
        return 558;
      },
    },
    showSearchForm: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    multiple: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    closeBeforeConfirm: {
      type: [ Function, Boolean ],
      default: () => {
        return true
      }
    },
    formItems: {
      type: Array,
      default: () => {
        return [];
      },
    },
    callback: Function,
    /** 参数回调地址 */
    requestCall: {
      type: [ Function, Array, String ],
      default: () => {
        return {
          data: [],
          total: 0,
        };
      },
    },
    /** 表格元素 */
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    width: {
      type: String,
      default: "60%",
    },
    /** 默认显示文本 */
    placeholder: {
      type: String,
      default: undefined,
    },
    magnifierTitle: {
      type: [ String ],
      default: () => {
        return "";
      },
    },
    matchKey: {
      type: [ Object ],
      default: () => {
        return undefined;
      },
    },
    formModel: {
      required: true,
      type: [ Object ],
      default: () => {
        return {};
      },
    },
    constantLoad: Function,
  },
};
</script>

<style scoped lang="less">
/deep/ .ant-modal-body {
  padding: 0;
}

/deep/ .vxe-modal--content {
  padding: 0 !important;
}

.input-tag-wrapper {
  position: relative;
  font-size: 14px;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  outline: none;
  padding: 0;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.el-tag {
  margin-right: 4px;
}

.tag-input {
  background: transparent;
  font-size: 14px;
  height: 40px;
  outline: none;
  padding-left: 0;
  width: 100px;
}

.el-input-tag--mini .tag-input {
  height: 28px;
  line-height: 28px;
}

.el-input-tag--small .tag-input {
  height: 32px;
  line-height: 32px;
}

.el-input-tag--medium .tag-input {
  height: 36px;
  line-height: 36px;
}

/* 下面这个的效果是autocomplete的input没有边框*/
/deep/ .custom-input-tag input {
  /* input { */
  /* background-color: red!important;  调试用的样式 */
  outline: none !important;
  border: none !important;
}

/deep/ .vxe-body--row .vxe-body--column {
  padding: 10px 0 !important;
}
</style>
