<template>
  <a-modal
    :body-style="{ padding: 0 }"
    :footer="false"
    :visible="visible"
    @cancel="visible = false"
    destroy-on-close
    width="80%"
  >
    <a-tabs :animated="false" :tab-bar-style="{ marginBottom: 0 }" default-active-key="1">
      <a-tab-pane key="1" tab="选房">
        <selector-list :user-id="userId" @reload-all="onReloadAll" ref="selector-list" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="已选">
        <selected-list :user-id="userId" @reload-all="onReloadAll" ref="selected-list" />
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script>
import SelectorList from './selectorList';
import SelectedList from './selectedList';

export default {
  components: {
    SelectorList,
    SelectedList,
  },

  data() {
    return {
      visible: false,
      loading: false,

      /** 其他成员属性 */
      /* ... */
      userId: '',
    };
  },

  methods: {
    onOpen(param) {
      this.visible = true;
      this.userId = param.userId;
    },

    /**
     * 必要方法
     * 加载当前表单中所需要的异步数据
     */
    async onInit(params) {
      this.loading = true;
      /** 可以在这里await获取一些异步数据 */
      /* ... */
      this.loading = false;
    },

    /** 当前组件的其他方法 */
    /* ... */
    onReloadAll() {
      if (this.$refs['selector-list']) {
        this.$refs['selector-list'].onReloadData();
      }
      if (this.$refs['selected-list']) {
        this.$refs['selected-list'].onReloadData();
      }
    },
  },
};
</script>