<!-- 定制图表 -->
<template>
  <div class="white content pa-3">
    <m-filter :option="filter" @search="handleSearch">
      <template #btn>
        <div style="flex: 1" class="d-flex justify-end align-center">
          <v-icon>mdi-list-box-outline</v-icon>
          <v-switch
            class="mx-3"
            v-model="switchValue"
          ></v-switch>
          <v-icon>mdi-microsoft</v-icon>
        </div>
      </template>
    </m-filter>
    <div v-if="switchValue" class="showPic pt-5">
      <!-- <v-container> -->
        <v-row>
          <v-col cols="3" v-for="item in items" :key="item.chartId">
            <v-card>
              <v-img
                :src="item.coverImg"
                class="white--text align-end"
                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.3)"
                height="200px"
              >
                <v-card-title>{{ item.name }}</v-card-title>
              </v-img>

              <v-card-actions>
                <v-spacer></v-spacer>

                <v-btn icon @click="handleEdit(item)">
                  <v-icon>mdi-pencil</v-icon>
                </v-btn>

                <v-btn icon @click="handleDelete(item)">
                  <v-icon>mdi-trash-can-outline</v-icon>
                </v-btn>

                <v-btn v-if="!item.content?.showInPersonalCharts" icon @click="release(item)">
                  <v-icon>mdi-send</v-icon>
                </v-btn>

                <v-btn v-if="item.content?.showInPersonalCharts" icon @click="unpublish(item)">
                  <v-icon>mdi-close-circle</v-icon>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      <!-- </v-container> -->
      <m-pagination :total="total" :page="pageInfo.current" @handleChange="pageHandleChange"></m-pagination>
    </div>
    <m-table
      class="mt-3"
      v-if="!switchValue"
      :headers="headers"
      :items="items"
      :loading="loading"
      :total="total"
      :page="pageInfo"
      :show-select="false"
      :disable-sort="true"
      :is-tools="false"
      @pageHandleChange="pageHandleChange"
    >
      <!-- <template #name="{ item }">{{ item.content.name }}</template>
      <template #status="{ item }">
        <v-chip small :color="item.content?.showInPersonalCharts ? 'success' : 'default'">
          {{ item.content?.showInPersonalCharts ? '已启用' : '未启用' }}
        </v-chip>
      </template>
      <template #type="{ item }">{{ item.content.type }}</template> -->
      <template #actions="{ item }">
        <v-btn text color="primary" @click="handleEdit(item)">编辑</v-btn>
        <v-btn text color="error" @click="handleDelete(item)">删除</v-btn>
        <v-btn v-if="!item.content?.showInPersonalCharts" text color="success" @click="release(item)">启用</v-btn>
        <v-btn v-if="item.content?.showInPersonalCharts" text color="warning" @click="unpublish(item)">关闭</v-btn>
      </template>
    </m-table>
    <!-- <div v-if="!home">
      <headerPage :z-index="1" height="140">
        <filter-list :option="filter" @search="handleSearch"></filter-list>
        <scroll-tabs :items="chartList" chipLabelName="name" @handleClick="handleToHref"></scroll-tabs>
      </headerPage>
      <v-divider></v-divider>
    </div>
    <template v-if="!loading || home">
      <empty v-if="chartList && chartList.length === 0" :height="552"></empty>
      <div ref="scrollBox" :class="home ? 'elevation-5' : 'pa-3 pt-0'" style="overflow: auto;">
        <div v-for="(item, index) of chartList" :key="index" :id="item.chartId" :class="home ? '' : 'mt-3'" style="position: relative;">
          <m-card v-if="item.type === 'table'" :title="item.name">
            <template #title>
              <add-to-home
                :label="item.name"
                :en="item.enName"
                :itemObjContent="item"
                routeName="customCharts"
                :type="null"
              />
            </template>
            <tableShow
              height="''"
              chartCustomizedShow
              :useField="item.useField"
              :fieldInfo="item.useField ? item.fieldInfo : null"
              :excelData="item.useField ? null : JSON.parse(item.excelData)"
              :headerEnNames="item.headerEnNames"
              @finished="finished(item)"
            ></tableShow>
          </m-card>
          <template v-else>
            <chart-template
              v-if="item.calcOptionAeady"
              v-loading="item.loading"
              :title="item.name"
              :option="item.option"
              @refresh="loadingItem(item)"
              @finished="finished(item)"
              :height="552"
            >
              <template #titleTools>
                <add-to-home
                  :label="item.name"
                  :en="item.enName"
                  :itemObjContent="item"
                  routeName="customCharts"
                  :type="null"
                />
              </template>
            </chart-template>
          </template>
        </div>
      </div>
    </template> -->
  </div>
</template>

<script>
import MPagination from '@/components/Pagination'
import { getDrillingData } from './getFieldData'
// import tableShow from '@/views/chartCustomizedCreate1/components/tableShow.vue'
import MFilter from '@/components/Filter'
import MTable from '@/components/List/table'
// import headerPage from '@/components/ScrollTabs/headerPanel.vue'
// import ScrollTabs from '@/components/ScrollTabs'
// import ChartTemplate from '@/components/ChartTemplate'
// import empty from '@/components/Common/empty'
// import MCard from '@/components/MCard'
import {
  getAuthenticationSystreePage,
  getDigitizationDataChartList
} from '@/api/chartCustomized'
export default {
  name: 'team-sharing-diagram',
  components: {
    MFilter,
    MTable,
    MPagination
  },
  computed: {},
  // props: {
  //   home: { // 首页展示
  //     type: Boolean,
  //     default: false
  //   },
  //   itemObjContent: {
  //     type: Object,
  //     default: () => {}
  //   }
  // },
  data () {
    return {
      switchValue: false,
      filter: {
        list: [
          { type: 'textField', value: '', label: '分类', key: 'classify' },
          { type: 'datePicker', value: '', label: '时间', key: 'createTime' }
        ]
      },
      loading: false,
      headers: [
        { text: '图表名称', value: 'name' },
        { text: '分类', value: 'classify' },
        { text: '制作者', value: 'author' },
        { text: '制作时间', value: 'time' },
        { text: '状态', value: 'status' },
        { text: '类型', value: 'type' },
        // { text: '标识码', value: 'code' },
        // { text: '所属分类', value: 'chartClassificationId' },
        { text: '操作', value: 'actions' }
      ],
      items: [],
      total: 0,
      pageInfo: {
        current: 1,
        size: 10
      }
      // params: { treeId: '', chartName: '' },
      // setChartsIndex: 0,
      // chartList: []
    }
  },
  created () {
    // this.getClass() // 分类
    this.getData()
  },
  // mounted () {
  //   if (this.home) {
  //     this.chartList = [this.itemObjContent]
  //     this.loadingItem(this.itemObjContent)
  //   } else this.getData()
  // },
  // watch: {},
  methods: {
    async getData () {
      this.loading = true
      try {
        const obj = {
          entity: { ...this.params },
          page: { ...this.pageInfo }
        }
        const { data } = await getDigitizationDataChartList(obj)
        this.items = data.records.map(item => {
          return {
            loading: true,
            chartId: item.entity.chartId,
            ...item.entity.chartParam
          }
          // obj.calcOptionAeady = Boolean(!obj.useField) // 使用数据域需要计算数据
          // obj.loading = true
          // obj.chartId = item.entity.chartId
          // obj.chartName = item.entity.chartName
          // obj.enName = item.entity.chartParam.enName
          // obj.chartDataParams = item.entity.chartParam.chartData
          // obj.chartType = item.entity.chartParam.chartData.graphData.grahType
          // return obj
        })
        this.total = data.total
        // if (this.total) this.loadingItem(this.chartList[0])
        // this.$nextTick(() => {
        //   this.$refs.scrollBox.style.height = `${window.innerHeight - this.$refs.scrollBox.offsetTop - 12}px`
        // })
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    pageHandleChange (index) {
      this.pageInfo.current = index
      this.getData()
    },
    finished (item) {
      item.loading = false
      if ((this.setChartsIndex + 1) === this.chartList.length) return
      this.setChartsIndex++
      const nextItem = this.chartList[this.setChartsIndex]
      this.loadingItem(nextItem)
    },
    loadingItem (item) { // 渲染
      // console.log('Funtion  ----->  loadingItem')
      item.loading = true
      if (item.type === 'table') return // 表格展示
      if (item.useField) this.getFieldDetailData(item) // echart图
    },
    getFieldDetailData (item) { // 数据域对应数据
      // item.calcOptionAeady = false
      item.loading = true
      const option = item.option
      // const fieldInfo = {
      //   fieldId: item.fieldInfo.fieldId,
      //   engNameStr: item.fieldInfo.metaDataCombinationEngName,
      //   filterObj: item.filterObj
      // }
      getDrillingData(1, { fieldInfo: item.fieldInfo }).then(obj => {
        if (!obj || !obj.excelData || !obj.XYList?.length) return this.setEmptyFun(item, item.type)
        const list = obj.XYList
        // 往chart填充数据
        if (item.type === 'pie') {
          // 饼图
          const pieZeroSeries = option.series[0]
          const xIndex = list.findIndex(key => key.value === item.pieXEnName)
          const yIndex = list.findIndex(key => key.value === pieZeroSeries.fieldValue)
          if (xIndex < 0 || yIndex < 0) this.setEmptyFun(item, item.type)
          else {
            const x = list[xIndex]
            const y = list[yIndex]
            pieZeroSeries.data = []
            x.data.forEach((e, index) => {
              const obj = { value: y.data[index], name: e }
              pieZeroSeries.data.push(obj)
            })
          }
        } else {
          // 柱状图折线图
          const xAxis = option.xAxis
          const xIndex = list.findIndex(key => key.value === xAxis.fieldValue)
          if (xIndex < 0) return this.setEmptyFun(item, item.type)
          const x = list[xIndex]
          Object.assign(xAxis, { name: x.text, data: x.data })
          const delArr = []
          option.series.forEach((e, index) => {
            const yIndex = list.findIndex(key => key?.value === e?.fieldValue)
            if (yIndex < 0) delArr.push(index)
            else if (list[yIndex]) {
              e.name = list[yIndex].name
              e.data = list[yIndex].data
            }
          })
        }
        item.loading = false
        item.calcOptionAeady = true
      }).catch(e => {
        this.setEmptyFun(item, item.type)
      })
    },
    setEmptyFun (item, type) { // 无数据
      if (type === 'pie') {
        item.option.series[0].fieldValue = ''
        item.option.series[0].name = ''
        item.option.series[0].data = []
      } else {
        Object.assign(item.option.xAxis, { name: '', data: [] })
        item.option.series.forEach(e => { e.fieldValue = ''; e.name = ''; e.data = [] })
      }
      item.loading = false
      item.calcOptionAeady = true
    },
    async getClass () { // 图表分类
      try {
        const { data } = await getAuthenticationSystreePage({ size: 9999, current: 1, isSys: 0 })
        this.filter.list.find(e => e.key === 'treeId').items = data.records
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleSearch (val) {
      this.setChartsIndex = 0
      Object.assign(this.params, val)
      // this.pageInfo.current = 1
      this.getData()
    },
    handleTypeChage (val) {},
    handleToHref (item) {
      const id = item.chartId
      const selector = document.getElementById(id)
      if (!selector) return
      this.$refs.scrollBox.scrollTo({
        top: selector.offsetTop - this.$refs.scrollBox.offsetTop - 12,
        behavior: 'smooth'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
