<template>
  <div class="d-flex" style="width: 100%;">
    <chartList ref="chartListRef" @chartTypeChange="chartTypeChange"/>
    <div class="flex-grow-1 d-flex flex-column" style="overflow: hidden;">
      <div class="elevation-2 px-5 mb-3 d-flex justify-space-between align-center white" style="height: 60px;">
        <div class="d-flex align-center">
          <span>图表名称：</span>
          <v-text-field
            v-model="chartNickname"
            class="input-width-m"
            hide-details
            dense
            outlined
          ></v-text-field>
        </div>
        <v-btn class="half-button" color="primary" @click="save">保存</v-btn>
      </div>
      <div class="pa-5 grey lighten-3" style="flex: 1;">
        <div ref="chart" class="full"></div>
      </div>
    </div>
    <!-- 配置 -->
    <div ref="settingRef" class="elevation-2 ml-4 d-flex flex-column" style="width: 600px;">
      <div>
        <v-tabs v-model="activeIndex" @change="handleChange">
          <v-tab>自定义数据</v-tab>
          <v-tab>数据库数据</v-tab>
          <v-tab>样式配置</v-tab>
          <v-tab>数据探索</v-tab>
        </v-tabs>
      </div>
      <!-- 数据 -->
      <div v-show="activeIndex === 0">
        <div class="py-3" style="height: calc(100vh - 200px); overflow-y: auto;">
          <data-field ref="dataField" :fieldProps="fieldInfo" @change="fieldChange"></data-field>
        </div>
      </div>
      <!-- 配置 -->
      <div v-show="activeIndex === 1">
        <!-- <table-settings v-if="chartType === 'table'" ref="tableSettingsRef" :list="XYList" @change="tableHeaderChange"></table-settings> -->
        <general-settings ref="generalSettingsRef" :type="chartType" :xList="xList" :yList="yList" :xChosen="xChosen" :yChosen="yChosen" @change="handleGeneralChange"></general-settings>
      </div>
      <div v-show="activeIndex === 2">
        <m-excel
          :data="excelData"
          @change="excelDataChange"
          class="px-3"
        ></m-excel>
      </div>
      <div v-show="activeIndex === 3" style="flex: 1;height: 0;">
        <MTalk :type="2" @change="handleChangeTalk"></MTalk>
      </div>
    </div>
  </div>
</template>

<script>
import chartList from './components/chartList.vue'
import chartListData from './components/utils/chartList'

import dataField from './components/dataField.vue'
// import tableSettings from './components/tableSettings.vue'
import generalSettings from './components/generalSettings.vue'
import MExcel from '@/components/MExcel'
import { generateUUID } from '@/utils'
import MTalk from '@/components/Knowledge/talk'
import ChartInit from './utils/chartInit'
export default {
  name: 'edit-index',
  components: {
    chartList,
    MExcel,
    // tableSettings,
    generalSettings,
    dataField,
    MTalk
  },
  props: {
    rowObj: {
      type: Object,
      default: () => {}
    }
  },
  computed: {},
  data () {
    return {
      chartInit: null,
      disabled: false,
      chartListData,
      fieldInfo: {}, // 回显数据域信息
      chartNickname: '定制图表',
      id: generateUUID(),
      xList: null,
      yList: null,
      xChosen: 0,
      yChosen: [],
      XYList: [],
      headerEnNames: [], // 英文字段
      excelData: null,
      defaultExcelData: [
        ['date', 'Fantasy', 'Toyota', 'Ford', 'Honda', 'Volvo', 'Amos', 'Yisrael'],
        ['2018', '150', '230', '232', '233', '135', '143', '260'],
        ['2019', '230', '232', '233', '135', '143', '260', '150'],
        ['2020', '230', '233', '135', '143', '260', '150', '230'],
        ['2021', '230', '135', '143', '260', '150', '230', '232'],
        ['2022', '142', '143', '260', '150', '230', '232', '233'],
        ['2023', '142', '260', '150', '230', '232', '233', '135'],
        ['2024', '260', '150', '230', '232', '233', '135', '143']
      ],
      chartOption: {},
      chartType: '',
      chart: null,
      activeIndex: 0
    }
  },
  created () {
    this.excelData = [...this.defaultExcelData]
  },
  mounted () {
    this.$nextTick(() => {
      this.chartInit = new ChartInit(this.$refs.chart)
      console.log(this.chartInit)
      this.chartInit.drawLine(this.defaultExcelData)
      // this.chartOption = this.chartInit.setLineOption(this.defaultExcelData)
    })
  },
  methods: {
    // 探索返回表格数据
    handleChangeTalk (headers, body) {
      const data = [
        headers,
        ...body.map(e => Object.values(e))
      ]
      // console.log(data)
      this.excelDataChange(data)
    },
    handleChange (index) {
      console.log(index)
      this.disabled = index === 2
    },
    // 模板切换事件
    chartTypeChange (item, chartType) {
      const typeList = {
        line: 'drawLine',
        bar: 'drawBar',
        pie: 'drawPie'
      }
      this.chartInit[typeList[chartType]](this.defaultExcelData)
    },
    // 表格数据change
    excelDataChange (array) { // Excel改变
      console.log(this.excelData)
      // this.initChart()
      // if (this.useField) return // 处理数据域数据不在此触发
      // this.xList = []; this.yList = []
      // this.xChosen = 0; this.yChosen = [0] // 重置配置选项
      // this.XYList = dealExcelToSettingList(array)
      // if (this.chartType === 'table') {
      //   this.tableUpdate(2) // table更新事件
      // } else {
      // this.initChart()
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
.full {
  width: 100%;
  height: 100%;
  background: #FFF;
}
.emptyBox {
  height: calc(100vh - 186px);
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
