<template>
  <Layout>
    <template #left>
      <div class="left">
        <div class="left-top">
          <Box
            v-for="(item, index) in leftContent.tCharts"
            :key="index"
            :width="680"
            :height="406"
            :name="item.name"
          >
            <Echart :option="item.option" />
          </Box>
        </div>
        <Box
          class="left-bottom"
          :width="1370"
          :height="818"
          :name="'近期线路调整'"
        >
          <div class="content">
            <div class="content-top">
              <div class="title">
                <div class="icon" />
                <div>线路调整总览</div>
              </div>
              <div class="overview">
                <div
                  v-for="item in leftContent.bData.overview"
                  :key="item.name"
                  class="item"
                >
                  <div class="icon" />
                  <div class="name">
                    {{ item.name }}
                  </div>
                  <div class="num">
                    {{ item.value }}
                  </div>
                  条
                </div>
              </div>
            </div>
            <div class="content-bottom">
              <div class="title">
                <div class="icon" />
                <div>线路调整详情</div>
              </div>
              <n-table
                striped
                size="large"
                :bordered="false"
                single-column
                :bottom-bordered="false"
                class="table"
              >
                <thead>
                  <tr>
                    <th> 序号 </th>
                    <th> 措施 </th>
                    <th> 区域 </th>
                    <th> 线路 </th>
                    <th> 线路类型 </th>
                    <th> 时间 </th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="item in 10"
                    :key="item"
                  >
                    <td>  {{ item }} </td>
                    <td>  调整 </td>
                    <td>  雨城区 </td>
                    <td>  1路 </td>
                    <td>  常规 </td>
                    <td>  2023-01-01 </td>
                  </tr>
                </tbody>
              </n-table>
            </div>
          </div>
        </Box>
      </div>
    </template>
    <template #center>
      <div>3333</div>
    </template>
    <template #right>
      <div class="right">
        <div class="right-top">
          <Box
            v-for="(item, index) in rightContent.tCharts"
            :key="index"
            :width="680"
            :height="406"
            :name="item.name"
          >
            <Echart :option="item.option" />
          </Box>
        </div>
        <Box
          class="right-center"
          :width="1370"
          :height="406"
          :name="'线路运行速度'"
        >
          <Echart :option="rightContent.center" />
        </Box>
        <Box
          class="right-bottom"
          :width="1370"
          :height="406"
          :name="'站点客流排名'"
        >
          <Echart :option="rightContent.bottom" />
        </Box>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import Box from '@/components/box.vue'
import Echart from '@/components/chart.vue'
import { ref } from 'vue'
import { graphic } from 'echarts'

const leftContent = ref({
  tCharts: [
    {
      name: '线路类型',
      option: {
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: '60%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{b}： {c}条',
              color: 'white'
            },
            data: [
              { key: 2, name: '常规', value: 130 },
              { key: 2, name: '快线', value: 50 },
              { key: 2, name: '特色线路', value: 50 }
            ]
          }
        ]
      }
    },
    {
      name: '区域里程',
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 20,
          left: 20,
          bottom: 20,
          right: 20,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: [ '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区' ],
          axisLabel: {
            fontSize: 18,
            color: '#fff',
            margin: 10,
            rich: {
              a1: {
                backgroundColor: '#FFFF0050',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FFFF00',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a2: {
                backgroundColor: '#F2F2F250',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#F2F2F2',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a3: {
                backgroundColor: '#FAAD0E50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FAAD0E',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              b: {
                backgroundColor: '#00FFFF50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#00FFFF',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              }
            },
            formatter: (params: string, _id: number) => {
              const id = _id + 1
              if (_id < 3) {
                return `{a${id}|${id}}  ${params}`
              }
              return `{b|${id}}  ${params}`
            }
          }
        },
        series: [
          {
            z: 2,
            name: 'value',
            type: 'bar',
            barWidth: 25,
            zlevel: 1,
            data: [ '80', '70', '60', '50', '40', '30', '20', '10' ],
            itemStyle: {
              borderRadius: [ 0, 16, 16, 0 ],
              color: new graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(20,167,250,0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(0,255,209,1)'
                }
              ])
            },
            label: {
              position: 'inside',
              color: '#fff',
              fontSize: 16
            }
          }
        ]
      }
    }
  ],
  bData: {
    overview: [
      {
        name: '新辟线路',
        value: 10
      },
      {
        name: '撤销线路',
        value: 10
      },
      {
        name: '调整线路',
        value: 10
      }
    ]
  }
})
const rightContent = ref({
  tCharts: [
    {
      name: '线路长度分布',
      option: {
        title: {
          text: '总', // 图标内容文本
          subtext: '200',
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{b} :  {d}%',
              color: 'white'
            },
            data: [
              { key: 2, name: '5km', value: 180 },
              { key: 2, name: '5-10km', value: 50 },
              { key: 2, name: '10-15km', value: 30 },
              { key: 2, name: '15-20km', value: 20 },
              { key: 2, name: '20km', value: 10 }
            ]
          }
        ]
      }
    },
    {
      name: '线路占据分布',
      option: {
        title: {
          text: '总', // 图标内容文本
          subtext: '190',
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{b} :  {d}%',
              color: 'white'
            },
            data: [
              { key: 2, name: '<300m', value: 180 },
              { key: 2, name: '300-500m', value: 50 },
              { key: 2, name: '300-1000m', value: 30 },
              { key: 2, name: '>1000m', value: 20 }
            ]
          }
        ]
      }
    }
  ],
  center: {
    grid: {
      containLabel: true,
      right: 30,
      left: 50,
      bottom: '25%',
      top: '20%'
    },
    legend: {
      show: true,
      left: 'center',
      bottom: '15%',
      itemWidth: 15,
      itemHeight: 10,
      textStyle: {
        color: '#646464',
        fontSize: 18
      }
    },
    xAxis: [ {
      type: 'category',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        fontSize: 18
        // formatter: (value: number) => format( 1'时')
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
    } ],
    yAxis: [ {
      name: 'km/h',
      nameLocation: 'center',
      nameGap: 50,
      nameTextStyle: {
        color: '#fff',
        fontSize: 18
      },
      padding: 5,
      // max: 1000,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#A1A7B3'
          // type: 'dashed'
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: 10,
        textStyle: {
          color: '#fff'

        }
      },
      axisTick: {
        show: false
      }
    }
    ],
    series: [ {
      name: '当前',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#4293FD',
          lineStyle: {
            // color: '#4293FD',
            width: 2
          }
        }
      },
      data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
    },
    {
      name: '环比',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#23D0C4',
          lineStyle: {
            // color: '#23D0C4',
            width: 2
          }
        }
      },
      data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
    },
    {
      name: '同比',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#23D0C4',
          lineStyle: {
            // color: '#23D0C4',
            width: 2
          }
        }
      },
      data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
    }
    ],
    dataZoom: {}
  },
  bottom: {
    grid: {
      containLabel: true,
      right: 30,
      left: 50,
      bottom: 0
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: 10,
      left: '50%',
      itemWidth: 18,
      itemHeight: 18,
      itemGap: 30,
      textStyle: {
        fontSize: 18,
        color: '#C9D2FA'
      }
    },
    xAxis: {
      // name: "班级",
      triggerEvent: true,
      data: [
        '雨城区',
        '芦山县',
        '名山县',
        '天全县',
        '宝兴县',
        '汉源县',
        '雨城区',
        '芦山县',
        '名山县',
        '天全县',
        '宝兴县',
        '汉源县'
      ],
      axisLabel: {
        interval: 0,
        show: true,
        fontSize: 18,
        color: '#C9D2FA'
      },
      axisLine: {
        show: false,
        lineStyle: {
          show: false,
          color: '#F3F3F3',
          width: 2
        }
      },

      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        name: '人数',
        nameLocation: 'center',
        nameGap: 50,
        nameTextStyle: {
          color: '#fff',
          fontSize: 18
        },
        splitNumber: 2,
        axisLabel: {
          show: true,
          fontSize: 18,
          color: '#C9D2FA'
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#3E4A82'
          }
        }
      }
    ],
    series: [
      {
        name: '客流量',
        type: 'bar',
        silent: true,
        itemStyle: {
          normal: {
            color: new graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#FFD35D'// 0% 处的颜色
                },
                {
                  offset: 0.5,
                  color: '#7ec2f382'// 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#1890ff21' // 100% 处的颜色
                }
              ],
              false
            )
          }
        },
        barWidth: 30,
        data: [ 200, 108, 200, 40, 210, 100, 200, 108, 200, 40, 210, 100 ]
      }
    ]
  }
})
</script>

<style lang="scss" scoped>
.left {
  &-top {
    display: flex;
    justify-content: space-between;
  }

  &-bottom {
    .content {
      width: 100%;
      padding: 35px;

      .title {
        display: flex;
        gap: 10px;
        color: #FFFFFF;
        text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.7);
        font-size: 20px;

        .icon {
          width: 30px;
          height: 30px;
          background: #000;
        }
      }
      .overview {
          display: flex;
          padding: 34px;
          justify-content: space-between;

          .item {
            width: 375px;
            height: 65px;
            background: rgba(27, 175, 255, 0.298);
            border: 1px solid #00FFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            font-size: 20px;
            gap: 10px;

            .icon {
              width: 30px;
              height: 30px;
              background: #000;
            }

            .num {
              color: #00FFFF;
              font-size: 30px;
              font-family: Impact Normal;
            }
          }
        }
      .table{
          margin-top: 30px;
          text-align: center;
          th{
            border: 0;
          }
        }
    }

  }
}
.right{
  &-top {
    display: flex;
    justify-content: space-between;
  }
}
</style>