<template>
  <div>
    <a-modal
      centered
      class="roleMenuEdit-modal"
      :footer="null"
      :maskClosable="false"
      :title="titleText"
      v-model="isshow"
      @cancel="isshow=false"
      :width="800">
      <a-spin :spinning="spinning" tip="Loading...">
        <a-form-model
          id="roleMenuEdit-form"
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
         <div style="display:flex;justify-content: flex-end;align-items: center;" v-if="authType==0">
           <div style="width:270px;text-align: right;flex:1;">快捷全选：</div>
           <div style="padding:0 10px;">
            <a-checkbox-group :value="authAllPrice" :options="priceOptions" @change="onPriceChange" />
           </div>
         </div>
         <div style="height: 500px;overflow-y: auto;">
            <a-tree
            checkable
            :selectable="false"
            @check="onCheck"
            @expand="onExpand"
            :expandedKeys="expandedKeys"
            :autoExpandParent="autoExpandParent"
            v-model="checkedKeys"
            :treeData="treeData"
          >
          <a-icon v-if="authType == 0" slot="switcherIcon" type="file" />
          </a-tree>
          </div>
          <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;margin: 18px 0 0;">
            <a-button id="roleMenuEdit-cancel" :style="{ marginRight: '10px' }" @click="isshow=false">取消</a-button>
            <a-button type="primary" id="roleMenuEdit-save" @click="handleSubmit()">保存</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { STable, VSelect } from '@/components'
import { addMenuPower } from '@/api/power-role.js'
export default {
  name: 'RoleModal',
  mixins: [commonMixin],
  components: {
    STable, VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    nowData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      spinning: false,
      treeData: [],
      priceOptions:[],
      titleText: '',
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      halfCheckedKeys: [],
      checkedData: [],
      authPriceData:[],
      isshow: this.visible,
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      authAllPrice: [],
      leafNode:[],
      checkLeafNode:[],
      priceCheckNode:[],
      form: {},
      rules: {},
      authType: '1',
      id: '' // 角色id
    }
  },
  methods: {
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      // this.autoExpandParent = false
    },
    onCheck (checkedKeys, info) {
      // console.log(checkedKeys, info)
      this.halfCheckedKeys = info.halfCheckedKeys
      this.checkedKeys = checkedKeys
      // 判断某分类是否全选
      this.checkLeafNode = []
      info.checkedNodes.map(item => {
        const node = item.data.props
        const a = node.code.split('_')
        this.checkLeafNode.push({pr:a[a.length-1],id:node.id})
      })
      this.hasAllSelect()
    },
    // 判断某分类是否全选
    hasAllSelect(){
      // console.log(this.leafNode)
      // console.log(this.checkLeafNode)
      this.authAllPrice = []
      this.priceOptions.map(item => {
        const a = this.leafNode.filter(n => n.pr == item.value)
        const b = this.checkLeafNode.filter(n => n.pr == item.value)
        if(a&&b&&a.length == b.length && !this.authAllPrice.find(d => d==item.value)){
          this.authAllPrice.push(item.value)
        }
      })
    },
    // 全选某分类价格
    allSelect(data,authPrice,flag){
      const _this = this
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        const a = node.code.split('_')
        if(a[a.length-1] == authPrice){
          // 全选
          if(flag){
            _this.checkedKeys.push(node.id)
          }else{
            // 取消
            _this.checkedKeys = _this.checkedKeys.filter(item => item != node.id)
          }
        } 
        if (node.children && node.children.length) {
          _this.allSelect(node.children, authPrice, flag)
        }
      }
    },
    onPriceChange(val){
      // 全选
      if(this.authAllPrice.length < val.length){
        let tempVal = val.filter(item=>!this.authAllPrice.includes(item))
        console.log(tempVal)
        this.allSelect(this.nowData.allMenuList, tempVal[0], true)
      }else{
        // 取消
        let tempVal = this.authAllPrice.filter(item=>!val.includes(item))
        this.allSelect(this.nowData.allMenuList, tempVal[0], false)
      }
      this.authAllPrice = val
    },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 功能权限时的已选价格菜单或价格权限时的已选功能菜单
          const checkData = this.authType == 1 ? this.priceCheckNode : this.checkedData.filter(item => !this.priceCheckNode.includes(item))
          // 功能权限时，首次半选节点拿不到值（this.halfCheckedKeys为空时），
          // 此时通过从所有已选checkedData数据中过滤当前选择的功能菜单和已选的价格菜单，剩下的就是半选节点
          let halfCheckedKeys = this.halfCheckedKeys.length ? this.halfCheckedKeys : this.checkedData.filter(item => ![...this.checkedKeys,...checkData].includes(item))
          // 功能权限没有选择任何菜单或价格权限时，halfCheckedKeys 半选节点为空
          if(this.checkedKeys.length==0 || this.authType == 0){
            halfCheckedKeys = []
          }
          // 最终保存的节点，包括当前已选的和半选的节点
          const arr = [...this.checkedKeys, ...halfCheckedKeys, ...checkData].filter((x, index,self)=>self.indexOf(x)===index) 
          console.log(arr, '--444--')
          _this.spinning = true
          addMenuPower({ id: this.id, menuIds: arr.join(',') }).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$emit('refresh')
              setTimeout(function () {
                _this.isshow = false
                _this.spinning = false
              }, 300)
            } else {
              _this.spinning = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    clear () {
      this.form.resetFields()
      this.titleText = ''
      this.id = ''
      this.checkedKeys = []
      this.expandedKeys = []
    },
    isPriceNode(node){
      const a = node.code.split('_')
      const c = this.priceOptions.find(item => item.value == a[a.length-1])
      return c
    },
    // 查找叶子节点
    findLeaf (data, arr) {
      const _this = this
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        if (node.children && node.children.length) {
          this.findLeaf(node.children, arr)
        } else {
          if(_this.isPriceNode(node)){
            data.splice(i,1)
          }else{
            node.class = 'isLeaf'
            const hasNode = arr.find(item => item == node.id)
            const hasCheck = _this.checkedKeys.find(item => item == node.id)
            if (hasNode && !hasCheck) {
              this.expandedKeys.push(node.id)
              this.checkedKeys.push(node.id)
            }
          }
        }
      }
    },
    // 查找有价格权限的菜单
    findPrice(data, arr){
      const _this = this
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        const a = node.code.split('_')
        // 已选节点勾选
        const hasNode = arr.find(item => item == node.id)
        if(!_this.isPriceNode(node)){
          // 删除此节点
          node.checkable = false
          node.title = node.title.replace('（必选）','')
          if(!node.children||node.children.length==0){
            data.splice(i,1)
          }
        }else{
          node.class = 'leafNode'
          _this.expandedKeys.push(node.id)
          // 默认回显已选节点
          const hasCheck = _this.checkedKeys.find(item => item == node.id)
          if (hasNode && !hasCheck) {
            _this.checkedKeys.push(node.id)
            _this.checkLeafNode.push({pr:a[a.length-1],id:node.id})
          }
          // 统计价格节点
          const hasLeaf = _this.leafNode.find(item => item.id == node.id)
          if(!hasLeaf){
            _this.leafNode.push({pr:a[a.length-1],id:node.id})
          }
        }

        if (node.children && node.children.length) {
          _this.findPrice(node.children, arr)
        }
      }
    },
    // 根据id查找是否价格菜单
    getPriceTreeNode(data, arr){
      const _this = this
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        if(_this.isPriceNode(node)){
           // 默认回显已选节点
          const hasCheck = _this.priceCheckNode.find(item => item == node.id)
          // 已选节点勾选
          const hasNode = arr.find(item => item == node.id)
          if (hasNode && !hasCheck) {
            _this.priceCheckNode.push(node.id)
          }
        }
        if (node.children && node.children.length) {
          _this.getPriceTreeNode(node.children, arr)
        }
      }
    },
    pageInit(){
      this.id = this.nowData.role.id
      this.titleText = (this.nowData.type == 1 ? '功能权限分配': '价格权限分配') + '(' + this.nowData.role.name + ')'
      // 已选节点
      const arr = this.nowData.role.menuIds
      // 权限类型, 1功能权限设置，0 价格权限设置
      this.authType = this.nowData.type
      this.checkedData = arr ? arr.split(',') : []

      // 找出叶子节点
      const treeData = this.nowData.allMenuList
      this.expandedKeys.push(treeData.id)

      // 获取已选的价格菜单
      this.getPriceTreeNode(treeData, this.checkedData)

      // 功能权限设置
      if(this.authType == 1){
        this.findLeaf(treeData, this.checkedData)
      }
      // 价格权限设置
      if(this.authType == 0){
        this.findPrice(treeData, this.checkedData)
        this.hasAllSelect()
      }
      // console.log(this.checkedKeys)
      // console.log(this.checkedData)
      
      this.treeData = treeData

      if(this.authType == 0){
        let leafNodes = []
        setTimeout(()=>{
          if(leafNodes.length == 0){
            leafNodes = document.querySelectorAll('ul > li.leafNode:first-child')
            for(let i=0;i<leafNodes.length;i++){
              const cn = leafNodes[i].parentNode.className
              leafNodes[i].parentNode.className += cn.indexOf('leafParent')<0 ? ' leafParent' : ''
              leafNodes[i].parentNode.parentNode.style.padding = '6px 0'
            }
          }
        },100)
      }
      
    }
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.$refs.ruleForm.resetFields()
        this.id = ''
        this.authAllPrice = []
        this.checkLeafNode = []
        this.priceCheckNode = []
        this.leafNode = []
        this.checkedKeys = []
        this.expandedKeys = []
        this.titleText = '新增角色'
      }else{
        this.priceOptions = this.$store.state.app.priceAuthOptions
      }
    },
    nowData: {
      handler (newValue, oldValue) {
        if (this.isshow && newValue) {
          this.pageInit()
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="less">
.roleMenuEdit-modal{
  .ant-modal-title{
    padding-right: 30px;
  }
  .ant-modal-footer {
    display: none;
  }
  .form-box {
    max-height: 600px !important;
    overflow: auto;
  }
  .form-box::-webkit-scrollbar{
    width: 6px;
    height: 6px ;
  }

  .form-box::-webkit-scrollbar-thumb{
    width: 6px;
    height: 6px ;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px #d1d1d1;
    background: #e4e4e4;
  }
  .ant-tree li ul{
    white-space: pre-wrap;
  }

  .leafParent{
    display: inline-block;
    width: 80%;
    float: right;
  }
  
  .isLeaf{
    display: inline-block;
    width: 25%;
  }
  .leafNode{
    display: inline-block;
    padding: 0;
    &:first-child{
      padding: 0;
    }
    .ant-tree-node-content-wrapper{
      color: rgb(209, 4, 4);
    }
  }
}
  
</style>
