<template>
  <Layout>
    <template #left>
      <div class="left-top">
        <template
          v-for="(item, index) in leftContent.top"
          :key="index"
        >
          <Box
            :width="662"
            :height="408"
            :name="item.name"
            style="position: relative;"
          >
            <div
              v-if="item.icon"
              class="left-top-count"
            >
              <Icon
                :name="item.icon"
                :size="81"
                style="margin-right: 20px;"
              />
              <div
                v-for="(itm, id) in item.num"
                :key="id"
              >
                {{ itm }}
              </div>
              <div>辆</div>
            </div>
            <div
              v-if="item.btns"
              class="dateChange"
            >
              <div
                v-for="(itm, index) in item.btns"
                :key="index"
                :class="{ active: index === item.checkId }"
                @click="changeFn(index, item)"
              >
                {{ itm }}
              </div>
            </div>
            <Echart
              v-if="item.option"
              :option="item.option"
            />
          </Box>
        </template>
      </div>

      <Box
        :width="1340"
        :height="420"
        name="维保明细"
      >
        <n-data-table
          :columns="leftContent.bottom.head"
          :data="leftContent.bottom.body"
          :bordered="false"
          single-column
          striped
          size="large"
        />
        <div class="left-bottom">
          <n-pagination
            v-model:page="leftContent.bottom.page.num"
            :page-size="leftContent.bottom.page.size"
            :item-count="leftContent.bottom.page.total"
            size="large"
          />
        </div>
      </Box>
    </template>
    <template #right>
      <div class="right-top">
        <template
          v-for="(item, index) in rightContent.top"
          :key="index"
        >
          <Box
            :width="438"
            :height="408"
            :name="item.name"
          >
            1111
            <Echart :option="item.option" />
          </Box>
        </template>
      </div>

      <Box
        :width="1340"
        :height="408"
        name="线路运行速度"
        class="right-center"
      >
        <div class="lineSpeed">
          <div class="img">
            <img
              src="../../../../assets/img/1-2.png"
              alt="car"
            >
          </div>
          <div class="control">
            <n-select
              size="large"
              :bordered="false"
              :options="[{label:'车型',value:1}]"
              placeholder="车型选择"
            />
            <div class="btn">
              一键体检
            </div>
          </div>
        </div>
      </Box>

      <div class="right-bottom">
        <Box
          :width="662"
          :height="408"
          :name="rightContent.bottom.name"
        >
          <div class="checkup">
            <div class="total">
              <div class="num">
                40
              </div>
              <div style="font-size: 24px;">
                总量
              </div>
            </div>
            <div class="list">
              <div
                v-for="item in 4"
                :key="item"
                class="item"
              >
                <div class="num">
                  10
                </div>
                <div class="label">
                  三电故障
                </div>
              </div>
            </div>
          </div>
        </Box>
        <Box
          :width="662"
          :height="408"
          :name="rightContent.bottom.name"
        >
          <Echart :option="rightContent.bottom.option" />
        </Box>
      </div>
    </template>
  </Layout>
</template>

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

const leftContent = ref({
  top: [
    {
      name: '车辆总数',
      num: '166',
      icon: '30'
    },
    {
      name: '维修保养统计',
      option: {
        grid: {
          containLabel: true,
          right: 30,
          left: 50,
          bottom: '25%',
          top: '20%'
        },
        legend: {
          show: true,
          left: 'center',
          bottom: 30,
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            color: '#646464',
            fontSize: 18
          }
        },
        xAxis: [ {
          name: '日期',
          nameLocation: 'center',
          nameTextStyle: {
            fontSize: 16,
            color: 'white',
            padding: [ 20, 0 ]
          },
          type: 'category',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
            // formatter: (value: number) => format( 1'时')
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true,
            alignWithLabel: true
          },
          data: [ '3月26日', '3月27日', '3月28日', '3月29日', '3月30日', '4月1日' ]
        } ],
        yAxis: [ {
          name: '维保量/台',
          nameLocation: 'center',
          nameGap: 50,
          nameTextStyle: {
            color: '#fff',
            fontSize: 18
          },
          padding: 5,
          // max: 1000,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#A1A7B3'
              // type: 'dashed'
            }
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              color: '#fff'

            }
          }
        }
        ],
        series: [
          {
            name: '维保车辆',
            type: 'line',
            symbolSize: 0,
            itemStyle: {
              normal: {
                // color: '#4293FD',
                lineStyle: {
                  // color: '#4293FD',
                  width: 2
                }
              }
            },
            data: [ 120, 132, 101, 134, 90, 230 ]
          }
        ],
        dataZoom: {
          type: 'slider',
          height: 20,
          bottom: 8,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '100%',
          handleStyle: {
            color: '#409eff'
          },
          textStyle: {
            color: '#666'
          },
          fillerColor: 'rgba(255,255,255,0.2)',
          borderColor: 'rgba(64,158,225,0.3)'
        }
      },
      btns: [ '总', '年', '月' ],
      checkId: 0
    },
    {
      name: '车辆运营状态分布',
      option: {
        title: {
          text: '总166', // 图标内容文本
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              formatter: '{b}\n{d}%',
              color: 'white'
            },
            data: [
              { name: '运营中', value: 30619 },
              { name: '维保中', value: 5921 },
              { name: '报废', value: 1153 }
            ]
          }
        ]
      }
    },
    {
      name: '车辆维保状态分别',
      option: {
        title: {
          text: '总166', // 图标内容文本
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              formatter: '{b}\n{d}%',
              color: 'white'
            },
            data: [
              { name: '隔日留交车辆', value: 30619 },
              { name: '保养中车辆', value: 5921 },
              { name: '维修中车辆', value: 1153 }
            ]
          }
        ]
      }
    }
  ],
  bottom: {
    head: [
      { title: '序号', key: 'num' },
      { title: '车辆编号', key: 'carNum' },
      { title: '车牌号', key: 'carNumber' },
      { title: '线路', key: 'line' },
      { title: '维修类型', key: 'type' },
      { title: '故障原因', key: 'cause' },
      { title: '维修点位', key: 'postion' },
      { title: '报修时间', key: 'time' },
      { title: '维保结果', key: 'result' }

    ],
    body: [
      {
        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
      },
      {
        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
      },
      {
        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
      },
      {
        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
      },
      {
        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
      }
    ],
    page: {
      size: 5,
      total: 10,
      num: 1
    }
  }
})

const rightContent = ref({
  top: [
    {
      name: '客流线路分布',
      option: {
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 50, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 18
          }
        },
        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: {
          bottom: 50,
          type: 'pie', // 图表类型为饼图
          radius: '50%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
          label: {
            show: true,
            fontSize: 16,
            formatter: '{b}： {c}个',
            color: 'white'
          },
          data: [
            { name: '维保场', value: 10 },
            { name: '运维驿站', value: 2 }
          ]
        }
      }
    },
    {
      name: '消费类型',
      option: {
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 50, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 18
          }
        },
        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: {
          bottom: 50,
          type: 'pie', // 图表类型为饼图
          radius: '50%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
          label: {
            show: true,
            fontSize: 16,
            formatter: '{b}： {c}辆',
            color: 'white'
          },
          data: [
            { name: '一保', value: 100 },
            { name: '二保', value: 50 },
            { name: '三保', value: 16 }
          ]
        }
      }
    },
    {
      name: '乘距分布',
      option: {
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 50, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 18
          }
        },
        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: {
          bottom: 50,
          type: 'pie', // 图表类型为饼图
          radius: '50%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
          label: {
            show: true,
            fontSize: 16,
            formatter: '{b}： {c}万元',
            color: 'white'
          },
          data: [
            { name: '保养', value: 60 },
            { name: '维修', value: 100 }
          ]
        }
      }
    }
  ],
  bottom: {
    name: '维保执行情况',
    option: {
      title: {
        text: '总报修', // 图标内容文本
        subtext: '60',
        left: 'center', // 图标内容水平居中
        top: 'center', // 图标内容垂直居中
        // 文本样式
        textStyle: {
          color: '#fff', // 图标内容文字颜色
          fontSize: '18px', // 图标内容文字大小
          fontWeight: 'normal'
        },
        subtextStyle: {
          color: '#fff', // 图标内容文字颜色
          fontSize: '18px', // 图标内容文字大小
          fontWeight: 'normal'
        }
      },
      grid: {
        containLabel: true,
        top: 0,
        bottom: 0
      },
      // 图表图例
      legend: {
        show: true,
        type: 'scroll',
        orient: 'horizontal', // 图例排列方向
        icon: 'circle', // 图例样式为圆形
        itemWidth: 10, // 图例图形的宽度
        itemHeight: 16, // 图例图形的高度
        itemGap: 10, // 图例项之间的间隔
        left: 'center', // 图例距离容器右侧的距离
        bottom: 0, // 图例垂直居中
        textStyle: {
          color: 'white', // 图例文字颜色
          fontSize: 18
        }
      },
      series: [
        {
          type: 'pie', // 图表类型为饼图
          radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
          label: {
            show: true,
            formatter: '{b}: {d}俩',
            color: 'white',
            fontSize: 18
          },
          data: [
            { name: '执行', value: 30 },
            { name: '竣工', value: 20 },
            { name: '在修', value: 10 }
          ]
        }
      ]
    }
  }
})

function changeFn(id: number, item: any) {
  item.checkId = id
}
</script>

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

  &-count {
    display: flex;
    font-family: 'Impact Normal', 'Impact', sans-serif;
    font-weight: 408;
    font-style: normal;
    text-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: center;

    &>div:not(:last-child) {
      width: 84px;
      height: 110px;
      background-color: rgba(33, 133, 232, 0.298039215686275);
      border: solid 2px rgba(33, 133, 232, 1);
      border-radius: 10px;
      line-height: 110px;
      font-size: 70px;
      color: #FFFFFF;
      margin-right: 16px;
    }

    &>div:last-child {
      font-size: 24px;
      color: #80FFFF;
      height: 110px;
      line-height: 145px;
    }
  }

  .dateChange {
    position: absolute;
    height: 30px;
    border-radius: 30px;
    border: solid 1px #2185E8;
    left: 50%;
    transform: translate(-50%, 0);
    top: 50px;
    z-index: 2;
    display: flex;

    &>div {
      width: 90px;
      color: white;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      line-height: 30px;

      &:not(:first-child) {
        border-left: solid 1px #2185E8;
      }
    }

    .active {
      background: #2185e860;
    }
  }
}
.left-bottom{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
}
.right-bottom,
.right-top {
  display: flex;
  justify-content: space-between;
}

.right-center{
  .lineSpeed{
    display: flex;
    align-items: center;
    height: 100%;
    >div{
      width: 50%;
    }
    .img{
      text-align: center;
      img{
      height: 262px;
      }
    }
    .control{
      width: 300px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      :deep(.n-select){
        .n-base-selection{
          border: 1px solid #5689F0;
          height: 50px;
          .n-base-selection-label{
            height: 100%;
            background: rgba(86, 137, 240, 0.298);
          }
        }
      }
      .btn{
      width: 173px;
      height: 71px;
      line-height: 71px;
      border-radius: 5px;
      background: rgba(24, 145, 255, 0.298);
      border: 1px solid #1891FF;
      color: #FFFFFF;
      font-size: 24px;
      text-align: center;
      margin-top: 53px;
      }
    }

  }
}
.right-bottom{
  .checkup{
    display: flex;
    height: 100%;
    .total{
      width: 30%;
      color: #FFFFFF;
      text-align: center;
      height: fit-content;
      margin: auto;
      >div{
        width: 100%;
      }
      .num{
        font-size: 60px;
        text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
      }
    }
    .list{
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-right: 40px;
      .item{
        width: 50%;
        height: 115px;
        background: url('../../../../assets/img/1-3.png') no-repeat;
        background-size: contain;
        text-align: center;
        background-position-y: 13px;
        .num{
          font-size: 50px;
          text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
          color: #00FFFF;
          font-family: Impact Normal;
        }
        .label{
          font-size: 24px;
          color: #FFFFFF;
          text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
        }
      }
    }

  }
}
</style>