<template>
  <div class="head-form-new" :class="headerFixed ? 'headerFixed':''">
    <div class="common-title" v-if="title && title !='集团招标'">{{ title }}</div>
    <div class="flex-box query-box">
      <div class="flex-box query-params" v-if="comFormData && comFormData.length">
        <div class="headForm-from">
          <div class="from-item" :key="i" v-for="(form, i) in comFormData">
            <!-- 单选 -->
            <template v-if="form.type==1">
              <el-select v-model="form.value" clearable class="form-content-width same-select-com" :class="[`select-adaptive-${form.uid}`]"
                :style="form.width?'width:'+form.width+'px':'max-width: 110px'" :placeholder="form.placeholder" @change="iptAdaptive(form.uid)">
                <el-option v-for="(item, index) in form.options" :key="index" :label="item.name" :value="item.value" :disabled="item.disabled" />
              </el-select>
            </template>
            <!-- 年月日 -->
            <template v-if="form.type==2">
              <el-date-picker @change="changeSelect" class="fromTime" style="width: 210px" v-model="form.value" type="daterange"
                prefix-icon="fromTime-icon" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </template>
            <!-- 输入框 -->
            <template v-if="form.type==3">
              <!-- 未点击前的输入框样式 -->
              <div class="normal-search-container" :class="{'is-hover-search' : form.hover}" @mouseover="searchHover($event,form)"
                @mouseleave="searchUnHover($event,form)">
                <img src="@/assets/images/enterprise/enterprise-search-icon.svg">
                <transition name="fade-position" appear mode="out-in">
                  <span v-if="!form.hover && !form.value">{{form.isword?form.isword:'搜索'}}</span>
                  <el-input v-model="form.value" :placeholder="form.placeholder ? form.placeholder : '输入关键词查询'"
                    :style="form.width?'width:'+form.width+'px':'width:238px'" @focus.stop="searchFocus($event,form)"
                    @input="value => searchInput(value,form)" v-else @keydown.native.enter="changeSelect">
                    <template slot="suffix">
                      <transition mode="out-in" appear name="fade">
                        <img src="@/assets/images/enterprise/search-input-clear-icon.svg" @click.stop="form.value = '';changeSelect()"
                          @mousedown.prevent="''" v-show="form.showClearIcon">
                      </transition>
                    </template>
                  </el-input>
                </transition>
              </div>
            </template>
            <!-- 多选 -->
            <template v-if="form.type==4">
              <el-select class="form-content-width"
                :class="form.value.length > 1 ? ['selectTag',`select-adaptive-${form.uid}`] : [`select-adaptive-${form.uid}`]" v-model="form.value"
                multiple collapse-tags clearable :style="form.width?'width:'+form.width+'px':'max-width: 170px'" :placeholder="form.placeholder"
                @change="iptAdaptive(form.uid,true)">
                <el-option v-for="(item, index) in form.options" :key="index" :label="item.name" :value="item.value" />
              </el-select>
            </template>
            <!-- 时间、自定义 -->
            <template v-else-if="form.type==5">
              <custom-time-select :class="[`select-adaptive-${form.uid}`,'custom-select']" :timeList="form.timeList" v-model="form.value"
                :placeholder="form.placeholder" :dateFrom="form.dateFrom ? form.dateFrom : ''" :dateTo="form.dateTo ? form.dateTo : ''"
                @handle-search="iptAdaptive(form.uid)" />
            </template>
            <!-- 金额 -->
            <template v-else-if="form.type==6">
              <custom-money-select :class="[`select-adaptive-${form.uid}`,'custom-select']" :moneyList="form.moneyList" v-model="form.value"
                :placeholder="form.placeholder" @handle-search="iptAdaptive(form.uid)" />
            </template>
            <!-- 地区选择 -->
            <template v-else-if="form.type==7">
              <el-cascader :class="[`select-adaptive-${form.uid}`]" ref="cascader" :options="form.options" :props="form.props" v-model="form.value"
                @change="iptAdaptive(form.uid,true)" :placeholder="form.placeholder" collapse-tags clearable></el-cascader>
            </template>
            <!-- 自定义 -->
            <template v-if="form.type==0">
              <slot name="slot"></slot>
            </template>

          </div>

        </div>
      </div>
      <template v-if="slots">
        <slot name="slot"></slot>
      </template>
      <div v-else class="flex-box">
        <span class="flex-box ability-total" v-if="isTotal">共有{{ total }}条</span>
        <span class="flex-box ability-excel" v-hasPermi="['combine:info:export:win:bid','combine:info:export:bid']" @click="clickEXCEL"
          v-if="isExcel"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
      </div>
    </div>
  </div>

</template>

<script>
import CustomTimeSelect from './CustomTimeSelect';
import CustomMoneySelect from './CustomMoneySelect';
import gsap from "gsap";
export default {
  name: "HeadForm",
  props: {
    title: {
      type: String,
      default: ''
    },
    queryParams: {
      type: Object,
      default: () => ({})
    },
    formData: {
      type: Array,
      default: () => []
    },
    isTotal: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: 0
    },
    headerFixed: {
      type: Boolean,
      default: false
    },
    isExcel: {
      type: Boolean,
      default: false
    },
    slots: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    formData: {
      handler(newValue) {
        this.comFormData = newValue;
      },
      deep: true
    }
  },
  data() {
    return {
      showSearchBox: false,
      comFormData: this.formData
    };
  },
  created() {
    this.getPlaceholder();
  },
  components: {
    CustomTimeSelect,
    CustomMoneySelect
  },
  methods: {
    searchFocus(event, formData) {
      const { target } = event;
      if (target?.value?.length) {
        this.$set(formData, "showClearIcon", true);
      }
    },
    searchBlur(event, formData) {
      const { target } = event;
      // 失去焦点没有文字
      if (!target?.value?.length) {
        this.$set(formData, "hover", false);
      }
      this.$set(formData, "showClearIcon", false);
      this.changeSelect();
    },
    searchInput(value, formData) {
      if (value?.length) {
        this.$set(formData, "showClearIcon", true);
      } else {
        this.$set(formData, "showClearIcon", false);
      }
    },
    searchHover(event, formData) {
      this.$set(formData, "hover", true);
    },
    searchUnHover(event, formData) {
      if (!formData.value) {
        this.$set(formData, "showClearIcon", false);
        this.$set(formData, "hover", false);
      }
    },
    async getPlaceholder() {
      try {
        await this.$nextTick();
        const doms = this.$el.querySelectorAll("[class*='select-adaptive-']");
        if (doms?.length) {
          doms.forEach(dom => {
            const realStyles = window.getComputedStyle(dom);
            const ipt = dom.querySelector("input");
            const text = ipt.getAttribute("placeholder");
            const textContainer = document.createElement("span");
            textContainer.style.setProperty("visibility", "hidden");
            textContainer.style.setProperty("display", "inline-block");
            textContainer.style.setProperty("font-size", "14px");
            const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
            hasPadding ? textContainer.style.setProperty("padding", realStyles.paddingRight) : null;
            textContainer.style.setProperty("box-sizing", "border-box");
            textContainer.textContent = text;
            document.body.append(textContainer);
            // 加上按钮宽度 以及按钮左外边距
            let containerWidth = textContainer.offsetWidth + 12 + 8;
            textContainer.remove();
            dom.style.setProperty("width", `${containerWidth}px`);
          });
        }
      } catch (error) {

      }
    },
    onEnter(el, done) {
      gsap.from(el, {
        opacity: 0,
        width: 0,
      });
      gsap.to(el, {
        opacity: 1,
        width: 242,
        onComplete() {
          //  完成动画聚焦输入框
          el.querySelector("input").focus();
          done();
        }
      });
    },
    iptAdaptive(uid, multiple = false) {
      multiple ? this.multipleAdaptiveHandle(uid) : this.iptAdaptiveHandle(uid);
    },
    // 多选处理
    async multipleAdaptiveHandle(uid) {
      try {
        await this.$nextTick();
        const dom = this.$el.querySelector(`.select-adaptive-${uid}`);
        const iptChild = dom.querySelector(".el-input__inner");
        if (dom) {
          const textContainer = document.createElement("span");
          const textName = `text-${uid}`;
          textContainer.classList.add(textName);
          const selectChildren = dom.querySelectorAll(".el-tag");
          if (selectChildren.length) {
            let width = 0;
            selectChildren.forEach(item => {
              const text = item.textContent;
              const itemInfo = window.getComputedStyle(item);
              textContainer.style.setProperty("visibility", "hidden");
              textContainer.style.setProperty("display", "inline-block");
              textContainer.style.setProperty("font-size", "14px");
              textContainer.style.setProperty("padding", itemInfo.padding);
              textContainer.style.setProperty("box-sizing", "border-box");
              textContainer.textContent = text;
              document.body.append(textContainer);
              width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
              textContainer.remove();
            });
            dom.style.setProperty("width", `${width + 60}px`);
            this.$emit('handle-search', this.comFormData);
            return;
          }
          textContainer.style.setProperty("visibility", "hidden");
          textContainer.style.setProperty("display", "inline-block");
          textContainer.style.setProperty("font-size", "14px");
          textContainer.style.setProperty("padding", "0px 16px");
          textContainer.style.setProperty("box-sizing", "border-box");
          textContainer.textContent = iptChild.getAttribute("placeholder");
          document.body.append(textContainer);
          let containerWidth = textContainer.offsetWidth + 12 + 8;
          textContainer.remove();
          dom.style.setProperty("width", `${containerWidth}px`);
          this.$emit('handle-search', this.comFormData);
        }

      } catch (error) {
        console.log(error);
      }
    },
    // 单选处理
    async iptAdaptiveHandle(uid) {
      try {
        await this.$nextTick();
        const dom = this.$el.querySelector(`.select-adaptive-${uid}`);
        const realStyles = window.getComputedStyle(dom);
        if (dom) {
          const iptChild = dom.querySelector(".el-input__inner");
          const textContainer = document.createElement("span");
          const textName = `text-${uid}`;
          textContainer.classList.add(textName);
          textContainer.style.setProperty("visibility", "hidden");
          textContainer.style.setProperty("display", "inline-block");
          textContainer.style.setProperty("font-size", "14px");
          const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
          hasPadding ? textContainer.style.setProperty("padding", realStyles.padding) : null;
          textContainer.style.setProperty("box-sizing", "border-box");
          textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
          document.body.append(textContainer);
          // 1px 误差
          let containerWidth = textContainer.offsetWidth + 12 + 8 + 1;
          textContainer.remove();
          dom.style.setProperty("width", `${containerWidth}px`);
        }
        this.$emit('handle-search', this.comFormData);
      } catch (error) {

      }
    },
    changeSelect(e) {
      this.$emit('handle-search', this.comFormData);
    },
    clickEXCEL() {
      if (["集团业绩", "集团招标", "供应商合作记录"].includes(this.title)) {
        this.$emit('handle-excel');
      } else {
        this.$message({
          message: '功能正在开发中',
          type: 'warning'
        });
      }
    },
    clickFocus(e) {
      document.getElementById(e).classList.toggle('span-ba');
    }
  }
}
</script>
<style lang="scss">
.el-popper[x-placement^="bottom"] {
  margin-top: 5px !important;
}
</style>
<style lang="scss" scoped>
::v-deep .el-popper[x-placement^="bottom"] {
  margin-top: 5px;
}
.headerFixed {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: 16px;
  margin-top: -16px;
  background: #fff;
}
.head-form-new {
  display: flex;
  flex-direction: column;
  .common-title {
    margin-bottom: 8px;
  }
  ::v-deep .el-input__inner {
    border: 1px solid #d9d9d9;
    height: 34px;
    line-height: 34px;
    padding-right: 27px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 4px;
  }
  ::v-deep .el-form-item {
    margin-right: 8px !important;
  }
  ::v-deep .el-input--medium .el-input__icon {
    line-height: 34px;
  }
  ::v-deep .el-cascader {
    height: 34px;
    line-height: 34px;
    /*width: 190px;*/
    width: auto;
    .el-input {
      input {
        height: 34px !important;
      }
    }
    .el-cascader__tags {
      flex-wrap: inherit;
      margin-top: 1px;
      .el-tag {
        max-width: 100px;
      }
    }
    .el-input__suffix {
      top: 1px;
    }
  }
  .headForm-from {
    display: flex;
    .from-item {
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
      .cooperate-name {
        display: flex;
        border-radius: 2px;
        border: 1px solid #d9d9d9;
        line-height: 34px;
        height: 34px;
        span {
          width: 60px;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          background: #f5f5f5;
          text-align: center;
          color: #0081ff;
          border: 1px solid #efefef;
          border-left: 0;
          cursor: pointer;
        }
        &.span-ba {
          border: 1px solid #0081ff;
          span {
            color: #ffffff;
            background: #0081ff;
            border: 1px solid #0081ff;
          }
        }
        ::v-deep .el-input {
          flex: 1;
        }
        ::v-deep .el-input__inner {
          border: 0;
          line-height: 32px;
          height: 32px;
          position: absolute;
          top: 0;
          padding-right: 28px;
          font-size: 12px;
          padding-left: 8px;
        }
      }
      .fromTime {
        ::v-deep .el-range-input {
          width: 100%;
        }
        ::v-deep .el-range-separator,
        ::v-deep .el-range__close-icon {
          line-height: 24px;
          width: 20px;
        }
      }
      .fromTime-icon {
        display: none;
      }
      .el-select {
        .el-input__suffix {
          right: 10px;
        }
      }

      ::v-deep .normal-search-container {
        display: flex;
        align-items: center;
        transition-property: width, background;
        transition-duration: 0.3s;
        width: 64px;
        height: 32px;
        padding-left: 12px;
        box-sizing: border-box;
        position: relative;

        &.is-hover-search {
          width: 238px;
          background: #f4f6f9;
          border-radius: 4px 4px 4px 4px;

          & > img {
            cursor: unset;
          }
        }

        & > img {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }

        // & > .search-transition-container > span {
        & > span {
          color: rgba(35, 35, 35, 0.8);
          font-weight: 400;
          margin-left: 8px;
          line-height: 22px;
          font-size: 14px;
          cursor: pointer;
        }

        .search-transition-container {
          width: 100%;
        }

        .el-input {
          width: 100% !important;
          & > .el-input__inner {
            border: none;
            height: 32px;
            line-height: 32px;
            caret-color: #0081ff;
            color: rgba(35, 35, 35, 0.8);
            font-size: 14px;
            background: transparent;
            padding-right: 26px;
            padding-left: 8px;

            &::placeholder {
              color: rgba(35, 35, 35, 0.4) !important;
              font-size: 14px !important;
              line-height: 32px;
            }
          }
          .el-input__suffix {
            right: 12px;
            display: flex;
            align-items: center;

            .el-input__suffix-inner {
              height: 14px;
              width: 14px;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            img {
              cursor: pointer;
              vertical-align: unset;
            }
          }
        }
      }
    }
    ::v-deep .form-content-width {
      /*width: 170px;*/
      /*width: auto;*/
    }
    ::v-deep .selectTag {
      .el-select__tags {
        .el-tag {
          &:first-child {
            width: 70px;
          }
        }
      }
    }
    ::v-deep .el-select__tags {
      .el-tag {
        &:first-child {
          /*width: 100%;*/
        }
      }
    }
  }
  .ability-total {
    font-size: 12px;
    color: #3d3d3d;
    position: relative;
    &:before {
      content: "";
      display: inline-block;
      width: 2px;
      height: 2px;
      background: rgba(35, 35, 35, 0.4);
      margin-right: 4px;
    }
  }
  .ability-excel {
    font-size: 14px;
    color: rgba(35, 35, 35, 0.8);
    margin-left: 16px;
    cursor: pointer;
    &:hover {
      color: #0081ff;
    }
    img {
      width: 18px;
      height: 18px;
      margin-right: 4px;
    }
  }
}
</style>
