<template>
  <div class="customColumnKS">
    <a-modal v-model="visibleOk" title="自定义列" on-ok="handleOk" @cancel="handleCancel" width="65%">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">应用</a-button>
      </template>
      <!-- <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" /> -->
      <div class="zhuti">
        <div class="addlist">
          <p>可添加的列</p>
          <div class="selectionList">
            <!--  v-for="(item,index) in addColumns" :key="index" -->
            <!-- <div v-if="mediaType==1"> -->
              <selectComponent
              :showCol="mylistNum"
              @getshowlist="getshowlist"
              :fixedCol="fiexColumn"
              :mediaType='mediaType'
              
              />
            <!-- </div> -->
            <!-- <div v-if="mediaType==2">
              <selectComponentKS
              :showCol="mylistNum"
              @getshowlist="getshowlist"
              :fixedCol="fiexColumn"
              :mediaType='mediaType'
              
            />
            </div> -->
            
          </div>
        </div>
        <div class="listNum">
          <p>已选{{mylistNum.length}}列</p>
          <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
          <ul class="selectlist">
                <!-- draggable="true"
                  @dragstart="handleDragStart($event, item.dataIndex)"
                  @dragover.prevent="handleDragOver($event, item.dataIndex)"
                  @dragenter="handleDragEnter($event, item.dataIndex)"
                  @dragend="handleDragEnd($event, item.dataIndex)" -->
            <li v-for="(item,index) in mylistNum" :key="index">
              <span v-if=" index < fiexColumn.length">
                <a-icon type="lock" />
                <span class="listText">{{item.title}}</span>
              </span>
              <span v-else-if=" index >=fiexColumn.length"  >
                <a-icon type="menu" style="color:#ccc" />
                <span class="listText">{{item.title}}</span>
                <a-icon
                  type="close"
                  @click="deleteCol(item,index)"
                  id="closeStyle"
                  style="fontSize:12px;"
                />
              </span>
            </li>
          </ul>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import selectComponent from './selectComponent'
import selectComponentKS from './selectComponentKS'
export default {
  components: {
    selectComponent,
    selectComponentKS,
  },
  props: ['visible', 'listNum', 'fiexColumn','mediaType'],

  data() {
    return {
      dragging: null,
      dataKey: 0,
      visibleOk: false,
      mylistNum: [],
      loading: false
    }
  },
  watch: {
    visible(n, o) {
      // console.log(n,o)
      this.visibleOk = this.visible
    },
    listNum: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue)
        this.mylistNum = newValue
      },
      immediate: true
      // deep: true
    }
  },
  methods: {
     //li展示里的关闭按钮 删除当前被选中的这一个列
    deleteCol(item, index) {
      this.mylistNum = this.mylistNum.filter((item1, num) => {
        return num != index
      })
    },
    handleDragStart(e, item) {
      this.dragging = item
    },
    handleDragEnd(e, item) {
      this.dragging = null
    },
    //首先把div变成可以放置的元素，即重写dragenter/dragover
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
      if (item === this.dragging) {
        return
      }
      const newItems = [...this.mylistNum]
      console.log(newItems)
      const src = newItems.findIndex(v => v.dataIndex === this.dragging)
      const dst = newItems.findIndex(v => v.dataIndex === item)

      newItems.splice(dst, 0, ...newItems.splice(src, 1))

      this.mylistNum = newItems
    },
    //弹出框确定
    handleOk(e) {
      this.loading = false
      this.visibleOk = false
      this.$emit('closeCustomColumn', false)
      this.$emit('changeColumn', this.mylistNum)
    },
    //取消按钮
    handleCancel() {
      this.visibleOk = false
      this.$emit('closeCustomColumn', false)
    },
    //清空全部
    clearAllList() {
      this.mylistNum = [...this.fiexColumn]
    },
    //从自定义列拿选择的项
    getshowlist(val) {
      var arr = []

      // console.log(val)
      if (val.length) {
        if (val.flag) {
          let newArr = val.arr
          newVal.map((item, index) => {
            // if(JSON.stringify(this.listNum).indexOf(JSON.stringify(item))==-1){
            //  this.listNum.push(item); // 进行动态的操作
            // }
            var result = this.listNum.some(items => {
              if (items.dataIndex == item.dataIndex) {
                return true
              }
            })

            // console.log(result)
            if (result) {
              newArr.splice(index, 1)
            }
          })

          this.mylistNum = [...this.mylistNum, ...newArr]
        } else {
          //取消全选  清楚listNum中的val里的值
          val.arr.map((item, index) => {
            var result = this.mylistNum.some(items => {
              if (items.dataIndex == item.dataIndex) {
                return true
              }
            })
            // console.log(result)
            if (result) {
              this.mylistNum.splice(index, 1)
            }
          })
        }
      } else {
        arr = this.mylistNum.filter((item, index) => {
          return item.dataIndex == val.dataIndex
        })
      }
      if (arr.length) {
        var index
        this.mylistNum.map((item, ind) => {
          if (item.dataIndex == val.dataIndex) {
            index = ind
          }
        })
        console.log(index)
        this.mylistNum.splice(index, 1)
      } else {
        this.mylistNum.push(val)
      }
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>


.addlist {
  float: left;
  width: 70%;
  border: 1px solid #eee;
  .selectionList {
    padding: 10px 15px;
    height: 450px;
    overflow: auto;
    .leibie {
      .leiName {
        font-size: 26px;
        text-align: left;
      }
    }
    .jutixiang {
      display: inline-block;
      width: 32%;
      box-sizing: border-box;
      padding: 10px 3px;
    }
  }
}
.listNum {
  float: right;
  width: 28%;
  border: 1px solid #eee;
  position: relative;
}
.zhuti {
  margin-top: 15px;
  overflow: hidden;

  p {
    height: 40px;
    line-height: 20px;
    padding: 10px 15px;

    background: rgb(249, 250, 253);
    border-bottom: 1px solid #eee;
  }
  #btn {
    position: absolute;
    right: 0;
    top: 5px;
  }
  .selectlist {
    width: 100%;
    list-style: none;
    margin: 0;
    height: 450px;
    padding: 0 15px 10px;
    overflow: auto;

    li {
      width: 100%;
      padding: 5px 8px;
      margin: 6px 0;
      border-radius: 10px;
      background: rgb(248, 248, 248);
      height: 32px;
      position: relative;
      span {
        width: 80%;
        height: 100%;
        display: inline-block;
        margin: 0 10px;
        // overflow:hidden;
        // text-overflow:ellipsis;
        // white-space: nowrap;
      }
      .listText {
        position: absolute;
        top: 2;
        left: 10;
        width: 60%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      #closeStyle {
        position: absolute;
        top: 9px;
        right: 7px;
      }
    }
  }
}

</style>