<template>
  <ai-list class="list" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
    <ai-title
      slot="title"
      title="商家账单统计"
      isShowBottomBorder>
      <template #rightBtn>
        <div class="title-right">
          <div>
            <label style="width:90px">时间范围：</label>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </div>
          <el-button type="button" :class="'el-button el-button--primary'" @click="beginStat">开始统计</el-button>
          <el-button type="primary" icon="el-icon-download" @click="downloadPicture">下载图片</el-button>
          <json-excel
              :data="skcList"
              :fields="skcJsonFields"
              name="SKC账单数据.xls"
              worksheet="SKC账单数据">
            <el-button type="primary" icon="el-icon-download">下载SKC统计</el-button>
          </json-excel>
          <json-excel
              :data="skuList"
              :fields="skuJsonFields"
              name="SKU账单数据.xls"
              worksheet="SKU账单数据">
            <el-button type="primary" icon="el-icon-download">下载SKU统计</el-button>
          </json-excel>
        </div>
      </template>
    </ai-title>
    <template slot="content">
      <div  id="app-content">
        <ai-card title="数据概览" style="padding-bottom: 40px;">
          <div>
            <el-row :gutter="20">
              <el-col :span="4">
                <div>
                  <el-statistic
                    title="销售额"
                    :value="saleAmount"
                  >
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  <el-statistic
                    title="单数"
                    :value="saleCount"
                  >
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="deductionAmount"
                    title="扣款"
                  >
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="costAmount"
                    title="成本"
                  ></el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="profitAmount"
                    title="利润"
                  ></el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="profitPercent"
                    title="利润率"
                  >
                  <template slot="suffix">%</template>
                </el-statistic>
                </div>
              </el-col>
            </el-row>
          </div>
        </ai-card>
        <ai-card title="趋势分析" style="padding-bottom: 40px;">
          <div>
            <div id="chart1"></div>
          </div>
        </ai-card>
        <div>
          <el-row :gutter="20">
            <el-col :span="12">
              <ai-card title="SKC销售额TOP10排行">
                <ai-table
                  ref="table0"
                  :isShowPagination="false"
                  :tableData="topSaleAmountSkcList"
                  :col-configs="skcColConfigs"
                  style="margin-top: 8px;">
                  <el-table-column slot="amount" label="销售额">
                    <template slot-scope="scope">
                      <div style="color: red">{{ scope.row.amount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitAmount" label="利润">
                    <template slot-scope="scope">
                      <div>{{ scope.row.profitAmount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitPercent" label="利润率">
                    <template slot-scope="scope">
                      <div>{{ scope.row.profitPercent + '%' }}</div>
                    </template>
                  </el-table-column>
                </ai-table>
              </ai-card>
            </el-col>
            <el-col :span="12">
              <ai-card title="SKC利润TOP10排行">
                <ai-table
                  ref="table1"
                  :isShowPagination="false"
                  :tableData="topSaleProfitSkcList"
                  :col-configs="skcColConfigs"
                  style="margin-top: 8px;">
                  <el-table-column slot="amount" label="销售额">
                    <template slot-scope="scope">
                      <div>{{ scope.row.amount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitAmount" label="利润">
                    <template slot-scope="scope">
                      <div style="color: red">{{ scope.row.profitAmount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitPercent" label="利润率">
                    <template slot-scope="scope">
                      <div>{{ scope.row.profitPercent + '%' }}</div>
                    </template>
                  </el-table-column>
                </ai-table>
              </ai-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <ai-card title="SKC利润率TOP10排行">
                <ai-table
                  ref="table2"
                  :isShowPagination="false"
                  :tableData="topProfitPercentSkcList"
                  :col-configs="skcColConfigs"
                  style="margin-top: 8px;">
                  <el-table-column slot="amount" label="销售额">
                    <template slot-scope="scope">
                      <div>{{ scope.row.amount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitAmount" label="利润">
                    <template slot-scope="scope">
                      <div>{{ scope.row.profitAmount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitPercent" label="利润率">
                    <template slot-scope="scope">
                      <div style="color: red">{{ scope.row.profitPercent + '%' }}</div>
                    </template>
                  </el-table-column>
                </ai-table>
              </ai-card>
            </el-col>
            <el-col :span="12">
              <ai-card title="SKU销售额TOP10排行">
                <ai-table
                  ref="table3"
                  :isShowPagination="false"
                  :tableData="topSaleAmountSkuList"
                  :col-configs="skuColConfigs"
                  style="margin-top: 8px;">
                  <el-table-column slot="amount" label="销售额">
                    <template slot-scope="scope">
                      <div style="color: red">{{ scope.row.amount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitAmount" label="利润">
                    <template slot-scope="scope">
                      <div>{{ scope.row.profitAmount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitPercent" label="利润率">
                    <template slot-scope="scope">
                      <div>{{ scope.row.profitPercent + '%' }}</div>
                    </template>
                  </el-table-column>
                </ai-table>
              </ai-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <ai-card title="SKU利润TOP10排行">
                <ai-table
                  ref="table4"
                  :isShowPagination="false"
                  :tableData="topSaleProfitSkuList"
                  :col-configs="skuColConfigs"
                  style="margin-top: 8px;">
                  <el-table-column slot="amount" label="销售额">
                    <template slot-scope="scope">
                      <div>{{ scope.row.amount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitAmount" label="利润">
                    <template slot-scope="scope">
                      <div style="color: red">{{ scope.row.profitAmount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitPercent" label="利润率">
                    <template slot-scope="scope">
                      <div>{{ scope.row.profitPercent + '%' }}</div>
                    </template>
                  </el-table-column>
                </ai-table>
              </ai-card>
            </el-col>
            <el-col :span="12">
              <ai-card title="SKU利润率TOP10排行">
                <ai-table
                  ref="table5"
                  :isShowPagination="false"
                  :tableData="topProfitPercentSkuList"
                  :col-configs="skuColConfigs"
                  style="margin-top: 8px;">
                  <el-table-column slot="amount" label="销售额">
                    <template slot-scope="scope">
                      <div>{{ scope.row.amount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitAmount" label="利润">
                    <template slot-scope="scope">
                      <div>{{ scope.row.profitAmount }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column slot="profitPercent" label="利润率">
                    <template slot-scope="scope">
                      <div style="color: red">{{ scope.row.profitPercent + '%' }}</div>
                    </template>
                  </el-table-column>
                </ai-table>
              </ai-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </template>

    
  </ai-list>
</template>

<script>
import {sendGeiwohuoAPIMessage} from '@/api/chromeApi'
import JsonExcel from 'vue-json-excel'
import { Message } from 'element-ui'
import html2canvas from 'html2canvas'
import { DualAxes } from '@antv/g2plot'

  export default {
    name: 'ExportSaleStatShein',

    data () {
      return {
        storeCode: '',
        productList: [],

        dateRange: [],

        page: 1,
        perPage: 100,
        orderList: [],
        saleAmount: 0.0,
        saleCount: 0,
        costAmount: 0.0,
        profitAmount: 0.0,
        profitPercent: 0.0,
        deductionAmount: 0.0,
        skcList: [],
        skuList: [],

        leftChartData: [],
        rightChartData: [],

        isLoading: false,

        skcColConfigs: [
          { prop: 'skcCode', label: '货号', width: '250px' },
          { slot: 'amount', label: '销售额', align: 'center' },
          { prop: 'quantity', label: '单数', align: 'center' },
          { prop: 'cost', label: '成本', align: 'center'},
          { slot: 'profitAmount', label: '利润', align: 'center' },
          { slot: 'profitPercent', label: '利润率', align: 'center'},
        ],
        skcJsonFields: {
          "SKC": "skc",
          "货号": "skcCode",
          "销售额": "amount",
          "单数": "quantity",
          "成本": "cost",
          "利润": "profitAmount",
          "利润率": "profitPercent",
        },
        skuColConfigs: [
          { prop: 'skuCode', label: '属性集', width: '250px' },
          { slot: 'amount', label: '销售额', align: 'center' },
          { prop: 'quantity', label: '单数', align: 'center' },
          { prop: 'cost', label: '成本', align: 'center'},
          { slot: 'profitAmount', label: '利润', align: 'center' },
          { slot: 'profitPercent', label: '利润率', align: 'center'},
        ],
        skuJsonFields: {
          "SKC": "skc",
          "SKU": "sku",
          "属性集": "skuCode",
          "销售额": "amount",
          "单数": "quantity",
          "成本": "cost",
          "利润": "profitAmount",
          "利润率": "profitPercent",
        },

        chartObj: null
      }
    },

    computed: {
      topSaleAmountSkcList() {
        const list = Object.assign([], this.skcList)
        list.sort((a, b) => b.amount - a.amount)
        return list.slice(0, 10)
      },
      topSaleProfitSkcList() {
        const list = Object.assign([], this.skcList)
        list.sort((a, b) => b.profitAmount - a.profitAmount)
        return list.slice(0, 10)
      },
      topProfitPercentSkcList() {
        const list = Object.assign([], this.skcList)
        list.sort((a, b) => b.profitPercent - a.profitPercent)
        return list.slice(0, 10)
      },
      topSaleAmountSkuList() {
        const list = Object.assign([], this.skuList)
        list.sort((a, b) => b.amount - a.amount)
        return list.slice(0, 10)
      },
      topSaleProfitSkuList() {
        const list = Object.assign([], this.skuList)
        list.sort((a, b) => b.profitAmount - a.profitAmount)
        return list.slice(0, 10)
      },
      topProfitPercentSkuList() {
        const list = Object.assign([], this.skuList)
        list.sort((a, b) => b.profitPercent - a.profitPercent)
        return list.slice(0, 10)
      }
    },

    components: {
      JsonExcel
    },
    mounted () {
      this.$nextTick(() => {
        this.initChart1()
      })
    },
    created () {
      this.$http.post('/api/malluser/info').then(res => {
        if (res.code == 0) {
          this.$store.commit('setUserInfo', res.data)
          if (res.data.flag != 1) {
            Message.error('您的账号未激活或已失效，请激活后使用')
            this.$store.commit('setActiveDlgShow', true)
            return;
          }
          this.getStoreCode()
        }
      })
    },

    methods: {
      initChart1 () {
        /*const data = [
          { year: '1991', value: 3, count: 11, type: '销售额' },
          { year: '1992', value: 4, count: 143, type: '销售额' },
          { year: '1993', value: 3.5, count: 143, type: '销售额' },
          { year: '1991', value: 5, count: 11, type: '利润' },
          { year: '1992', value: 4.9, count: 17, type: '利润' },
          { year: '1993', value: 6, count: 143, type: '利润' }
        ]

        const data1 = [
          { year: '1991', value1: 30.1, count: 11, type: '利润率' },
          { year: '1992', value1: 32.1, count: 143, type: '利润率' },
          { year: '1993', value1: 44.1, count: 143, type: '利润率' }
        ]*/

        this.chartObj = new DualAxes('chart1', {
          data: [this.leftChartData, this.rightChartData],
          xField: 'day',
          yField: ['value', 'value1'],
          yAxis: {
            value: {
              title: {
                text: '金额'
              },
              label: {
                formatter: (value) => {
                  return `${value}元`;
                }
              }
            },
            value1: {
              max: 100,
              title: {
                text: '利润率'
              },
              label: {
                formatter: (value) => {
                  return `${value}%`;
                }
              }
            }
          },
          geometryOptions: [
          {
            geometry: 'line',
            color: ['#FF9A49', '#7A8AA1', '#1EEB73', '#C947AE' ],
            isGroup: true,
            smooth: true, // 是否平滑
            seriesField: 'type'
          },
          {
            geometry: 'line',
            color: ['red' ],
            lineStyle: {
              fill: 'red',
              fillOpacity: 0.5,
              stroke: 'red',
              lineWidth: 4,
              strokeOpacity: 0.7,
              shadowColor: 'black',
              shadowBlur: 10,
              shadowOffsetX: 5,
              shadowOffsetY: 5,
              cursor: 'pointer'
            },
            isStack: true,
            smooth: true, // 是否平滑
            seriesField: 'type', // 指定使用第二个Y轴字段
          }],
        });

        this.chartObj.render();
      },
      async beginStat() {
        if (!this.dateRange) {
          Message.error("请选择统计时间范围")
          return
        }
        this.page = 1
        this.isLoading = true
        this.saleAmount = 0.0
        this.saleCount = 0
        this.costAmount = 0.0
        this.profitAmount = 0.0
        this.profitPercent = 0.0
        this.deductionAmount = 0.0
        this.orderList = []
        this.skcList = []
        this.skuList = []
        this.leftChartData = []
        this.rightChartData = []
        this.chartObj.changeData([this.leftChartData, this.rightChartData])
        this.getOrderList()
      },
      async getStoreCode() {
        let res = await sendGeiwohuoAPIMessage({
          url: 'sso-prefix/auth/getUser?uuid=' + Date.now(),
          method: 'GET'
        })
        if (res.code == '0' && res.msg == "OK") {
          this.storeCode = res.info.merchantCode
          this.getPorductList()
        } else if (res.code == 100004 || res.code == 20302) {
          this.isLoading = false
          this.$store.commit("setSheinAlertShow", true)
        }
      },
      getPorductList() {
        this.$http.post(`/api/skuCost/listAll`, null, {
          params: {
            mallId: this.storeCode
          }
        }).then(res => {
          if (res.code == 0) {
            this.productList = res.data
          }
        })
      },
      async getOrderList() {
        let res = await sendGeiwohuoAPIMessage({
          url: 'gsfs/finance/reportOrder/dualMode/reportOrderList',
          method: 'POST',
          data: {
            "page": this.page,
            "perPage": this.perPage,
            "addTimeStart": this.dateRange[0],
            "addTimeEnd": this.dateRange[1]
          }
        })
        if (res.code == '0' && res.msg == "OK") {
          for (let i = 0; i < res.info.data.length; i++) {
            this.orderList.push(res.info.data[i])
          }
          if (res.info.data.length == this.perPage && (res.info.meta.count > this.perPage*this.page)) {
            this.page++
            await this.sleepSync(200)
            await this.getOrderList()
          } else {
            this.page = 1
            await this.getDetail()
            // 计算SKC维度利润
            for (let i = 0; i < this.skcList.length; i++) {
              this.skcList[i].amount = Math.round(this.skcList[i].amount * 100)/100
              this.skcList[i].cost = Math.round(this.skcList[i].cost * 100)/100
              this.skcList[i].profitAmount = Math.round((this.skcList[i].amount - this.skcList[i].cost)*100)/100
              this.skcList[i].profitPercent = Math.round((this.skcList[i].profitAmount / this.skcList[i].amount)*10000)/100

              this.saleAmount += this.skcList[i].amount
              this.costAmount += this.skcList[i].cost
              this.saleCount += this.skcList[i].quantity
            }
            this.saleAmount = Math.round(this.saleAmount*100)/100
            this.profitAmount = this.saleAmount - this.costAmount
            for (let i = 0; i < this.orderList.length; i++) {
              let item = this.orderList[i]
              let saleAmount = 0
              for (let j = 0; j < item.details.length; j++) {
                // this.saleAmount -= (item.details[j].deduction.funds ? item.details[j].deduction.funds: 0)
                this.deductionAmount += (item.details[j].deduction.funds ? item.details[j].deduction.funds: 0)
                saleAmount += item.details[j].income
              }
              this.leftChartData.push({day: item.addTime, value: Math.round(saleAmount*100)/100, type: '销售额'})
            }
            this.profitPercent = Math.round((this.profitAmount / this.saleAmount)*10000)/100

            // 计算SKU维度利润
            for (let i = 0; i < this.skuList.length; i++) {
              this.skuList[i].amount = Math.round(this.skuList[i].amount * 100)/100
              this.skuList[i].cost = Math.round(this.skuList[i].cost * 100)/100
              this.skuList[i].profitAmount = Math.round((this.skuList[i].amount - this.skuList[i].cost)*100)/100
              this.skuList[i].profitPercent = Math.round(((this.skuList[i].profitAmount / this.skuList[i].amount)*10000))/100
            }

            // 计算每天利润和利润率
            const tempData = Object.assign([], this.leftChartData)
            for (let i = 0; i < this.orderList.length; i++) {
              for (let j = 0; j < tempData.length; j++) {
                if ((tempData[j].type == '销售额') && (tempData[j].day == this.orderList[i].addTime)) {
                  for (let m = 0; m < tempData.length; m++) {
                    if ((tempData[m].type == '成本') && (tempData[m].day == this.orderList[i].addTime)) {
                      this.leftChartData.push({
                        day: this.orderList[i].addTime,
                        value: Math.round((tempData[j].value - tempData[m].value)*100)/100,
                        type: '利润'
                      })

                      this.rightChartData.push({
                        day: this.orderList[i].addTime,
                        value1: Math.round(((tempData[j].value - tempData[m].value)/tempData[j].value)*10000)/100,
                        type: '利润率'
                      })
                    }
                  }
                }
              }
            }
            this.chartObj.changeData([this.leftChartData, this.rightChartData])
            this.isLoading = false
          }
        } else if (res.code == 100004 || res.code == 20302) {
          this.isLoading = false
          this.$store.commit("setSheinAlertShow", true)
        }
      },
      async getDetail() {
        for (let i = 0; i < this.orderList.length; i++) {
          let item = this.orderList[i]
          for (let j = 0; j < item.details.length; j++) {
            if (item.details[j].sourceSystem == "GSFS") {
              let currentPage = 1
              while(true) {
                await this.sleepSync(200)
                let res = await sendGeiwohuoAPIMessage({
                  url: 'gsfs/finance/reportOrder/dualMode/checkOrderList/item',
                  method: 'POST',
                  data: {
                    "page": currentPage,
                    "perPage": this.perPage,
                    "reportOrderNo": item.details[j].reportOrderNo,
                    "secondOrderTypes": [1,2,41,42]
                  }
                })
                if (res.code == '0' && res.msg == "OK") {
                  // calc
                  this.calculate(res.info.data, item.addTime)
                  if (res.info.data.length == this.perPage && (res.info.meta.count > this.perPage*currentPage)) {
                    currentPage ++
                  } else {
                    break
                  }
                } else if (res.code == 100004 || res.code == 20302) {
                  this.isLoading = false
                  this.$store.commit("setSheinAlertShow", true)
                }
              }
            } else if (item.details[j].sourceSystem == "PMS") {
              let currentPage = 1
              while(true) {
                await this.sleepSync(200)
                let res2 = await sendGeiwohuoAPIMessage({
                  url: 'gmpj/finance/incomeAndExpensesDetail',
                  isWWW: true,
                  method: 'POST',
                  data: {
                    "page": currentPage,
                    "perPage": this.perPage,
                    "reportOrderNo": item.details[j].reportOrderNo
                  }
                })

                if (res2.code == '0' && res2.msg == "OK") {
                  // calc
                  this.calculate(res2.info.checkDetailList, item.addTime)
                  if (res2.info.checkDetailList.length == this.perPage && (res2.info.count > this.perPage*currentPage)) {
                    currentPage ++
                  } else {
                    break
                  }
                } else if (res2.code == 100004 || res2.code == 20302) {
                  this.isLoading = false
                  this.$store.commit("setSheinAlertShow", true)
                }
              }
            }
          }
        }
      },
      calculate(data, addTime) {
        for (let i = 0; i < data.length; i++) {
          let exist = false
          let cost = this.getCost(data[i].skuCode) * (data[i].goodsCount || data[i].quantity)

          // 按SKC维度统计
          for (let j = 0; j < this.skcList.length; j++) {
            if (this.skcList[j].skc == (data[i].skc || data[i].skcName)) {
              exist = true
              if (data[i].incomeAndExpensesTypeName == '支出' || data[i].inAndOutName == '支出') {
                this.skcList[j].amount -= data[i].amount || data[i].income
              } else if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
                this.skcList[j].quantity += data[i].goodsCount || data[i].quantity
                this.skcList[j].amount += data[i].amount || data[i].income
                this.skcList[j].cost += cost
              }
              break
            }
          }
          if (!exist) {
            if (data[i].incomeAndExpensesTypeName == '支出' || data[i].inAndOutName == '支出') {
              this.skcList.push({
                skc: (data[i].skc || data[i].skcName),
                skcCode: (data[i].goodsSn || data[i].supplierCode),
                amount: -(data[i].amount || data[i].income),
                quantity: 0,
                cost: 0,
                profitPercent: 0.0,
                profitAmount: 0.0
              })
            } else if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
              this.skcList.push({
                skc: (data[i].skc || data[i].skcName),
                skcCode: (data[i].goodsSn || data[i].supplierCode),
                amount: data[i].amount || data[i].income,
                quantity: data[i].goodsCount || data[i].quantity,
                cost: cost,
                profitPercent: 0.0,
                profitAmount: 0.0
              })
            }
          }

          // 按SKU维度统计
          exist = false
          for (let j = 0; j < this.skuList.length; j++) {
            if (this.skuList[j].sku == data[i].skuCode) {
              exist = true
              if (data[i].incomeAndExpensesTypeName == '支出' || data[i].inAndOutName == '支出') {
                this.skuList[j].amount -= data[i].amount || data[i].income
              } else if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
                this.skuList[j].quantity += data[i].goodsCount || data[i].quantity
                this.skuList[j].amount += data[i].amount || data[i].income
                this.skuList[j].cost += cost
              }
              break
            }
          }
          if (!exist) {
            if (data[i].incomeAndExpensesTypeName == '支出' || data[i].inAndOutName == '支出') {
              this.skuList.push({
                skc: (data[i].skc || data[i].skcName),
                sku: data[i].skuCode,
                skuCode: (data[i].goodsSn || data[i].supplierCode) + '/' + (data[i].suffix || data[i].suffixZh),
                amount: -(data[i].amount || data[i].income),
                quantity: 0,
                cost: 0,
                profitPercent: 0.0,
                profitAmount: 0.0
              })
            } else if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
              this.skuList.push({
                skc: (data[i].skc || data[i].skcName),
                sku: data[i].skuCode,
                skuCode: (data[i].goodsSn || data[i].supplierCode) + '/' + (data[i].suffix || data[i].suffixZh),
                amount: data[i].amount || data[i].income,
                quantity: data[i].goodsCount || data[i].quantity,
                cost: cost,
                profitPercent: 0.0,
                profitAmount: 0.0
              })
            }
          }

          // 计算每天的成本
          exist = false
          for (let x = 0; x < this.leftChartData.length; x++) {
            if ((this.leftChartData[x].day == addTime) && (this.leftChartData[x].type == '成本')) {
              exist = true
              if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
                this.leftChartData[x].value = Math.round((this.leftChartData[x].value + cost)*100)/100
              }
              break
            }
          }
          if (!exist) {
            if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
              this.leftChartData.push({
                day: addTime,
                type: '成本',
                value: cost
              })
            }
          }

          // 计算每天的单数
          exist = false
          for (let x = 0; x < this.leftChartData.length; x++) {
            if ((this.leftChartData[x].day == addTime) && (this.leftChartData[x].type == '单数')) {
              exist = true
              if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
                this.leftChartData[x].value += (data[i].goodsCount || data[i].quantity)
              }
              break
            }
          }
          if (!exist) {
            if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
              this.leftChartData.push({
                day: addTime,
                type: '单数',
                value: (data[i].goodsCount || data[i].quantity)
              })
            }
          }
        }
      },
      getCost(sku) {
        for (let i = 0; i < this.productList.length; i++) {
          if (sku == this.productList[i].sku) {
            return this.productList[i].costPrice
          }
        }
        return 0
      },
      sleepSync(milliseconds) {
        return new Promise(resolve => setTimeout(resolve, milliseconds));
      },
      async downloadPicture() {
        try {
          const element = document.getElementById('app-content');
          const canvas = await html2canvas(element);
          // 创建一个图片元素
          const img = new Image();
          img.src = canvas.toDataURL('image/png');
          // 添加到body中以便下载
          document.body.appendChild(img);
          // 触发下载
          const a = document.createElement('a');
          a.style.display = 'none'
          a.href = img.src;
          a.download = '账单统计(希音).png';
          a.click();
          document.body.removeChild(img);
        } catch (error) {
          console.error('Error saving image:', error);
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .list {
    .title-right {
      display: flex;
      align-items: center;

      & > div:first-child {
        margin-right: 20px;
      }
    }
    ::v-deep.ai-list {
      .ai-list__content--right-wrapper {
        background: transparent;
        box-shadow: none;
        padding: 0!important;
      }
    }

    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;

      .item {
        flex: 1;
        margin-right: 20px;
        padding: 16px 24px;
        background: #FFF;
        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
        border-radius: 4px;

        &:last-child {
          margin-right: 0;
        }

        &:nth-of-type(1) {
          color: #2266ff;
        }

        &:nth-of-type(2) {
          color: #f8b426;
        }
        &:nth-of-type(3) {
          color: #21aa99;
        }
        &:nth-of-type(4) {
          color: #F46;
        }
        &:nth-of-type(5) {
          color: #11A265;
        }
        h2 {
          margin-bottom: 30px;
          font-size: 16px;
          color: #999;
        }

        p {
          font-weight: 600;
          font-size: 28px;
        }
      }
    }
  }
.like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
</style>
