<style scoped>
.transfer {
  display: flex;
}
.transfer .transfer-box {
  width: 350px;
  height: 250px;
  border: 1px solid #dadfe3;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  margin-right: 25px;
}
.content-box {
  min-width: 174px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #dadfe3;
}
.content-box .content-title {
  width: 100%;
  background: #f8f9fa;
  border-bottom: 1px solid #dadfe3;
  padding: 5px 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
}
.content-box .content {
  width: 100%;
  height: 85%;
  overflow: auto;
}
.content-box .content p:hover {
  background: #edf1f5;
  cursor: pointer;
}
.content-box .content p:hover span {
  display: inline-block;
}
.content-box .content p span {
  display: none;
}
p {
  padding: 5px;
  margin-bottom: 0;
  border-bottom: 1px solid #f2f2f2;
}
.backgroundOnly {
  background: #edf1f5;
}
</style>

<template>
  <div class="transfer">
    <div class="transfer-box">
      <div class="content-box">
        <p class="content-title">省份</p>
        <div class="content">
          <p
            v-for="(item,index) of province"
            :key="item.id"
            @click="showCity(item,index)"
            :class="{backgroundOnly:provinceIndex == index}"
          >{{item.name}}</p>
        </div>
      </div>
      <div
        class="content-box"
        :style="{borderRight:!showClass?'0px':'1px solid #dadfe3'}"
        v-show="showCityData"
      >
        <p class="content-title">城市</p>
        <div class="content">
          <p
            v-for="(item,index) of city"
            :key="item.id"
            @click="showRegion(item.code,index)"
            :class="{backgroundOnly:cityIndex == index}"
          >{{item.name}}</p>
        </div>
      </div>
      <div class="content-box" v-show="showClass" style="border-right:0px">
        <p class="content-title">区域</p>
        <div class="content">
          <!-- <p @click="allCheck">{{checkAll?"√":""}}全选</p> -->
          <p
            v-for="item of area"
            :key="item.id"
            @click="add(item)"
            :class="{backgroundOnly:checkMatched.indexOf( item.id )!=-1}"
          >{{item.name}}</p>
        </div>
      </div>
    </div>
    <div class="transfer-box" style="width:176px">
      <div class="content-box">
        <p class="content-title">
          已选
          <span
            style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
            @click="clear"
          >清空</span>
        </p>
        <div class="content">
          <p v-for="(item,index) of checkData" :key="index">
            {{item.name}}
            <span
              style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
              @click="detele(index)"
            >删除</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getProvince } from '@/api/manage'
export default {
  name: 'ByteDanceUserOrientationTemplateList',
  components: {},
  data() {
    return {
      showClass: false,
      showCityData: false,
      checkData: [],
      checkMatched: [],
      province: [],
      city: [],
      area: [],
      CityData: '/ctop/bytedanceAreaInfo/listbycode',
      provinceIndex: null,
      cityIndex: null,
      checkAll: false,
      arr: []
    }
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      this.getData()
    })
  },
  methods: {
    getData() {
      getProvince(this.CityData, { parentCode: '' }).then(res => {
        if (res.code == '0') {
          this.province.push(...res.result.records)
        }
      })
    },
    showCity(item, index) {
      this.city = []
      this.showCityData = false
      this.showClass = false
      this.provinceIndex = index
      this.cityIndex = null
    //   if (item.name == '北京') {
    //     this.city.push(item)
    //     this.showCityData = true
    //   } else {
        getProvince(this.CityData, { parentCode: item.code }).then(res => {
          if (res.code == '0') {
            this.city.push(...res.result.records)
            this.showCityData = true
          }
        })
    //   }
    },
    showRegion(item, index) {
      this.area = []
      this.cityIndex = index
      getProvince(this.CityData, { parentCode: item }).then(res => {
        if (res.code == '0') {
          console.log(res)
          this.area.push(...res.result.records)
          this.arr = res.result.records
          this.showClass = true
        }
      })
    },
    add(item) {
      if (this.checkMatched.indexOf(item.id) != -1) {
        var index = this.checkData.findIndex(v => v.id === item.id)
        this.checkData.splice(index, 1)
        this.checkMatched.splice(index, 1)
        this.$emit('update:checkData', this.checkData)
      } else {
        this.checkData.push(item)
        this.checkMatched.push(item.id)
        this.$emit('update:checkData', this.checkData)
      }
    },
    allCheck() {
      this.checkAll = !this.checkAll
      if (this.checkAll) {
        this.checkData.push(...this.area)
        var dataId = this.area.map(item => {
          return item.id
        })
        this.checkMatched.push(...dataId)
      } else {
        this.checkData.splice(this.checkData.length - this.arr.length, this.arr.length)
        this.checkMatched.splice(this.checkData.length - this.arr.length, this.arr.length)
      }
    },
    clear() {
      this.checkData = []
      this.checkMatched = []
      this.checkAll = false
      this.$emit('update:checkData', this.checkData)
    },
    detele(index) {
      this.checkData.splice(index, 1)
      this.checkMatched.splice(index, 1)
      this.$emit('update:checkData', this.checkData)
    }
  }
}
</script>
