<template>
  <a-modal
    :confirmLoading="confirmLoading"
    :visible="visible"
    @cancel="onCancel"
    @ok="onOk"
    class="yo-modal-form"
    title="授权额外数据"
  >
    <a-form-model class="yo-form" ref="form">
      <a-spin :spinning="loading">
        <a-icon slot="indicator" spin type="loading" />
        <div class="yo-form-group">
          <a-form-model-item label="选择机构">
            <a-tree-select
              :show-checked-strategy="SHOW_PARENT"
              :tree-data="orgTreeData"
              placeholder="请选择机构"
              search-placeholder="请检索"
              tree-checkable
              v-model="orgs"
            />
          </a-form-model-item>
          <a-form-model-item label="区域">
            <a-tree-select
              :replace-fields="{ title: 'name', value: 'code', children: 'children' }"
              :show-checked-strategy="SHOW_PARENT"
              :tree-data="arerTreeData"
              placeholder="请区域"
              search-placeholder="请检索"
              tree-checkable
              v-model="areas"
            />
          </a-form-model-item>
        </div>
      </a-spin>
    </a-form-model>
  </a-modal>
</template>
<script>
import { TreeSelect } from 'ant-design-vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,

      loading: false,

      id: '',
      orgs: [],
      orgTreeData: [],

      areas: [],
      arerTreeData: [],

      SHOW_PARENT,
    };
  },

  methods: {
    /**
     * 必要的方法
     * 从外部调用打开本窗口
     */
    async onOpen(params) {
      this.visible = true;
      this.id = params.record.id;
      this.$nextTick(() => {
        this.onInit();
      });
    },

    /**
     * 必要的方法
     * 点击保存时的操作
     */
    onOk() {
      this.confirmLoading = true;
      this.$api
        /** !!此处必须修改调用的接口方法 */
        .houseMemberGrantData({
          id: this.id,
          grantOrgIdList: this.orgs,
          grantAreaCodeList: this.areas,
        })
        .then(({ success }) => {
          if (success) {
            this.$message.success('授权成功');
            this.onCancel();
            this.$emit('ok');
          }
        })
        .finally(() => {
          this.confirmLoading = false;
        });
    },

    /**
     * 必要的方法
     * 关闭窗口时的操作
     */
    onCancel() {
      this.visible = false;
      setTimeout(() => {
        this.orgs = [];
        this.areas = [];
      }, 300);
    },

    async onInit() {
      this.loading = true;
      this.orgTreeData = await this.onLoadOrgTreeData();
      this.orgs = await this.onLoadOrg();

      this.arerTreeData = await this.onLoadAreaTreeData();
      this.loading = false;
    },

    onLoadOrgTreeData() {
      return this.$api.getOrgTree().then(({ data }) => {
        return data;
      });
    },

    onLoadAreaTreeData() {
      return this.$api.getAreaTree().then(({ data }) => {
        return data;
      });
    },

    onLoadOrg() {
      return this.$api.houseMemberOwnData({ id: this.id }).then(({ data }) => {
        return data;
      });
    },
  },
};
</script>