<template>
  <div class="head-form-new">
    <div class="common-title" v-if="title">{{ title }}</div>
    <div class="flex-box query-box">
      <div class="flex-box query-params">
        <div class="headForm-from">
          <div class="from-item" :key="i" v-for="(form, i) in formData">
            <!-- 单选 -->
            <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" @click="showSearchBox = true" v-if="!showSearchBox">
                <img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
                <span>搜索</span>
              </div>
              <!-- 输入框展开后样式 -->
              <transition @enter="onEnter" appear mode="out-in">
                <div class="cooperate-name enterprise-search-container" :id="'focus'+i" v-if="showSearchBox">
                  <el-input clearable @clear="changeSelect" @focus="clickFocus('focus'+i)" @blur="clickFocus('focus'+i)" v-model="form.value"
                    :placeholder="form.placeholder" :style="form.width?'width:'+form.width+'px':'width:180px'"></el-input>
                  <span @click="changeSelect">搜索</span>
                </div>
              </transition>
            </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']" v-if="isExcel && title ==='集团业绩'"
          @click="clickEXCEL"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
        <span class="flex-box ability-excel" v-else @click="clickEXCEL"><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
    },
    isExcel: {
      type: Boolean,
      default: false
    },
    slots: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showSearchBox: false
    };
  },
  created() {
    this.getPlaceholder();
  },
  components: {
    CustomTimeSelect,
    CustomMoneySelect
  },
  methods: {
    async getPlaceholder() {
      try {
        await this.$nextTick();
        const doms = document.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 = document.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');
            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');
        }

      } catch (error) {
        console.log(error);
      }
    },
    // 单选处理
    async iptAdaptiveHandle(uid) {
      try {
        await this.$nextTick();
        const dom = document.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);
          let containerWidth = textContainer.offsetWidth + 12 + 8;
          textContainer.remove();
          dom.style.setProperty("width", `${containerWidth}px`);
        }
        this.$emit('handle-search');
      } catch (error) {

      }
    },
    changeSelect(e) {
      this.$emit('handle-search');
    },
    clickEXCEL() {
      if (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;
}
.head-form-new {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
  .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;
        }
      }

      .normal-search-container {
        display: flex;
        align-items: center;
        cursor: pointer;

        &:hover {
          & > span {
            color: #0081ff;
          }
        }

        & > img {
          width: 16px;
          height: 16px;
          margin-left: 12px;
        }

        & > span {
          color: rgba(35, 35, 35, 0.8);
          font-weight: 400;
          margin-left: 8px;
          line-height: 22px;
          font-size: 14px;
        }
      }
    }
    ::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>
