<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>
<style>
.transfer .ant-checkbox-group {
  width: 100px;
  overflow-x: hidden;
}
.transfer .ant-checkbox-group-item {
  display: inline-block;
  margin-right: 8px;
  width: 100%;
}
</style>

<template>
  <div class="transfer">

    <div class="transfer-box">
      <div class="content-box">
        <p class="content-title">兴趣分类</p>
        <div class="content">
          <p>
            <input type="checkbox" class="select_all" @change="checkAllBox" v-model="checkAll" /> 全选
          </p>

          <p
            v-for="(item,index) of province"
            :key="item.value"
            :class="{backgroundOnly:provinceIndex == index}"
          >
            <input
              class="checkItem"
              type="checkbox"
              :value="item.value"
              :id="item.value"
              v-model="checkMatched"
              @change="checkOne(item,index)"
            />
            <span
              @click="showCity(item,index)"
              style="color:black;display:inline-block;margin-left:5px;width:80%"
            >{{item.label}}</span>
          </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>
            <input
              type="checkbox"
              class="select_all"
              @change="checkAllBoxCity"
              v-model="checkAllCity"
            /> 全选
          </p>-->
          <p
            v-for="(item,index) of city"
            :key="item.id"
            :class="{backgroundOnly:cityIndex == index}"
          >
            <input
              class="checkItem"
              type="checkbox"
              :value="item.value"
              :id="item.value"
              v-model="checkMatchedCity"
              @change="checkOneCity(item,index)"
            />
            {{item.label}}
          </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.label}}
            <!-- <span
              style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
              @click="detele(item,index)"
            >删除</span>-->
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getProvince } from '@/api/manage'
import $ from 'jquery'
export default {
  name: 'ByteDanceUserOrientationTemplateList',
  components: {},
  props: {
    dataValue: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      showClass: false,
      showCityData: false,
      checkData: [],
      checkMatched: [],
      province: [],
      city: [],
      area: [],
      CityData: '/ctop/bytedanceInterestCategory/listbycode',
      provinceIndex: null,
      cityIndex: null,
      checkAll: false,
      checkMatchedCity: [],
      checkAllCity: false,
      nowProvince: null
    }
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      this.getData()
      if (this.dataValue.length > 0) {
        this.checkData = this.dataValue
        this.checkMatched = this.dataValue.map(item => {
          return item.value;
        })
        this.checkMatchedCity = this.dataValue.map(item => {
          return item.value;
        })
        
        this.$emit('update:checkData', this.checkData)
      }
    })
  },
  methods: {
    getData() {
      getProvince(this.CityData, { parentCode: '' }).then(res => {
        if (res.code == '0') {
          //   this.province.push(...res.result.records)
          this.province = res.result.records.map(item => {
            return {
              label: item.name,
              value: item.id
            }
          })
        }
      })
    },
    showCity(item, index) {
      this.city = []
      this.showCityData = false
      this.showClass = false
      this.provinceIndex = index
      this.cityIndex = null
      this.nowProvince = item
      this.checkMatchedCity = []
      getProvince(this.CityData, { parentCode: item.value }).then(res => {
        if (res.code == '0') {
          this.city = res.result.records.map(item => {
            return {
              label: item.name,
              value: item.id
            }
          })
          if (this.checkMatched.indexOf(item.value) != -1) {
            this.checkAllCity = true
            this.checkMatchedCity = this.city.map(item => {
              return item.value
            })
          } else {
            this.checkMatchedCity = this.checkData.map(item => {
              return item.value
            })
          }
          //   this.city.push(...res.result.records)
          this.showCityData = true
        }
      })
    },
    checkAllBox() {
      this.checkMatched = []
      this.checkData = []
      if (this.checkAll) {
        this.checkMatched = this.province.map(item => {
          return item.value
        })
        this.checkData.push(...this.province)
      } else {
        this.checkMatched = []
        this.checkData = []
        this.checkMatchedCity = []
      }
      this.$emit('update:checkData', this.checkData)
    },
    checkOne(item, index) {
      if (this.checkMatched.indexOf(item.value) == -1) {
        var index1 = this.checkData.findIndex(v => v.value === item.value)
        this.checkData.splice(index1, 1)
        if (this.nowProvince) {
          if (this.nowProvince.value == item.value) {
            this.checkMatchedCity = []
          }
        }
      } else {
        this.checkData.push(item)
        var data = []
        getProvince(this.CityData, { parentCode: item.value }).then(res => {
          if (res.code == '0') {
            data = res.result.records.map(item => {
              return {
                label: item.name,
                value: item.id
              }
            })
            for (var i = 0; i < this.checkData.length; i++) {
              for (let j = 0; j < data.length; j++) {
                if (this.checkData[i].value == data[j].value) {
                  this.checkData.splice(i, 1)
                }
              }
            }
          }
        })

        if (this.nowProvince) {
          if (item.value == this.nowProvince.value) {
            this.checkMatchedCity = this.city.map(item => {
              return item.value
            })
          }
        }
      }
      if (this.checkMatched.length == this.province.length) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
      this.$emit('update:checkData', this.checkData)
    },
    checkAllBoxCity() {
      this.checkMatchedCity = []
      if (this.checkAllCity) {
        this.checkMatchedCity = this.city.map(item => {
          return item.value
        })
        this.checkMatched.push(this.nowProvince.value)
        this.checkData.push(this.nowProvince)
      } else {
        this.checkMatchedCity = []
        var index = this.checkData.findIndex(v => v.value === this.nowProvince.value)
        var index1 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
        this.checkData.splice(index, 1)
        this.checkMatched.splice(index1, 1)
      }
      this.$emit('update:checkData', this.checkData)
    },
    checkOneCity(item, index) {
      var allCity = this.checkMatchedCity.filter(v => {
        return v.toString().substr(2, 1) == this.nowProvince.value.toString().substr(4, 1)
      })
      if (allCity.length == this.city.length) {
        this.checkMatched.push(this.nowProvince.value)
        this.checkData.push(this.nowProvince)
        for (var i = 0; i < allCity.length; i++) {
          for (var j = 0; j < this.checkData.length; j++) {
            if (allCity[i] == this.checkData[j].value) {
              this.checkData.splice(j, 1)
              j--
            }
          }
        }
      }
      if (this.checkMatchedCity.indexOf(item.value) != -1) {
        if (allCity.length != this.city.length) {
          this.checkData.push(item)
        }
        if (this.checkMatched.length == this.province.length) {
          this.checkAll = true
        } else {
          this.checkAll = false
        }
      } else {
        if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
          var index1 = this.checkData.findIndex(v => v.value === this.nowProvince.value)
          var index2 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
          this.checkData.splice(index1, 1)
          this.checkMatched.splice(index2, 1)
          this.checkAll = false
          var data = this.city.filter(v => {
            return v.value != item.value
          })
          this.checkData.push(...data)
        } else {
          var index1 = this.checkData.findIndex(v => v.value === item.value)
          this.checkData.splice(index1, 1)
        }
      }
      this.$emit('update:checkData', this.checkData)
    },
    clear() {
      this.checkData = []
      this.checkMatched = []
      this.checkMatchedCity = []
      this.checkAll = false
      this.$emit('update:checkData', this.checkData)
    },
    detele(item, index) {
      //   if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
      var index1 = this.checkMatched.findIndex(v => v === item.value)
      var index2 = this.checkData.findIndex(v => v.value === item.value)
      this.checkData.splice(index2, 1)
      this.checkMatched.splice(index1, 1)
      this.checkAll = false
      //   } else {
      //   }

      this.$emit('update:checkData', this.checkData)
    }
  }
}
</script>
