<!--  -->
<template>
  <view
    class="asp-mp-dropdown-menu"
    :style="{ flexDirection: flexDirectionVal }"
    :class="showMenu ? 'active-show' : ''"
  >
    <view class="asp-mp-dropdown-menu__title" @click="showMenu = !showMenu">{{ title }}</view>
    <!-- 单选 -->
    <view v-if="!multiple && showMenu" class="asp-mp-dropdown-menu__list">
      <view
        v-for="(item, index) in option"
        :key="index"
        class="asp-mp-dropdown-menu__list-item"
        :class="index === selectValue[0] ? 'active' : ''"
        @click="changeRadio(index)"
      >
        {{ item.label }}
      </view>
    </view>
    <!-- 复选 -->
    <checkbox-group v-if="multiple && showMenu" class="asp-mp-dropdown-menu__list">
      <label
        v-for="(item, index) in option"
        :key="index"
        @click="changeLabel(item.value, item.label)"
        class="asp-mp-dropdown-menu__list-item"
      >
        <checkbox
          style="transform: scale(0.7)"
          class="checkbox"
          :value="item.value"
          :checked="selectValue.includes(item.value)"
        />
        {{ item.label }}
      </label>
    </checkbox-group>

    <view v-if="multiple && showMenu" class="asp-mp-dropdown-menu__footer">
      <view class="asp-mp-dropdown-menu__footer-all">
        <radio :checked="isSelect" style="transform: scale(0.7)" @click="selectAll">全选</radio>
      </view>
      <view class="asp-mp-dropdown-menu__footer-btn" @click="resetChekcBox">重置</view>
      <view class="asp-mp-dropdown-menu__footer-btn" @click="sureChekcBox">确定</view>
    </view>
  </view>
</template>

<script>
/**
 * DropdownMenu 下拉菜单
 * @description 下拉菜单组件
 * @property {String || Number || Array} value 下拉选的值
 * @property {Boolean} multiple 是否多选
 * @property {Array} option [{value, label}] 下拉列表
 * @property {String} position [top | bottom] 展示组件位置，默认top
 * @property {String} title 标题
 * @event {Function} change 触发事件
 */
export default {
  name: 'asp-mp-dropdown-menu',
  props: {
    value: [String, Number, Array],
    multiple: {
      type: Boolean,
      default: false
    },
    option: {
      type: Array,
      default: () => []
    },
    position: {
      type: String,
      default: 'top'
    }
  },
  watch: {
    selectValue (newV) {
      this.isSelect = newV && newV.length === this.option.length
    }
  },
  computed: {
    flexDirectionVal () {
      if (this.position === 'bottom') return 'column-reverse'
      return 'column'
    }
  },
  data () {
    return {
      showMenu: false,
      isSelect: false,
      title: '标题',
      selectValue: [],
      selectLabel: []
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.initMenu()
  },
  methods: {
    initMenu () {
      this.selectValue = JSON.parse(JSON.stringify(this.value)) || []
      if (this.selectValue.length > 0) {
        this.option.forEach(item => {
          if (this.selectValue.includes(item.value)) {
            this.selectLabel.push(item.label)
          }
        })

        this.title = this.selectLabel.join('、')
      }
      // if(this.)
    },
    /**
     * @param {number} index
     * @return {void}
     * @description 改变单选的radio
     */
    changeRadio (index) {
      this.$set(this.selectValue, 0, index)
      this.$emit('input', this.option[index].value)
      this.$emit('change', this.option[index].value)
      this.title = this.option[index].label
      this.showMenu = false
    },
    /**
     * @param {number || string} value
     * @param {number || string} label
     * @return {void}
     * @description 改变多选的radio
     */
    changeLabel (value, label) {
      if (this.selectValue.includes(value)) {
        this.selectValue.map((item, idx) => {
          if (item === value) {
            this.selectValue.splice(idx, 1)
            this.selectLabel.splice(idx, 1)
          }
        })
      } else {
        this.selectValue.push(value)
        this.selectLabel.push(label)
      }
    },
    /**
     * @return {void}
     * @description 确定多选的 checkbox
     */
    sureChekcBox () {
      this.$emit('input', this.selectValue)
      this.$emit('change', this.selectValue)
      this.title = this.selectLabel.join('、') || '标题'
      this.showMenu = false
    },
    /**
     * @return {void}
     * @description 多选的状态
     */
    selectAll () {
      this.isSelect = !this.isSelect
      if (this.isSelect) {
        this.selectValue = this.option.map(item => item.value)
        this.selectLabel = this.option.map(item => item.label)
      } else {
        this.selectValue = []
        this.selectLabel = []
      }
    },
    /**
     * @return {void}
     * @description 重置
     */
    resetChekcBox () {
      this.selectValue = []
      this.selectLabel = []
    }
  }
}
</script>
<style scoped lang='scss'>
/* @import url(); 引入css类 */
@import './asp-mp-dropdown-menu.scss';
</style>