<template>
    <a-modal
            title="选择一个关系类"
            :visible="show"
            :maskClosable="false"
            @ok="handleOk"
            @cancel="handleClose">
        <a-radio-group v-if="!spinning" v-model="selectId" @change="onChange">
            <a-radio v-for="(item, $index) in data" :value="item.relClsID" :key="item.relClsID" style="display: block;margin-bottom: 5px">
                {{item.relClsName}} （{{item.relClsMemo}}）
            </a-radio>
        </a-radio-group>
        <a-spin v-if="spinning" :spinning="spinning">
            <div class="spin-content">
                关系类较多，加载比较缓慢，请等待...
            </div>
        </a-spin>
        <a-row style="margin-top: 30px;">
            <a-col>
                <a-pagination
                        v-model="pagination.current"
                        :total="pagination.total"
                        :pageSize="pagination.pageSize"
                        @change="onChangePagination"/>
            </a-col>
        </a-row>
    </a-modal>
</template>

<script>
import { getAllRelationClassListByName } from "@/api/graph/relationClass"

  export default {
    name: 'getRelationClsListModal',
    data() {
      return {
        show: true,
        data: [],
        dataCache: [],
        selectName: '',
        selectId: '',
        spinning: true,



        pagination: {
          pageSize: 10,
          total:0,
          current: 1
        },
      }
    },
    mounted() {
      this.getRelationList()
    },
    methods: {
      getRelationList() {
        getAllRelationClassListByName('', false, this.pagination.current, this.pagination.pageSize).then(resp => {

          this.dataCache = []
          this.data = resp.rows;
          this.data.forEach(item => {
            this.dataCache.push(item.relClsID)
          })
          this.pagination.total =resp.total
          this.spinning = false
        });
        console.log(this.pagination.total)
      },
      onChangePagination(current) {
        this.spinning = true
        this.pagination.current = current
        this.getRelationList()
      },
      onChange() {
        this.selectName = this.data[this.dataCache.indexOf(this.selectId)].relClsName
      },
      handleOk() {
        this.$close(this.selectName)
      },
      handleClose() {
        this.$close(false)
      }
    }
  }
</script>

<style scoped>

</style>
