<template>
  <div
    v-if="visible"
    class="selector-list"
  >
    <div class="selector-list__content">
      <!-- searchbar -->
      <div class="search_input">
        <div class="vux-x-input weui_cell">
          <div class="weui_cell_hd" />
          <div class="weui_cell_bd weui_cell_primary">
            <input
              v-model="keyWord"
              class="weui_input"
              type="text"
              placeholder="请输入姓名"
              @input="nameSearch"
            >
          </div>
          <div class="weui_cell_ft">
            <img
              src="data:image/png;base64,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"
              class="search_icon"
            >
          </div>
        </div>
      </div>
      <!-- searchbar -->

      <!-- title -->
      <div class="weui_cells_title">
        {{ title }}
      </div>

      <!-- rolelist -->
      <template>
        <div
          v-if="roleNew.length > 0"
          class="weui_cells"
        >
          <div
            v-for="item in roleNew"
            :key="item[idKey]"
            class="weui_cell vux-tap-active"
            @click="roleClick(item)"
          >
            <div class="weui_cell_hd" />
            <div class="weui_cell_bd weui_cell_primary selector-list__item">
              <p>{{ item[nameKey] }}</p>
              <span class="vux-label-desc">{{ item[roleKey] }}</span>
              <i
                class="check-icon"
                :class="{
                  'check-icon--radio': !isMultiple,
                  'check-icon--checkbox': isMultiple,
                  'check-icon--active': isMultiple ? curChecked.indexOf(item[idKey]) > -1 : item[idKey] === curChecked
                }"
              />
            </div>
          </div>
        </div>
        <div
          v-else
          class="no-record"
        >
          没有相关记录
        </div>
      </template>
      <!-- rolelist -->

      <!-- toast -->
      <toast
        v-model="toastVisible"
        type="text"
      >
        您最多可选择 {{ count }} 人
      </toast>
    </div>

    <!-- commit -->
    <div
      class="selector-list__footer"
      @click="commit"
    >
      提交
    </div>
  </div>
</template>

<script>
import Toast from '../toast'

export default {
  components: {
    Toast
  },
  props: {
    // 组件显示状态
    value: {
      type: Boolean,
      required: true
    },
    // 当前选中人员id，String或Number选择单个，Array选择多个
    checked: {
      type: [String, Number, Array],
      required: true
    },
    // 当前选中人员名字，多个则 、分割
    name: {
      type: String,
      default: ''
    },
    // 可选数量，仅在value为Array时可用
    count: {
      type: Number,
      default: 10
    },
    // 标题
    title: {
      type: String,
      default: '请先让行政经理把门店人员添加到系统中'
    },
    // 角色列表
    roleList: {
      type: Array,
      required: true
    },
    // key
    idKey: {
      type: String,
      default: 'id'
    },
    nameKey: {
      type: String,
      default: 'name'
    },
    roleKey: {
      type: String,
      default: 'roles'
    }
  },
  data () {
    return {
      keyWord: '',
      roleNew: [],
      visible: false,
      curChecked: '',
      showName: '',
      toastVisible: false
    }
  },
  computed: {
    isMultiple () {
      return Array.isArray(this.checked)
    }
  },
  watch: {
    value (newVal) {
      if (newVal) {
        document.body.appendChild(this.$el)
      }
      this.visible = newVal
    },
    checked (newVal) {
      this.curChecked = newVal
    },
    name (newVal) {
      this.showName = newVal
    },
    roleList (newVal) {
      this.roleNew = newVal
    }
  },
  created () {
    this.roleNew = this.roleList
    this.showName = this.name
    this.curChecked = this.checked
  },

  /**
   * 组件销毁卸载dom
   */
  destroyed () {
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  },
  methods: {
    /**
     * 角色点击，控制是否选中
     */
    roleClick (item) {
      // 单选
      if (!this.isMultiple) {
        if (this.curChecked !== item[this.idKey]) {
          // 选中
          this.curChecked = item[this.idKey]
          this.showName = item[this.nameKey]
        }
        return
      }

      // 多选
      const checked = this.curChecked.indexOf(item[this.idKey]) > -1
      if (checked) {
        // 反选
        this.curChecked.splice(this.curChecked.indexOf(item[this.idKey]), 1)
      } else {
        // 数量判断和选中
        if (this.curChecked.length >= this.count) {
          this.toastVisible = true
          return
        }
        this.curChecked.push(item[this.idKey])
      }
    },

    /**
     * 提交
     */
    commit () {
      // 多选 拼接name
      if (this.isMultiple) {
        if (this.curChecked.length) {
          let showName = ''
          this.roleList.forEach(role => {
            if (this.curChecked.indexOf(role[this.idKey]) > -1) {
              showName += `、${role[this.nameKey]}`
            }
          })
          this.showName = showName.slice(1)
        } else {
          this.showName = ''
        }
      }

      this.$emit('commit', this.curChecked, this.showName)
      this.$emit('update:checked', this.curChecked)
      this.$emit('update:name', this.showName)
      this.$emit('input', false)
    },

    /**
     * 搜索
     */
    nameSearch () {
      if (this.keyWord === '') {
        this.roleNew = this.roleList
      } else {
        this.roleNew = this.roleList.filter(v => {
          return v[this.nameKey].indexOf(this.keyWord) > -1
        })
      }
    }
  }
}
</script>
