<!--
 * @Author: 曹捷
 * @Date: 2019-08-19 15:24:34
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-05-18 16:45:41
 * @Description: file content
 -->
<template>
  <a-modal class="obit-modal-default" v-if="showModal" :maskClosable="false" :title="showTitle" v-model:visible="showModal"
    @cancel="closeDialog" @ok="saveInfo" cancelText="取消" okText="确认" width="40%">
    <a-form :inline="true" :model="formData" ref="formRef" :label-col="{span: 4}" :wrapper-col="{span:18}">
      <a-form-item label="角色名称" name="roleName">
        <a-input :maxlength="20" placeholder="请输入角色名称" disabled show-word-limit v-model:value="formData.roleName">
        </a-input>
      </a-form-item>
      <a-form-item label="权限字符" name="roleKey">
        <a-input :maxlength="20" placeholder="请输入权限字符" disabled show-word-limit v-model:value="formData.roleKey">
        </a-input>
      </a-form-item>
      <a-form-item label="权限范围" name="dataScope">
        <a-select v-model:value="formData.dataScope" :options="options"></a-select>
      </a-form-item>
    </a-form>
    <div v-show="formData.dataScope==2">
      <p class="title bold">数据权限</p>
      <bindRolePermissVue ref="rolePermiss" @save="closeDialog" :treeData="treeData" :pData="pData"
        :selectedKeys="selectedKeys">
      </bindRolePermissVue>
    </div>
  </a-modal>
</template>
<script>
import { computed, inject, reactive, toRefs, watch, toRaw } from 'vue'
import bindRolePermissVue from './bindRolePermiss.vue'
import { util } from '../../../entery'
export default {
  components: { bindRolePermissVue },
  props: {
    open: {
      type: Boolean
    },
    detailsInfo: {
      type: Object,
    },
    type: {
      type: String
    }
  },
  setup (props, context) {
    let http = inject('http')
    let _data = reactive({
      showModal: props.open,
      formData: {},
      formRef: null,
      rolePermiss: null,
      treeType: 'scope',
      treeData: [],
      selectedKeys: [],
      pData: { children: 'children', title: 'label', key: 'id' },
      checkRole: '',
      options: [
        { value: "1", label: '全部数据权限' },
        { value: "2", label: '自定义数据权限' },
        { value: "3", label: '本部门数据权限' },
        { value: "4", label: '本部门及以下数据权限' },
        { value: "5", label: '本人数据权限' }]
    })
    let _computed = {
      showTitle: computed(() => '分配数据权限')
    }
    let _methods = {
      saveInfo () {
        _data.formRef.validate().then(() => {
          if (_data.formData.dataScope == 2) {
            _data.formData.deptIds = []
            let arr = util.util.cloneObj(toRaw(_data.rolePermiss.checkedKeys)) || []
            if (arr.checked) {
              _data.formData.deptIds = arr.checked
            } else {
              _data.formData.deptIds = arr
            }
          } else {
            _data.formData.deptIds = []
          }
          let param = util.util.cloneObj(_data.formData)
          http.saveAppRoleDataScope(param).then((res) => {
            _methods.closeDialog()
          })
        })

      },
      getSystemDeptTree () {
        let param = {}
        http.getSystemDeptTree(param).then(res => {
          let datas = util.util.cloneObj(res)
          _data.treeData = datas
        })
      },
      sysnRoleDataScope () {
        _data.selectedKeys = []
        if (!props.detailsInfo.roleId) return
        let param = props.detailsInfo.roleId
        http.getAppRoleDataScope(param).then(res => {
          res.checkedKeys.forEach(element => {
            _data.selectedKeys.push(element.toString())
          });
        })
      },
      closeDialog () {
        context.emit('reload')
        util.util.cleanObj(_data.formData)
        context.emit('update:open', false)
      },
    }
    watch(() => props.open, (value) => {
      _data.formData = []
      _data.formData = util.util.cloneObj(props.detailsInfo)
      _methods.getSystemDeptTree()
      _methods.sysnRoleDataScope()
    })
    return {
      ..._computed,
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>
<style lang="less">
</style>