<template>
  <div class="module">
    <div :class="className">
      <span class="spanTitle1">{{ title }}</span>
      <van-field v-model="internalValue" is-link readonly @click="focus" rows="1" autosize type="textarea"/>
      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '100%' }"
      >
      <div class="popup-title">{{ title }}</div>
        <div class="item-tag">
          <van-tag
            v-for="(item,index) in itemList"
            :key="index"
            closeable
            size="medium"
            type="primary"
            round
            @close="close(item.id)"
          >
            {{ item.text }}
          </van-tag>
        </div>
        <treeModel
          ref="treePicker"
          :multiple="true"
          :localdata="option"
          @select-change="clickItem"
          :selectedData="activeIds"
          valueKey="value"
          textKey="text"
          :isShowcheck="true"
          childrenKey="children"
        ></treeModel>
        <div style="height: 45px;"></div>
        <div class="btns"><van-button type="warning" @click="cancel">取消</van-button>
            <van-button type="primary" @click="onFinish">确定</van-button></div>
      </van-popup>
      <span class="whiteBack"></span>
      <b v-if="verify" class="verify">*</b>
    </div>
    <p class="reminder" v-if="reminder">当前项为必填项</p>
  </div>
</template>

<script>
import TreeModel from './tree.vue'
export default {
  props: ['title', 'value', 'options', 'verify', 'id'],
  name: 'MultipleSelect',
  components: {
    TreeModel
  },
  watch: {
    value (cur, old) {
      if (!cur) {
        this.reminder = true
        this.className = 'el_input_focusTrue'
      }
    },
    options (cur, old) {
      this.option = cur
    }
  },
  data () {
    return {
      className: 'el_input_focus',
      internalValue: '',
      show: false,
      activeIds: this.value,
      reminder: false,
      itemList: [],
      // 选项列表，children 代表子选项，支持多级嵌套
      option: this.options,
      activeIndex: 0
    }
  },

  mounted () {
    if (this.value.length) {
      this.className = 'el_input_focus1'
      this.reminder = false
      this.internalValue = this.userType(this.option, this.value).map(item => item.text).join(',')
      this.itemList = this.userType(this.option, this.value)
      this.$emit('input', this.activeIds)
    }
  },

  methods: {
    findItemById (option, value) {
      this.itemList = option.filter(item => value.includes(item.id))
      return this.itemList.map(item => item.text).join(',')
      // this.$refs.treePicker._confirm()
    },
    close (id) {
      this.itemList = this.itemList.filter(item => item.id !== id)
      this.activeIds = this.activeIds.filter(item => item !== id)
      this.$refs.treePicker._reTreeList(id)
    },
    onFinish () {
      this.show = false
      this.internalValue = this.itemList.map(item => item.text).join(',')
      this.activeIds = this.itemList.map(item => item.id)
      if (this.verify) {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
          this.reminder = false
        } else {
          this.reminder = true
          this.className = 'el_input_focusTrue'
        }
      } else {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
        } else {
          this.className = 'el_input_focus'
        }
      }
      this.$emit('input', this.activeIds)
    },
    focus () {
      this.show = true
      if (!this.internalValue) {
        this.className = 'el_input_blur'
      }
    },
    userType (user, arr) {
      if (!arr) return
      return arr.map(item => {
        return {
          id: item,
          text: this.$findItemById(user, item)
        }
      })
    },
    clickItem (id, text) {
      const findIndex = this.itemList.findIndex(data => data?.id === id)
      if (findIndex === -1) {
        this.itemList.push({ id, text })
      } else {
        this.itemList.splice(findIndex, 1)
      }
    },
    cancel () {
      this.$refs.treePicker._reTreeList()
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
.whiteBack {
  display: block;
  width: 30px;
  height: 30px;
  background: white;
  position: absolute;
  right: 3px;
  top: 4px;
}
.van-tree-select__item--active {
  color: #1c4990;
}
.van-sidebar-item--select::before {
  background-color: #1c4990;
}
.popup-title {
  height: 48px;
  line-height: 48px;
  font-weight: 500;
  text-align: left;
  color: #000;
  font-size: 16px;
  margin-left: 16px;
}
.item-tag {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  span {
    margin-left: 8px;
    margin-bottom: 8px;
  }
}
.btns {
  position: fixed;
  width: 100%;
  bottom: 10px;
  background: #fff;
  display: flex;
  justify-content: center;
  >button:nth-child(2) {
    margin-left: 20px;
  }
}
</style>
