<template>
  <div id="workModel">
    <div class="top"></div>
    <div class="main">
      <div class="title">
        <h2>
          <img src="../../assets/images/systemNav/c1.png" alt="">
          <span>常用应用</span>
        </h2>
        <h3>拖动图标可以调整位置</h3>
        <div class="btn">
          <button v-show="editBtnState" @click="editFun">
            <img src="../../assets/images/systemNav/c3.png" alt="">
          </button>
          <button class="unfold-btn" @click="unfoldState = !unfoldState" :class="unfoldState?'':'active'">
            <img src="../../assets/images/systemNav/c4.png" alt="">
          </button>
        </div>
      </div>
      <div class="checkedData">

        <vuedraggable class="wrapper" v-model="systemList">
          <transition-group class="workbench-list" :class="unfoldState? 'list-up':'list-down'">
            <li v-for="(item,index) in systemList" :key="index">
              <div>
                <img :src="item.imgUrl" alt="">
                <button v-if="editState" @click="deleteItem(item, index)">
                  <img src="../../assets/images/systemNav/j1.png" alt="">
                </button>
              </div>
              <h2>{{ item.title }}</h2>
            </li>
          </transition-group>
        </vuedraggable>
      </div>
      <div class="title">
        <h2>
          <img src="../../assets/images/systemNav/c2.png" alt="">
          <span>所有应用</span>
        </h2>
      </div>
      <div class="checkedData">
        <h3>OA系统应用：</h3>
        <ul class="workbench-list">
          <li v-for="(item,index) in OADataSoure" :key="index" :class="item.disabled === 1?'disabled':''">
            <div>
              <img :src="item.imgUrl" alt="">
              <button v-if="editState" @click="checkedItem(item)">
                <img src="../../assets/images/systemNav/j2.png" alt="">
              </button>
            </div>
            <h2>{{ item.title }}</h2>
          </li>
        </ul>
        <h3>人资系统应用：</h3>
        <ul class="workbench-list">
          <li v-for="(item,index) in personDataSoure" :key="index" :class="item.disabled === 1?'disabled':''">
            <div>
              <img :src="item.imgUrl" alt="">
              <button v-if="editState" @click="checkedItem(item)">
                <img src="../../assets/images/systemNav/j2.png" alt="">
              </button>
            </div>
            <h2>{{ item.title }}</h2>
          </li>
        </ul>
      </div>

    </div>

    <div v-if="editState" class="btn-list">
      <button @click="workHandleCancel">取消</button>
      <button class="btn-primary" @click="workhandleOk">确定</button>
    </div>

  </div>

</template>

<script>
import vuedraggable from 'vuedraggable'
import './js'

export default {
  components: {
    vuedraggable
  },
  props: {
    dataSoure: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {
      systemList: [
        {
          type: '人资系统应用',
          title: '生产经营与科技创新',
          imgUrl: require('../../assets/images/systemNav/i1.png'),
          nums: 100
        },
        {
          type: '人资系统应用',
          title: '学习材料',
          imgUrl: require('../../assets/images/systemNav/i2.png'),
          nums: 11
        },

        {
          type: '人资系统应用',
          title: '项目查询',
          imgUrl: require('../../assets/images/systemNav/i4.png'),
          nums: null
        },
        {
          type: '人资系统应用',
          title: '出差申请',
          imgUrl: require('../../assets/images/systemNav/i5.png'),
          nums: null
        },
        {
          type: '人资系统应用',
          title: '培训申请',
          imgUrl: require('../../assets/images/systemNav/i7.png'),
          nums: null
        },
        {
          type: 'OA系统',
          title: '物料申请',
          imgUrl: require('../../assets/images/systemNav/i6.png'),
          nums: null
        },
        {
          type: 'OA系统',
          title: '津贴申请',
          imgUrl: require('../../assets/images/systemNav/i3.png'),
          nums: null
        }
      ],
      oldSystemList: [
        {
          type: '人资系统应用',
          title: '生产经营与科技创新',
          imgUrl: require('../../assets/images/systemNav/i1.png'),
          nums: 100
        },
        {
          type: '人资系统应用',
          title: '学习材料',
          imgUrl: require('../../assets/images/systemNav/i2.png'),
          nums: 11
        },

        {
          type: '人资系统应用',
          title: '项目查询',
          imgUrl: require('../../assets/images/systemNav/i4.png'),
          nums: null
        },
        {
          type: '人资系统应用',
          title: '出差申请',
          imgUrl: require('../../assets/images/systemNav/i5.png'),
          nums: null
        },
        {
          type: '人资系统应用',
          title: '培训申请',
          imgUrl: require('../../assets/images/systemNav/i7.png'),
          nums: null
        },
        {
          type: 'OA系统',
          title: '物料申请',
          imgUrl: require('../../assets/images/systemNav/i6.png'),
          nums: null
        },
        {
          type: 'OA系统',
          title: '津贴申请',
          imgUrl: require('../../assets/images/systemNav/i3.png'),
          nums: null
        }
      ],
      personDataSoure: [],
      OADataSoure: [],
      arrDataSoure: [
        {
          type: 'OA系统',
          title: '日报',
          imgUrl: require('../../assets/images/systemNav/i1.png'),
          nums: null,
          disabled: 0
        },
        {
          type: 'OA系统',
          title: '周报',
          imgUrl: require('../../assets/images/systemNav/i6.png'),
          nums: null,
          disabled: 0
        },
        {
          type: 'OA系统',
          title: '月报',
          imgUrl: require('../../assets/images/systemNav/i2.png'),
          nums: null,
          disabled: 0
        },
        {
          type: 'OA系统',
          title: '休假申请',
          imgUrl: require('../../assets/images/systemNav/i3.png'),
          nums: null,
          disabled: 0
        },
        {
          type: 'OA系统',
          title: '加班申请',
          imgUrl: require('../../assets/images/systemNav/i7.png'),
          nums: null,
          disabled: 0
        },
        {
          type: 'OA系统',
          title: '津贴申请',
          imgUrl: require('../../assets/images/systemNav/i4.png'),
          nums: null,
          disabled: 0
        },
        {
          type: 'OA系统',
          title: '物料申请',
          imgUrl: require('../../assets/images/systemNav/i6.png'),
          nums: null
        },
        {
          type: 'OA系统',
          title: '邮箱',
          imgUrl: require('../../assets/images/systemNav/i1.png'),
          nums: null,
          disabled: 0
        },
        {
          type: 'OA系统',
          title: '公告',
          imgUrl: require('../../assets/images/systemNav/i2.png'),
          nums: null,
          disabled: 0
        },
        {
          type: 'OA系统',
          title: '新闻中心',
          imgUrl: require('../../assets/images/systemNav/i2.png'),
          nums: null,
          disabled: 0
        },
        {
          type: '人资系统应用',
          title: '项目查询',
          imgUrl: require('../../assets/images/systemNav/i5.png'),
          nums: null,
          disabled: 0
        },
        {
          type: '人资系统应用',
          title: '出差申请',
          imgUrl: require('../../assets/images/systemNav/i6.png'),
          nums: null,
          disabled: 0
        },
        {
          type: '人资系统应用',
          title: '生产经营与科技创新',
          imgUrl: require('../../assets/images/systemNav/i1.png'),
          nums: 100,
          disabled: 0
        },
        {
          type: '人资系统应用',
          title: '学习材料',
          imgUrl: require('../../assets/images/systemNav/i2.png'),
          nums: 11,
          disabled: 0
        },
        {
          type: '人资系统应用',
          title: '培训申请',
          imgUrl: require('../../assets/images/systemNav/i7.png'),
          nums: null,
          disabled: 0
        },
        {
          type: '人资系统应用',
          title: '客户管理',
          imgUrl: require('../../assets/images/systemNav/i6.png'),
          nums: null,
          disabled: 0
        },
        {
          type: '人资系统应用',
          title: '项目助手',
          imgUrl: require('../../assets/images/systemNav/i3.png'),
          nums: null,
          disabled: 0
        }
      ],
      editState: false,
      editBtnState: true,
      unfoldState: true,
      delDataList: [],
      addDataList: []
    }
  },
  mounted () {
    this.listClassify()
  },
  methods: {
    listClassify () {
      this.arrDataSoure.forEach((item, index) => {
        if (item.type === '人资系统应用') {
          this.personDataSoure.push(item)
        } else {
          this.OADataSoure.push(item)
        }
      })
    },
    editFun () {
      this.editBtnState = false
      this.editState = true
      this.arrDataSoure.forEach((item) => {
        this.systemList.forEach((i) => {
          if (i.title === item.title) {
            item.disabled = 1
          }
        })
      })
      console.log('addDataList:', this.addDataList)
    },
    // 确定
    workhandleOk () {
      this.editState = false
      this.editBtnState = true
      this.arrDataSoure.forEach((item) => {
        item.disabled = 0
      })
    },
    // 取消
    workHandleCancel () {
      this.editState = false
      this.editBtnState = true
      this.systemList = this.oldSystemList
      this.arrDataSoure.forEach((item) => {
        item.disabled = 0
      })
      this.addDataList.forEach((item) => {
        item.disabled = 0
        this.systemList.forEach((i, index) => {
          if (i.title === item.title) {
            this.systemList.splice(index, 1)
          }
        })
      })
      console.log('systemList:', this.systemList)
      // this.$emit('systemhandleCancel')
    },

    // 添加
    checkedItem (data) {
      if (data.disabled === 0) {
        this.systemList.push(data)
        this.addDataList.push(data)
        data.disabled = 1
      }
    },
    // 删除
    deleteItem (item, index) {
      this.delDataList.push(item)
      this.systemList = this.systemList.filter((i, index) => {
        return i.title !== item.title
      })
      this.arrDataSoure.forEach((i, index) => {
        if (i.title === item.title) {
          i.disabled = 0
        }
      })
      console.log('删除arr:', this.systemList)
    }
  }
}
</script>
<style lang='less' scoped>
#workModel {
  .wrapper li:first-child,
  .wrapper li:nth-child(2) {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
    button {
      display: none !important;
    }
  }
}
</style>
<style lang='less' scoped>
ol,
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#workModel {
  position: relative;
  padding-bottom: 2.5rem;

  .top {
    width: 100%;
    height: 1.5rem;
    box-shadow: 0 0 0.6rem rgba(233, 233, 233, 0.1);
  }
  .main {
    max-height: 60vh;
    overflow-x: hidden;
    padding: 0 2.4rem 0;
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-corner {
      background-color: rgba(0, 0, 0, 0.1);
    }

    /*滚动条里面轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
      background-color: transparent;
      border-radius: 5px;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      img {
        width: 2.3rem;
        height: auto;
      }
      h2 {
        display: flex;
        align-items: center;
        margin: 0;
        span {
          font-weight: Bold;
          font-size: 2rem;
          line-height: 6rem;
          color: #171d33;
          margin-left: 1rem;
          border: none;
          background: none;
        }
      }
      h3 {
        font-size: 1.6rem;
        color: #999999;
        font-weight: normal;
        margin: 0;
      }
      .btn {
        width: 10rem;
        text-align: right;
        & > button {
          border: none;
          background: none;
          padding: 0;
          cursor: pointer;
          display: inline-block;
          vertical-align: bottom;
          margin-left: 1rem;
          opacity: 0.8;
          margin-left: 2rem;
          &:hover {
            opacity: 1;
          }
          &.unfold-btn {
            transition-duration: 0.5s;
          }
        }
        .unfold-btn.active {
          transform: rotate(180deg);
          transition-duration: 0.5s;
          & > img {
            position: relative;
            top: -0.6rem;
          }
        }
      }
    }
    .checkedData {
      & > h3 {
        color: #000000;
        font-size: 1.6rem;
        margin: 1rem 0 0px 3rem;
        font-weight: normal;
        text-align: left;
      }
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      h2 {
        display: flex;
        align-items: center;
        margin: 0;
        span {
          font-weight: Bold;
          font-size: 2rem;
          line-height: 6rem;
          color: #171d33;
          margin-left: 1rem;
          border: none;
          background: none;
        }
      }
      h3 {
        font-size: 1.6rem;
        color: #999999;
        font-weight: normal;
      }
      .btn {
        & > button {
          border: none;
          background: none;
          padding: 0;
          cursor: pointer;
          display: inline-block;
          vertical-align: bottom;
          margin-left: 1rem;
          opacity: 0.8;
          margin-left: 2rem;
          &:hover {
            opacity: 1;
          }
          &.unfold-btn {
            transition-duration: 0.5s;
          }
        }
        .unfold-btn.active {
          transform: rotate(180deg);
          transition-duration: 0.5s;
          & > img {
            padding-bottom: 0.8rem;
          }
        }
      }
    }
    .checkedData {
      & > h3 {
        color: #000000;
        font-size: 1.6rem;
        margin: 1rem 0 1rem 3rem;
        font-weight: normal;
      }
    }
    .workbench-list {
      display: grid;
      margin: 0 0 2rem;
      width: 100%;
      grid-template-columns: repeat(4, 25%);

      & > li {
        margin: 1rem 0;
        text-align: center;
        & > div {
          position: relative;
          margin: 0 auto;
          & > img {
            width: 6rem;
            height: auto;
          }
          button {
            background: none;
            border: none;
            position: absolute;
            top: -0.4rem;
            right: 4.6rem;
            width: 1.7rem;
            height: 1.7rem;
            padding: 0;
            background: #fff;
            border-radius: 1.7rem;

            & > img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }
        & > h2 {
          color: #333333;
          font-size: 1.6rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: normal;
          margin: 1rem auto 0;
        }
        &:hover {
          cursor: pointer;

          // & > h2 {
          //   color: #009fe2;
          // }
        }
        &.disabled {
          pointer-events: none;
          cursor: default;
          opacity: 0.6;
          button {
            display: none;
          }
        }
      }
    }
    .list-up > li:nth-child(n + 5) {
      display: block;
    }
    .list-down > li:nth-child(n + 5) {
      display: none;
    }
  }

  .btn-list {
    padding: 2.5rem 1.6rem 0;
    border: none;
    text-align: center;
    border-top: 1px solid #ccc;
    button {
      width: 14rem;
      height: 4.4rem;
      border-radius: 1.1rem;
      background: rgba(31, 62, 139, 0);
      font-size: 1.6rem;
      color: #009fe2;
      border: 1px solid #009fe2;
    }
    button.btn-primary {
      background: #009fe2;
      color: #fff;
      margin-left: 3rem;
    }
  }
}
</style>
