<template>
  <div class="right-Panel-container">
    <div class="title-container">
      <span class="title-text">当日重点关注：发热门诊病历99例</span>
    </div>
    <div class="top-chart-container">
      <div class="chart-left-container">
        <titleContent>本市发热腹综情况</titleContent>
        <div class="charts-box" id="leftChartId" ref="leftChartId"></div>
      </div>
      <div class="chart-right-container">
        <titleContent>发热门诊、呼综情况</titleContent>
        <div class="charts-box" id="rightChartId" ref="rightChartId"></div>
      </div>
    </div>
    <div class="title-box">
      <titleContent>发热门诊病例分区</titleContent>
    </div>
    <div class="partition-box">
      <div
        class="partition-card"
        v-for="(key, index) in Object.keys(partitionData)"
        :key="index + key + ''"
      >
        <div class="title">{{ key }}</div>
        <template v-for="(childKey, index1) in Object.keys(partitionData[key])" :key="index1">
          <template v-if="childKey == 'infection'">
            <div class="text-box">
              <span>传染病</span>
              <span class="num">{{ partitionData[key][childKey][0].num }}</span>
            </div>
          </template>
          <template v-else-if="childKey == 'fever'">
            <div class="text-box">
              <span>发热</span> <span class="num">{{ partitionData[key][childKey][0].num }}</span>
            </div>
          </template>
          <template v-else-if="childKey == 'fuzong'">
            <div class="text-box text-box-border">
              <span>腹综</span>
              <span class="num">{{ getSum(partitionData[key][childKey]) }}</span>
            </div>
            <div
              class="text-box text-child-box"
              v-for="(item, index2) in partitionData[key][childKey]"
              :key="index2"
            >
              <span>{{ item.type }}</span>
              <span class="num">{{ partitionData[key][childKey][0].num }}</span>
            </div>
          </template>
          <template v-else-if="childKey == 'cold'">
            <div class="text-box">
              <span>感冒</span>
              <span class="num">{{ getSum(partitionData[key][childKey]) }}</span>
            </div>
            <div
              class="text-box text-child-box"
              v-for="(item, index2) in partitionData[key][childKey]"
              :key="index2"
            >
              <span>{{ item.type }}</span>
              <span class="num">{{ partitionData[key][childKey][0].num }}</span>
            </div>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import titleContent from './TitleContent.vue';
import * as echarts from 'echarts';
import { getDataByArea, getHistogramData } from '@/service/api/mapRequest';
import { stackRightOptions, stackLeftOptions } from '@/utils/chartsOptions.js';
const partitionData = ref({
  闵行区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '闵行区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '闵行区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '闵行区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '闵行区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '闵行区'
      }
    ]
  },
  青浦区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '青浦区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '青浦区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '青浦区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '青浦区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '青浦区'
      }
    ]
  },
  长宁区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '长宁区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '长宁区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '长宁区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '长宁区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '长宁区'
      }
    ]
  },
  宝山区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '宝山区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '宝山区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '宝山区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '宝山区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '宝山区'
      }
    ]
  },
  嘉定区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '嘉定区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '嘉定区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '嘉定区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '嘉定区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '嘉定区'
      }
    ]
  },
  松江区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '松江区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '松江区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '松江区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '松江区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '松江区'
      }
    ]
  },
  静安区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '静安区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '静安区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '静安区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '静安区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '静安区'
      }
    ]
  },
  浦东新区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '浦东新区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '浦东新区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '浦东新区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '浦东新区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '浦东新区'
      }
    ]
  },
  杨浦区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '杨浦区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '杨浦区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '杨浦区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '杨浦区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '杨浦区'
      }
    ]
  },
  虹口区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '虹口区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '虹口区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '虹口区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '虹口区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '虹口区'
      }
    ]
  },
  金山区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '金山区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '金山区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '金山区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '金山区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '金山区'
      }
    ]
  },
  徐汇区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '徐汇区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '徐汇区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '徐汇区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '徐汇区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '徐汇区'
      }
    ]
  },
  黄浦区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '黄浦区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '黄浦区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '黄浦区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '黄浦区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '黄浦区'
      }
    ]
  },
  崇明区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '崇明区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '崇明区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '崇明区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '崇明区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '崇明区'
      }
    ]
  },
  普陀区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '普陀区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '普陀区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '普陀区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '普陀区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '普陀区'
      }
    ]
  },
  奉贤区: {
    infection: [
      {
        num: 8,
        type: '传染病',
        diseaseType: '1',
        jzdXia: '奉贤区'
      }
    ],
    fever: [
      {
        num: 8,
        type: '发热门诊病例',
        diseaseType: '2',
        jzdXia: '奉贤区'
      }
    ],
    fuzong: [
      {
        num: 5,
        type: '肠道门诊病例',
        diseaseType: '3',
        jzdXia: '奉贤区'
      },
      {
        num: 5,
        type: '成人腹综监测病例',
        diseaseType: '3',
        jzdXia: '奉贤区'
      },
      {
        num: 4,
        type: '儿童腹综监测病例',
        diseaseType: '3',
        jzdXia: '奉贤区'
      }
    ]
  }
});

const leftChartId = ref('');
const rightChartId = ref('');
//初始化echarts图
const initChart = (chartDom, option) => {
  const myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
};

const getBarData = async () => {
  try {
    const res = await getHistogramData();
    if (res.code == 200) {
      const data = res?.data || [];
      const dateArr = Object.keys(data);
      const data1 = dateArr.map((item) => {
        return { date: item, num: 0 };
      });
      const data2 = dateArr.map((item) => {
        return { date: item, num: 0 };
      });
      const data3 = dateArr.map((item) => {
        return { date: item, num: 0 };
      });
      const data4 = dateArr.map((item) => {
        return { date: item, num: 0 };
      });
      Object.values(data).forEach((item) => {
        item.forEach((element) => {
          if (element.type == '1') {
            data1.forEach((data) => {
              if (element.month == data.date) {
                data.num = element.num;
              }
            });
          } else if (element.type == '2') {
            data2.forEach((data) => {
              if (element.month == data.date) {
                data.num = element.num;
              }
            });
          } else if (element.type == '3') {
            data3.forEach((data) => {
              if (element.month == data.date) {
                data.num = element.num;
              }
            });
          } else if (element.type == '4') {
            data4.forEach((data) => {
              if (element.month == data.date) {
                data.num = element.num;
              }
            });
          }
        });
      });

      const yAxisData = {
        data1: Object.values(data1).map((item) => item.num),
        data2: Object.values(data2).map((item) => item.num),
        data3: Object.values(data3).map((item) => item.num),
        data4: Object.values(data4).map((item) => item.num)
      };
      const line = yAxisData.data1.map((item, index) => {
        return (
          (item + yAxisData.data2[index] + yAxisData.data3[index] + yAxisData.data4[index]) / 4
        );
      });
      yAxisData.line = line;
      initChart(rightChartId.value, stackRightOptions(dateArr, yAxisData));
      initChart(leftChartId.value, stackLeftOptions(dateArr, yAxisData));
    }
  } catch (error) {
    console.log(error);
  }
};

//分区看板
const getLeftChartData = async () => {
  try {
    const res = await getDataByArea();
    if (res.code == 200 && res.data) {
      //重塑数据结构
      Object.keys(res.data).forEach((key) => {
        if (res.data && res.data[key]) {
          res.data[key].forEach((item) => {
            if (!partitionData.value[key]) {
              partitionData.value[key] = {};
            }
            let keyName;
            if (item.diseaseType == '1') {
              //传染病
              keyName = 'infection';
            } else if (item.diseaseType == '2') {
              //发热
              keyName = 'fever';
            } else if (item.diseaseType == '3') {
              //腹宗
              keyName = 'fuzong';
            } else if (item.diseaseType == '4') {
              //感冒
              keyName = 'cold';
            }
            if (keyName) {
              if (!partitionData.value[key][keyName]) {
                partitionData.value[key][keyName] = [];
              }
              partitionData.value[key][keyName].push(item);
            }
          });
        }
      });
      console.log(partitionData.value);
    } else {
      console.log(res.msg || 'getDataByArea:error');
    }
  } catch (error) {
    console.log(error);
  }
};

//求和
const getSum = (numArr) => {
  return numArr
    .map((item) => item.num)
    .reduce((pre, next) => {
      return pre + next;
    });
};
onMounted(() => {
  // getLeftChartData();
  // getBarData();
  let xAxisData = [];
  const yAxisData = {
    data1: [],
    data2: [],
    data3: [],
    data4: []
  };

  for (let i = 1; i < 8; i++) {
    xAxisData.push('2024-0' + i);
    yAxisData.data1.push(+(Math.random() * 2).toFixed(2));
    yAxisData.data2.push(+(Math.random() * 5).toFixed(2));
    yAxisData.data3.push(+(Math.random() + 0.3).toFixed(2));
    yAxisData.data4.push(+Math.random().toFixed(2));
  }
  initChart(rightChartId.value, stackRightOptions(xAxisData, yAxisData));
  initChart(leftChartId.value, stackLeftOptions(xAxisData, yAxisData));
});
</script>

<style lang="scss">
.right-Panel-container {
  .title-container {
    background-image: url('@/assets/image/message-bg.png');
    margin-top: 67px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-size: 100% 100%;
    width: 703px;
    height: 50px;
    .title-text {
      font-weight: bold;
      font-size: 18px;
      color: #ffffff;
      line-height: 29px;
      padding-left: 15px;
    }
  }

  .top-chart-container {
    display: flex;
    justify-content: space-between;
    padding-top: 36px;
    .chart-left-container,
    .chart-right-container {
      width: calc(50% - 30px);
      .charts-box {
        width: 100%;
        height: 175px;
        margin-top: 30px;
      }
    }
  }
  .title-box {
    width: calc(50% - 10px);
    margin-top: 20px;
  }
  .partition-box {
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    height: 621px;
    overflow-y: auto;
    padding-top: 29px;
    gap: 24px;
    scrollbar-width: none;
    .partition-card {
      width: 162px;
      background-image: url('@/assets/image/normal-bg.png');
      background-repeat: no-repeat;
      background-size: 100% 60px;
      margin-bottom: 5%;
      .title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #0080ff;
        line-height: 32px;
        font-style: italic;
        padding-left: 14px;
        position: relative;
        top: -13px;
      }
      .text-box {
        color: #585858;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding: 5px 5px 0 9px;

        .num {
          color: #0080ff;
          font-size: 16px;
        }
      }
      .text-box-border {
        border-bottom: 1px solid #0080ff;
      }
      .text-child-box {
        padding-left: 20px;
      }
    }
  }
}
</style>
