<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" style="position:relative">
          <!-- <div style="position:absolute;top:0;left:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.5)"
            v-if="loading"></div> -->
          <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,
    postAction
  } from '@/api/manage'
  import $ from 'jquery'
  export default {
    name: 'ByteDanceUserOrientationTemplateList',
    components: {},
    props: ['dataValue'],
    data() {
      return {
        showClass: false,
        showCityData: false,
        checkData: [],
        checkMatched: [],
        province: [],
        city: [],
        area: [],
        CityData: '/kuaishou/batch/getRegion',
        provinceIndex: null,
        cityIndex: null,
        checkAll: false,
        checkMatchedCity: [],
        checkAllCity: false,
        nowProvince: null,
        loading: false
      }
    },
    computed: {},
    mounted() {
      this.$nextTick(() => {
        this.getData().then(() => {
            console.log(this.dataValue)
          if (this.dataValue.length>0&&this.dataValue[0].value) {
            return
          } else {
            postAction('/kuaishou/batch/getRegionDetail', {
              regionArr: this.dataValue
            }).then(res => {
              if (res.success) {
                //   this.populationData.allForm.region = res.result
                this.checkData = res.result
                this.checkMatched = res.result.map(item => {
                  return item.value
                })
                this.checkMatchedCity = res.result.map(item => {
                  return item.value
                })
                this.$emit('update:checkData', this.checkData)
              }
            })
          }

          //   if (this.dataValue.length > 0) {

          //   }
        })

      })
    },
    watch: {
      dataValue: {
        deep: true,
        immediate: true, // immediate选项可以开启首次赋值监听
        handler(n, o) {
          if (n.length > 0 && n[0].value) {
            // this.getData().then(() => {
            console.log(1)
            //   if (n.length > 0) {
            this.$nextTick(() => {
              this.checkData = n
              this.checkMatched = n.map(item => {
                return item.value
              })
              this.checkMatchedCity = n.map(item => {
                return item.value
              })
              this.$emit('update:checkData', this.checkData)
            })
            //   }
            // })

          }

        }
      }
    },
    methods: {
      getData() {
        this.loading = true
        var that = this
        return new Promise(function (resolve, reject) {
          getProvince(that.CityData, {
            level: 1
          }).then(res => {
            if (res.code == '0') {
              //   this.province.push(...res.result.records)
              that.province = res.result.map(item => {
                return {
                  label: item.name,
                  value: item.regionId
                }
              })
              that.province = that.province.filter(item => {
                return item.label != '台湾' && item.label != '香港' && item.label != '澳门'
              })
              that.loading = false
              resolve()
            }
          })
        })

      },
      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, {
          parent: item.value
        }).then(res => {
          if (res.code == '0') {
            this.city = res.result.map(item => {
              return {
                label: item.name,
                value: item.regionId
              }
            })
            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, {
            parent: item.value
          }).then(res => {
            if (res.code == '0') {
              data = res.result.map(item => {
                return {
                  label: item.name,
                  value: item.regionId
                }
              })
              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().slice(0, 2) == this.nowProvince.value
        })

        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>