<template>
  <div class="QdmGanged">
    <QdmDialog animation width="700px" :title="title" :show="show" @handleClose="handleClose" @submit="submit" @dialogOpen="dialogOpen">
      <div class="QdmGangedMain p-t-10">
        <div class="left clearfloat">
          <QdmSearch class="m-t-10 m-l-12" :name="name" :value="search" :placeholder="placeholder" @inputReturn="inputReturn"></QdmSearch>
          <div class="list">
            <span
              v-for="(item, index) in parentList"
              :key="index"
              :class="index === active ? 'ellipsis active' : 'ellipsis'"
              @click="parentClick(index)"
            >{{ item.label }}</span>
          </div>
          <div class="page">
            <span class="previous" @click="pageFn('previous')">上一页</span>
            <span class="num">{{page}}/{{sum}}</span>
            <span class="next" @click="pageFn('next')">下一页</span>
          </div>
        </div>
        <div class="right">
          <div class="list">
            <el-checkbox-group v-model="subCheckList">
              <el-checkbox class="ellipsis" v-for="(item, index) in subList" :key="index" :label="item.id">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </QdmDialog>
  </div>
</template>
<script>
import QdmDialog from '@/components/QdmDialog'
import QdmSearch from '@/components/QdmSearch'
export default {
  name: 'QdmGanged',
  components: {
    QdmDialog,
    QdmSearch
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    name: {
      type: String,
      default: '搜索'
    },
    placeholder: {
      type: String,
      default: '请输入搜索'
    },
    parentList: {
      type: Array,
      default: () => {
        return []
      }
    },
    subList: {
      type: Array,
      default: () => {
        return []
      }
    },
    total: {
      type: Number,
      default: 0
    },
    initList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    subList(val) {
      const hash = {}
      this.sumList = this.sumList.concat(val, this.subList).reduceRight((item, next) => {
        if (!hash[next.id]) hash[next.id] = true && item.push(next)
        return item
      }, [])
    }
  },
  data() {
    return {
      search: '',
      page: 1,
      sum: null,
      subCheckList: [],
      active: 0,
      sumList: []
    }
  },
  methods: {
    handleClose() {
      this.sumList = []
      this.$emit('handleClose')
    },
    submit() {
      let list = []
      this.subCheckList.forEach(item => {
        this.sumList.forEach(items => {
          if (items.id === item) {
            list.push(items)
          }
        })
      })
      this.$emit('submit', list)
    },
    inputReturn(val) {
      this.$emit('searchReturn', val)
    },
    dialogOpen() {
      this.active = 0
      this.sum = this.total <= 10 ? 1 : Math.ceil(this.total / 10)
      this.subCheckList = this.initList
    },
    pageFn(text) {
      if (text === 'previous') {
        if (this.page < this.sum) {
          this.page += 1
          this.$emit('pageReturn', this.page)
        } else {
          this.page = this.sum
        }
      } else {
        if (this.page === 1) {
          this.page = 1
        } else {
          this.page -= 1
          this.$emit('pageReturn', this.page)
        }
      }
    },
    parentClick(i) {
      this.active = i
      this.$emit('parentClickReturn', i)
    }
  }
}
</script>
<style lang="less">
.QdmGanged {
  .el-dialog {
    .el-dialog__body {
      padding: 0;
    }
  }
  .QdmGangedMain {
    height: 400px;
    .left {
      width: calc(45% - 1px);
      height: 100%;
      float: left;
      border-right: 1px solid #dcdfe6;
      .QdmSearch {
        .el-input {
          &.small {
            width: 280px;
          }
        }
      }
      .list {
        padding: 0 12px;
        height: 310px;
        > span {
          display: block;
          width: calc(100% - 24px);
          color: #333;
          font-size: 13px;
          height: 30px;
          line-height: 30px;
          cursor: pointer;
          padding: 0 12px;
          &.active {
            background: #4170fe;
            color: #fff;
            border-radius: 3px;
          }
        }
      }
      .page {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-top: 1px solid #dcdfe6;
        .previous,
        .next {
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          display: inline-block;
          height: 26px;
          line-height: 26px;
          padding: 0 8px;
          font-size: 13px;
          cursor: pointer;
          &:hover {
            background: #4170fe;
            color: #fff;
            border: 1px solid #4170fe;
          }
        }
        .num {
          margin: 0 8px;
          font-size: 13px;
        }
      }
    }
    .right {
      float: left;
      width: 55%;
      height: 100%;
      overflow-y: auto;
      .list {
        padding: 0 12px;
        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #333;
        }
        .el-checkbox {
          width: 100%;
          margin: 0;
          .el-checkbox__label {
            font-size: 13px;
            height: 30px;
            line-height: 30px;
          }
        }
      }
    }
  }
}
</style>