<template>
  <div>
    <a-spin :spinning="spinning" tip="Loading...">
      <a-modal
        centered
        class="modalBox"
        :title="roleName"
        v-model="isshow"
        @cancle="cancel"
        :maskClosable="false">
        <a-form class="form-box" style="max-height: 600px;" :form="form" @submit="handleSubmit">
          <a-tree
            checkable
            @check="onCheck"
            @expand="onExpand"
            :expandedKeys="expandedKeys"
            :autoExpandParent="autoExpandParent"
            v-model="checkedKeys"
            :treeData="treeData"
          />
        </a-form>
        <a-form-item :wrapper-col="{ offset: 15 }">
          <a-button type="primary" @click="handleSubmit()" id="menuModal-handleSubmit">
            保存
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="cancel" id="menuModal-handleCancel">
            取消
          </a-button>
        </a-form-item>
      </a-modal>
    </a-spin>
  </div>
</template>

<script>
import { STable, VSelect } from '@/components'
import { addMenuPower } from '@/api/power-role.js'
export default {
  name: 'RoleModal',
  components: {
    STable, VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      spinning: false,
      treeData: [],
      roleName: '',
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      checkedData: [],
      isshow: this.visible,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'menuModal' }),
      id: '' // 角色id
    }
  },
  methods: {
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck (checkedKeys, info) {
      this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
      this.checkedKeys = checkedKeys
    },
    cancel (e) {
      this.clear()
      this.$emit('close')
    },

    // 保存提交
    handleSubmit () {
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          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 ? res.message : '保存成功')
              this.$emit('refresh')
              setTimeout(function () {
                _this.cancel()
                _this.spinning = false
              }, 300)
            } else {
              _this.spinning = false
              // this.$message.error(res.message)
            }
          })
        }
      })
    },
    clear () {
      this.form.resetFields()
      this.roleName = ''
      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 {
          const hasNode = arr.find(item => {
            return item == node.id
          })
          if (hasNode) {
            this.expandedKeys.push(node.id)
            this.checkedKeys.push(node.id)
          }
        }
      }
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'menuModal' })
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (newValue) {
        if (this.data) { // 编辑
          this.treeData = this.data.allMenuList
          this.id = this.data.role.id
          this.roleName = '分配权限' + '(' + this.data.role.name + ')'
          if (this.data.role.menuIds) {
            const arr = this.data.role.menuIds.split(',')
            this.checkedData = arr
            // 找出叶子节点
            this.findLeaf(this.treeData, arr)
          }
        }
      } else {
        this.cancel()
      }
    }
  }
}
</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;
  }
</style>
