<template>
  <a-row class="data-content">
    <a-row>
      <DynamicTable v-if="pane.key" :title="pane.title" :table-data="pane.content"></DynamicTable>
    </a-row>
    <a-row>
      <ChartSelector :rawData="pane.content" v-if="pane?.content?.length"/>
    </a-row>
    <EvaluationArea :uuid="pane.key" v-if="pane.key && pane.content" @submitEvaluationLib="submitEvaluationLib"/>
  </a-row>
</template>

<script>
import ChartSelector from './ChartSelector.vue'
import EvaluationArea from './EvaluationArea.vue'
import Ellipsis from '@vue2-client/components/Ellipsis/Ellipsis.vue'
import DynamicTable from './DynamicTable.vue'
import { post } from '@vue2-client/services/api'

export default {
  components: {
    DynamicTable,
    Ellipsis,
    ChartSelector,
    EvaluationArea
  },
  data () {
    return {
      dataTypeActiveKey: '0',
      pane: {}
    }
  },
  mounted () {
    this.pane = {}
  },
  methods: {
    submitEvaluationLib (value, uuid) {
     this.$emit('submitEvaluationLib', value, uuid)
    },
    async show (obj, reSearch) {
      const { uuid, question } = obj
      let data = obj.data
      console.log('show', obj)
      if (reSearch && data) {
        try {
          // 如果是重新搜索，清空原有数据 然后
         const tem = await post('/api/oa/querySQL', {
            sql: obj.sql
         })
          if (tem.length) {
            data = tem
          }
        } catch (e) {
          console.error(e)
        }
      }
      this.pane = { title: question, content: data, key: uuid }
    },
  }
}
</script>
<style lang="less" scoped>
.tab-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.chart-card {
  margin-top: 20px;
}

.data-content {
  min-height: 100%;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

:deep(.ant-tabs-bar) {
  margin-bottom: 0px;
}
</style>
