<template>
  <div style="height: 100%;width: 100%">
    <el-tabs v-model="activeName">
      <el-tab-pane label="标准组件" name="standard">
        <div v-for="(i,k) in basicModuleList" :key="k" class="listItem" @click="SelectComponents(i)">
          <CustomText :defaultData="i" v-if="i.type === 'text'"/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="模板组件" name="model">
        <div class="list">
          <div v-for="(i,k) in modelModuleList" :key="k" class="listItem" @click="SelectComponents(i)">
            <div class="item">
              <ComplexChart :defaultData="i.data.chartData" v-if="i.isModel && i.type === 'lineChart' && i.serveType==='line'"
                            :key="k"/>
              <ComplexChart :defaultData="i.data.chartData" v-if="i.isModel && i.type === 'barChart' && i.serveType==='bar'"
                            :key="k"/>
              <ComplexChart :defaultData="i.data.chartData" v-if="i.isModel && i.type === 'pieChart' && i.serveType==='pie'"
                            :key="k"/>
              <ComplexScrollTable :defaultData="i.data" v-if="i.isModel && i.type === 'scrollTable'" :key="k"/>
            </div>
            <div class="name">模版组件名称{{ k + 1 }}</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="自定义组件" name="custom">
        <div class="list">
          <div v-for="(i,k) in moduleList" :key="k" class="listItem" @click="SelectComponents(i)">
            <div class="item">
              <ComplexChart :defaultData="i.data" v-if="i.type === 'chart'" :key="k"/>
              <ComplexTable :defaultData="i.data" v-if="i.type === 'table'" :key="k"/>
              <ComplexForm :defaultData="i.data" v-if="i.type === 'form'" :key="k"/>
              <ComplexMap :defaultData="i.data" v-if="i.type === 'map'" :key="k"/>
            </div>
            <div class="name">组件名称1</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>


import {
  CustomText
} from '@/components/Configure/customEl'
import {
  ComplexTable,
  ComplexChart,
  ComplexScrollTable,
  ComplexForm,
  ComplexMap,
} from "@/components/Configure/complex";
import * as echarts from "echarts";

export default {
  name: 'ComponentsDialogContent',
  components: {
    ComplexTable,
    ComplexScrollTable,
    ComplexChart,
    ComplexForm,
    ComplexMap,
    CustomText,
  },
  props: [],
  data() {
    return {
      activeName: 'standard',
      modelModuleList: [
        {
          type: 'lineChart',
          serveType: 'line',
          isModel: true,
          data: {
            chartData: {
              tooltip: {
                trigger: "axis",
              },
              legend: {
                color: ["#F58080", "#47D8BE", "#F9A589"],
                data: ["1", "2", "3"],
                left: "center",
                bottom: "bottom",
              },
              grid: {
                top: "middle",
                left: "3%",
                right: "4%",
                bottom: "3%",
                height: "80%",
                containLabel: true,
              },
              xAxis: {
                type: "category",
                data: [100, 200, 20, 30, 60, 89],
                axisLine: {
                  lineStyle: {
                    color: "#999",
                  },
                },
              },
              yAxis: {
                type: "value",

                splitLine: {
                  lineStyle: {
                    type: "dashed",
                    color: "#DDD",
                  },
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#333",
                  },
                },
                nameTextStyle: {
                  color: "#999",
                },
                splitArea: {
                  show: false,
                },
              },
              series: [
                {
                  name: "1",
                  type: "line",
                  data: [800, 900, 220, 130, 660, 289],
                  color: "#F58080",
                  lineStyle: {
                    normal: {
                      width: 5,
                      color: {
                        type: "linear",

                        colorStops: [
                          {
                            offset: 0,
                            color: "#FFCAD4", // 0% 处的颜色
                          },
                          {
                            offset: 0.4,
                            color: "#F58080", // 100% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#F58080", // 100% 处的颜色
                          },
                        ],
                        globalCoord: false, // 缺省为 false
                      },
                      shadowColor: "rgba(245,128,128, 0.5)",
                      shadowBlur: 10,
                      shadowOffsetY: 7,
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "#F58080",
                      borderWidth: 10,
                      /*shadowColor: 'rgba(72,216,191, 0.3)',
                                 shadowBlur: 100,*/
                      borderColor: "#F58080",
                    },
                  },
                  smooth: true,
                },
                {
                  name: "2",
                  type: "line",
                  data: [123, 568, 111, 222, 123, 56],
                  lineStyle: {
                    normal: {
                      width: 5,
                      color: {
                        type: "linear",

                        colorStops: [
                          {
                            offset: 0,
                            color: "#AAF487", // 0% 处的颜色
                          },
                          {
                            offset: 0.4,
                            color: "#47D8BE", // 100% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#47D8BE", // 100% 处的颜色
                          },
                        ],
                        globalCoord: false, // 缺省为 false
                      },
                      shadowColor: "rgba(71,216,190, 0.5)",
                      shadowBlur: 10,
                      shadowOffsetY: 7,
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "#AAF487",
                      borderWidth: 10,
                      /*shadowColor: 'rgba(72,216,191, 0.3)',
                                 shadowBlur: 100,*/
                      borderColor: "#AAF487",
                    },
                  },
                  smooth: true,
                },
                {
                  name: "3",
                  type: "line",
                  data: [125, 568, 25, 36, 784, 56],
                  lineStyle: {
                    normal: {
                      width: 5,
                      color: {
                        type: "linear",

                        colorStops: [
                          {
                            offset: 0,
                            color: "#F6D06F", // 0% 处的颜色
                          },
                          {
                            offset: 0.4,
                            color: "#F9A589", // 100% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#F9A589", // 100% 处的颜色
                          },
                        ],
                        globalCoord: false, // 缺省为 false
                      },
                      shadowColor: "rgba(249,165,137, 0.5)",
                      shadowBlur: 10,
                      shadowOffsetY: 7,
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "#F6D06F",
                      borderWidth: 10,
                      /*shadowColor: 'rgba(72,216,191, 0.3)',
                                 shadowBlur: 100,*/
                      borderColor: "#F6D06F",
                    },
                  },
                  smooth: true,
                },
              ],
            },
            requests: []
          }
        },
        {
          type: 'lineChart',
          serveType: 'line',
          isModel: true,
          data: {
            chartData: {
              tooltip: {
                trigger: "axis",
              },
              legend: {
                color: ["#F58080", "#47D8BE", "#F9A589"],
                data: ["1", "2", "3"],
                left: "center",
                bottom: "bottom",
              },
              grid: {
                top: "middle",
                left: "3%",
                right: "4%",
                bottom: "3%",
                height: "80%",
                containLabel: true,
              },
              xAxis: {
                boundaryGap: false,
                type: "category",
                data: [1, 2, 3, 4, 5],

                splitLine: {
                  show: true,
                  lineStyle: {
                    type: "dashed",
                    color: "#ccc3",
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "#999",
                  },
                },
              },
              yAxis: {
                type: "value",

                splitLine: {
                  lineStyle: {
                    type: "dashed",
                    color: "#DDD",
                  },
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#333",
                  },
                },
                nameTextStyle: {
                  color: "#999",
                },
                splitArea: {
                  show: false,
                },
              },
              series: [
                {
                  name: "",
                  type: "line",
                  data: [1, 2, 3, 4, 5],
                  color: "#00dae0",
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [
                            {
                              offset: 0,
                              color: "#00dae033",
                            },
                            {
                              offset: 1,
                              color: "rgba(0,202,149,0)",
                            },
                          ],
                          false
                      ),
                      shadowColor: "rgba(0,202,149, 0.9)",
                      shadowBlur: 20,
                    },
                  },
                },
              ],
            },
            requests: []
          }
        },
        {
          type: 'barChart1',
          serveType: 'bar',
          isModel: true,
          data: {
            chartData: {
              tooltip: {
                valueFormatter: (e) => {
                  return e + '%'
                },
              },
              legend: {
                right: 0,
                y: 'center',
              },
              angleAxis: {
                max: 100,
                clockwise: true,
                show: false,
              },
              radiusAxis: {
                type: "category",
                show: true,
                axisLabel: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
              },
              polar: {
                center: ["30%", "50%"],
                radius: "100%", //图形大小
              },
              series: [
                {
                  type: "bar",
                  data: Array(4).fill(0).map((e, i) => {
                    return {
                      value: 10 * Math.random(),
                      name: i,
                    }
                  }),
                  showBackground: true,
                  coordinateSystem: "polar",
                  roundCap: true,
                  barWidth: 8,
                },
              ]
            },
            requests: []
          }
        },
        {
          type: 'barChart',
          serveType: 'bar',
          isModel: true,
          data: {
            chartData: {
              grid: {
                top: '10%',
                left: '5%',
                right: '5%',
                bottom: '10%'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow',
                  label: {
                    show: true
                  }
                }
              },
              legend: {
                top: '0%',
                textStyle: {
                  color: '#ffffff'
                }
              },
              xAxis: {
                data: [1, 2, 3, 4, 5],
                axisLabel: {
                  margin: 10,
//                  color: '#ffffff63'
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: true,
                  lineStyle: {
//                    color: '#ffffff1f'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: '#ffffff1f'
                  }
                }
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  margin: 10,
                  // color: '#ffffff63'
                },

                axisTick: {
                  show: true,
                  lineStyle: {
                    // color: '#ffffff1f'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    // color: '#ffffff1f'
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#fff3',
                    width: 2
                  }
                }
              },
              series: [
                {
                  name: '出库',
                  type: 'bar',
                  barWidth: '25%',
                  barMaxWidth: '40px',
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                          0,
                          1,
                          0,
                          0,
                          [
                            {
                              offset: 0,
                              color: '#0a2ad7'
                            },
                            {
                              offset: 1,
                              color: '#138dd7'
                            }
                          ],
                          false
                      )
                    }
                  },
                  data: [1, 2, 3, 4, 5],
                },

              ]
            },
            requests: []
          }
        },
        {
          type: 'pieChart',
          isModel: true,
          serveType: 'pie',
          data: {
            chartData: {
              color: ["#22acfd", "#22fe97", "#f9e728", "#ff922b", "#ed1814"],
              legend: {
                type: 'scroll',
                orient: "vertical",
                x: "right",
                y: "center",
                width: '100px',
                textStyle: {
                  color: '#fff',
                  fontSize: 0.6 * 19
                }
              },
              tooltip: {
                trigger: "item",
                formatter: "{b} :  ({d}%)",
              },
              series: [
                {
                  type: "pie",
                  radius: ["45%", "76%"],
                  center: ["30%", "50%"],
                  encode: {
                    itemName: "group",
                    value: "占比",
                  },
                  labelLine: {
                    show: false,
                  },
                  label: {
                    show: false,
                  },
                  itemStyle: {
                    opacity: '0.8'
                  }
                },
                {
                  type: "pie",
                  radius: ["75%", "90%"],
                  center: ["30%", "50%"],
                  encode: {
                    itemName: "group",
                    value: "占比",
                  },
                  labelLine: {
                    show: false,
                  },
                  label: {
                    show: false,
                  },
                },
              ],
              dataset: {
                source: [
                  ["group", "占比"],
                  ...Array(3).fill(0).map((e, k) => ['A' + k, Math.random()])
                ],
              },
            },
            requests: []
          }
        },
        {
          type: 'scrollTable',
          isModel: true,
          data: {
            tableData: [
              {
                cs: 1,
                cs2: 2,
                cs3: 3,
                cs4: 34,
              },
              {
                cs: 1,
                cs2: 2,
                cs3: 3,
                cs4: 34,
              },
              {
                cs: 1,
                cs2: 2,
                cs3: 3,
                cs4: 34,
              },
            ],
            th: ['字段1', '字段2', '字段3', '字段4'],
            td: ['cs', 'cs2', 'cs3', 'cs4'],
            requests: []
          }
        },
      ],
      basicModuleList: [
        {type: 'text', data: {textData: {text: '文字'}, requests: [{}]}}
      ],
      moduleList: []
    }
  },

  mounted() {
  },
  methods: {
    SelectComponents(e) {
      this.$emit('SelectComponentsCB', e)
      console.log(e)
    }
  }
}

</script>

<style lang="less" scoped>

.list::-webkit-scrollbar {
  display: none;
}

.list {
  width: 100%;
  height: calc(100% - 80px);
  overflow: auto;

  .listItem {
    width: calc(8vw - 2px);
    height: calc(8vw - 2px);
    border: 1px solid #aaaa;
    display: inline-block;
    margin: 1vw;
    user-select: none;

    .thumbnail {
      width: calc(8vw - 2px);
      height: calc(8vw - 2px);
      background-image: url('~@/assets/img.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .item {
      width: calc(8vw - 2px);
      height: calc(8vw - 2px);
      overflow: hidden;
      pointer-events: none;
    }

    .name {
      width: 100%;
      height: auto;
      text-align: center;
    }
  }
}

</style>
