<template>
  <div>
    <a-modal class="modalBox" :title="roleName" v-model="isshow" @cancle="cancel" :centered="true">
      <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="handleCancel()" id="menuModal-handleCancel">
          取消
        </a-button>
      </a-form-item>
    </a-modal>
  </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 {
      treeData: [],
      roleName: '',
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      checkedData: [],
      isshow: this.visible,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'menuModal' }),
      id: '' // 角色id
    }
  },
  methods: {
    onExpand (expandedKeys) {
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      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(',')
          addMenuPower({ id: this.id, menuIds: arr }).then(res => {
            if (res.status == 200) {
              this.$message.success(res.message)
              this.$emit('refresh')
              setTimeout(function () {
                _this.cancel()
              }, 300)
            }
          })
        }
      })
    },
    // 取消
    handleCancel () {
      this.cancel()
    },
    clear () {
      this.form.resetFields()
      this.roleName = ''
      this.id = ''
      this.checkedKeys = []
    },
    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.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(',')
            const temp = []
            arr.map(item => {
              temp.push(Number(item))
            })
            this.checkedData = temp
            this.expandedKeys = temp
            // 找出叶子节点
            this.findLeaf(this.treeData, temp)
          }
        }
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style >
  .modalBox{
  }
  .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>
