<template>
    <el-popover
      placement="top"
      v-model="visible"
      class="rowDropContain rowDropNotHideItem"
      width="270"
    >
      <div class="test_wrapper" @dragover="dragover($event)">
        <div class="text" >字段设置</div>
        <el-divider></el-divider>
        <transition-group class="transition-wrapper" name="sort">
          <div 
            v-for="(item,index) in dataList" 
            :key='index+item.label' 
            class="sort-item"
            :draggable="true"
            @dragstart="dragstart(item)"
            @dragenter="dragenter(item,$event)"
            @dragend="dragend(item,$event)"
            @dragover="dragover($event)"
          >
            <svg-icon 
              class="checkbox-svg" 
              :class="{'show': dataList[index].isture}"
              @click="rediochange(index)" 
              :icon-class="dataList[index].isture ? 'show' : 'hide'" 
            />
            <!-- <svg-icon v-if="!dataList[index].isture" @change="rediochange" icon-class="hide" /> -->
            <!-- <el-checkbox 
              v-model="dataList[index].isture" 
              @change="rediochange"  
              :data="checked" 
            ></el-checkbox> -->
            <div class="lable">{{ item.label }}</div>
          </div>
        </transition-group>
      </div>
      <div class="buttonsBox">
        <el-button size="mini" @click="reset">重置</el-button>
        <el-button size="mini" @click="close">关闭</el-button>
        <!-- <el-button type="primary" size="mini" @click="save">保存</el-button> -->
      </div>
    </el-popover>
   
  </template>
  <script>
  import draggable from "vuedraggable";
  import Sortable from "sortablejs";
  export default {
    components: {
      draggable,
      Sortable,
    },
    data() {
      return {
        visibleclose:true,
        visibleon:false,
        name: null,
        oldData: null,
        newData: null,
        // checked: false,
        dataList: [],
      }
    },
    props: {
        visible: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        tableColumns: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    mounted() {
        this.formatData(this.tableColumns)
    },
    methods: {
      reset() {
        this.$confirm('重置后，字段设置将恢复初始设置，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            cancelButtonClass:'rowDropNotHideItem'
          }).then(() => {
            localStorage.removeItem(this.$store.getters.name.userName + '_' + this.$route.name)
            let _resetCol = this.$isTableColumns[this.$route.name]
            _resetCol.forEach(item => {
              item.isture = true
            })
            this.dataList = _resetCol
            this.$emit('radio',_resetCol)
            this.close()
          }).catch(() => {

          });
      },
      close() {
          this.$emit('closeRowDrop')
      },
      // save () {
      //     this.$emit('closeRowDrop')
      //     this.$emit('radio',this.dataList)
      //     // 本地缓存 当前用户名 + 路由名称
      //     localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList))
      // },
        // 格式化表头数据
        formatData (val) {
          this.dataList = JSON.parse(JSON.stringify(val))
          this.dataList.forEach(item => {
              if (item.isture == undefined) {
                  item.isture = true
              }
          })
        },
        // 拖拽事件
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        dragstart(value) {
            this.oldData = value
        },
        // 记录移动过程中信息
        dragenter(value, e) {
            this.newData = value
            e.preventDefault()
        },
        // 拖拽最终操作
        dragend(value, e) {
            if (this.oldData !== this.newData) {
                let oldIndex = this.dataList.indexOf(this.oldData)
                let newIndex = this.dataList.indexOf(this.newData)
                let newItems = [...this.dataList]
                // 删除老的节点
                newItems.splice(oldIndex, 1)
                // 在列表中目标位置增加新的节点
                newItems.splice(newIndex, 0, this.oldData)
                this.dataList = [...newItems]
                this.$emit('radio',this.dataList)
            }
        },
        // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
        dragover(e) {
            e.preventDefault()
        },
        // 拖拽事件结束
        // 点击展开拖拽框
        visclose(){
            this.visibleclose = false
            this.visibleon = true
        },
        // 点击关闭拖拽框
        vison(){
            this.visibleclose = true
            this.visibleon = false
        },
        rediochange(index){
          this.dataList[index].isture = !this.dataList[index].isture
          this.$forceUpdate()
            // this.checked = !this.checked
          this.$emit('radio',this.dataList)
          // 本地缓存 当前用户名 + 路由名称
          localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList))
        
        }
    }
  }
  </script>
  <style lang="scss">
  $paddingSize:20px;
  .rowDropContain{
    .el-popover{
      position: fixed;
      right: 30px;
      padding: 0;
    }
    .transition-wrapper {
      display: block;
      max-height: calc(90vh - 280px);
      overflow: auto;
      padding: 0 0 $paddingSize $paddingSize;

      .sort-item{
        margin-bottom: 6px;
        display: flex;
        cursor: grab;
        align-items: center;

        &:last-child{
          margin-bottom: 0;
        }

        .lable{
          padding: 0 15px 0 10px;
        }
      }
    }
    .el-divider--horizontal {
      margin: $paddingSize;
      width: calc(100% - 40px);
    }
    .text {
      color: #333;
      font-weight: bold;
      padding: $paddingSize 0 0 $paddingSize;
    }
    .buttonsBox{
      text-align: center; 
      margin: 0;
      padding: 15px;
      border-top: #eee solid 1px;
    }
    .checkbox-svg{
      width: 20px;
      flex-shrink: 0;
      fill:currentColor; 
      color:#999;
      font-size: 18px;
      cursor: pointer;

      &.show{
        color: #409EFF;
      }
    }
  }
  </style>