<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 id="roleMenuEdit-chooseAll" :value="authAllPrice" :options="priceOptions" @change="onPriceChange" />
            </div>
          </div>
          <div style="height: 500px;overflow-y: auto;">
            <a-tree
              checkable
              id="roleMenuEdit-tree"
              :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, // 显示弹窗
      // form 表单label布局
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      authAllPrice: [], // 所有已选价格权限值
      leafNode: [], // 子节点集合
      checkLeafNode: [], // 选中节点集合
      priceCheckNode: [], // 已选价格集合
      form: {}, // 提交参数
      rules: {}, // 表单验证规则
      authType: '1', // 权限类型 1功能权限设置 0 价格权限设置
      id: '' // 角色id
    }
  },
  methods: {
    // 展开/收起节点
    onExpand (expandedKeys) {
      console.log(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)
        }
      }
    },
    // 选择价格权限 change
    onPriceChange (val) {
      // 全选
      if (this.authAllPrice.length < val.length) {
        const tempVal = val.filter(item => !this.authAllPrice.includes(item))
        console.log(tempVal)
        this.allSelect(this.nowData.allMenuList, tempVal[0], true)
      } else {
        // 取消
        const 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;
  }
  .ant-tree li{
    border-left:1px solid #eee;
  }
  .leafParent{
    display: inline-block;
    width: 80%;
    float: right;
  }
  .ant-tree li .ant-tree-node-content-wrapper{
    font-weight: bold;
  }
  .ant-tree li.isLeaf .ant-tree-node-content-wrapper{
    font-weight: normal;
  }
  .ant-tree li.isLeaf{
    display: inline-block;
    width: 25%;
    border:0;
  }

  .ant-tree li.leafNode{
    display: inline-block;
    padding: 0;
     border:0;
    &:first-child{
      padding: 0;
    }
    .ant-tree-node-content-wrapper{
      color: rgb(209, 4, 4);
      font-weight: normal;
    }
  }
}

</style>
