<template>
    <view class="info_24">
        <div class="heart">
        <p class="title">
            <span class="line"></span><span class="h4">今日雨量</span>
        </p>
        </div>
        <div class="chartChange fl">
        <div class="chart_tit" @click="changeTable">
            <image
            style="vertical-align: middle"
            src="../../static/tabs/chartcolumn@2x.png"
            mode="aspectFit"
            ></image>
            <span>图表</span>
        </div>
        </div>

        <div class="imgs" style="height: 100%; text-align: center">
        <!--  24h天气预报图像-->
        <qiun-data-charts v-if="!changeBool"  type="pie" :opts="opts" :chartData="echartsOptios" />
        <!-- 表格-->
        <div v-else class="tableBox">
            <div v-if="!loading" class="table_div">
                <div class="table_cur">
                    <table style="width: 100%">
                        <tr>
                            <th style="width: 50px; color: #59a7ff">序号</th>
                            <th style="width: 30%; color: #59a7ff">水库</th>
                            <th style="width: 80%; color: #59a7ff">监测点</th>
                            <th style="width: 30%; color: #59a7ff">今日雨量(mm)</th>
                        </tr>
                        <div style="max-height: 260px; overflow-y: auto" v-if="tableData">
                            <tr v-for="(item, index) in tableData" :key="index">
                              <td style="width: 50px">{{ index + 1 }}</td>
                              <td style="width: 30%">{{ item.reservoir }}</td>
                              <td style="width: 80%">{{ item.station }}</td>
                              <td style="width: 30%">{{ item.rainfall }}</td>
                            </tr>
                        </div>
                    </table>
                </div>
            </div>
            <div v-else style="color: #b8b8b8; width: 100%; margin: 130px auto;">加载中...</div>
        </div>
        </div>
    </view>
</template>

<script>


import moment from "moment";
export default {
    data() {
        return {
            changeBool: false,
            tableData: [],
            loading:false,
            tm:null,
            opts:{
                update: true,
                color: ["#678ef2","#7dd5a9","#616f8f","#edbf45","#6c5ff0","#83c6e8","#8c61b4"],
                padding: [20,30,20,0],
                enableScroll: false,
                extra: {
                  pie: {
                    activeOpacity: 0.5,
                    activeRadius: 10,
                    offsetAngle: 0,
                    labelWidth: 15,
                    border: false,
                    borderWidth: 3,
                    borderColor: "#FFFFFF"
                  }
                },
                legend: {
                  show: true,
                  position: "right",
                  lineHeight: 25
                },
            },
        };
    },
    computed: {
        echartsOptios() {
          const groups = {
            '0mm': [],
            '0.1~10mm': [],
            '10~25mm': [],
            '25~50mm': [],
            '50~100mm': [],
            '100~250mm': [],
            '≥250mm': []
          };
          this.tableData.forEach(item => {
            const r = item.rainfall;
            if (r === 0) groups['0mm'].push(item);
            else if (r > 0 && r < 10) groups['0.1~10mm'].push(item);
            else if (r >= 10 && r < 25) groups['10~25mm'].push(item);
            else if (r >= 25 && r < 50) groups['25~50mm'].push(item);
            else if (r >= 50 && r < 100) groups['50~100mm'].push(item);
            else if (r >= 100 && r < 250) groups['100~250mm'].push(item);
            else groups['≥250mm'].push(item);
          });
          const chartData = []
          for(let key in groups){
            chartData.push({
              name:key,
              value:groups[key].length,
              labelText:groups[key].length
            })
          }

            let res = {
                series: [
                  { data: chartData }
                ]
            };
            return JSON.parse(JSON.stringify(res));
        },
    },
    methods: {
        async getData() {
            this.loading = true
            try {
                // const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", { tm });
                this.tableData = [
                  { id: 1, reservoir: '思姑井水库', station: '思姑井水库雨量站', rainfall: 0.0 },
                  { id: 2, reservoir: '四清水库', station: '四清水库雨量站', rainfall: 3.2 },
                  { id: 3, reservoir: '曾家塘水库', station: '曾家塘水库雨量站', rainfall: 0.0 },
                  { id: 4, reservoir: '双塘水库', station: '双塘水库雨量站', rainfall: 3.1 },
                  { id: 5, reservoir: '东风水库', station: '东风水库雨量站', rainfall: 0.0 },
                  { id: 6, reservoir: '红旗水库', station: '红旗水库雨量站', rainfall: 12.5 },
                  { id: 7, reservoir: '胜利水库', station: '胜利水库雨量站', rainfall: 0.0 },
                  { id: 8, reservoir: '团结水库', station: '团结水库雨量站', rainfall: 0.0 },
                  { id: 9, reservoir: '跃进水库', station: '跃进水库雨量站', rainfall: 8.7 },
                  { id: 10, reservoir: '光明水库', station: '光明水库雨量站', rainfall: 0.0 },
                  { id: 11, reservoir: '五一水库', station: '五一水库雨量站', rainfall: 25.3 },
                  { id: 12, reservoir: '向阳水库', station: '向阳水库雨量站', rainfall: 0.0 },
                  { id: 13, reservoir: '永丰水库', station: '永丰水库雨量站', rainfall: 1.5 },
                  { id: 14, reservoir: '新生水库', station: '新生水库雨量站', rainfall: 0.0 },
                  { id: 15, reservoir: '和平水库', station: '和平水库雨量站', rainfall: 42.0 },
                  { id: 16, reservoir: '红星水库', station: '红星水库雨量站', rainfall: 0.0 },
                  { id: 17, reservoir: '卫星水库', station: '卫星水库雨量站', rainfall: 6.8 },
                  { id: 18, reservoir: '先锋水库', station: '先锋水库雨量站', rainfall: 0.0 },
                  { id: 19, reservoir: '东风二库', station: '东风二库雨量站', rainfall: 98.4 },
                  { id: 20, reservoir: '红旗二库', station: '红旗二库雨量站', rainfall: 0.0 },
                  { id: 21, reservoir: '长岭水库', station: '长岭水库雨量站', rainfall: 0.0 },
                  { id: 22, reservoir: '青松水库', station: '青松水库雨量站', rainfall: 15.2 },
                  { id: 23, reservoir: '翠屏水库', station: '翠屏水库雨量站', rainfall: 0.0 },
                  { id: 24, reservoir: '碧云水库', station: '碧云水库雨量站', rainfall: 3.8 },
                  { id: 25, reservoir: '龙潭水库', station: '龙潭水库雨量站', rainfall: 0.0 },
                  { id: 26, reservoir: '凤鸣水库', station: '凤鸣水库雨量站', rainfall: 156.7 },
                  { id: 27, reservoir: '鹤翔水库', station: '鹤翔水库雨量站', rainfall: 0.0 },
                  { id: 28, reservoir: '鹭影水库', station: '鹭影水库雨量站', rainfall: 0.0 },
                  { id: 29, reservoir: '麒麟水库', station: '麒麟水库雨量站', rainfall: 289.3 },
                  { id: 30, reservoir: '玄武水库', station: '玄武水库雨量站', rainfall: 0.0 }
                ];
                this.loading = false
            } catch (e) {
                uni.$showMsg();
            }
        },
        changeTable(val) {
          this.changeBool = !this.changeBool;
        },
        getDataTime() {
            let d1 = moment().format("YYYYMMDD");
            let h1 = moment().format("HH") >= 20 ? "20" : "08";
            this.tm = d1 + h1;
        },
    },
    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
    created() {
        this.getDataTime();
        this.getData()
    },
};
</script>

<style lang="scss" scoped>
/* 24小时 */
.chartChange {
  text-align: center;
  margin: 16rpx 0;
}
.chart_tit {
  width: 129rpx;
  height: 43rpx;
  background: #d3e1ff;
  border-radius: 20rpx;
  color: #3380ff;
}

.chart_tit image {
  margin-right: 10rpx;
  width: 36rpx;
  height: 30rpx;
}

.table_h {
  display: flex;
  text-align: center;
  height: 24px;
  /* position: absolute;
    top: 0;
    right: 0; */
}
.info_24 {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 12rpx;
  box-shadow: 0px 0px 5px #eee;
}
.heart {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title .line {
  border: 2px solid #3380ff;
  border-radius: 3rpx;
  margin-right: 20rpx;
}
.title .h4 {
  font-weight: 400;
  font-size: 32rpx;
  color: #121b3d;
}
.time {
  font-weight: 400;
  font-size: 24rpx;
  color: #a2a2a2;
}

.g1 {
  color: #545556;
}
.ye {
  color: #ff1717;
  /* font-weight: 600; */
}
.b1 {
  color: #3380ff;
  padding: 0 2px;
}

.uni-group {
  display: flex;
  align-items: center;
}

/* 表格 */
.tableBox {
  width: 100%;
  position: relative;
}

.leftTab {
  width: 80px;
  /* border-bottom: 1px solid #ccc; */
}
.rightTab {
  width: 80px;
  /* border: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    border-left: 0; */
}
.activetextTypeTab,
.activetextTypeTab:hover {
  border-bottom: 3rpx solid #2286f6;
  color: #026be0;
}
.table_div {
  widows: 100%;
  height: 100%;
  max-width: calc(100% - 0px);
  max-height: calc(100vh - 24px);
  flex: 1;
  // padding-top: 30px;
  overflow-x: scroll;
}
/*table样式*/
.table_cur {
  width: 100%;
  empty-cells: show;
  border-collapse: collapse;
  font-size: 14px;
}
.table_cur tr {
  display: flex;
  line-height: 56rpx;
}
.table_cur th {
  height: 56rpx;
  color: #2f4056;
  background: #f5f6f8;
  font-size: 14px;
  font-weight: bold;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center !important;
}

.table_cur td {
  height: 56rpx;
  border-bottom: 1px solid #e5e9f2;
  font-size: 14px;
  color: #2f4056;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center !important;
}
/*table样式 end*/
.noData {
  width: 100px;
}

</style>
  