<!--
 * @Author: 曹捷
 * @Date: 2021-03-25 11:32:15
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-03-26 10:04:14
 * @Description: fileContent
-->
<template>
  <a-modal class="obit-modal-default" v-if="showModal" :maskClosable="false" title="绑定角色" v-model:visible="showModal"
    @cancel="closeDialog" @ok="saveInfo" cancelText="取消" okText="确认" width="40%">
    <contentForm class="full" :fromtitle="{ title1: detailsInfo.orgName, title2: '角色绑定' }">
      <div>
        <a-divider orientation="right">
          <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange">
            全选
          </a-checkbox>
        </a-divider>
      </div>

      <a-checkbox-group v-model:value="checkedList">
        <a-list class="demo-loadmore-list" :data-source="roleList">
          <template #renderItem="{ item }">
            <a-list-item>
              <template #actions>
                <a class="obit-link iconfont icon-wt-joinGateway" @click="openPermiss(item)"></a>
              </template>
              <a-list-item-meta>
                <template #title>
                  <a-checkbox :value="item.roleId">
                    {{item.roleName}}
                  </a-checkbox>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>

      </a-checkbox-group>
    </contentForm>
    <a-modal class="obit-modal-default bind-modal" :footer="null" :maskClosable="false" title="角色权限修改"
      v-model:visible="rolePerVisable" width="40%">
      <bindRolePermissVue v-if="rolePerVisable" :checkRole="checkRole" @save="rolePerVisable = false">
      </bindRolePermissVue>
    </a-modal>
  </a-modal>

</template>
<script>
import { computed, getCurrentInstance, inject, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { util } from '../../../entery'
import bindRolePermissVue from '../role/bindRolePermiss.vue'

export default {
  components: { bindRolePermissVue },
  emits: ["update:open", 'reload'],
  props: {
    open: {
      type: Boolean
    },
    detailsInfo: {
      type: Object
    }
  },
  setup (props, context) {
    let http = inject('http')
    let { proxy } = getCurrentInstance()
    let plainOptions = []
    let _data = reactive({
      showModal: props.open,
      formData: {},
      checkRole: '',
      roleList: [],
      checkedList: [],
      checkAll: false,
      indeterminate: false,
      rolePerVisable: false
    })

    let _methods = {
      openPermiss (item) {
        this.checkRole = item.roleId
        this.rolePerVisable = true
      },
      saveInfo () {
        let param = {
          orgId: props.detailsInfo.orgId,
          roleIds: _data.checkedList
        }
        http.saveSystemOrgRoles(param).then((res) => {
          context.emit('reload')
          proxy.$message.success('角色分配成功')
          _methods.closeDialog()
        })
      },
      closeDialog () {
        util.util.cleanObj(_data.formData)
        context.emit('update:open', false)
      },
      onCheckAllChange (e) {
        _data.checkedList = e.target.checked ? plainOptions : []
        _data.indeterminate = false
      }
    }
    watch(() => props.open, (value) => {
      if (value) {
        http.getSystemOrgRoles(props.detailsInfo.orgId).then(res => {
          let arr = []
          res && res.forEach(element => {
            arr.push(element.roleId)
          });
          _data.checkedList = arr
        })
      }
    })
    watch(() => _data.checkedList, val => {
      _data.indeterminate = !!val.length && val.length < plainOptions.length;
      _data.checkAll = val.length === plainOptions.length;
    }
    )
    onMounted(() => {
      http.getAppAllRole().then(res => {
        _data.roleList = res
        res.forEach(element => {
          plainOptions.push(element.roleId)
        });
      })
    })
    return {
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>
<style lang="less">
.ant-checkbox-group {
  width: 100%;
}
.bind-modal {
  .ant-modal-body {
    padding: 0;
    padding-top: 20px;
    .fromTitle {
      padding: 0;
    }
    .role-tree {
      padding: 10px 20px;
    }
    .ant-layout {
      padding: 0;
      background: #fff;
    }
  }
}
</style>