<template>
  <div class="app-container">
    <!-- 套表 Item -->
    <div class="excel_charts_item container"
      v-for="item, index in platformSalesList">
      <!-- 查询表单 -->
      <el-form :model="item.queryParams"
        inline
        label-width="68px"
        v-show="item.showSearch">
        <el-form-item label="商品标签">
          <el-select v-model="item.queryParams.prdTagId"
            :disabled="!!item.queryParams.seriesId || !!item.queryParams.prdCode"
            placeholder="选择标签"
            clearable
            filterable
            @change="prdTagChange(item)">
            <el-option v-for="o in prdTagList"
              :key="o.prdTagId"
              :label="o.prdTagName"
              :value="o.prdTagId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系列名称">
          <el-select v-model="item.queryParams.seriesId"
            :disabled="!!item.queryParams.prdTagId"
            placeholder="选择名称"
            clearable
            filterable
            @change="seriesChange(item)">
            <el-option v-for="o in allSeriesList"
              :key="o.seriesId"
              :label="o.seriesName"
              :value="o.seriesId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-select v-model="item.queryParams.prdCode"
            :disabled="!!item.queryParams.prdTagId"
            placeholder="选择名称"
            clearable
            filterable
            @change="prdChange(item)">
            <el-option v-for="o in item.prdList"
              :key="o.prdCode"
              :label="o.prdName"
              :value="o.prdCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="del_excel_charts"
          v-if="index !== 0">
          <el-button type="danger"
            icon="Delete"
            @click="platformSalesList.splice(index, 1)">删除表</el-button>
        </el-form-item>
      </el-form>
      <!-- 操作工具 -->
      <el-row :gutter="10"
        class="mb8">
        <right-toolbar v-model:showSearch="item.showSearch"
          @queryTable="getSaleList(item)"
          :columns="item.columns">
          <el-tooltip class="item"
            effect="dark"
            :content="item.showTable ? '隐藏表格' : '显示表格'"
            placement="top">
            <el-button circle
              icon="View"
              @click="item.showTable = !item.showTable" />
          </el-tooltip>
          <el-tooltip class="item"
            effect="dark"
            :content="item.showEcharts ? '隐藏图表' : '显示图表'"
            placement="top">
            <el-button circle
              icon="Coin"
              @click="item.showEcharts = !item.showEcharts" />
          </el-tooltip>
        </right-toolbar>
      </el-row>
      <!-- 单品销售数据 -->
      <el-table v-loading="item.loading"
        :data="item.saleList"
        show-summary
        :summary-method="getSummaries"
        border
        v-show="item.showTable">
        <el-table-column label="平台"
          align="center"
          prop="platformId"
          min-width="110px"
          sortable
          :formatter="formatterPlatForm"></el-table-column>
        <!-- <el-table-column label="CNY目标" prop="targetSaleSum" align="center"
          :formatter="(row, cell, cellValue) => convertToUnit(cellValue)" min-width="145px" sortable
          v-if="item.columns[1].visible"></el-table-column> -->
        <el-table-column label="YTD"
          align="center"
          v-if="item.columns[0].visible">
          <!-- <el-table-column label="货需量"
            prop="YTD.goodsSupplyDemandCount"
            align="center"
            min-width="100px"
            sortable
            :formatter="(row, cell, cellValue) => toThousands(cellValue)"></el-table-column> -->
          <el-table-column label="销售量"
            prop="YTD.saleNum"
            align="center"
            min-width="100px"
            sortable
            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
              value: cellValue,
              round: false
            })"></el-table-column>
          <el-table-column label="销售额"
            prop="YTD.salePrice"
            align="center"
            min-width="100px"
            sortable
            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
              value: cellValue,
              round: false
            })">
          </el-table-column>
          <!-- <el-table-column label="达成率"
            prop="YTD.needNumPercentage"
            align="center"
            min-width="100px"
            sortable
            :formatter="(row, cell, cellValue) => cellValue + '%'">
          </el-table-column> -->
        </el-table-column>

        <el-table-column label="MTD"
          align="center"
          v-if="item.columns[1].visible">
          <!-- <el-table-column label="货需量"
            prop="YTD.goodsSupplyDemandCount"
            align="center"
            min-width="100px"
            sortable
            :formatter="(row, cell, cellValue) => toThousands(cellValue)"></el-table-column> -->
          <el-table-column label="销售量"
            prop="MTD.saleNum"
            align="center"
            min-width="100px"
            sortable
            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
              value: cellValue,
              round: false
            })"></el-table-column>
          <el-table-column label="销售额"
            prop="MTD.salePrice"
            align="center"
            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
              value: cellValue,
              round: false
            })"
            min-width="100px"
            sortable></el-table-column>
          <!-- <el-table-column label="达成率"
            prop="MTD.needNumPercentage"
            align="center"
            min-width="100px"
            sortable
            :formatter="(row, cell, cellValue) => cellValue + '%'">
          </el-table-column> -->
        </el-table-column>

        <el-table-column label="近7日"
          align="center"
          v-if="item.columns[2].visible">
          <el-table-column label="销售量"
            prop="week.saleNum"
            align="center"
            min-width="100px"
            sortable
            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
              value: cellValue,
              round: false
            })"></el-table-column>
          <el-table-column label="销售额"
            prop="week.salePrice"
            align="center"
            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
              value: cellValue,
              round: false
            })"
            min-width="100px"
            sortable></el-table-column>
        </el-table-column>

        <el-table-column label="昨日"
          align="center"
          v-if="item.columns[3].visible">
          <el-table-column label="日总销量"
            prop="last.saleNum"
            align="center"
            min-width="120px"
            sortable
            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
              value: cellValue,
              round: false
            })"></el-table-column>
          <el-table-column label="日总额"
            prop="last.salePrice"
            align="center"
            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
              value: cellValue,
              round: false
            })"
            min-width="100px"
            sortable></el-table-column>
        </el-table-column>
      </el-table>
      <!-- 图表展示 -->
      <div class="echarts_wrap"
        v-show="item.showEcharts">
        <!-- 搜索 -->
        <div v-show="item.showSearch">
          <el-form inline>
            <el-form-item>
              <el-radio v-for="obj in item.chartData.typeList"
                v-model="item.chartData.title"
                :label="obj.name"
                @change="dataTypeChangeFn(item, obj)"
                v-removeConsoleError>{{ obj.name }}</el-radio>
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="item.queryParams.date"
                style="margin-left: 20px;"
                type="daterange"
                align="right"
                unlink-panels
                :clearable="false"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :shortcuts="pickerOptions"
                @change="getSaleList(item)">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <!-- 折线图（动态 class：默认上来加载时给一个比较大的高度 -->
        <div class="chat_wrap"
          :class="{ 'chat_height': item.loading }">
          <line-chart v-if="item.chartData?.saleCount.length"
            :chartData="item.chartData"
            :showTool="item.showSearch"></line-chart>
          <no-data v-else-if="!item.loading">暂无数据，图表无法显示，换个查询条件</no-data>
        </div>
      </div>
    </div>
    <!-- 新增套表 -->
    <div class="more_excel_echarts"
      @click="createTableAndECharts">新增套表</div>
    <!-- 上传货需弹框 -->
    <el-dialog title="上传货需"
      v-model="uploadDemandImportVisible"
      draggable>
      <el-form :model="uploadDemand"
        label-width="150px">
        <el-form-item label="年份">
          <el-date-picker v-model="uploadDemand.year"
            type="year"
            placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="货需表格">
          <el-upload class="upload-demo"
            drag
            action="#"
            :http-request="uploadDemandImportFn">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">货需表格模板，拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip">只能上传 excel 文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            @click="submitUploadDemandFn">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 悬浮球抽屉工具箱 -->
    <levitated-sphere>
      <el-button type="primary"
        @click="createTableAndECharts">新增套表</el-button>
      <!-- <el-button type="warning"
        @click="uploadDemandImportVisible = true">上传货需</el-button> -->
      <el-button type="danger"
        @click="reset">重置本页</el-button>
    </levitated-sphere>
  </div>
</template>

<script setup>
import { getSaleListAPI, uploadDemandImportAPI, getSeriesListAPI, getProductListAPI, getSeriesGoodsTagListAPI, getPrdTagDetailAPI } from '@/api'
import { getObjValueByPath, formatNumberWithUnit, deepClone, parseTime } from '@/utils';
import LineChart from './LineChart.vue';
import gsap from 'gsap'
import { useDatePickerOptions } from '@/hooks'

const { proxy } = getCurrentInstance();
const dict = proxy.useDict("sale_platform")
const allSeriesList = ref([]) // 总系列列表
const prdTagList = ref([]) // 总商品标签列表
const platformSalesList = ref([]) // 平台销售数据列表
const platformSalesObj = reactive({ // 平台销售数据对象（一套表图数据对应一个对象）
  queryParams: { // 查询参数
    prdTagId: undefined,
    seriesId: undefined,
    prdCode: undefined,
    date: []
  },
  loading: false,
  showSearch: true,
  showTable: true,
  showEcharts: true,
  saleList: [], // 销售表格数据
  prdList: [], // 商品列表
  columns: [
    // { key: 0, label: `平台`, visible: true },
    // { key: 1, label: `CNY目标`, visible: true },
    { key: 2, label: `YTD`, visible: true },
    { key: 3, label: `MTD`, visible: true },
    { key: 4, label: `近7日`, visible: true },
    { key: 5, label: `日销量和总额`, visible: true }
  ],
  chartData: { // 图表相关数据
    saleCount: [], // 销售量源数据
    salePrice: [], // 销售额源数据
    typeList: [{ // 图表数据类型列表
      name: '销售量',
      prop: 'saleCount',
      yName: '个'
    }, {
      name: '销售额',
      prop: 'salePrice',
      yName: '元'
    }],
    // 图表内部需要的属性
    title: '销售量', // 图表标题
    yName: '个', // y 轴上名字
    data: [], // 图表现在展示用数据
    xData: [], // 日期（用于 x 轴）
  }
})
const { recentPickerOptions: pickerOptions } = useDatePickerOptions()
const uploadDemandImportVisible = ref(false)
const uploadDemand = reactive({ // 上传货需数据对象
  // 默认设置当前年份
  year: new Date(),
  file: ''
})


// 商品标签列表
const getSeriesGoodsTagList = async () => {
  const { data: { total } } = await getSeriesGoodsTagListAPI()
  const { data: { rows } } = await getSeriesGoodsTagListAPI({
    pageSize: total
  })
  prdTagList.value = rows
}

// 系列列表
const getSeriesList = async () => {
  const res = await getSeriesListAPI()
  allSeriesList.value = res.data
}

// 商品列表
const getProductList = async (item) => {
  const { data: { total } } = await getProductListAPI({ seriesId: item.queryParams.seriesId })
  const res = await getProductListAPI({ seriesId: item.queryParams.seriesId, pageSize: total })
  item.prdList = res.data.rows
}

// 销售表格数据
const getSaleList = async (item) => {
  item.loading = true
  const res = await getSaleListAPI({
    seriesId: item.queryParams.seriesId,
    prdCode: item.queryParams.prdCode,
    prdCodes: item.queryParams.prdCodes,
    dateStart: item.queryParams.date ? parseTime(item.queryParams.date[0], '{y}/{m}/{d}') : '',
    dateEnd: item.queryParams.date ? parseTime(item.queryParams.date[1], '{y}/{m}/{d}') : ''
  })

  // 后台字段和结构与前端不太相符合，处理数据↓
  // 数据表格（默认只有 T - 1 数据，无法根据传递的时间改变数据，只有传递不同系列和商品才会改变）
  item.saleList = []
  res.data.table.forEach((o, index) => {
    item.saleList.push({
      platformId: o.platformId,
      targetSaleSum: o.targetSaleSum,
      YTD: {
        saleNum: o.saleCountY,
        salePrice: o.saleSumY,
        goodsSupplyDemandCount: o.goodsSupplyDemandCountY,
        // needNumPercentage: (formatNumberWithUnit(o.saleCountY, o.goodsSupplyDemandCountY) * 100).toFixed(2)
        needNumPercentage: o.saleCountY
      },
      MTD: {
        saleNum: o.saleCountM,
        salePrice: o.saleSumM,
        goodsSupplyDemandCount: o.goodsSupplyDemandCountM,
        // needNumPercentage: (formatNumberWithUnit(o.saleCountY, o.goodsSupplyDemandCountY) * 100).toFixed(2)
        needNumPercentage: o.saleCountY
      },
      week: {
        saleNum: o.saleCountW,
        salePrice: o.saleSumW
      },
      last: {
        saleNum: o.saleCountYs,
        salePrice: o.saleSumYs
      },
    })
  })

  // 图表数据
  item.chartData.saleCount = []
  item.chartData.salePrice = []
  Object.keys(res.data.chart).forEach((key, index) => {
    // key 是平台的 id
    // 统计销售量
    const countObj = {
      name: dict.sale_platform.value[key]?.label,
      data: res.data.chart[key].map(obj => obj.saleCount),
    }
    item.chartData.saleCount.push(countObj)
    // 统计销售额
    const priceObj = {
      name: dict.sale_platform.value[key]?.label,
      data: res.data.chart[key].map(obj => obj.saleSum),
    }
    item.chartData.salePrice.push(priceObj)
    // 统计日期（只需要执行一次，因为每个系列数据里的日期值都相同）
    if (index === 0) {
      item.chartData.xData = res.data.chart[key].map(obj => parseTime(obj.date, '{m}-{d}'))
    }
  })
  // 默认先显示销售量数据

  item.chartData.data = item.chartData.saleCount
  item.loading = false
}

// 格式化平台名字
const formatterPlatForm = (row, cell, cellValue) => {
  return dict.sale_platform.value.find(o => o.value == cellValue)?.label
}

// 表格合计
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    // 只有数值类型才会进入到合计
    const values = data.map(item => {
      return parseFloat(getObjValueByPath(item, column.property))
    });
    if (!values.every(value => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = parseFloat(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
      if (column.property.includes('saleNum')) {
        // 带 Num 是量（后台字段在上面被我处理成其他字段名字了）
        return sums[index] = formatNumberWithUnit({
          value: sums[index],
          round: false
        })
      } else if (column.property.includes('salePrice')) {
        // 带 Price 是价
        return sums[index] = formatNumberWithUnit({
          value: sums[index],
          round: false
        })
      } else if (column.property.includes('targetSaleSum')) {
        // 合计销售目标
        return sums[index] = formatNumberWithUnit({
          value: sums[index],
          round: false
        })
      } else if (column.property.includes('goodsSupplyDemandCount')) {
        // 货需量
        return sums[index] = formatNumberWithUnit({
          value: sums[index],
          round: false
        })
      } else if (column.property.includes('needNumPercentage')) {
        // 达成率
        return sums[index] = (sums[index] / data.length).toFixed(2) + '%'
      }
      sums[index] = sums[index];
    } else {
      sums[index] = 'N/A';
    }
  });

  return sums;
}

// 商品标签改变
const prdTagChange = async (item) => {
  // 获取标签对应下属的商品 code 集合
  const response = await getPrdTagDetailAPI({
    prdTagId: item.queryParams.prdTagId
  })
  const prdCodes = response.data.map(o => o.prdCode)
  item.queryParams.prdCodes = prdCodes

  // 查询销售数据
  getSaleList(item)
}

// 系列改变时
const seriesChange = async (item) => {
  // 商品清空重新选择
  item.queryParams.prdCode = ''
  // 对应商品列表改变
  await getProductList(item)
  // 对应销售数据改变
  getSaleList(item)
}

// 商品改变时
const prdChange = async (item) => {
  // 对应销售数据改变
  getSaleList(item)
}

// 创建套表
const createTableAndECharts = () => {
  let item = reactive(deepClone(toRaw(platformSalesObj)))
  // 第一套表，默认填写日期
  if (platformSalesList.value.length === 0) {
    item.queryParams.date = [new Date().setDate(1), new Date().setDate((new Date().getDate() - 1))]
  } else {
    // 非第一套图表，滚动到底
    nextTick(() => {
      gsap.to(document.documentElement, {
        duration: 1,
        scrollTop: document.querySelector('.main-container').scrollHeight
      })
    })
  }
  platformSalesList.value.push(item)
  return item
}

// 折线图数据类型改变
const dataTypeChangeFn = (item, obj) => {
  item.chartData.data = item.chartData[obj.prop]
  item.chartData.yName = obj.yName
}
// 重置本页
const reset = () => {
  platformSalesList.value = []
  init()
}
// 上传货需文件选择
const uploadDemandImportFn = (obj) => {
  uploadDemand.file = obj.file
}
// 确认上传货需
const submitUploadDemandFn = async () => {
  const fd = new FormData()
  fd.append('file', uploadDemand.file)
  fd.append('year', uploadDemand.year.getFullYear())
  const res = await uploadDemandImportAPI(fd)
  proxy.$modal.msgSuccess(res.msg)
  uploadDemandImportVisible.value = false
}

const init = async () => {
  // 默认创建第一个表格
  const item = createTableAndECharts()
  // 获取销售数据列表
  await getSaleList(item);
  // 获取商品标签集合列表
  await getSeriesGoodsTagList()
  // 获取所有系列列表
  await getSeriesList()
  // 获取所有商品列表
  await getProductList(item)
}
init()
</script>
<style scoped
  lang="scss">
  .app-container {

    /* 套表 */
    .excel_charts_item {
      margin-top: 20px;

      /* 图容器 */
      .echarts_wrap {
        margin-top: 20px;

        .chat_wrap {
          margin-top: 20px;
        }

        .chat_height {
          height: 400px;
        }
      }

      /* 删除套表 */
      .del_excel_charts {
        float: right;
        margin-top: -5px;
        margin-right: 0;
      }

      /* 第一个套表无需上外边距 */
      &:nth-child(1) {
        margin-top: 0;
      }

      .el-form-item {
        margin-bottom: 0;
      }
    }

    /* 新增套表 */
    .more_excel_echarts {
      padding: 10px 15px;
      text-align: center;
      font-size: calc(var(--xl-fontsize));
      background-color: var(--el-gray-3);
      margin-top: 10px;
      cursor: context-menu;
      width: 100%;
    }
  }

  /* 组件定制样式 */
  ::v-deep(.el-table) {

    /* 表格高度缩小一点 */
    .el-table__cell {
      padding: 5px 0 !important;
    }

    /* 表格头部标题换行显示 */
    .cell {
      white-space: pre-line;
    }
  }


  /* 网页刚加载时表格最右侧的竖线去掉 */
  .el-table--group::after,
  .el-table--border::after {
    width: 0 !important;
  }

  /* 表格左上角标题 */
  ::v-deep(.name_title) {
    .cell {
      font-size: 18px;
      color: rgba(255, 0, 0, 0.437);
    }
  }



</style>