<template>
  <div class="el-overlay">
    <div class="box">
      <div class="box-header">
        <div class="box-title">{{ props.title }}</div>
        <div class="box-btn" @click="close"></div>
      </div>
      <div class="box-content">
        <div class="box-content-chart">
          <div class="pre" @click="prvePage"></div>
          <div class="swiper">
            <transition
              :name="btnName"
              v-for="(item, index) in Math.ceil(chartList.length / 8)"
              :key="item.id"
            >
              <div v-if="index == chartIndex" style="display: flex">
                <div
                  class="box-content-chart-item"
                  v-for="item in chartList.slice(index * 8, 8 * (index + 1))"
                  :key="item.id"
                >
                  <div class="chart">
                    <pieChart :dataMap="item" />
                  </div>
                  <div class="line"></div>
                </div>
              </div>
            </transition>
          </div>

          <div class="next" @click="nextPage"></div>
        </div>
        <div class="box-content-inBound">
          <div class="box-content-inBound-title">
            <span> 入库信息统计 </span>
            <div>
              <ul v-if="storeList">
                <li><span>单位：</span><span>kg</span></li>
                <li>
                  <span>总量：</span><span>{{ storeList.totalWeight }}</span>
                </li>
                <li>
                  <span>品牌总量：</span><span>{{ storeList.brandNum }}</span>
                </li>
                <li>
                  <span>批次数量：</span><span>{{ storeList.batchNum }}</span>
                </li>
              </ul>
              <section class="one">
                <el-date-picker
                  class="picker"
                  v-model="params.year"
                  type="year"
                  placeholder="请选择年份"
                  @change="
                    getAllBrandName(true);
                  "
                />
              </section>
              <section>
                <!-- <el-date-picker
                  v-model="params.month"
                  type="month"
                  placeholder="请选择月份"
                  @change="
                    getAllBrandName();
                  "
                /> -->
                <el-select
                  v-model="params.month"
                  class="m-2"
                  placeholder="请选择月份"
                  clearable
                  @change="getAllBrandName()"
                >
                  <el-option
                    v-for="(item,index) in options"
                    :key="'key' + index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </section>
            </div>
          </div>
          <div class="box-content-inBound-data">
            <div class="left-data">
              <el-collapse v-model="activeNames">
                <el-collapse-item title="品牌" name="1">
                  <div class="brand">
                    <div
                      v-for="item in brandList"
                      :key="item"
                      class="brand-item"
                    >
                      <span>{{ item.slice(0, 2) }}</span>
                      <span>{{ item.slice(2) }}</span>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div class="right-data" id="barChart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  getBrandPercent,
  getRepoDetails,
  getBrandNames,
  getBrandTimeCount,
  getOutBrandPercent,
  getOutRepoDetails,
  getOutBrandNames,
  getOutBrandTimeCount,
} from "@/api/productionInformation/index";
import pieChart from "@/components/echarts/pie";
import { ref, defineProps, onMounted, reactive } from "vue";
import * as echarts from "echarts";
const props = defineProps({
  title: String,
});

const options = ref(['1','2','3','4','5','6','7','8','9','10','11','12'])
const activeNames = ref(["1"]);
const emit = defineEmits(["closeBoundMsg"]);
const chartIndex = ref(0);
const btnName = ref("left");
const chartList = ref([
  {
    id: 11,
    name: "利群",
    type: "(硬珍品)烟丝",
    value: 20,
  },
  {
    id: 12,
    name: "利群",
    type: "(硬珍品)烟丝",
    value: 20,
  },
  {
    id: 13,
    name: "利群",
    type: "(硬珍品)烟丝",
    value: 20,
  },
  {
    id: 14,
    name: "利群",
    type: "(硬珍品)烟丝",
    value: 20,
  },
  {
    id: 15,
    name: "利群",
    type: "(硬珍品)烟丝",
    value: 20,
  },
  {
    id: 16,
    name: "利群",
    type: "(硬珍品)烟丝",
    value: 20,
  },
  {
    id: 17,
    name: "利群",
    type: "(硬珍品)烟丝",
    value: 20,
  },
  {
    id: 18,
    name: "利群",
    type: "(硬珍品)烟丝",
    value: 20,
  },

  {
    id: 19,
    name: "利群",
    type: "(硬珍品)烟丝",
    value: 20,
  },
  {
    id: 20,
    name: "利群",
    type: "(硬珍品)烟丝",
    value: 20,
  },
]);
// 获取占比图列表
function getChartList() {
  if (props.title === "入库信息") {
    getBrandPercent().then((res) => {
      chartList.value = res.result.columnDatas.map((ele) => {
        return {
          type: ele.name,
          value: ele.percentage * 100,
        };
      });
    });
  } else {
    getOutBrandPercent().then((res) => {
      chartList.value = res.result.columnDatas.map((ele) => {
        return {
          type: ele.name,
          value: ele.percentage * 100,
        };
      });
    });
  }
}

const storeList = ref(null);
// 获取仓库细节
function getStoreDetail() {
  if (props.title === "入库信息") {
    getRepoDetails().then((res) => {
      storeList.value = res.result;
    });
  } else {
    getOutRepoDetails().then((res) => {
      storeList.value = res.result;
    });
  }
}

// 参数
const params = reactive({
  year: new Date(),
  month: "",
  brandName: "",
});
// 获取所有的品牌名称
function getAllBrandName(boolean) {
  if (boolean) {
    params.year = params.year.getFullYear().toString();
  } else{
    console.log(params.month.slice(0,-2));
    // params.month = params.month.slice(-2)
  }
  if (props.title === "入库信息") {
    getBrandNames(params).then((res) => {
      brandList.value = res.result;
      params.brandName = brandList.value[0];
      getBrandChart();
    });
  } else {
    getOutBrandNames(params).then((res) => {
      brandList.value = res.result;
      params.brandName = brandList.value[0];
      getBrandChart();
    });
  }
}
// 根据品牌名称获取chart图
function getBrandChart() {
  if (props.title === "入库信息") {
    getBrandTimeCount(params).then((res) => {
      drawBarChart(res.result);
    });
  } else {
    getOutBrandTimeCount(params).then((res) => {
      drawBarChart(res.result);
    });
  }
}
// 下一页
function nextPage() {
  btnName.value = "right";
  if (chartIndex.value == Math.ceil(chartList.value.length / 8) - 1) {
    chartIndex.value = 0;
  } else {
    chartIndex.value++;
  }
}
// 上一页
function prvePage() {
  btnName.value = "left";
  if (chartIndex.value == 0) {
    chartIndex.value = Math.ceil(chartList.value.length / 8) - 1;
  } else {
    chartIndex.value--;
  }
}

function close() {
  emit("closeBoundMsg", -1);
}
const value2 = ref("");
const brandList = ref([
  "兰州(硬珍品)烟丝",
  "利群(长嘴)烟丝",
  "兰州(硬吉祥)烟丝",
  "兰州(硬珍品)烟丝",
  "利群(长嘴)烟丝",
  "兰州(硬吉祥)烟丝",
  "兰州(硬珍品)烟丝",
  "利群(长嘴)烟丝",
  "兰州(硬吉祥)烟丝",
]);
function drawBarChart(res) {
  let dom = document.querySelector("#barChart");
  dom.removeAttribute("_echarts_instance_");
  let myChart;
  myChart = echarts.init(dom);
  let option = {
    grid: {
      left: "5%",
      bottom: "8%",
      right: "2%",
      top: "15%",
    },
    xAxis: {
      data: res.map((ele, index) => {
        return index + 1;
      }),
      axisLine: {
        lineStyle: {
          color: "rgba(56, 72, 89, 1)",
        },
      },
      axisLabel: {
        color: "#fff",
        fontSize: 14,
      },
    },
    yAxis: {
      name: "单位:kg",
      nameTextStyle: {
        color: "#fff",
        fontSize: "1rem",
        padding: [0, 35, 10, 0],
      },
      axisLine: {
        lineStyle: {
          color: "",
        },
      },
      axisLabel: {
        color: "#fff",
        fontSize: "0.875rem",
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(255, 255, 255, 0.20)",
        },
      },
    },
    series: [
      {
        type: "bar",
        barWidth: 16,

        itemStyle: {
          normal: {
            borderColor: "rgba(28, 238, 251, 1)",
            borderWidth: 1,
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(28, 238, 251, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(28, 238, 251, 0)",
                },
              ],
              false
            ),
          },
        },
        data: res.map((ele, index) => {
          return ele;
        }),
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
onMounted(() => {
  getChartList();
  getStoreDetail();
  // 获取所有品牌的种类
  getAllBrandName(true);
});
</script>
<style scoped lang="scss">
.swiper {
  display: flex;
  overflow: hidden;
  transition: all linear 0.2s;
  &-box {
    display: flex;

    // transform: translateX(-100%);
  }
}
.pre,
.next {
  width: vw(36);
  height: vh(36);
  position: absolute;
  cursor: pointer;
  top: 40%;
  background-size: 100% 100%;
}
.pre {
  left: vw(20);
  background-image: url("@/assets/images/dialog/pre.png");
}
.next {
  right: vw(20);
  background-image: url("@/assets/images/dialog/next.png");
}
.box {
  width: vw(1380);
  height: vh(818);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  background-image: url("@/assets/images/dialog/device-dialog2.png");
  background-size: 100% 100%;
  &-header {
    width: 100%;
    height: vh(60);
    font-family: "pangmen";
    display: flex;
    font-size: 1.875rem;
    justify-content: center;
  }
  &-title {
    line-height: vh(60);
  }
  &-btn {
    background-image: url("@/assets/images/dialog/close.png");
    width: vw(34);
    height: vh(34);
    position: absolute;
    right: vw(20);
    top: vh(12);
    cursor: pointer;
  }
  &-content {
    padding: vh(20) vw(20);
    height: vh(818 - 60);
    box-sizing: border-box;
    &-chart {
      padding: vh(55) vw(88) 0 vw(88);
      box-sizing: border-box;
      display: flex;
      position: relative;
      width: 100%;
      height: vh(238);
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(144.00000661611557, 218.00000220537186, 255, 0.5),
          rgba(144.00000661611557, 218.00000220537186, 255, 0.10000000149011612)
        )
        1 1;
      .swiper-box {
        transition: all 0.5s ease-in-out;
      }
      &-item {
        margin-right: vw(52);
        // width: vw(100);
        // height: vh(170);
        .chart {
          width: vw(110);
          height: vh(170);
        }
      }
      &-item:nth-of-type(8n) {
        margin-right: 0;
      }
    }
    &-inBound {
      padding: vh(20) vw(20);
      box-sizing: border-box;
      margin-top: vh(20);
      height: vh(460);
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(144.00000661611557, 218.00000220537186, 255, 0.5),
          rgba(144.00000661611557, 218.00000220537186, 255, 0.10000000149011612)
        )
        1 1;
      &-title {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        height: vh(36);
        line-height: vh(36);
        background-image: url("@/assets/images/dialog/brand-title.png");
        background-size: 100% 100%;
        font-family: "pangmen";
        font-size: 1.375rem;
        padding-left: vw(32);
        box-sizing: border-box;
        margin-bottom: vh(20);
        div {
          align-items: center;
          font-family: normal;
          display: flex;
          ul {
            display: flex;
            li {
              font-size: 1rem;
              margin-right: vw(30);
              span:nth-child(2) {
                color: rgba(28, 238, 251, 1);
                font-weight: 700;
              }
            }
          }
          .one {
            margin-right: vw(12);
          }
          :deep(.el-input) {
            width: vw(160);
            height: vh(28);
          }
          section {
            display: flex;
            align-items: center;
          }
        }
      }
      // 数据板块内容
      &-data {
        display: flex;
        justify-content: space-between;
        .left-data {
          width: vw(200);
          margin-right: vw(20);
          .brand::-webkit-scrollbar {
            display: none;
          }
          .brand {
            height: vh(320);
            overflow-y: scroll;
            overflow-x: hidden;
            .brand-item {
              width: vw(200);
              height: vh(36);
              line-height: vh(36);
              margin: vh(2) 0;
              padding-left: vw(14);
              box-sizing: border-box;
              color: #fff;
              background-image: url("@/assets/images/dialog/down-default.png");
            }
          }
        }
        .right-data {
          width: vw(1100);
          height: vh(370);
        }
      }
    }
  }
}

:deep(.el-collapse-item__header) {
  width: vw(200);
  height: vh(36);
  background-image: url("@/assets/images/dialog/down.png");
  background-size: 100% 100%;
  background-color: transparent;
  color: #fff;
  padding: 0 0 0 0.875rem;
  border: none;
  box-sizing: border-box;
}
:deep(.el-collapse-item__content) {
  background-color: transparent;
}
// :deep(.el-collapse-item__header){
//   height: 1.75rem;
//   padding-left: 0.625rem;
//   font-size: 1rem;
//   box-sizing: border-box;
//   border: none;
//   background-color: transparent;
//   color: rgba(233, 244, 255, 1);
//   background-image: url('@/assets/images/door-device.png');
// }
:deep(.el-collapse-item__content) {
  background-color: transparent;
  border: none !important;
  // font-size: 1rem;
  padding-bottom: 0;
}

:deep(.el-collapse-item__wrap) {
  background-color: transparent;
  border: none;
}
:deep(.el-collapse) {
  border: none;
  //border-color: unset;
}
</style>