<template>
  <Modal class="th-source-data" v-model="dlg" fullscreen footer-hide  @on-cancel="hide" title="查看数据">
    <template #header>
      <span class="modal-title">查看数据</span>
      <ThRadioGroup class="header-box"
        v-model="activeType"
        :btns="btns"
        @on-change="switchTab"
        style="width: 150px; text-align: center"
      />
    </template>
    
    <div class="full">
      <TableMap v-if="activeType==='map'" :selectedItem="selectedItem"/>
      <SourceTable :data="activeSourceData" :columns="activeFields" v-if="activeType==='table'"/>
    </div>
  </Modal>
</template>

<script>
import {tableLoad, getTableFields, tableDataLoad} from '../../libs/request'
import TableMap from './TableMap.vue'
import SourceTable from '../source-table'
import ThRadioGroup from '../th-radio-group'
export default {
  components: {SourceTable, TableMap,ThRadioGroup},
  props: {
    selectedItem: {
      type: Object,
      default: null
    }
  },
  methods: {
    show(){
      this.dlg=true
      this.activeType="table"
      this.getData()
    },
    hide(){
      this.dlg=false
    },
    switchTab(type) {
      this.activeType = type
    },
    getData() {
      if (!this.selectedItem) {
        return
      }
      if (!this.activeSource || this.activeSource.tableId !== this.selectedItem.resId) {
        let requests = [
          tableLoad(this.selectedItem.owner, this.selectedItem.resId),
          getTableFields(this.selectedItem.owner, this.selectedItem.resId),
          tableDataLoad(this.selectedItem.owner, this.selectedItem.resId, {})
        ]
        Promise.all(requests).then(results => {
          this.activeSource = results[0].data
          this.activeFields = results[1].data
          this.activeSourceData = results[2].data
        })
      }
    }
  },
  mounted() {
    // this.getData()
  },
  data() {
    return {
      activeType: 'table',
      dlg:false,
      activeSource: null,
      activeSourceData: [],
      activeFields: []
    }
  },
  computed: {
    btns() {
      let field = this.activeFields.find((field) => field.type === 'geometry')
      if (field) {
        return [
          { name: '表格', value: 'table'},
          { name: '地图', value: 'map'},
        ]
      } else {
        return []
      }
    },
  },
}
</script>
