<template>
  <div class="content">
    <div style="background-color: white; padding: 20px">
      <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>
    <el-row style="margin-top: 20px" type="flex">
      <el-col :span="15">
        <div style="margin-right: 20px; background-color: white; padding: 20px 0 0 20px; height: 100%">
          <TitleInfo :content="'产品统计'"></TitleInfo>
          <div style="padding-top: 20px; display: flex; flex-wrap: wrap" v-loading="loadingOne">
            <div style="width: 33%; padding: 0 20px 20px 0">
              <div style="padding: 20px; background-color: #f4f4f5; border-radius: 5px; font-size: 12px !important; color: #909399 !important">
                <div style="margin-bottom: 20px; display: flex">
                  <div style="background: #0084ff; padding: 5px">
                    <img style="width: 20px; height: 20px; border-radius: 5px" src="@/assets/images/portrait/iconm_kehd.png" alt="" />
                  </div>
                  <div style="margin-left: 20px; height: 30px; line-height: 30px; font-weight: 700">总计</div>
                </div>
                <div style="display: flex">
                  <div style="width: 50%">
                    <span>新增 (款)</span>
                    <span style="color: black; font-weight: 700; margin-left: 20px">{{ allData.productStatistics.newTotal }}</span>
                  </div>
                  <div style="width: 50%">
                    <span>总计 (款)</span>
                    <span style="color: black; font-weight: 700; margin-left: 20px">{{ allData.productStatistics.total }}</span>
                  </div>
                </div>
              </div>
            </div>
            <template v-if="productType && productType.length > 0">
              <div style="width: 33%; padding: 0 20px 20px 0" v-for="(item, index) in productType" :key="index">
                <div style="padding: 20px; background-color: #f4f4f5; border-radius: 5px; font-size: 12px !important; color: #909399 !important">
                  <div style="margin-bottom: 20px; display: flex">
                    <div style="background: #0084ff; padding: 5px">
                      <img style="width: 20px; height: 20px; border-radius: 5px" src="@/assets/images/portrait/iconm_kehd.png" alt="" />
                    </div>
                    <div style="margin-left: 20px; height: 30px; line-height: 30px; font-weight: 700">{{ item.label }}</div>
                  </div>
                  <div style="display: flex">
                    <div style="width: 50%">
                      <span>新增 (款)</span>
                      <span style="color: black; font-weight: 700; margin-left: 20px">{{ getNum(item, "typeNewTotal") }}</span>
                    </div>
                    <div style="width: 50%">
                      <span>总计 (款)</span>
                      <span style="color: black; font-weight: 700; margin-left: 20px">{{ getNum(item, "typeTotal") }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div style="background-color: white; padding: 20px; height: 100%">
          <TitleInfo :content="'产品分布'"></TitleInfo>
          <div ref="mainOne" style="height: calc(100% - 24px)"></div>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px" type="flex">
      <el-col :span="12">
        <div style="margin-right: 20px; background-color: white; padding: 20px; height: 100%">
          <TitleInfo :content="'产品类型排行'"></TitleInfo>
          <div style="padding-top: 20px" v-loading="loadingTwo">
            <el-table
              :data="allData.productTypeRanking"
              :default-sort="{ prop: 'contractQuantity', order: 'descending' }"
              style="width: 100%"
              max-height="30vh"
              @sort-change="sortChangeTwo">
              <el-table-column label="产品类型" prop="name" min-width="140" />
              <el-table-column label="销售量" prop="contractQuantity" sortable width="120" />
              <el-table-column label="销售额" prop="contractAmount" sortable width="120" />
              <el-table-column label="采购量" prop="purchaseQuantity" sortable width="120" />
              <el-table-column label="采购额" prop="purchaseAmount" sortable width="120" />
              <!-- <el-table-column label="生产总量" prop="name" sortable width="120" /> -->
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="background-color: white; padding: 20px; height: 100%">
          <TitleInfo :content="'产品排行'"></TitleInfo>
          <div style="padding-top: 20px" v-loading="loadingThree">
            <el-table
              :data="allData.productRanking"
              :default-sort="{ prop: 'contractQuantity', order: 'descending' }"
              style="width: 100%"
              max-height="30vh"
              @sort-change="sortChangeThree">
              <el-table-column label="产品名称" prop="name" min-width="140" />
              <el-table-column label="销售量" prop="contractQuantity" sortable width="120" />
              <el-table-column label="销售额" prop="contractAmount" sortable width="120" />
              <el-table-column label="采购量" prop="purchaseQuantity" sortable width="120" />
              <el-table-column label="采购额" prop="purchaseAmount" sortable width="120" />
              <!-- <el-table-column label="生产总量" prop="name" sortable width="120" /> -->
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <div style="margin-top: 20px; background-color: white; padding: 20px">
      <TitleInfo :content="'销售趋势'"></TitleInfo>
      <div ref="mainTwo" style="height: 40vh"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import TitleInfo from "@/components/TitleInfo/index.vue";
import { reactive, ref } from "vue";

const { proxy } = getCurrentInstance();
const productType = ref([]);
const countryData = ref([]);
const queryForm = reactive({
  countryId: "",
  beginTime: "",
  endTime: "",
  timeArr: [],
});
const getDict = () => {
  proxy.getDictOne(["product_type"]).then((res) => {
    productType.value = res["product_type"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
  });
};
getDict();
const getCountryData = () => {
  proxy.post("/areaInfo/list", { parentId: "0" }).then((res) => {
    countryData.value = res;
    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();
const onQuery = () => {
  queryForm.beginTime = queryForm.timeArr[0];
  queryForm.endTime = queryForm.timeArr[1];
  getData();
};
const loadingOne = ref(null);
const loadingTwo = ref(null);
const loadingThree = ref(null);
const allData = reactive({
  productStatistics: {
    newTotal: "",
    total: "",
    typeList: [],
  },
  productDistribution: [],
  productTypeRanking: [],
  productRanking: [],
});
const getNum = (item, label) => {
  let text = "";
  if (allData.productStatistics.typeList && allData.productStatistics.typeList.length > 0) {
    let data = allData.productStatistics.typeList.filter((row) => row.type === item.value);
    if (data && data.length > 0) {
      text = data[0][label];
    }
  }
  return text;
};
const optionOne = reactive({
  data: {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "产品分布",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  },
});
const optionTwo = reactive({
  data: {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["月度销售额", "月成交单数"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "月度销售额",
        type: "line",
        data: [],
      },
      {
        name: "月成交单数",
        type: "line",
        data: [],
      },
    ],
  },
});
const mainOne = ref(null);
const mainTwo = ref(null);
let myChartOne = null;
let myChartTwo = null;
const productTypeRankingProp = ref("contractQuantity");
const productTypeRankingOrder = ref("descending");
const productTypeRankingSort = ref({
  contractQuantity: 10,
  contractAmount: 20,
  purchaseQuantity: 30,
  purchaseAmount: 40,
});
const productRankingProp = ref("contractQuantity");
const productRankingOrder = ref("descending");
const productRankingSort = ref({
  contractQuantity: 10,
  contractAmount: 20,
  purchaseQuantity: 30,
  purchaseAmount: 40,
});
const orderBy = ref({
  ascending: 10,
  descending: 20,
});
const getData = () => {
  loadingOne.value = true;
  proxy.post("/productInfo/productStatistics", queryForm).then(
    (res) => {
      allData.productStatistics = res;
      setTimeout(() => {
        loadingOne.value = false;
      }, 200);
    },
    (err) => {
      console.log(err);
      setTimeout(() => {
        loadingOne.value = false;
      }, 200);
    }
  );
  proxy.post("/productInfo/productDistribution", queryForm).then((res) => {
    if (res && res.length > 0) {
      optionOne.data.series[0].data = res.map((item) => {
        return {
          value: item.count,
          name: item.name,
          type: item.type,
        };
      });
    } else {
      optionOne.data.series[0].data = [];
    }
    myChartOne.setOption(optionOne.data);
    myChartOne.resize();
  });
  proxy.post("/contract/saleTrend", queryForm).then((res) => {
    if (res && res.length > 0) {
      optionTwo.data.xAxis.data = res.map((item) => {
        return item.month;
      });
      optionTwo.data.series[0].data = res.map((item) => {
        return item.contractAmount;
      });
      optionTwo.data.series[1].data = res.map((item) => {
        return item.contractQuantity;
      });
    } else {
      optionTwo.data.xAxis.data = [];
      optionTwo.data.series[0].data = [];
      optionTwo.data.series[1].data = [];
    }
    console.log(optionTwo.data);
    myChartTwo.setOption(optionTwo.data);
    myChartTwo.resize();
  });
  getProductTypeRanking();
  getProductRanking();
};
const sortChangeTwo = ({ prop, order }) => {
  productTypeRankingProp.value = prop;
  productTypeRankingOrder.value = order;
  getProductTypeRanking();
};
const sortChangeThree = ({ prop, order }) => {
  productRankingProp.value = prop;
  productRankingOrder.value = order;
  getProductRanking();
};
const getProductTypeRanking = () => {
  loadingTwo.value = true;
  let query = proxy.deepClone(queryForm);
  query.pageNum = 1;
  query.pageSize = 10;
  query.sort = productTypeRankingSort.value[productTypeRankingProp.value] || 10;
  query.orderBy = orderBy.value[productTypeRankingOrder.value] || 20;
  proxy.post("/productInfo/productTypeRanking", query).then(
    (res) => {
      allData.productTypeRanking = res;
      setTimeout(() => {
        loadingTwo.value = false;
      }, 200);
    },
    (err) => {
      console.log(err);
      setTimeout(() => {
        loadingTwo.value = false;
      }, 200);
    }
  );
};
const getProductRanking = () => {
  loadingThree.value = true;
  let query = proxy.deepClone(queryForm);
  query.pageNum = 1;
  query.pageSize = 10;
  query.sort = productRankingSort.value[productRankingProp.value] || 10;
  query.orderBy = orderBy.value[productRankingOrder.value] || 20;
  proxy.post("/productInfo/productRanking", query).then(
    (res) => {
      allData.productRanking = res.rows;
      setTimeout(() => {
        loadingThree.value = false;
      }, 200);
    },
    (err) => {
      console.log(err);
      setTimeout(() => {
        loadingThree.value = false;
      }, 200);
    }
  );
};
onMounted(() => {
  myChartOne = echarts.init(mainOne.value);
  window.addEventListener("resize", () => {
    myChartOne.resize();
  });
  myChartTwo = echarts.init(mainTwo.value);
  window.addEventListener("resize", () => {
    myChartTwo.resize();
  });
});
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
:deep(.el-form-item) {
  margin-bottom: 0px;
}
</style>
