<template>
  <el-row :gutter="16">
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="98500">
          <template #title>
            <div style="display: inline-flex; justify-self: right;align-items: center;width: 100%">
              用户人数
              <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the product in one day"
                  placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
              <el-icon style="float: right" size="24"><Odometer /></el-icon>
            </div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span class="green">
              +24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="693700">
          <template #title>
            <div style="display: inline-flex; align-items: center">
             商家人数
              <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the product in one month"
                  placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">

            <span class="red">
              +12%
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="72000" title="New transactions today">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              订单数量
            </div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">

            <span class="green">
              +16%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="72000" title="New transactions today">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              用户满意度
            </div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span class="green">
              +16%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>

<!--  ============================================================================ -->
  <el-row :gutter="16">
    <el-col :span="18">
      <div class="statistic-card">
            <div style="display: inline-flex; justify-self: right;align-items: center;width: 100%">
              分析概览
            </div>
        <div class="statistic-footer">
          <div class="footer-item">
              <div id="main1" style="height: 320px;width: 780px;border: 1px solid #ebebeb;border-radius: 2px;"></div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic-card">
        <div style="display: inline-flex; justify-self: right;align-items: center;width: 100%">
          每周展示
        </div>
        <div class="statistic-footer">
          <div class="footer-item">
            <div  style="height: 320px;width: 220px;border: 1px solid #ebebeb;border-radius: 2px;">
              <div class="common" >
                <div style="flex: 8"><el-progress
                    :text-inside="true"
                    :stroke-width="15"
                    :percentage="100"
                    duration="30"
                    color="#26ce83"
                    striped
                    striped-flow
                /></div>
                <div style="flex: 1">周日</div>
              </div>
<!--              ---------->
              <div class="common">
                <div style="flex: 8"><el-progress
                    :text-inside="true"
                    :stroke-width="15"
                    :percentage="100"
                    duration="30"
                    color="#26ce83"
                    striped
                    striped-flow
                /></div>
                <div style="flex: 1">周六</div>
              </div>

              <div class="common">
                <div style="flex: 8"><el-progress
                    :text-inside="true"
                    :stroke-width="15"
                    :percentage="100"
                    duration="30"
                    color="#26ce83"
                    striped
                    striped-flow
                /></div>
                <div style="flex: 1">周五</div>
              </div>

              <div class="common">
                <div style="flex: 8"><el-progress
                    :text-inside="true"
                    :stroke-width="15"
                    :percentage="100"
                    duration="30"
                    color="#26ce83"
                    striped
                    striped-flow
                /></div>
                <div style="flex: 1">周四</div>
              </div>
              <div class="common">
                <div style="flex: 8"><el-progress
                    :text-inside="true"
                    :stroke-width="15"
                    :percentage="100"
                    duration="30"
                    color="#26ce83"
                    striped
                    striped-flow
                /></div>
                <div style="flex: 1">周三</div>
              </div>
              <div class="common">
                <div style="flex: 8"><el-progress
                    :text-inside="true"
                    :stroke-width="15"
                    :percentage="100"
                    duration="30"
                    color="#26ce83"
                    striped
                    striped-flow
                /></div>
                <div style="flex: 1">周二</div>
              </div>
              <div class="common">
                <div style="flex: 8"><el-progress
                    :text-inside="true"
                    :stroke-width="15"
                    :percentage="100"
                    duration="30"
                    color="#26ce83"
                    striped
                    striped-flow
                /></div>
                <div style="flex: 1">周一</div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </el-col>

  </el-row>
</template>

<script  setup>
import {
  ArrowRight,
  Odometer,
  CaretBottom,
  CaretTop,
  Warning,
} from '@element-plus/icons-vue'
import {onMounted} from "vue";
import * as echarts from 'echarts';

onMounted(async () => {
  setTimeout(() => {hei();}, 500)
})
const hei=()=>{

  var app = {};

  var chartDom = document.getElementById('main1');
  var myChart = echarts.init(chartDom);
  var option;

  const posList = [
    'left',
    'right',
    'top',
    'bottom',
    'inside',
    'insideTop',
    'insideLeft',
    'insideRight',
    'insideBottom',
    'insideTopLeft',
    'insideTopRight',
    'insideBottomLeft',
    'insideBottomRight'
  ];
  app.configParameters = {
    rotate: {
      min: -90,
      max: 90
    },
    align: {
      options: {
        left: 'left',
        center: 'center',
        right: 'right'
      }
    },
    verticalAlign: {
      options: {
        top: 'top',
        middle: 'middle',
        bottom: 'bottom'
      }
    },
    position: {
      options: posList.reduce(function (map, pos) {
        map[pos] = pos;
        return map;
      }, {})
    },
    distance: {
      min: 0,
      max: 100
    }
  };
  app.config = {
    rotate: 90,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15,
    onChange: function () {
      const labelOption = {
        rotate: app.config.rotate,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        position: app.config.position,
        distance: app.config.distance
      };
      myChart.setOption({
        series: [
          {
            label: labelOption
          },
          {
            label: labelOption
          },
          {
            label: labelOption
          },
          {
            label: labelOption
          }
        ]
      });
    }
  };
  const labelOption = {
    show: true,
    position: app.config.position,
    distance: app.config.distance,
    align: app.config.align,
    verticalAlign: app.config.verticalAlign,
    rotate: app.config.rotate,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
      name: {}
    }
  };
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['Forest', 'Steppe', 'Desert', 'Wetland']
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar', 'stack'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: ['2012', '2013', '2014', '2015', '2016']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Forest',
        type: 'bar',
        barGap: 0,
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390]
      },
      {
        name: 'Steppe',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290]
      },
      {
        name: 'Desert',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 190]
      },
      {
        name: 'Wetland',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [98, 77, 101, 99, 40]
      }
    ]
  };

  option && myChart.setOption(option);
}

</script>

<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}


.common{
  display: flex;
  padding: 15px 0 15px;
}
.common_left{
  flex: 8;
}
.common_right{
  flex: 1;
}
.statistic-card {

  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  background-color: #f0f2f5;
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>
