<template>
  <view class="s-tree-select" :style="{width:$s.addUnit(width),borderRadius: $s.addUnit(radius) }">
    <view class="s-tree-select-slide s-tree-select-slide-border__right">
      <scroll-view scroll-y :style="{height:$s.addUnit(height)}">
        <view class="s-tree-select-slide-main">
          <view
            class="s-tree-select-slide-item"
            :class="{fontBlod: activeIndex===index}"
            v-for="(item,index) in dataList"
            :key="index"
            @click="parentChange(item,index)"
          >
            <view></view>
            <view
              :style="{color:activeIndex===index ? checkColor: incheckColor}"
            >{{item[options.label]}}</view>
            <view style="width: 40rpx">
              <view
                v-if="item.dot"
                class="s-tree-select-slide-item__dot"
                :style="{backgroundColor: checkColor}"
              >{{item.dot}}</view>
            </view>
          </view>
          <view
            class="s-tree-select-slide-item-slider"
            :style="{height: $s.addUnit(heightEle),backgroundColor: sliderColor,top: $s.addUnit(sliderTop),borderRadius: $s.addUnit(radius)}"
          ></view>
        </view>
      </scroll-view>
    </view>
    <view class="s-tree-select-slide">
      <scroll-view scroll-y :style="{height:$s.addUnit(height)}">
        <view
          class="s-tree-select-slide-item"
          :style="{backgroundColor:ischecked(item) ? '#F5F6F7': ''}"
          :class="{fontBlod: ischecked(item)}"
          v-for="(item,index) in dataList[activeIndex].children"
          :key="index"
          @click="checkAll(item,index)"
        >
          <view></view>
          <view :style="{color:ischecked(item) ? checkColor: incheckColor}">{{item[options.label]}}</view>
          <view></view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import props from './props.js'

export default {
  // 将mixin挂在到组件中，uni.$s.mixin实际上为一个vue格式对象
  mixins: [uni.$s.mpMixin, uni.$s.mixin, props],
  data() {
    return {
      activeIndex: 0,
      heightEle: 0,
      sliderTop: 0,
      checkData: [], //选中的子集
      checkDataAll: [], //选中的父级加子集
    }
  },
  computed: {
    dataList() {
      let t = this
      let p = this.$s.deepClone(this.list)
      for (let j = 0; j < p.length; j++) {
        p[j]['dot'] = 0
        if (p[j].children) {
          let ic = p[j].children
          for (let k = 0; k < ic.length; k++) {
            if (!ic[k].hasOwnProperty('checked')) {
              ic[k]['checked'] = false
            }

            for (let i = 0; i < t.defaultSelected.length; i++) {
              let lsitem = t.defaultSelected[i]
              if (typeof lsitem === 'object') {
                if (lsitem['id'] == ic[k]['id']) {
                  ic[k]['checked'] = true
                }
              } else {
                if (lsitem == ic[k][this.options.value]) {
                  ic[k]['checked'] = true
                }
              }
            }
            if (ic[k]['checked'] === true) {
              p[j]['dot'] += 1
            }
          }
        }
      }
      return p
    },
  },
  mounted() {
    uni
      .createSelectorQuery()
      .in(this)
      .select('.s-tree-select-slide-item')
      .boundingClientRect((data) => {
        // {"id":"","dataset":{},"left":12,"right":308,"top":12,"bottom":315,"width":296,"height":303}
        this.heightEle = data.height
      })
      .exec()
    let that = this
    this.dataList.map((item, index) => {
      item.children.map((itemChid, indexchild) => {
        if (itemChid.checked) {
          this.checkData.push(itemChid)
          this.checkDataAll.push({
            ...itemChid,
            parent: item[this.options.label],
            parentId: item[this.options.value],
          })
        }
      })
    })
  },
  methods: {
    // 判读选中的数字组是否还有当前项
    ischecked(item) {
      if (this.checkData.indexOf(item) === -1) {
        return false
      } else {
        return true
      }
    },
    parentChange(item, index) {
      this.activeIndex = index
      this.sliderTop = index * this.heightEle
    },
    // 选择子集
    checkAll(item, index) {
      let checkIndex = this.checkData.indexOf(item)
      if (checkIndex == -1) {
        this.dataList[this.activeIndex].children[index].checked = true
        this.checkData.push(this.dataList[this.activeIndex].children[index])
        this.dataList[this.activeIndex].dot += 1
        this.checkDataAll.push({
          ...this.dataList[this.activeIndex].children[index],
          parent: this.dataList[this.activeIndex][this.options.label],
          parentId: this.dataList[this.activeIndex][this.options.value],
        })
      } else {
        this.dataList[this.activeIndex].children[index].checked = false
        this.checkData.splice(checkIndex, 1)
        this.checkDataAll.splice(checkIndex, 1)
        this.dataList[this.activeIndex].dot -= 1
      }
      this.$emit('change', {
        checkData: this.checkDataAll,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.s-tree-select {
  display: flex;
  font-size: 14px;
  color: #333333;
  box-shadow: 0px 0px 8px 0px #efeff1;
  font-family: SourceHanSansSC-Regular, SourceHanSansSC;
  &-slide {
    flex: 1;
    &-item {
      padding: 30rpx 0;
      display: flex;
      justify-content: space-between;
      z-index: 2;
      line-height: 40rpx;
      &-slider {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: -1;
        transition: 0.3s;
      }
      &__dot {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        color: #ffffff;
        text-align: center;
        line-height: 40rpx;
        font-weight: normal;
      }
    }
    &-main {
      position: relative;
      z-index: 2;
    }
    &-border__right {
      border-right: 1px solid #f2f2f2;
    }
  }
}
.fontBlod {
  font-weight: 600;
}
</style>