<template>
  <cacp-search-layout class="typical-six">
    <template #search>
      <cacp-search-panel-layout
        :model="state.formData"
        label-position="left"
        :gutter="30"
        :colSpan="[null, null, null, null, null, null, 24]"
      >
        <el-form-item label="包装使用企业代码" prop="firm">
          <el-input v-model="state.formData.firm" placeholder="" />
        </el-form-item>
        <el-form-item label="产品包装设计代码" prop="design">
          <el-input v-model="state.formData.design" placeholder="" />
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker type="date" value-format="YYYY-MM-DD" v-model="state.formData.startDate" placeholder="" />
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker type="date" value-format="YYYY-MM-DD" v-model="state.formData.endDate" placeholder="" />
        </el-form-item>
        <template #buttonGroup>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button type="info" @click="onReset">重置</el-button>
          <!-- <el-button type="warning" @click="onOpenDialog">OpenDialog</el-button> -->
        </template>
      </cacp-search-panel-layout>
    </template>
    <template #list>
      <div v-loading="loading">
        <el-tabs v-model="state.tabIndex" @tab-change="onQuery">
          <el-tab-pane label="申报出口批次图表" name="0"></el-tab-pane>
          <el-tab-pane label="生产批次图表" name="1"></el-tab-pane>
        </el-tabs>
        <el-row>
          <el-col :span="16">
            <cacp-group-container title="申报出口批次及包装件数">
              <template #content>
                <div ref="echartsRef" style="width: 100%; height: 500px"></div>
              </template>
            </cacp-group-container>
          </el-col>
          <el-col :span="8">
            <cacp-group-container title="申报出口批次及包装件数排行">
              <template #content>
                <el-table :data="state.tableData" style="width: 100%">
                  <el-table-column property="type" label="类型" />
                  <el-table-column property="name" label="商品名称" />
                  <el-table-column property="profession" label="行业名称" />
                </el-table>
              </template>
            </cacp-group-container>
          </el-col>
        </el-row>
      </div>
    </template>
  </cacp-search-layout>

  <my-dialog :visible="state.visible" :info="state.info" @on-close="state.visible = false" @on-save="onSaveDialog" />
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import * as echarts from 'echarts/core'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import type { EChartsOption } from 'echarts'
import { getTypicalSix } from '@/apis/mock'
import type { TypicalSixChartsInfo, TypicalSixQueryParams, TypicalSixTableInfo } from '@/types/six'
import { useLoading } from '@cacp/ui'
import type { DialogInfo } from '@/components/types'
import MyDialog from '@/components/dialog.vue'

echarts.use([LineChart, GridComponent, TooltipComponent, CanvasRenderer, LegendComponent])

const defFormData: TypicalSixQueryParams = {
  firm: '',
  design: '',
  startDate: '',
  endDate: ''
}
const state = reactive<{
  visible: boolean
  info: DialogInfo
  formData: TypicalSixQueryParams
  tableData: TypicalSixTableInfo[]
  tabIndex: string
}>({
  visible: false,
  info: {
    id: '',
    userCode: '',
    userName: ''
  },
  formData: { ...defFormData },
  tableData: [],
  tabIndex: '0'
})
const { loading, setLoading } = useLoading()
const echartsRef = ref<HTMLDivElement>()
let mychart: echarts.ECharts
const colors = ['#1890ff', '#2fc25b', '#e6a23c']

function setOptions(val: TypicalSixChartsInfo[]) {
  const options: EChartsOption = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      type: 'scroll',
      data: val.map((v) => v.name),
      bottom: '0px',
      itemWidth: 18,
      itemHeight: 12
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: 50,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisTick: {
        customValues: [1, 2, 3, 4, 5, 6, 7]
      },
      boundaryGap: false,
      data: ['', '2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '']
    },
    yAxis: {
      type: 'value',
      nameTextStyle: {
        color: '#00ffff'
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(135,140,147,0.8)'
        }
      }
    },
    series: val.map((v, i) => ({
      name: v.name,
      type: 'line',
      data: [null, ...v.value],
      symbol: 'circle',
      symbolSize: 5,
      itemStyle: {
        color: colors[i]
      },
      lineStyle: {
        width: 2,
        color: colors[i]
      },
      emphasis: {
        focus: 'self',
        lineStyle: {
          width: 3
        }
      }
    }))
  }
  if (mychart) {
    mychart.setOption(options)
  }
}

async function onQuery() {
  setLoading(true)
  const res = await getTypicalSix({ ...state.formData, tabIndex: state.tabIndex })
  setOptions(res.charts)
  state.tableData = res.dataTable
  setLoading(false)
}

function onReset() {
  state.formData = { ...defFormData }
  onQuery()
}

function resize() {
  if (mychart) {
    mychart.resize()
  }
}

// function onOpenDialog() {
//     state.visible = true
// }
function onSaveDialog(info: DialogInfo) {
  console.log(info)
  state.info = info
  state.visible = false
}
onMounted(() => {
  mychart = echarts.init(echartsRef.value!)
  onQuery()
  window.addEventListener('resize', resize)
})
onUnmounted(() => {
  window.removeEventListener('resize', resize)
})
</script>
<style scoped lang="less">
.typical-six {
  :deep(.cacp-group__container) {
    padding: 0;
  }
  :deep(.el-tabs__header) {
    margin: 0px 0 20px;
  }
}
</style>
