<template>
  <div id="systemModel">
    <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" :class="unfoldState?'':'active'" @click="unfoldState = !unfoldState">
            <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>
                <button v-if="editState" @click="deleteItem(item, index)">
                  <img src="../../assets/images/systemNav/j1.png" alt="">
                </button>
                <a @click="redrictSystem(item.returnUrl,item.name,item.joinsysCode,item.remark)">{{ item.name }}</a>
              </div>
            </li>
          </transition-group>
        </vuedraggable>
      </div>
      <div class="title">
        <h2>
          <img src="../../assets/images/systemNav/c2.png" alt="">
          <span>所有系统</span>
        </h2>
      </div>
      <div class="checkedData">
        <ul class="workbench-list">
          <li v-for="(item,index) in arrDataSoure" :key="index">
            <div :class="item.disabled === 1?'disabled':''">
              <button v-if="editState" @click="checkedItem(item)">
                <img src="../../assets/images/systemNav/j2.png" alt="">
              </button>
              <a @click="redrictSystem(item.returnUrl,item.name,item.joinsysCode,item.remark)">{{ item.name }}</a>
            </div>
          </li>
        </ul>
      </div>
    </div>

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

  </div>

</template>

<script>
import vuedraggable from 'vuedraggable'
import { getUserSystemByRole } from '@/api/login'
import './js'

export default {
  props: {},
  components: {
    vuedraggable
  },
  data () {
    return {
      systemList: [],

      arrDataSoure: [
        {
          joinsysCode: 'e696b0e5a4a9e695',
          name: '新天数据决策系统',
          returnUrl: '/CAS',
          disabled: 0
        },
        {
          joinsysCode: 'e4babae8b584e7bb',
          name: '人资绩效管理系统',
          returnUrl: 'http://10.10.13.157:8444/testhr/accept/tyyhRequest.do',
          disabled: 0
        },
        {
          joinsysCode: 'e7bb9fe4b880e794',
          name: '统一用户系统',
          returnUrl: '/',
          disabled: 0
        },
        {
          joinsysCode: 'e7b3bbe7bb9fe58a',
          name: '系统办公系统',
          returnUrl: '10.10.13.195',
          disabled: 0
        },
        {
          joinsysCode: 'e696b0e5a4a9e9a1',
          name: '新天项目管理系统',
          returnUrl: '/CAS',
          disabled: 0
        },
        {
          joinsysCode: 'e7bb8fe890a5e588',
          name: '经营分析系统',
          returnUrl: '10.10.13.195',
          disabled: 0
        },
        {
          joinsysCode: 'e4b8bbe695b0e68d',
          name: '主数据管理平台',
          returnUrl: 'http://192.168.4.219:8081/accept/tyyhRequest',
          disabled: 0
        },

        { name: 'OA系统', returnUrl: '', joinsysCode: '1', disabled: 0 },
        { name: '人资系统', returnUrl: '', joinsysCode: '2', disabled: 0 },
        { name: '项目管理系统', returnUrl: '', joinsysCode: '3', disabled: 0 },
        { name: '知识驾驶舱', returnUrl: '', joinsysCode: '4', disabled: 0 },
        { name: '新天管理驾驶舱', returnUrl: '', joinsysCode: 'e696b0e5a4a9e7ae', disabled: 0 },
        { name: '管理驾驶舱', returnUrl: '', joinsysCode: '5', disabled: 0 },
        { name: '财务管理系统', returnUrl: '', joinsysCode: '7', disabled: 0 },
        { name: '主数据管理系统', returnUrl: '', joinsysCode: '8', disabled: 0 },
        { name: '项目管理系统1', returnUrl: '', joinsysCode: '9', disabled: 0 },
        { name: '项目管理系统2', returnUrl: '', joinsysCode: '10', disabled: 0 },
        { name: '项目管理系统3', returnUrl: '', joinsysCode: '11', disabled: 0 },
        { name: '项目管理系统4', returnUrl: '', joinsysCode: '12', disabled: 0 }
      ],
      editState: false,
      editBtnState: true,
      unfoldState: true,
      delDataList: [],
      addDataList: []
    }
  },
  mounted () {
    this.systemInit()
  },
  methods: {
    systemInit () {
      getUserSystemByRole().then((res) => {
        if (res != null && res !== '') {
          this.systemList = res
        } else {
          // this.systemList = this.ArrImg
        }
      })
    },
    editFun () {
      this.editBtnState = false
      this.editState = true
      this.arrDataSoure.forEach((item) => {
        this.systemList.forEach((i) => {
          if (i.joinsysCode === item.joinsysCode) {
            item.disabled = 1
          }
        })
      })
      // console.log('addDataList:', this.addDataList)
    },
    redrictSystem (url, name, code, remark) {
      this.$emit('redrictSystem', url, name, code, remark)
    },
    systemhandleOk () {
      this.editState = false
      this.editBtnState = true
      this.arrDataSoure.forEach((item) => {
        item.disabled = 0
      })
      // this.$emit('systemhandleOk', this.systemList)
    },
    // 取消
    systemhandleCancel () {
      this.editState = false
      this.editBtnState = true
      this.systemInit()
      this.arrDataSoure.forEach((item) => {
        item.disabled = 0
      })
      this.addDataList.forEach((item) => {
        item.disabled = 0
        this.systemList.forEach((i, index) => {
          if (i.joinsysCode === item.joinsysCode) {
            this.systemList.splice(index, 1)
          }
        })
      })
      // console.log('systemList:', this.systemList)
      // this.$emit('systemhandleCancel')
    },

    // 添加
    checkedItem (data) {
      const arr = this.systemList
      if (arr.length < 12) {
        if (data.disabled === 0) {
          this.systemList.push(data)
          this.addDataList.push(data)
          data.disabled = 1
        }
        // console.log('新arr:', this.systemList)
      } else {
        this.$message.error('最多添加12个常用系统')
      }
    },
    // 删除
    deleteItem (item, index) {
      this.delDataList.push(item)
      this.systemList = this.systemList.filter((i, index) => {
        return i.joinsysCode !== item.joinsysCode
      })
      this.arrDataSoure.forEach((i, index) => {
        if (i.joinsysCode === item.joinsysCode) {
          i.disabled = 0
        }
      })
      // console.log('删除arr:', this.systemList)
    }
  }
}
</script>

<style lang='less' scoped>
ol,
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#systemModel {
  padding-bottom: 2.5rem;
  .top {
    width: 100%;
    height: 1.5rem;
    box-shadow: 0 0 0.6rem rgba(233, 233, 233, 0.1);
  }
  img {
    width: 2.3rem;
    height: auto;
  }
  .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;
      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;
      }
    }
    .workbench-list {
      display: grid;
      margin: 0 0 2rem;
      width: 100%;
      grid-template-columns: repeat(4, 25%);

      & > li {
        margin: 1rem 0;
        text-align: center;
        & > div {
          width: 15rem;
          height: 4rem;
          line-height: 4rem;
          position: relative;
          margin: 0 auto;
          border-radius: 2rem;
          background: #f5f5f5;
          padding: 0 0.5rem;
          button {
            background: none;
            border: none;
            position: absolute;
            top: -0.4rem;
            right: 0.3rem;
            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;
            }
          }
          & > a {
            color: #333333;
            font-size: 1.6rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: normal;
            border-radius: 2rem;
          }
          &:hover {
            cursor: pointer;
            // background: #009fe2;
            // & > h2 {
            //   color:#ffffff;
            // }
          }
          &.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>
