<template>
  <div>
    <el-button @click="show">信息展示弹窗</el-button>
    <el-button @click="showNumber=!showNumber">金额组件</el-button>
    <el-button @click="showChart1=!showChart1">图表demo1</el-button>
    <el-button @click="showChart2=!showChart2">图表demo2</el-button>
    <el-button @click="showSearch=!showSearch">查询组件</el-button>
    <el-button @click="showMessage">消息提示</el-button>
    <el-button @click="showMessageBox">消息提示2</el-button>
    <infoShow
      ref="infoShow"
      :config="config"
    />
    <v-chart
      v-if="showChart1"
      :options="chartOptions"
      style="height: 300px;"
    />
    <v-chart
      v-if="showChart2"
      :options="chartOptions2"
      style="height: 300px;"
    />
    <searchForm
      v-if="showSearch"
      :search="searchList"
      :is-show-expand-params="true"
      @onRemote="onRemote"
    />
  </div>
</template>

<script>
import infoShow from '@/components/infoShow';
import searchForm from '@/components/searchForm';
import { confirmAction } from '@/utils';

const names = [
  'Orange',
  'Tomato',
  'Apple',
  'Sakana',
  'Banana',
  'Iwashi',
  'Snappy Fish',
  'Lemon',
  'Pasta',
];
const years = ['2001', '2002', '2003', '2004', '2005', '2006'];
const shuffle = (array) => {
  let currentIndex = array.length;
  let randomIndex = 0;
  while (currentIndex > 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex],
      array[currentIndex],
    ];
  }
  return array;
};
const generateRankingData = () => {
  const map = new Map();
  const defaultRanking = Array.from({ length: names.length }, (_, i) => i + 1);
  for (const _ of years) {
    const shuffleArray = shuffle(defaultRanking);
    names.forEach((name, i) => {
      map.set(name, (map.get(name) || []).concat(shuffleArray[i]));
    });
  }
  return map;
};
const generateSeriesList = () => {
  const seriesList = [];
  const rankingMap = generateRankingData();
  rankingMap.forEach((data, name) => {
    const series = {
      name,
      symbolSize: 20,
      type: 'line',
      smooth: true,
      emphasis: {
        focus: 'series',
      },
      endLabel: {
        show: true,
        formatter: '{a}',
        distance: 20,
      },
      lineStyle: {
        width: 4,
      },
      data,
    };
    seriesList.push(series);
  });
  return seriesList;
};
export default {
  name: 'Demo',
  components: {
    infoShow,
    searchForm,
  },
  data() {
    return {
      config: {
        title: '标题',
        width: '1000px',
        height: '400px',
        lists: [
          {
            group: '分组一',
            children: [
              {
                col: 6,
                key: '标题一',
                value: '很长一串内容一',
              },
              {
                col: 6,
                key: '标题二',
                value: '很长一串内容二',
              },
              {
                col: 6,
                key: '标题三',
                value: '很长一串内容三',
              },
              {
                col: 6,
                key: '标题四',
                value: '很长一串内容四',
              },
              {
                col: 12,
                key: '标题五',
                value: '很长一串很长一串很长一串内容五',
              },
              {
                col: 12,
                key: '标题六',
                value: '很长一串很长一串很长一串内容六',
              },
              {
                col: 24,
                key: '标题七标题七',
                value: '很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串内容七',
              },
            ],
          },
          {
            group: '分组二',
            children: [
              {
                col: 6,
                key: '标题一',
                value: '很长一串内容一',
              },
              {
                col: 6,
                key: '标题二',
                value: '很长一串内容二',
              },
              {
                col: 6,
                key: '标题三',
                value: '很长一串内容三',
              },
              {
                col: 6,
                key: '标题四',
                value: '很长一串内容四',
              },
              {
                col: 12,
                key: '标题五',
                value: '很长一串很长一串很长一串内容五',
              },
              {
                col: 12,
                key: '标题六',
                value: '很长一串很长一串很长一串内容六',
              },
              {
                col: 24,
                key: '标题七标题七',
                value: '很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串内容七',
              },
            ],
          },
          {
            group: '分组三',
            children: [
              {
                col: 6,
                key: '标题一',
                value: '很长一串内容一',
              },
              {
                col: 6,
                key: '标题二',
                value: '很长一串内容二',
              },
              {
                col: 6,
                key: '标题三',
                value: '很长一串内容三',
              },
              {
                col: 6,
                key: '标题四',
                value: '很长一串内容四',
              },
              {
                col: 12,
                key: '标题五',
                value: '很长一串很长一串很长一串内容五',
              },
              {
                col: 12,
                key: '标题六',
                value: '很长一串很长一串很长一串内容六',
              },
              {
                col: 24,
                key: '标题七标题七',
                value: '很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串内容七',
              },
            ],
          },
        ],
      },
      showNumber: false,
      inputValue: 11234.5,
      showChart1: false,
      chartOptions: {
        // ECharts 配置项...
        title: {
          text: '示例图表',
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        }],
      },
      showChart2: false,
      chartOptions2: {
        // ECharts 配置项...
        title: {
          text: 'Bump Chart (Ranking)',
        },
        tooltip: {
          trigger: 'item',
        },
        grid: {
          left: 30,
          right: 110,
          bottom: 30,
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          splitLine: {
            show: true,
          },
          axisLabel: {
            margin: 30,
            fontSize: 16,
          },
          boundaryGap: false,
          data: years,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            margin: 30,
            fontSize: 16,
            formatter: '#{value}',
          },
          inverse: true,
          interval: 1,
          min: 1,
          max: names.length,
        },
        series: generateSeriesList(),
      },
      showSearch: false,
      searchList: [
        {
          label: '名称',
          name: 'subsName',
          type: 'input',
          placeholder: '请输入',
          isValid: true,
        },
        {
          label: '收件人',
          name: 'addressId',
          type: 'select',
          placeholder: '请选择',
          remote: true,
          options: [
            {
              text: '测试1',
              value: '1',
            },
            {
              text: '测试2',
              value: '2',
            },
          ],
        },
        {
          label: '日期',
          name: 'date',
          type: 'date',
          isValid: true,
        },
      ],
    };
  },
  mounted() {
  },
  methods: {
    show() {
      console.log('this.$refs.infoShow-------', this.$refs.infoShow);
      this.$refs.infoShow.init();
    },
    onRemote(query, prop) {
      console.log('query, prop------', query, prop);
    },
    showMessage() {
      this.$message.error('提示提示提示提示提示提示');
    },
    async showMessageBox() {
      const temp = await confirmAction('确定删除吗?', 'warning', '标题');
      if (temp) {
        try {
          console.log('确定回调---');
        } catch {
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
