<template>
  <div ref="dragSet" class="dragSetting">
    <el-popover trigger="click" v-model="dragVisible">
      <div class="content" style="height:300px;overflow: auto;">
        <draggable element="ul" style="transition: all 0.3s;border-bottom: 1px solid #EBEEF5;"
          :style="{ height: dragVisible ? 'calc(100% - 50px)' : '0', overflow: 'auto' }" v-model="list"
          :options="dragOptions">
          <div class="dragItem" v-for="(item, index) in list" :domProp="item.prop" :key="index">
            <el-checkbox v-model="item.isShow" :disabled="item.isDragDisabled" />
            {{ item.label }}
            <!-- <i
                    class="iconfont icon-lock itemIsLock"
                    v-if="item.isLock"
                    @click="unLockItems(index)"
                ></i> -->
            <!-- <i class="iconfont icon-unlock itemLock" v-else @click="lockItems(index)"></i> -->
            <i class="iconfont icon-drag dragIcon"></i>
          </div>
        </draggable>
        <div class="confirmBtn" slot="footer" @click="save">确定</div>
      </div>
      <!-- <i class="iconfont icon-yewushezhi" style="font-size: 14px;cursor: pointer;" slot="reference"></i> -->
      <svg t="1696937838297" slot="reference" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4320" width="18" height="18">
        <path
          d="M510.37806 337.803609c-98.010221 0-177.748287 78.842673-177.748287 175.75284 0 96.91426 79.738066 175.763073 177.748287 175.763073 9.537214 0 19.620873-0.978281 31.797194-3.088338 18.196431-3.281743 30.290887-20.538779 26.963095-38.471197-2.924609-15.732309-16.693194-27.152407-32.747845-27.152407-2.071172 0-4.15974 0.196475-6.123464 0.563842-7.937786 1.402953-14.233166 2.056845-19.807115 2.056845-61.159942 0-110.915136-49.201585-110.915136-109.671819 0-60.467163 49.679469-109.661585 110.747313-109.661585 61.116963 0 110.832248 49.194422 110.832248 109.661585 0 5.892197-0.656963 12.0832-2.088568 19.531845-3.327792 17.928325 8.769734 35.189454 26.959002 38.464033 2.006703 0.360204 4.045129 0.546446 6.070252 0.546446 16.204054 0 30.019711-11.43033 32.832779-27.116591 2.13871-11.45182 3.13848-21.435195 3.13848-31.41857 0.042979-46.873564-18.435884-90.990341-52.033074-124.223233C602.407056 356.106464 557.790906 337.803609 510.37806 337.803609z"
          fill="#000000" p-id="4321"></path>
        <path
          d="M938.476161 432.79917c-2.185782-11.426237-11.037381-20.499893-22.563902-23.12058-41.909505-9.508561-76.781734-34.929534-98.185206-71.550593-21.334911-36.560684-26.191522-79.099523-13.68979-119.709429 3.52836-11.123338 0.007163-23.235191-8.951883-30.840402-41.860387-35.721573-89.536222-62.938448-141.695163-80.885192-3.152806-1.088798-6.437619-1.639337-9.776667-1.639337-8.256034 0-16.182564 3.431146-21.724791 9.376555-29.236881 31.04404-68.840878 48.140417-111.5107 48.140417-42.673915 0-82.305541-17.125029-111.607914-48.230468-7.877411-8.333806-20.510126-11.512195-31.580253-7.726985-52.483328 18.171871-100.131535 45.416376-141.640927 80.988546-8.815783 7.591909-12.322653 19.620873-8.934486 30.67258 12.586666 40.645722 7.759731 83.180468-13.597693 119.78106-21.306258 36.5965-56.149834 62.006216-98.17395 71.561849-11.540847 2.709715-20.396539 11.812023-22.559808 23.166629-5.228071 27.169803-7.877411 54.346769-7.877411 80.770582 0 26.426883 2.64934 53.603849 7.873318 80.763418 2.174526 11.411911 11.023054 20.488637 22.552645 23.12058 41.913599 9.512654 76.785827 34.922371 98.19237 71.547523 21.349237 36.59343 26.177196 79.128175 13.583366 119.795387-3.363607 10.969842 0.121773 23.013133 8.973372 30.758538 41.84913 35.707246 89.494267 62.920028 141.662417 80.902588 11.466146 3.885494 23.738657 0.549515 31.454386-7.680936 29.29828-31.091112 68.925812-48.216141 111.593588-48.216141s82.302471 17.125029 111.560842 48.183396c5.556553 5.955642 13.494339 9.380648 21.782096 9.380648 3.27765 0 6.537903-0.520863 9.829879-1.599428 52.126194-17.968234 99.774401-45.184085 141.652184-80.912821 8.791224-7.577582 12.308327-19.628036 8.94165-30.758538-12.597923-40.678468-7.745405-83.20605 13.672394-119.773897 21.324678-36.625152 56.192813-62.030775 98.19237-71.547523 11.390421-2.592035 20.23588-11.633968 22.549575-23.106254 5.223978-27.184129 7.870248-54.358025 7.870248-80.770582C946.342316 487.171522 943.697069 459.965903 938.476161 432.79917zM728.572524 789.878798c-26.02677 20.157085-54.736649 36.553521-85.487 48.818869-36.682457-32.144094-83.60207-49.779753-132.792399-49.779753-48.926316 0-95.838765 17.635659-132.767839 49.786916-30.744211-12.262278-59.45716-28.655643-85.491093-48.812729 9.894348-47.441499 1.889023-96.449679-22.763446-138.627291-24.448832-41.966811-63.427588-73.339332-110.186542-88.840374-2.381234-16.343223-3.584642-32.758078-3.584642-48.869011 0-16.043395 1.203408-32.451086 3.584642-48.851615 46.612621-15.389502 85.584214-46.758953 110.186542-88.850607 24.523533-42.024116 32.525788-91.033319 22.74912-138.620128 26.0237-20.149922 54.735625-36.543288 85.494163-48.815799 36.821627 32.201399 83.73817 49.861618 132.778072 49.861618 49.194422 0 96.109941-17.635659 132.792399-49.779753 30.751375 12.269441 59.45716 28.662807 85.48086 48.812729-9.809413 47.63388-1.835811 96.634898 22.667256 138.620128 24.445762 41.966811 63.416332 73.343425 110.182448 88.850607 2.381234 16.386202 3.584642 32.801057 3.584642 48.940642 0.143263 15.443737-1.031493 31.797194-3.499707 48.701189-46.763047 15.504112-85.73771 46.873564-110.186542 88.836281C726.84416 693.189665 718.845998 742.190683 728.572524 789.878798z"
          fill="#000000" p-id="4322"></path>
      </svg>
    </el-popover>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  name: 'SyDragSet',
  props: {
    // 列
    listConf: {
      type: Array,
      required: true,
      default: () => []
    },
    value: {
      type: Boolean,
      default: false
    },
    cusStyle: {}
  },
  data() {
    return {
      // vuedrag的配置项
      dragOptions: {
        animation: 300,
        pull: false,
        group: { name: 'description', pull: false },
        disabled: false,
        ghostClass: 'ghost'
      },
      list: [],
      dragVisible: false
    }
  },
  components: {
    draggable
  },
  methods: {
    // 列表项目锁定
    lockItems(index) {
      const arr1 = this.list.slice(0, index + 1)
      arr1.forEach(item => {
        item.isLock = true
      })
      this.list.splice(0, index + 1, ...arr1)
    },
    // 列表项目解锁
    unLockItems(index) {
      const arr1 = this.list.slice(index, this.list.length)
      arr1.forEach(item => {
        item.isLock = false
      })
      this.list.splice(index, this.list.length, ...arr1)
    },
    save() {
      this.dragVisible = false
      this.$emit('save', this.list)
    }
  },
  watch: {
    listConf: {
      handler() {
        this.list = JSON.parse(JSON.stringify(this.listConf))
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  box-sizing: border-box;

  .dragItem {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    cursor: move;

    .itemLock {
      float: right;
      opacity: 0;
      cursor: pointer;
      transition: opacity 0.1s;
    }

    .itemIsLock {
      cursor: pointer;
      float: right;
    }

    .dragIcon {
      float: right;
      opacity: 0;
      transition: opacity 0.1s;
      margin-right: 8px;
    }

    &:hover {
      color: #027aff;

      .itemLock {
        opacity: 1;
      }

      .dragIcon {
        opacity: 1;
      }
    }
  }

  .confirmBtn {
    margin: 16px auto 0;
    width: 72px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    color: #fff;
    background: #027aff;
    cursor: pointer;
  }
}

.dragSetting {
  position: absolute;
  right: 0;
  top: 0;
  height: 52px;
  line-height: 52px;
  padding: 0 2px;
  background: linear-gradient(180deg, #EEF4FB 0%, #FFFFFF 100%);
  border: none;
  // border-left: 1px solid #d8d8d8;
  color: #606266;
  z-index: 20;
   ::v-deep .el-popover__reference-wrapper{
    line-height: 62px !important;
  }
}

ul {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 100%;
}</style>
