<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <AuditPermissionTree
        :checkable="true"
        :draggable="false"
        :is-search="true"
        :show-line="false"
        :top-node-text="topNodeText"
        :treeparams="{
          configId: '1',
          type: this.libCategory,
          isDisabled: true,
        }"
        :default-expanded-keys="['1']"
        :is-select-dep="false"
        :dep-options="[]"
        :tree-data="treeData"
        @treeSelect="treeSelect"
        @depChanged="depChanged"
        @checkedKeys="checkedKeys"
      ></AuditPermissionTree>
      <div :class="$style.rightcard">
        <sd-form v-if="parentId !== 0" ref="form" :init-values="valuesdemo">
          <table v-if="!refresh" ref="table">
            <tr
              ><td colspan="2" style="font-weight: bold;"
                >权限配置范围：{{ modulename.join('、') }}</td
              ></tr
            >
            <tr v-for="(item, index) in values.moduleViewPermissionList" :key="index"
              ><td colspan="2">
                <table :class="$style.moduletable">
                  <tr
                    ><td width="140px">模&ensp;&ensp;&ensp;&ensp;块:</td
                    ><td
                      ><span>{{ item.moduleName }}</span></td
                    ></tr
                  >
                  <tr
                    ><td>授权范围:</td
                    ><td>
                      <a-radio-group v-model="item.viewScope">
                        <a-radio
                          v-for="(sq, index) in sqfw"
                          :key="index"
                          :style="radioStyle"
                          :value="sq.id"
                        >
                          {{ sq.name }}
                        </a-radio>
                      </a-radio-group>
                    </td></tr
                  >
                  <tr
                    ><td>上级可查看:</td
                    ><td>
                      <a-radio-group v-model="item.isParentView">
                        <a-radio :style="radioStyle" :value="1">
                          是
                        </a-radio>
                        <a-radio :style="radioStyle" :value="0">
                          否
                        </a-radio>
                      </a-radio-group>
                    </td></tr
                  >
                  <tr
                    ><td>下级可查看:</td
                    ><td>
                      <a-radio-group v-model="item.isChildView">
                        <a-radio :style="radioStyle" :value="1">
                          是
                        </a-radio>
                        <a-radio :style="radioStyle" :value="0">
                          否
                        </a-radio>
                      </a-radio-group>
                    </td></tr
                  >
                  <tr
                    ><td>授权单位:</td
                    ><td><sd-group-picker v-model="item.viewOrg" :read-only="false"/></td
                  ></tr>
                </table> </td
            ></tr>
            <tr
              ><td colspan="2" :class="$style.buttonstyle">
                <a-button type="primary" :class="$style.buttonStyle" @click="saveview"
                  >保存</a-button
                >
              </td></tr
            >
          </table>
        </sd-form>
        <div v-else>当前节点为空组织</div>
      </div>
    </div>
    <div :class="$style.loading">
      <a-spin v-if="parentId !== 0 && refresh" />
    </div>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue'
import axios from '@/common/services/axios-instance'
import TableActionTypes from '@/common/services/table-action-types'
import AuditPermissionTree from '../../components/audit-permission-tree.vue'
import PermissionService from './permission-service'
import components from './_import-components/iam-audit-viewpermission-import'

export default {
  name: 'IamAuditViewpermission',
  metaInfo: {
    title: '查看权限',
  },
  components: {
    ...components,
    AuditPermissionTree,
  },
  props: {
    libCategory: {
      type: String,
      default: 'SJ',
    },
  },
  data() {
    return {
      key: 0,
      treeData: [],
      parentId: 0,
      defaultSelectedKeys: [this.orgId],
      columns: [],
      infolist: [],
      values: [],
      valuesdemo: [],
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.oa.create, // 新建按钮，不需要回调，自动处理
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.oa.delete, // 删除按钮，不需要回调，会自动处理
        },
      ],
      radioStyle: {
        height: '30px',
        lineHeight: '30px',
      },
      orgId: null,
      type: 'SJ',
      rootNode: {},
      selectOrgId: null,
      selectedKeys: [],
      sqfw: [],
      refresh: true,
      modulename: [],
    }
  },
  computed: {
    topNodeText() {
      let title = '机构库'
      switch (this.type) {
        case 'SJ':
          title = '审计机构库'
          break
        case 'FK':
          title = '风控机构库'
          break
        default:
          break
      }
      return title
    },
  },
  created() {
    if (this.$route.query.type !== undefined) {
      this.type = this.$route.query.type
    }

    axios({
      url: 'api/xcoa-mobile/v1/dict-manager/dictvalues?keyId=VIEW-SCOPE-DEFAULT-VAL',
      method: 'get',
    }).then((res) => {
      if (res.status === 200) {
        this.sqfw = res.data
      }
    })
  },
  methods: {
    treeSelect(selectedKeys, info) {
      this.parentId = info.node.dataRef.id // 父级id
      this.parentName = info.node.dataRef.text // 父级名称
      if (info.node.dataRef.props === undefined) {
        this.selectOrgId = this.parentId
      } else {
        this.selectOrgId = Number(info.node.dataRef.props.ORG_ID)
      }
      this.parentObj = [{ id: info.node.dataRef.id, name: info.node.dataRef.text }]
      this.rootNode = { code: this.selectOrgId, name: info.node.dataRef.text }
      if (this.parentId !== 0) {
        this.getvalues(info.node.dataRef.id)
        if (info.node.checked === false) {
          this.selectedKeys.push(info.node.dataRef.id)
          this.modulename.push(info.node.dataRef.text)
        } else {
          const index = this.selectedKeys.indexOf(info.node.dataRef.id)
          if (index > -1) {
            this.selectedKeys.splice(index, 1)
            this.modulename.splice(index, 1)
          }
        }
      }
    },
    checkedKeys(selectedKeys, info) {
      const selectkey = []
      const modulename = []
      info.forEach((item) => {
        selectkey.push(item.data.props.id)
        modulename.push(item.data.props.text)
      })
      this.selectedKeys = selectkey
      this.modulename = modulename
    },
    // 部门下拉框选择事件
    depChanged(value, info) {
      // console.log(value) // 选中的值
      // console.log(info.data.props) // 选中的下拉json
    },
    getvalues(orgId) {
      this.refresh = true
      setTimeout(() => {
        this.refresh = false
      }, 500)
      const params = {
        type: this.libCategory,
      }
      PermissionService.getViewPermission(orgId, params).then((res) => {
        const value = res.data
        value.moduleViewPermissionList.forEach((item) => {
          item.viewOrg = JSON.parse(item.viewOrg)
        })
        this.values = value
      })
    },
    saveview() {
      const value = this.values
      const index = this.selectedKeys.indexOf(0)
      if (index > -1) {
        this.selectedKeys.splice(index, 1)
      }
      if (this.selectedKeys.length === 0) {
        Modal.warning({
          title: '提示',
          content: '请选择保存的机构，顶节点不属于实际机构!',
        })
        return false
      }
      value.selectIds = this.selectedKeys.join(';')
      value.moduleViewPermissionList.forEach((item) => {
        if (item.viewOrg === null) {
          item.viewOrg = JSON.stringify([])
        } else {
          item.viewOrg = JSON.stringify(item.viewOrg)
        }
      })
      value.type = this.libCategory
      PermissionService.saveViewPermission(value).then((res) => {
        if (res.data === true) {
          Modal.warning({
            title: '提示',
            content: '保存成功!',
          })
          this.getvalues(this.parentId)
        } else {
          Modal.warning({
            title: '提示',
            content: '保存失败，请联系管理员!',
          })
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.wrap-height {
  height: 100%;
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;
    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
    }
  }
}
.moduletable {
  width: 100%;
  border-top: 1px solid grey;
}
.buttonstyle {
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-top: 1px solid grey;
}
.loading {
  position: fixed;
  top: 310px;
  left: 50%;
  text-align: center;
}
</style>
