<template>
  <div>
    <div v-for="(item,index) in customFields" :key="index">
      <div class="leibie">
        <p class="leiName">{{item.title}}</p>
        <!-- <span class="jutixiang">
          <a-checkbox
            :value="index"
            name="type"
            @change="isSelectAll($event,index)"
            :checked="item.checkall"
          >全选</a-checkbox>
        </span> -->
        <!-- {{item.form}} -->
        <a-checkbox-group v-model="item.form" >
          <span class="jutixiang" v-for="(zhi,num) in item.specificFields " :key="num">

            <a-checkbox :value="zhi.dataIndex" :disabled="zhi.disabled"  name="type" @change="checkboxClick(zhi)">
              <a-tooltip
                class="select-component"
                placement="top"
                :title="zhi.tip"
                :overlayClassName="tooltipShow"
              >{{zhi.title}}</a-tooltip>
            </a-checkbox>
          </span>
        </a-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
import  {TTcustomFields ,KScustomFields}  from '../../utils/columnConst/accountConst'
// let customFields=customFields
export default {
  props: ['showCol','fixedCol','mediaType'],
  data() {
    return {
        // customFields,
      customFields:[],
      quanxuanflag: [],
      hovered: false,
      tooltipShow: 'tooltipShow',
      toParentArr: []
    }
  },
  watch: {
    
    showCol(n) {
      // console.log(n)
      //
      if (this.showCol.length == this.fixedCol.length) {

        for (let i = 0; i < this.customFields.length; i++) {
          this.customFields[i].form=[]          
        }
        this.showCol.map((item, index) => {
          this.customFields.map((it, ind) => {
            it.specificFields.map((i, d) => {
              if (i.dataIndex === item.dataIndex) {
                it.form.push(item.dataIndex)
              }else{

              }
            })
          })
        })
      } else {
        
       for (let i = 0; i < this.customFields.length; i++) {
          this.customFields[i].form=[]
          
        }
        n.map((item, index) => {
          this.customFields.map((it, ind) => {
            it.specificFields.map((i, d) => {
              if (i.dataIndex === item.dataIndex) {
                it.form.push(item.dataIndex)
              }else{

              }
            })
          })
        })
      }
      // console.log(this.form)
    },
  
  },
  mounted() {
    if(this.mediaType==1){
      //头条自定义列
      this.customFields=TTcustomFields
    }else if(this.mediaType==2){
      //快手自定义列
      this.customFields=KScustomFields
    }
    for (let i = 0; i < this.customFields.length; i++) {
      this.customFields[i].form=[]
    }
    // console.log(1)
    this.showCol.map((item, index) => {
      this.customFields.map((it, ind) => {
        it.specificFields.map((i, d) => {
          if (i.dataIndex === item.dataIndex) {
            it.form.push(item.dataIndex)
          }
        })
      })
    })
    this.fixedCol.map((item, index) => {
      this.customFields.map((it, ind) => {
        it.specificFields.map((i, d) => {
          if (i.dataIndex === item.dataIndex) {
            i.disabled=true;
          }
        })
      })
    })


    // console.log(this.customFields);
    
  },
  methods: {
    hide() {
      this.clicked = false
      this.hovered = false
    },
    handleHoverChange(visible) {
      this.clicked = false
      this.hovered = visible
    },
    getPopupContainer() {
      console.log(this)
    },

    //全选框   判断是否全选
    isSelectAll(e, val) {
      //像父元素传递
      console.log(e, val)
      let arr=JSON.parse(JSON.stringify(this.customFields[val].specificFields))
      let valArr={
        flag:true,
        arr
      }
      this.customFields[val].checkall = e.target.checked
      console.log(this.customFields[val].checkall)

      if (this.customFields[val].checkall) {
       
        this.customFields[val].form=[]
 
        this.customFields[val].specificFields.map((item, index) => {

          this.customFields[val].form.push(item.dataIndex)

        })
        valArr.flag=true;
        this.$emit('getshowlist', valArr)
      } else {
        console.log(this.customFields[val])
        this.customFields[val].form=[];
        valArr.flag=false;
        console.log(this.customFields[val].form=[])
        this.$emit('getshowlist', valArr)
      }

      console.log(this.form[val])
    },

    onChange(){
        
    },

    //复选框的点击事件
    checkboxClick(val) {
      // console.log(val)
    //   this.$emit('update:count',)
      this.$emit('getshowlist', val)
      // console.log(val,this.customFields[0].form)
      // this.customFields[val].checkall=!this.customFields[val].checkall
      // for (let i = 0; i < this.customFields.length; i++) {
      //   // console.log(this.customFields[0].form,this.customFields[i].specificFields.length)
      //   if(this.customFields[i].form.length==this.customFields[i].specificFields.length-1){
      //       this.customFields[i].checkall=true;
      //   }else{
      //     this.customFields[i].checkall=false;
      //   }
          
      //   }
    }
  }
}
</script>
<style>
.tooltipShow {
  max-width: 30%;
}
.tooltipShow .ant-tooltip-content .ant-tooltip-inner {
  background: white;
  font-size: 10px;
  color: #333;
}
.ant-tooltip-content .ant-tooltip-arrow::before {
  background-color: white;
}
</style>
<style lang="scss" scoped>
.leibie {
  width: 100%;
  margin-bottom: 10px;
  .leiName {
    font-size: 20px;
    text-align: left;
    margin-bottom: 5px;
    margin-top: 0px;
  }
}
.jutixiang {
  display: inline-block;
  width: 32%;
  box-sizing: border-box;
  padding: 8px 3px;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ant-tooltip-content .tooltipShow {
  background: #eee;
  font-size: 10px;
  color: #333;
}

.ant-checkbox-group {
  width: 100%;
}
</style>