<template>
  <div class="role-power-select">
    <el-row>
      <el-col :span="24">
        <p class="title">角色授权</p>
      </el-col>
      <el-col :span="11" style="margin-right:16px">
        <div class="handle">
          <search @searchActive="searchActive" @clearData="clearData"></search>
          <el-select size="small" clearable @clear="clearCategory" v-model="power.content.where.systemclientname" placeholder="筛选端口" @change="categoryChange()">
            <el-option v-for="(item,index) in selectList" :label="item" :value="item" :key="index"></el-option>
          </el-select>
        </div>
        <table-layout :layout="tablecols" :data="powerList" @rowClick="rowClick"></table-layout>
        <div class="page">
          <pagination :total="total" :pageSize="power.content.pageSize" :currentPage="power.content.pageNumber"
            @pageChange="pageChange">
          </pagination>
        </div>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="8">
            <div class="power-block">
              <div class="title" @click="aaa = true">功能</div>
              <el-checkbox-group v-model="checkList" @change="groupChange" class="padd">
                <template v-if="aaa">
                  <el-checkbox :label="item.optionid" v-for="(item,index) in currentItem.options"
                    :checked="isCheck(item)" :key="index">
                    {{item.optionname}}
                  </el-checkbox>
                </template>
              </el-checkbox-group>
              <div class="footer padd">
                <el-checkbox label="" :checked="allCheck" v-if="bbb" @change="allCheckClick">{{checkAll}}</el-checkbox>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="power-block">
              <p class="title">隐藏字段</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="power-block">
              <p class="title">基础数据</p>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import search from '@/components/search/index'
import pagination from '@/components/pagination/Pagination'
import tableLayout from '@/components/dynamic-table/index'
import { log } from '@antv/g2plot/lib/utils';
export default {
  name: 'RolePowerSelect',
  data () {
    return {
      aaa: true,
      bbb: true,
      power: {
        "classname": "sale.role.role",
        "method": "query_appselect_web",
        "content": {
          "pageNumber": 1,
          "pageSize": 10,
          "roleid": parseInt(window.sessionStorage.getItem('currentEditRole')) == 0 ? 0 : JSON.parse(window.sessionStorage.getItem('currentEditRole')).roleid,
          "where": {
            "condition": "",
            "systemclientname":''
          }
        }
      },
      //当前选中的row
      currentItem: 0,
      total: 2,
      //应用表数据
      powerList: [],
      //端口分类列表
      selectList:[],
      //存储上一次临时应用表数据
      tempPowerList: [],
      //注册表
      tablecols: [],
      //当前选中权限
      checkList: [],
      //选中权限集合
      systemapps: [],
      currentItem: [],
      allCheck: false,
    };
  },
  props: [],
  components: { search, pagination, tableLayout },
  computed: {
    //是否选中
    isCheck () {
      return (data) => {
        if (this.currentItem.optionids.find(item => item == data.optionid) != undefined) {
          return true
        } else {
          return false
        }
      }
    },
    checkAll () {
      let count = this.currentItem.optionids ? this.currentItem.optionids.length : 0
      let all = this.currentItem.options ? this.currentItem.options.length : 0
      return count + '/' + all
    }
  },
  watch: {
  },
  created () {
    this.getAllHavePower()
  },
  mounted () {
    this.tablecols = this.tool.tabelCol('roleManagent').roleTable.tablecols

  },
  methods: {
    //当编辑逻辑时 拉取所有数据 储存所有已授权数据
    async getAllHavePower () {
      if (parseInt(window.sessionStorage.getItem('currentEditRole')) != 0) {
        let res = await this.$api.requested({
          "classname": "sale.role.role",
          "method": "query_appselect_web",
          "content": {
            "roleid": JSON.parse(window.sessionStorage.getItem('currentEditRole')).roleid,
            "where": {
              "condition": ""
            }
          }
        })
        let data = res.data.filter(item => item.optionids.length > 0)
        let result
        this.tempPowerList.forEach((item, index) => {
          result = data.find(item2 => item2.systemappid == item.systemappid)
          this.tempPowerList.push(result)
        })
        this.getPowerList()
      } else {
        this.getPowerList()
      }
    },
    //获取授权列表
    async getPowerList () {
      let res = await this.$api.requested(this.power)
      this.selectList = res.tips.client
      this.powerList = res.data
      this.handleHavePower()
      this.calcHavePower(this.powerList)
      this.currentItem = this.powerList[0]
      this.allCheck = this.currentItem.optionids.length == this.currentItem.options.length
      this.refreshItem(this)
      this.total = res.total
    },
    //抓取所有操作过的数据
    handleHavePower () {
      if (this.tempPowerList.length == 0) {
        this.tempPowerList.push(...this.powerList)
      } else {
        let result
        for (let i = 0; i < this.powerList.length; i++) {
          let result = this.tempPowerList.find(item => item.systemappid == this.powerList[i].systemappid)
          if (result != undefined) {
            continue
          } else {
            this.tempPowerList.push(this.powerList[i])
          }
        }
      }
    },
    //同步上一次获取的选中数据信息
    calcHavePower (data) {
      if (this.tempPowerList.length > 0) {
        let result
        for (let i = 0; i < data.length; i++) {
          result = this.tempPowerList.find(item2 => item2.systemappid == data[i].systemappid)
          if (result != undefined) {
            data[i] = result
          }
        }
        this.powerList = data
      }
    },
    //列表单击事件
    rowClick (data) {
      this.checkList = []
      this.currentItem = data
      this.allCheck = this.currentItem.optionids.length == this.currentItem.options.length
      //解决数据刷新 视图不刷新
      this.aaa = false
      this.bbb = false
      setTimeout(() => {
        this.aaa = true
        this.bbb = true
      }, 100)
    },
    //group值发生改变时
    groupChange () {
      this.currentItem.optionids = this.checkList
      this.allCheck = this.currentItem.optionids.length == this.currentItem.options.length
      this.bbb = false
      setTimeout(() => {
        this.bbb = true
      })
    },
    allCheckClick () {
      this.allCheck = !this.allCheck
      if (this.allCheck) {
        this.currentItem.options.forEach(item => {
          if (this.currentItem.optionids.find(item2 => item2 == item.optionid) == undefined) {
            this.currentItem.optionids.push(item.optionid)
          }
        })
      } else {
        this.currentItem.optionids = []
        this.checkList = []
      }
      this.aaa = false;
      setTimeout(() => {
        this.aaa = true
      })
    },
    clearData () {
      this.power.content.where.condition = ''
      this.power.content.pageNumber = 1
      this.getPowerList()
    },
    searchActive (data) {
      this.power.content.where.condition = data
      this.power.content.pageNumber = 1
      this.getPowerList()
    },
    pageChange (n) {
      this.power.content.pageNumber = n
      this.getPowerList()
    },
    //重新渲染checkbox
    refreshItem (target) {
      target.bbb = false
      setTimeout(() => {
        target.bbb = true
      })
    },
    categoryChange() {
      this.getPowerList()      
    },
    clearCategory() {
      this.power.content.where.systemclientname = ''
      this.getPowerList()
    }
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.role-power-select {
  padding: 16px 16px 0 16px;
  height: calc(100vh);
  background: #ffffff;
  height: 100%;
}
.role-power-select .title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 30px;
}
.role-power-select .handle {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.role-power-select .power-block {
  border-left: 1px solid #cccccc;
  min-height: calc(100vh - 300px);
  position: relative;
}
.role-power-select .power-block .footer {
  position: absolute;
  bottom: 24px;
  border-top: 1px solid #cccccc;
  width: 100%;
  height: 22.7px;
}
.role-power-select .power-block .el-checkbox-group {
  display: flex;
  flex-direction: column;
}
.role-power-select .power-block .el-checkbox-group .el-checkbox {
  margin-bottom: 12px;
}
.role-power-select .power-block .title {
  padding-left: 7px;
  margin-left: 16px;
  border-left: .3rem solid #3874F6;
  display: block;
}
.role-power-select .page {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 16px;
}
.role-power-select .page .el-pagination {
  margin-bottom: 10;
}
.padd {
  padding-left: 16px;
}
</style>
