<template>
  <div class="box">
    <div class="query bck">
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="国家">
          <el-select
            v-model="queryForm.countryId"
            placeholder="请选择"
            @change="onQuery"
          >
            <el-option
              v-for="item in countryData"
              :label="item.chineseName"
              :value="item.id"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="queryForm.timeArr"
            type="daterange"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="onQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="one bck" v-loading="loading">
      <TitleInfo :content="titleList[0]"></TitleInfo>
      <div class="statistics">
        <div class="item">
          <div class="top">
            <div class="_title">
              <div class="icon icon_one">
                <img
                  src="@/assets/images/portrait/iconm_kehd.png"
                  alt=""
                  class="img"
                />
              </div>
              <div class="name">总计</div>
            </div>
          </div>
          <div class="bottom">
            <div class="_box" style="margin-right: 20px">
              <span class="t"> 新增 </span>
              <span class="val">
                {{ allData.sourceData.incrementAmount }}
              </span>
            </div>
            <div class="_box">
              <span class="t"> 存量 </span>
              <span class="val"> {{ allData.sourceData.stockAmount }} </span>
            </div>
          </div>
        </div>
        <div
          class="item"
          v-for="(item, index) in allData.sourceData.stockList"
          :key="index"
          v-if="
            allData.sourceData.stockList &&
            allData.sourceData.stockList.length > 0
          "
        >
          <div class="top">
            <div class="_title">
              <div class="icon icon_one">
                <img
                  src="@/assets/images/portrait/iconm_kehd.png"
                  alt=""
                  class="img"
                />
              </div>
              <div class="name">{{ item.source }}</div>
            </div>
          </div>
          <div class="bottom">
            <div class="_box" style="margin-right: 20px">
              <span class="t"> 新增 </span>
              <span class="val"> {{ item.incrementAmount }} </span>
            </div>
            <div class="_box">
              <span class="t"> 存量 </span>
              <span class="val"> {{ item.stockAmount }} </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="two bck" v-loading="loadingOne">
      <TitleInfo :content="titleList[1]"></TitleInfo>
      <div class="statistics">
        <div class="item">
          <div class="top">
            <div class="_title">
              <div class="icon icon_two">
                <img
                  src="@/assets/images/portrait/iconm_zixun.png"
                  alt=""
                  class="img"
                />
              </div>
              <div class="name">总计</div>
            </div>
          </div>
          <div class="bottom">
            <div class="_box" style="margin-right: 20px">
              <span class="t"> 询盘（单） </span>
              <span class="val"> {{ allData.typeData.saleAmount }} </span>
            </div>
            <div class="_box">
              <span class="t"> 成交（单） </span>
              <span class="val"> {{ allData.typeData.contractAmount }} </span>
            </div>
          </div>
        </div>
        <div
          class="item"
          v-for="(item, index) in allData.typeData.saleList"
          :key="index"
          v-if="
            allData.typeData.saleList && allData.typeData.saleList.length > 0
          "
        >
          <div class="top">
            <div class="_title">
              <div class="icon icon_two">
                <img
                  src="@/assets/images/portrait/iconm_kehd.png"
                  alt=""
                  class="img"
                />
              </div>
              <div class="name">{{ item.status }}</div>
            </div>
          </div>
          <div class="bottom">
            <div class="_box" style="margin-right: 20px">
              <span class="t"> 询盘（单） </span>
              <span class="val"> {{ item.saleAmount }} </span>
            </div>
            <div class="_box">
              <span class="t"> 成交（单） </span>
              <span class="val"> {{ item.contractAmount }} </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="three bck" v-loading="loadingTwo">
      <TitleInfo :content="titleList[2]"></TitleInfo>
      <div ref="echartDom" style="height: 40vh"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";

import TitleInfo from "@/components/TitleInfo/index.vue";
const titleList = ["客户来源统计", "类型统计", "趋势分析"];
const { proxy } = getCurrentInstance();
const loading = ref(false);
const loadingOne = ref(false);
const loadingTwo = ref(false);
const queryForm = reactive({
  countryId: "",
  beginTime: "",
  endTime: "",
  timeArr: "",
});
const countryData = ref([]);
const allData = reactive({
  sourceData: {},
  typeData: {},
});
//图表
const echartDom = ref(null);
let myChart = null;
const option = reactive({
  data: {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "1%",
      right: "2%",
      bottom: "15%",
      top: "30px",
      containLabel: true,
    },
    legend: {
      bottom: 0,
      icon: "rect", //显示为矩形
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 30, //item项的边距
      data: ["月新增客户数", "月存量客户数", "月询盘单数", "月成交单数"],
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      // splitLine: {
      //   lineStyle: {
      //     type: "dashed",
      //     // 设置背景横线
      //     color: "#ccc",
      //   },
      // },
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
          // 设置背景横线
          color: "#ccc",
        },
      },
    },
    series: [
      {
        data: [100, 202, 500, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
        symbolSize: 10,
        name: "月存量客户数",
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          normal: {
            color: "#7566F0", //改变折线点的颜色
            lineStyle: {
              color: "#7566F0", //改变折线颜色
            },
          },
        },
      },
      {
        data: [100, 202, 500, 934, 500, 900, 10],
        type: "line",
        smooth: true,
        symbolSize: 10,
        name: "月询盘单数",
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          normal: {
            color: "#FF655B", //改变折线点的颜色
            lineStyle: {
              color: "#FF655B", //改变折线颜色
            },
          },
        },
      },
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
        symbolSize: 10,
        name: "月成交单数",
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          normal: {
            color: "#FF9315", //改变折线点的颜色
            lineStyle: {
              color: "#FF9315", //改变折线颜色
            },
          },
        },
      },
      {
        data: [210, 885, 644, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true, //是否圆润线条
        symbolSize: 10, //设置拐点大小
        name: "月新增客户数",

        // 背景颜色
        // areaStyle: {
        //   color: "#D9EDFF",
        //   opacity: 0.4,
        // },
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          normal: {
            color: "#0084FF", //改变折线点的颜色
            lineStyle: {
              color: "#0084FF", //改变折线颜色
            },
          },
        },
      },
    ],
  },
});
const getData = () => {
  loading.value = true;
  loadingOne.value = true;
  loadingTwo.value = true;
  proxy.post("/saleQuotation/sourceStatistics", queryForm).then((res) => {
    allData.sourceData = res;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
  proxy.post("/saleQuotation/typeStatistics", queryForm).then((res) => {
    allData.typeData = res;
    setTimeout(() => {
      loadingOne.value = false;
    }, 200);
  });
  proxy.post("/saleQuotation/trendAnalysis", queryForm).then((res) => {
    let listOne = res.contractStatisticsList.map((x) => x.count);
    let listTwo = res.saleStatisticList.map((x) => x.count);
    let listThree = res.sourceIncrementList.map((x) => x.count);
    let listFour = res.sourceStockList.map((x) => x.count);
    const months = res.contractStatisticsList.map((x) => x.month);
    option.data.xAxis.data = months;
    option.data.series[0].data = listFour;
    option.data.series[1].data = listTwo;
    option.data.series[2].data = listOne;
    option.data.series[3].data = listThree;
    myChart.setOption(option.data);
    setTimeout(() => {
      loadingTwo.value = false;
    }, 200);
  });
};
const onQuery = () => {
  queryForm.beginTime = queryForm.timeArr[0];
  queryForm.endTime = queryForm.timeArr[1];
  getData();
};
const getCountryData = () => {
  proxy.post("/areaInfo/list", { parentId: "0" }).then((res) => {
    countryData.value = res;
    queryForm.countryId = "China";
    let endData = new Date();
    let beginDate = new Date();
    beginDate.setFullYear(endData.getFullYear() - 1);
    queryForm.timeArr = [
      proxy.parseTime(beginDate, "{y}-{m}-{d}"),
      proxy.parseTime(endData, "{y}-{m}-{d}"),
    ];
    queryForm.beginTime = queryForm.timeArr[0];
    queryForm.endTime = queryForm.timeArr[1];
    getData();
  });
};
getCountryData();
onMounted(() => {
  myChart = echarts.init(echartDom.value);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
  margin-bottom: 0px;
}
.box {
  display: flex;
  flex-direction: column;
  padding: 10px;
  font-size: 12px;
  .one,
  .two,
  .three {
    margin-top: 10px;
  }
  .three {
    flex: 1;
    // min-height: 190px;
  }
  .statistics {
    display: flex;
    margin-top: 10px;
    // justify-content: space-around;
    .item {
      margin: 0 20px;
      min-width: 200px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      background-color: #f1f1f1;
      border-radius: 5px;
      padding: 15px;
      .top {
        ._title {
          display: flex;
          align-items: center;
          .icon {
            border-radius: 5px;
            padding: 5px;
            margin-right: 10px;
            .img {
              width: 20px;
              height: 20px;
              vertical-align: middle;
            }
          }
          .icon_one {
            background: #0084ff;
          }
          .icon_two {
            background: #ff9315;
          }
        }
      }
      .bottom {
        margin-top: 15px;
        display: flex;
        // justify-content: space-around;
        .t {
          color: #999999;
          margin-right: 8px;
        }
        .val {
          color: #333333;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
  }
}
.bck {
  background-color: #fff;
  padding: 15px;
}
</style>