<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="height: 500px;overflow-y: scroll;">
            <a-tree
              checkable
              @check="onCheck"
              @expand="onExpand"
              :expandedKeys="expandedKeys"
              :autoExpandParent="autoExpandParent"
              v-model="checkedKeys"
              :treeData="treeData"
            />
          </div>
          <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
            <a-button type="primary" id="roleMenuEdit-save" @click="handleSubmit()" :style="{ marginRight: '8px' }">保存</a-button>
            <a-button id="roleMenuEdit-cancel" :style="{ marginLeft: '8px' }" @click="isshow=false">取消</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: [],
      titleText: '',
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      checkedData: [],
      isshow: this.visible,
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      form: {},
      rules: {},
      id: '' // 角色id
    }
  },
  methods: {
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck (checkedKeys, info) {
      this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
      this.checkedKeys = checkedKeys
    },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.checkedData.length == 0) {
            return this.$message.warning('请先选择菜单')
          }
          const arr = this.checkedData.join(',')
          _this.spinning = true
          addMenuPower({ id: this.id, menuIds: arr }).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 = []
    },
    // 选中已勾选菜单
    findLeaf (data, arr) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        if (node.children) {
          this.findLeaf(node.children, arr)
        } else {
          node.class = 'leafNode'
          const hasNode = arr.find(item => {
            return item == node.id
          })
          if (hasNode) {
            this.expandedKeys.push(node.id)
            this.checkedKeys.push(node.id)
          }
        }
      }
    }
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.$refs.ruleForm.resetFields()
        this.id = ''
        this.checkedKeys = []
        this.expandedKeys = []
        this.titleText = '新增角色'
      }
    },
    nowData: {
      handler (newValue, oldValue) {
        if (this.isshow && newValue) {
          this.id = this.nowData.role.id
          this.titleText = '分配权限' + '(' + this.nowData.role.name + ')'
          // 已选节点
          const arr = this.nowData.role.menuIds
          this.checkedData = arr ? arr.split(',') : []
          // 找出叶子节点
          this.findLeaf(this.nowData.allMenuList, this.checkedData)
          this.treeData = this.nowData.allMenuList
          console.log(this.treeData)
        }
      },
      deep: true
    }
  }
}
</script>

<style >
  .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;
  }
  .leafNode{
    display: inline-block;
  }
</style>
