<template>
  <div class="home-container">
    <div class="home-head">
      <div
        class="home-head-div"
        :class="index + 1 !== headList.length ? 'margin-right' : ''"
        v-for="(item, index) in headList"
        :key="index"
        :style="{
          background: `url(${item.bgc}) no-repeat`,
          'background-size': 'cover',
        }"
      >
        <div class="left">
          <div
            class="round"
            :style="{
              backgroundImage: `url(${item.round})`,
            }"
          ></div>
          <h4 class="title">{{ item.title }}</h4>
          <h4 class="total" :style="{ color: item.color }">{{ item.total }}</h4>
        </div>
        <div
          class="right"
          :style="{
            backgroundImage: `url(${item.icon})`,
          }"
        ></div>
      </div>
    </div>

    <div class="home-body">
      <!-- 区域分析 -->
      <div class="home-body-div margin-bottom margin-right">
        <div class="home-body-top">
          <div
            class="home-body-top-bgc"
            :style="{ background: `url(${bodyList[0].bgc})` }"
          ></div>
          <h3 class="home-body-top-title">{{ bodyList[0].title }}</h3>
        </div>
        <div class="home-body-bottom echarts" ref="bin"></div>
      </div>

      <!-- 企业分析 -->
      <div class="home-body-div margin-bottom">
        <div class="home-body-top">
          <div
            class="home-body-top-bgc"
            :style="{ background: `url(${bodyList[1].bgc})` }"
          ></div>
          <h3 class="home-body-top-title">{{ bodyList[1].title }}</h3>
        </div>
        <div class="home-body-bottom echarts" ref="line"></div>
      </div>

      <!-- 企业概况 -->
      <div class="home-body-div margin-right">
        <div class="home-body-top">
          <div
            class="home-body-top-bgc"
            :style="{ background: `url(${bodyList[2].bgc})` }"
          ></div>
          <h3 class="home-body-top-title">{{ bodyList[2].title }}</h3>
        </div>
        <div class="home-body-bottom qiyeOverview">
          <ul>
            <li v-for="(item, index) in overviewList" :key="index">
              <div class="name table-div">
                <div class="name-top">
                  <div class="name-bgc qiyeBgc"></div>
                  <div class="name-text qiyeText">企业名称</div>
                </div>
                <div class="name-bottom">{{ item.qiyeName }}</div>
              </div>
              <div class="city table-div">
                <div class="city-top">
                  <div class="city-bgc qiyeBgc"></div>
                  <div class="city-text qiyeText">市内销售额</div>
                </div>
                <div class="city-bottom">
                  {{ item.cityMoney }}
                  <span class="wanYuan">万元</span>
                </div>
              </div>
              <div class="current table-div">
                <div class="current-top">
                  <div class="current-bgc qiyeBgc"></div>
                  <div class="current-text qiyeText">当月销售额</div>
                </div>
                <div class="current-bottom">
                  {{ item.currentMoney }}
                  <span class="wanYuan">万元</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 供需信息 -->
      <div class="home-body-div">
        <div class="home-body-top">
          <div
            class="home-body-top-bgc"
            :style="{ background: `url(${bodyList[3].bgc})` }"
          ></div>
          <h3 class="home-body-top-title">{{ bodyList[3].title }}</h3>
        </div>
        <div class="home-body-bottom">
          <div class="home-body-bottom-elBottom">
            <el-table
              :data="tableData"
              height="240"
              border
              :header-cell-style="{
                background: '#eef5f9',
                color: '#000',
                fontSize: '16px',
              }"
              :cell-style="{ color: '#000' }"
              style="width: 100%"
            >
              <el-table-column
                prop="product"
                label="产品"
                header-align="center"
                align="center"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="type"
                label="供需类型"
                header-align="center"
                align="center"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="unit"
                header-align="center"
                align="center"
                label="部门/单位"
              >
              </el-table-column>
              <el-table-column
                prop="content"
                header-align="center"
                align="center"
                show-overflow-tooltip
                label="内容"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import service from "@/utils/request.js";
export default {
  name: "homeIndex",
  data() {
    return {
      headList: [
        {
          title: "企业总数",
          total: "1754",
          color: "#66a0fc",
          icon: require("@/assets/images/head1.png"),
          bgc: require("@/assets/images/headBgc1.png"),
          round: require("@/assets/images/round1.png"),
        },
        {
          title: "产品类别",
          total: "3456",
          color: "#ff5a78",
          icon: require("@/assets/images/head2.png"),
          bgc: require("@/assets/images/headBgc2.png"),
          round: require("@/assets/images/round2.png"),
        },
        {
          title: "市内销售额",
          total: "13",
          color: "#57e2f3",
          icon: require("@/assets/images/head3.png"),
          bgc: require("@/assets/images/headBgc3.png"),
          round: require("@/assets/images/round3.png"),
        },
        {
          title: "市内占比",
          total: "13",
          color: "#ff9d53",
          icon: require("@/assets/images/head4.png"),
          bgc: require("@/assets/images/headBgc4.png"),
          round: require("@/assets/images/round4.png"),
        },
      ],
      bodyList: [
        {
          title: "区域分析",
          bgc: require("@/assets/images/body1.png"),
        },
        {
          title: "企业分析",
          bgc: require("@/assets/images/body2.png"),
        },
        {
          title: "企业概况",
          bgc: require("@/assets/images/body3.png"),
        },
        {
          title: "供需信息",
          bgc: require("@/assets/images/body4.png"),
        },
      ],
      // 企业概况数据
      overviewList: [],
      // 供需信息数据
      tableData: [
        {
          product: "NB物联网智能水表",
          type: "供给",
          unit: "天水二一三电器集团有限公司",
          content: "公司生产智能水表1000台，有需求部门欢迎12356487978",
        },
        {
          product: "钢材",
          type: "需求",
          unit: "住建局",
          content: "因***项目现需采购钢材400吨，有供应部门.12356487978",
        },
        {
          product: "水泥",
          type: "需求",
          unit: "农村农业局",
          content: "为打造**项目，需采购水泥800吨，请对口.12356487978",
        },
        {
          product: "机制砂石",
          type: "供给",
          unit: "华健新材料股份有限公司",
          content: "现有机制砂石共计100万吨，有需求部门请.12356487978",
        },
        {
          product: "工作服",
          type: "需求",
          unit: "环保局",
          content: "因现环卫工人需重新定制工作服，如有关部.12356487978",
        },
      ],
      areaList1: [],
      areaList2: [],
      lineNameList: [],
      lineList1: [],
      lineList2: [],
    };
  },
  methods: {
    getNormalsum() {
      return service({
        url: "/system/inter/normalsum",
        method: "get",
      });
    },
    async getHeadList() {
      const { ComSum, ProSum, TotalPricle, TotalPricleinCity, code } =
        await this.getNormalsum();
      if (code == "200") {
        this.headList[0].total = ComSum;
        this.headList[1].total = ProSum;
        this.headList[2].total = TotalPricleinCity;
        this.headList[3].total = (TotalPricleinCity / TotalPricle).toFixed(2);
      }
    },
    getQiyeOverview() {
      return service({
        url: "/system/inter/groupby",
        method: "get",
      });
    },
    async getOverviewList() {
      const {
        AreaPricle,
        ComArt,
        ComProfile,
        DusPricle,
        areatotalPrice,
        code,
        protime,
      } = await this.getQiyeOverview();
      if (code == "200") {
        let arr = [];
        for (let key in AreaPricle) {
          arr = arr.concat(AreaPricle[key]);
        }
        this.areaList1 = arr.filter((item, index) => {
          return index % 2 === 0;
        });
        this.areaList2 = arr.filter((item, index) => {
          return index % 2 === 1;
        });
        this.initBin(arr, this.areaList1, this.areaList2);

        let arr1 = [];
        let lineList1 = [];
        let lineList2 = [];
        for (let key in ComArt) {
          arr1 = arr1.concat(ComArt[key]);
        }
        lineList1 = arr1.filter((item, index) => {
          return index % 2 === 0;
        });
        lineList2 = arr1.filter((item, index) => {
          return index % 2 === 1;
        });
        this.lineNameList = arr1.map((item) => item.name);
        this.lineList1 = lineList1.map((item) => item.value);
        this.lineList2 = lineList2.map((item) => item.value);
        this.initLine(this.lineNameList, this.lineList1, this.lineList2);

        this.overviewList = ComProfile.map((obj) => {
          return {
            qiyeName: obj["name"],
            cityMoney: obj["value"],
            currentMoney: obj["valueincity"],
          };
        });
      }
    },
    initLine(nameList, arr1, arr2) {
      let myChart = this.$echarts.init(this.$refs.line);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["产品总量", "市内总额"],
          left: "70%",
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: nameList,
            axisLabel: {
              formatter(params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 8; // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              }
            }
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            splitNumber: 4,
            splitArea: {
              show: true,
              areaStyle: {
                color: ["#eff8ff", "#ffffff"],
              },
            },
            axisLabel: {
              color: "#000",
              fontSize: 16,
            },
          },
        ],
        series: [
          {
            name: "产品总量",
            type: "bar",
            barWidth: 20,
            data: arr1,
            itemStyle: {
              normal: {
                color: "#1b89fb",
              },
            },
          },
          {
            name: "市内总额",
            type: "bar",
            barWidth: 20,
            data: arr2,
            itemStyle: {
              normal: {
                color: "#ffc558",
              },
            },
          },
        ],
        dataZoom: {
          realtime: true, //拖动滚动条时是否动态的更新图表数据
          bottom: 6,
          height: 8, //滚动条高度
          start: 0, //滚动条开始位置
          end: 30, //结束位置
        },
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initBin(arr, arr1, arr2) {
      let myChart = this.$echarts.init(this.$refs.bin);
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: [
          {
            data: arr1,
            icon: "roundRect",
            itemHeight: 8,
            itemWidth: 12,
            itemGap: 30,
            top: "4%",
            x: "75%",
            y: "center",
            formatter: (name) => {
              let data = arr1;
              let target;
              for (let i = 0, l = data.length; i < l; i++) {
                if (data[i].name == name) {
                  target = data[i].value;
                }
              }
              return `{b|${name}：${target}}`;
            },
            textStyle: {
              color: "#000",
              fontSize: 14,
              align: "left",
              backgroundColor: "transparent",
              rich: {
                b: {
                  width: 400,
                },
              },
            },
          },
          {
            data: arr2,
            icon: "roundRect",
            itemHeight: 8,
            itemWidth: 12,
            itemGap: 30,
            top: "4%",
            x: "50%",
            y: "center",
            formatter: (name) => {
              let data = arr2;
              let target;
              for (let i = 0, l = data.length; i < l; i++) {
                if (data[i].name == name) {
                  target = data[i].value;
                }
              }
              return `{b|${name}：${target}}`;
            },
            textStyle: {
              color: "#000",
              fontSize: 14,
              align: "left",
              backgroundColor: "transparent",
              rich: {
                b: {
                  width: 400,
                },
              },
            },
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            color: [
              "#37A2DA",
              "#32C5E9",
              "#67E0E3",
              "#9FE6B8",
              "#FFDB5C",
              "#ff9f7f",
              "#fb7293",
              "#E062AE",
              "#E690D1",
              "#e7bcf3",
              "#9d96f5",
              "#8378EA",
              "#96BFFF",
            ],
            radius: ["45%", "80%"],
            center: ["20%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: arr,
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  created() {
    this.getHeadList();
  },
  mounted() {
    this.initLine();
    this.getOverviewList();
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  min-width: 1300px;
  height: 100%;
  padding: 16px;
  .home-head {
    display: flex;
    width: 100%;
    height: 100px;
    margin-bottom: 16px;
    .home-head-div {
      position: relative;
      display: flex;
      width: calc(100% / 4);
      height: 100%;
      padding: 0 3%;
      .left {
        height: 100%;
        padding-top: 6%;
        .round {
          position: absolute;
          top: 14%;
          left: 6%;
          width: 34px;
          height: 34px;
          background-size: contain;
          background-repeat: no-repeat;
        }
        .title {
          position: absolute;
          top: 23%;
          left: 10%;
          font-size: 16px !important;
          font-weight: 700;
          margin-bottom: 18%;
        }
        .total {
          position: absolute;
          bottom: 14%;
          left: 10%;
          font-size: 24px !important;
        }
      }
      .right {
        position: absolute;
        bottom: 10%;
        right: 10%;
        width: 40px;
        height: 40px;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
  .home-body {
    display: flex;
    flex-shrink: none;
    flex-wrap: wrap;
    width: 100%;
    .home-body-div {
      width: calc((100% - 20px) / 2);
      height: calc((100vh - 248px) / 2);
      padding: 16px;
      background-color: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      .home-body-top {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
        .home-body-top-bgc {
          width: 18px;
          height: 20px;
          margin-right: 10px;
          background-size: 100%, 100%;
        }
        .home-body-top-title {
          font-weight: 700;
        }
      }
      &:nth-child(-n + 2) {
        padding-bottom: 0;
      }
      .home-body-bottom {
        width: 100%;
        height: 82%;
        padding: 6px 12px 12px;
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 2px dashed #eee;
          padding-bottom: 2px;
          margin-bottom: 6px;
          .name {
            width: 30%;
            .name-bottom {
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .current {
            margin-right: 20px;
          }
          .table-div {
            .name-top,
            .city-top,
            .current-top {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-bottom: 8px;
            }
            .qiyeText {
              font-size: 18px;
            }
            .name-bgc {
              width: 23px;
              height: 24px;
              margin-right: 10px;
              background: url("../assets/images/body3-1.png") no-repeat;
              background-size: cover;
            }
            .city-bgc {
              width: 19px;
              height: 18px;
              margin-right: 10px;
              background: url("../assets/images/body3-2.png") no-repeat;
              background-size: cover;
            }
            .current-bgc {
              width: 36px;
              height: 36px;
              background: url("../assets/images/body3-3.png") no-repeat;
              background-size: cover;
              background-position-y: 4px;
            }
            .name-bottom,
            .city-bottom,
            .current-bottom {
              color: #0c91e8;
              font-weight: 700;
            }
            .city-bottom,
            .current-bottom {
              font-size: 20px;
            }
            .current-bottom {
              padding-left: 6px;
              margin-bottom: 6px;
            }
            .wanYuan {
              color: #a5a5a5;
              font-size: 16px;
              font-weight: 700;
            }
          }
        }
        .home-body-bottom-elBottom {
          margin-top: 12px;
        }
      }
      .echarts {
        // margin-top: 22px;
        height: 90%;
      }
      .qiyeOverview {
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 6px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: rgba(0, 0, 0, 0.2);
        }
        &::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          border-radius: 0;
          background: rgba(0, 0, 0, 0.1);
        }
        &::-webkit-scrollbar-track {
          border-radius: 10px;
        }
      }
    }
  }

  .margin-right {
    margin-right: 16px;
  }
  .margin-bottom {
    margin-bottom: 16px;
  }
}
</style>