<template>
  <div
    class="flexbox form__box"
    :style="{ width: width || '100%' }"
    ref="selectFlexBox"
    @click="forbidBubbling"
  >
    <div class="shadeing" v-if="show == true" @click="showOpen($event, false)"></div>
    <div
      class="title form__title"
      v-if="title"
      :style="{ width: title_width || '' }"
      :title="title"
    >
      <span class="red2" v-if="emphasize">*</span>
      {{ title }}
    </div>
    <div class="flex" :style="{ 'z-index': show == true ? 199:1, background:backgroundColor }">
      <div class="height100 selectBox" @click="showOpen($event, true)" ref="selectBox">
        <!-- 单选时输入框 -->
        <!-- <input type="text" v-model="textValue" class="select__input" ref="selectInput" /> -->
        <img
          class="height100"
          style="width:40px"
          :src="currentValue"
          alt
          ref="selectInput"
          v-if="setObj.type == 'img'"
        />
        <span
          v-if="setObj.type == 'iconfont'"
          :class="'height100 imgbox iconfont '+(clickItem.iconfont?clickItem.iconfont+' font18':'select__placeholder')"
          :style="'width:40px;color:'+clickItem.color+';' +(clickItem.iconfont?'font-weight:bold':'')"
        >{{clickItem.iconfont?'':'请选择'}}</span>

        <div
          class="select__opacityBox"
          :style="{ width: domElm.width + 'px', left: domElm.left + 'px', top: domElm.top + 'px' }"
        >
          <div
            class="select__opacity transition__all_3s"
            :style="{ opacity: show == true ? 1:0, top: where == 'down' ? choiceTop + 'px':'', bottom: where == 'up' ? choiceBottom + 'px':'' }"
          >
            <div
              class="select__listbox transition__all_3s"
              :style="{ height: show == true ? height + 'px':0 }"
            >
              <div class="select__list" :style="{ height: height + 'px' }" ref="selectImg">
                <div class="blockDiv">
                  <div
                    v-for="(item,index) of setObj.data"
                    :key="index"
                    :class="'block urlimg' + (item.active?'img-active':'')"
                    @click="imgClick($event,item)"
                  >
                    <img class="imgbox" :src="item.showIcon" alt v-if="item.showIcon" />
                    <span
                      v-if="item.iconfont"
                      :class="'imgbox font24 iconfont '+item.iconfont"
                      :style="'color:'+item.color"
                    ></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tsImgSelect',
  components: {},
  props: {
    value: {
      type: [Number, String, Boolean],
      default: ''
    },
    source: Object,
    disabled: Boolean,
    emphasize: Boolean,
    title: String,
    width: String,
    popWidth: String,
    titleWidth: [String, Number]
  },
  data() {
    return {
      backgroundColor: '#fff',
      currentValue: this.value,
      textValue: '',
      setObj: this.source || {},
      show: false,
      height: 200,
      loading: false,
      choiceTop: 28,
      choiceBottom: 60,
      choiceWidth: 12,
      // 层位置等基本属性
      domElm: {
        width: 0,
        left: 0,
        top: 0
      },
      where: 'down',
      title_width: '',
      blurTF: true,
      clickItem: {} // 被选中的项
    }
  },
  computed: {},
  created() {
    // 标题宽度计算
    if (this.titleWidth) {
      this.title_width = this.titleWidth.toString()
      if (
        this.title_width.indexOf('px') === -1 &&
        this.title_width.indexOf('%') == -1 &&
        this.title_width !== 'auto'
      ) {
        this.title_width = this.title_width + 'px'
      }
    }
  },
  mounted() {
    this.initView()
  },
  methods: {
    initView() {
      for (let item of this.setObj.data) {
        if (item.code == this.value) {
          this.clickItem = { ...item }
          break
        }
      }
    },
    // 显示隐藏
    showOpen(e, type) {
      this.$emit('inputBlur', this.textValue)
      const winH = document.body.clientHeight
      const elm = this.$refs.selectBox.getBoundingClientRect()
      if (this.disabled === true) {
        return false
      }
      this.loading = false
      if (type === true) {
        this.domElm = {
          width: this.popWidth || this.$refs.selectBox.offsetWidth,
          left: elm.left,
          top: elm.top
        }
        this.show = type
      } else {
        this.page = 1
        setTimeout(() => {
          this.show = type
        }, 100)
      }
      this.choiceTop = this.$refs.selectBox.offsetHeight + 5
      this.choiceBottom = 5
    },
    imgClick(e, item) {
      this.showOpen(e, false)
      this.clickItem = item
      this.$emit('selected', item)
    },
    // 阻止冒泡
    forbidBubbling(e) {
      e.stopPropagation()
    }
  },
  watch: {
    value: {
      handler(n, o) {
        this.currentValue = n
        this.initView()
      },
      deep: true
    },
    // currentValue: {
    //   handler(news, old) {},
    //   deep: true
    // },
    disabled: {
      handler(o) {
        if (this.disabled) {
          //新增disabled样式
          this.backgroundColor = '#f3f3f3'
          // this.$refs.selectInput.setAttribute('disabled', 'disabled')
        } else {
          // this.$refs.selectInput.removeAttribute('disabled')
          this.backgroundColor = '#fff'
        }
      }
    }
  },
  destroyed() {}
}
</script>

<style lang="less" scoped>
.img-active {
  border: 2px solid var(--base-acv) !important;
}
.selectBox{
  cursor: pointer;
}
.blockDiv {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.block {
  width: calc(calc(100% / 3) - 10px);
  margin: 5px;
  box-sizing: border-box;
  cursor: pointer;
  // border: 1px solid #000;
  .imgbox {
    height: 100%;
    width: 100%;
    font-weight: bold;
    border-radius: 2px;
  }
}
</style>
