<template>
  <div>
    <van-popup v-model="showSelectorPopup" class="ibps-fullscreen-popup" get-container="body" position="bottom" @click-overlay="clickOverlay">
      <van-sticky>
        <!-- 头部 -->
        <ibps-picker-toolbar
          :title="title"
          @cancel="onCancel"
          @title="onTitle"
          @confirm="onConfirm"
        />
        <van-search
          v-model="search"
          :placeholder="searchPlaceholder"
          @search="onSearch"
        />
      </van-sticky>

      <van-cell v-if="isTree" class="ibps-root-title ibps-size-l ibps-nav" :size="size">
        <div slot="title">
          <template v-for="(data,index) in pathDataTmp">
            <span :key="index">
              <!-- <span
                :class="{'ibps-is-link':pathData.length-1!==index}"
                @click="changePath(index)"
              > -->
              <span v-if="index !== pathDataTmp.length-1" @click="changePath(data,index)">
                {{ data[labelKey] }}
              </span>
              <span v-else>
                {{ data[labelKey] }}
              </span>
              <!-- <span v-if="pathData.length>1&&pathData.length-1!==index" class="ibps-wingblank ibps-color-gary-5">/</span> -->
              <span v-if="pathData.length>0" class="ibps-wingblank ibps-color-gary-5">/</span>
            </span>
          </template>
          <span class="ibps-is-link ibps-nav_text">请选择<span class="ibps-nav_bar" /></span>
        </div>
      </van-cell>
      <div v-else>
        <slot name="rootTitle" />
      </div>

      <van-checkbox-group
        ref="checkboxGroup"
        v-model="checkbox"
        :max="multiple?0:1"
        @change="changeCheckbox"
      >
        <van-cell-group>
          <van-cell
            v-for="(data,index) in dataList"
            :key="data[idKey]+index"
            :size="size"
            clickable
          >
            <div slot="title" @click="toggle(data,index)">
              <van-checkbox
                ref="checkboxes"
                :disabled="data[valueKey] === '0'"
                :name="data[valueKey]"
              >
                {{ data[labelKey] === '岗位树'?'部门树':data[labelKey] }}
                <template v-if="!multiple" #icon="props">
                  <div v-if="props.checked" class="ibps-radio-icon">
                    <div class="ibps-radio-icon_inside" />
                  </div>
                  <van-icon v-else name="circle" />
                </template>
              </van-checkbox>
            </div>
            <span
              v-if="$utils.isNotEmpty(data.children)||partyTypeId==='1'"
              slot="right-icon"
              @click="toggleChild(data,index)"
            >
              <span class="van-cell__right-icon text_move">下级</span>
              <van-icon name="arrow " class="van-cell__right-icon" />
            </span>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-popup>
    <!--点击明细 -->
    <van-popup
      v-if="multiple"
      v-model="showDetailPopup"
      class="ibps-fullscreen-popup"
      get-container="body"
      position="right"
    >
      <ibps-picker-toolbar
        title="已选择的选项"
        @cancel="onDetailCancel"
        @confirm="onDetailConfirm"
      />
      <div class="ibps-fixed-navbar">
        <van-cell-group>
          <van-swipe-cell
            v-for="(data,index) in selectedData"
            :key="data[valueKey]+index"
            :right-width="65"
            class="ibps-swipe-cell"
          >
            <van-cell
              :title="data[labelKey]"
              clickable
              :size="size"
            >
              <template #right-icon>
                <van-icon
                  name="clear"
                  class="van-field__clear"
                  @click.stop="removeSelected(index)"
                />
              </template>
            </van-cell>
            <van-button
              slot="right"
              type="danger"
              :text="$t('delete')"
              class="ibps-swipe-button"
              @click="removeSelected(index)"
            />
          </van-swipe-cell>
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>
<script>
import i18n from '@/utils/i18n' // Internationalization 国际化
import IbpsPickerToolbar from '@/components/ibps-picker-toolbar'
export default {
  components: {
    IbpsPickerToolbar
  },
  props: {
    showPopup: Boolean,
    value: Array,
    multiple: Boolean,
    dataList: Array,
    cacheData: [Object, Array],
    pathData: Array,
    leftText: {
      type: String,
      default: i18n.t('cancel')
    },
    searchPlaceholder: {
      type: String,
      default: i18n.t('common.input')
    },
    partyTypeId: { // 类型节点ID
      type: [String, Number],
      default: ''
    },
    isTree: {
      type: Boolean,
      default: true
    },
    rootId: {
      type: String,
      default: '0'
    },
    rootName: {
      type: String,
      default: '顶级'
    },
    idKey: {
      type: String,
      default: 'id'
    },
    parentIdKey: {
      type: String,
      default: 'parentId'
    },
    valueKey: {
      type: String,
      default: 'id'
    },
    labelKey: {
      type: String,
      default: 'name'
    },
    childrenKey: {
      type: String,
      default: 'children'
    },
    loading: Boolean,
    finished: Boolean,
    size: {
      type: String,
      default: 'large'
    }
  },
  data() {
    return {
      search: '',
      checkbox: [],
      pathDataTmp: [],
      showSelectorPopup: false,
      showDetailPopup: false,
      loadingTmp: false
    }
  },

  computed: {
    title() {
      if (this.multiple) {
        const length = this.checkbox.length
        return length > 0 ? i18n.t('components.checkbox.title', { length: length }) : ''
      } else {
        if (this.$utils.isEmpty(this.checkbox)) {
          return ''
        }
        const checked = this.checkbox[0]
        return this.$utils.isNotEmpty(checked) ? this.cacheData[checked] ? this.cacheData[checked][this.labelKey] : '' : ''
      }
    },
    selectedData() {
      return this.checkbox.map((d) => {
        return this.cacheData[d] || {}
      })
    }
  },
  watch: {
    value() {
      const checkbox = []
      if (this.$utils.isNotEmpty(this.value)) {
        this.value.forEach(v => {
          checkbox.push(v)
        })
      }
      this.checkbox = checkbox
    },
    showPopup() {
      this.showSelectorPopup = this.showPopup
      if (this.showPopup) {
        this.search = ''
        // this.$emit('init-page-data')
      }
    },
    loadingTmp() {
      this.$emit('loading', this.loadingTmp)
    },
    loading() {
      this.loadingTmp = this.loading
    },
    pathData() {
      this.pathDataTmp = this.pathData
    }
  },
  methods: {
    // 查询
    onSearch() {
      this.$emit('load-data', {
        name: this.search
      }, true)
    },
    onLoad() {
      this.$emit('load-data', {
        name: this.search
      }, false)
    },
    clickCheckbox(event, data, index) {
      let flag = true
      const target = event.target
      if (target && target.className.indexOf('van-checkbox__label') > -1) {
        flag = false
      } else if (target && target.parentNode.className.indexOf('van-checkbox__icon') > -1) {
        flag = false
      }
      if (flag) {
        this.toggle(data, index)
      }
    },
    toggle(data, index) {
      if (data.id === '0') return
      if (!this.multiple) {
        this.$refs.checkboxGroup.toggleAll(false)
      }
      this.$refs.checkboxes[index].toggle()
    },

    onCancel() {
      this.$emit('cancel')
    },
    onConfirm() {
      if (this.$utils.isEmpty(this.checkbox)) {
        this.$toast(this.$t('common.dialog.selectedRecords'))
        return
      }
      this.$emit('confirm', this.checkbox, 'confirm')
    },
    clickOverlay() {
      this.$emit('clickOverlay')
    },
    onDetailCancel() {
      this.showDetailPopup = false
    },
    onDetailConfirm() {
      this.showDetailPopup = false
    },
    onTitle() {
      if (!this.multiple) { return }
      this.showDetailPopup = true
    },
    toggleChild(data, index) {
      this.$emit('toggle-child', data)
    },
    changePath(data, index) {
      this.$emit('change-path', index, data)
    },
    changeCheckbox(val) {
      this.$emit('confirm', val, 'change')
    },
    // 删除选中
    removeSelected(index) {
      this.checkbox.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
  .text_move{
    position: relative;
    top: -3px;
  }
</style>
