<template>
  <div style="height: 100%; padding: 5px; max-width: 100%">
    <Modal
      v-model="btDataShow"
      title="自定义时间区间">
      <DatePicker type="daterange" v-model="btDate" placeholder="请选择" style="width: 100%" confirm
                  @on-ok="btOk"></DatePicker>
      <div slot="footer"></div>
    </Modal>
    <Row style="height: 50%;">
      <Col :span="8">
        <Card style="height: 100%;margin: 2px">
          <Spin size="large" v-if="loading" fix ></Spin>
          <div>
            <div class="top-card" style="font-size: unset">
              <DatePicker ref="date-picker" @on-change="onChangeDate" :editable="false" v-model="date"
                          :clearable="false"
                          placement="bottom-start" type="month" :format="format" :options="dateOption"
                          placeholder="Select date" style="width: 100%;"></DatePicker>
            </div>

            <div class="top-card">
              <div class="top-card-title">销售利润</div>
              <div class="top-card-icon">
                <Poptip trigger="hover" content="销售利润=收入-成本">
                  <Icon type="ios-help-circle-outline" size="20"/>
                </Poptip>
              </div>
              <div class="top-card-money">
                <span class="top-card-money-num">￥{{ toFixAndToLocaleString(profit.profit || 0) }}</span>
              </div>
              <div style="clear: both;"/>
            </div>

            <div class="top-card">
              <div class="top-card-title">销售利润率</div>
              <div class="top-card-icon">
                <Poptip trigger="hover" content="销售利润率=(收入-成本)/收入×100%">
                  <Icon type="ios-help-circle-outline" size="20"/>
                </Poptip>
              </div>
              <div class="top-card-percent">{{ profit.profitRate || 0 }}%</div>
              <div style="clear: both;"/>
            </div>

            <div class="top-card">
              <div class="top-card-bottom-text">
                <div class="top-card-bottom-text-title">销售总额</div>
                <span class="top-card-bottom-text-num">￥{{ toFixAndToLocaleString(profit.outbound || 0) }}</span>
                <div style="clear: both;"/>
              </div>
            </div>
            <div class="top-card">
              <div class="top-card-bottom-text">
                <div class="top-card-bottom-text-title">成本总额</div>
                <span class="top-card-bottom-text-num">￥{{ toFixAndToLocaleString(profit.inbound || 0) }}</span>
                <div style="clear: both;"/>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col :span="16" class="card-view2">
        <Card style="height: 100%;margin: 2px">
          <Spin size="large" v-if="loading" fix ></Spin>
          <div style="height: 100%;">
            <div class="card-view-header2">
              <div class="card-view-header-name2">
                销售毛利
                <span class="card-view-header-name3" v-if="byDate=='true'">（近一月）</span>
                <span class="card-view-header-name3" v-else>（近一年）</span>
              </div>
              <div>
                <DkButton color="#f0f0f0" @click="clickProfitDate('true')"
                          :style="'margin-right: 10px;' + (byDate=='true'?'color: #5c91ce; border: 1px solid #5c91ce':'color: black')">
                  按日
                </DkButton>
                <DkButton color="#ecf1fa" @click="clickProfitDate('false')"
                          :style="!byDate || byDate=='false'?'color: #5c91ce; border: 1px solid #5c91ce':'color: black'">
                  按月
                </DkButton>
              </div>
            </div>

            <div style="height: 100%" id="echartsProfitDate"/>
          </div>
        </Card>
      </Col>
    </Row>

    <Row style="height: 50%;">
      <Col :span="8" class="card-view2">
        <Card style="height: 100%;margin: 2px">
          <Spin size="large" v-if="loading" fix ></Spin>
          <div class="card-view-header">
            <div class="card-view-header-name">
              部门利润排行
            </div>
            <div>
              <Button class="card-view-header-tags-tag" ghost type="text" @click="toDetail('org-rank')">详情
                <Icon type="ios-arrow-forward"/>
              </Button>
            </div>
          </div>
          <div style="height: 80%;" id="echartsProfitOrg"/>
        </Card>
      </Col>
      <Col :span="8" class="card-view2">
        <Card style="height: 100%;margin: 2px">
          <Spin size="large" v-if="loading" fix ></Spin>
          <div class="card-view-header">
            <div class="card-view-header-name">
              业务员利润排行
            </div>
            <div>
              <Button class="card-view-header-tags-tag" ghost type="text" @click="toDetail('staff-rank')">详情
                <Icon type="ios-arrow-forward"/>
              </Button>
            </div>
          </div>
          <div style="height: 80%;" id="echartsProfitStaff"/>
        </Card>
      </Col>
      <Col :span="8" class="card-view2">
        <Card style="height: 100%;margin: 2px">
          <Spin size="large" v-if="loading" fix ></Spin>
          <div class="card-view-header">
            <div class="card-view-header-name">
              商品利润排行
            </div>
            <div>
              <Button class="card-view-header-tags-tag" ghost type="text" @click="toDetail('sku-rank')">详情
                <Icon type="ios-arrow-forward"/>
              </Button>
            </div>
          </div>
          <div style="height: 80%;" id="echartsProfitSku"/>
        </Card>
      </Col>
    </Row>

    <Drawer :title="detailTitle" width="600" :closable="false" v-model="detailFlag">
      <OrgRank v-show="type === 'org-rank'" ref="org-rank"/>
      <StaffRank v-show="type === 'staff-rank'" ref="staff-rank"/>
      <SkuRank v-show="type === 'sku-rank'" ref="sku-rank"/>
    </Drawer>
  </div>
</template>

<script>
import OrgRank from '@/view/fin/profit-report/detail/org-rank'
import StaffRank from '@/view/fin/profit-report/detail/staff-rank'
import SkuRank from '@/view/fin/profit-report/detail/sku-rank'

import { mixin } from '@/view/fin/profit-report/mixin'

export default {
  name: 'profit-report',
  mixins: [mixin],
  components: {
    OrgRank, StaffRank, SkuRank
  },
  data() {
    let _self = this
    return {
      profit: {},
      byDate: 'false',
      //销售毛利
      options: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['销售毛利', '销售毛利率'],
          left: '0%',
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '销售毛利',
            axisLabel: {
              formatter: '￥{value}'
            }
          },
          {
            type: 'value',
            name: '销售毛利率',
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '销售毛利',
            type: 'bar',
            color: '#41be92',
            tooltip: {
              valueFormatter: function (value) {
                return '￥' + _self.toFixAndToLocaleString(value)
              }
            },
            data: []
          },
          {
            name: '销售毛利率',
            type: 'line',
            color: '#efc25b',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + '%'
              }
            },
            data: []
          }
        ]
      },
      //利润排行
      options2: {
        grid: {
          left: '1%',
          // top: '0%',
          // height: '100%',
          width: '85%',
          // y: '-7%',
        },
        xAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              verticalAlign: 'bottom',
              align: 'left',
              padding: [0, 20, 8, 10],
              textStyle: {
                fontSize: 14,
                color: '#1B365D',
              }
            },
            data: [],
            yAxisIndex: 0,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#95A8CB',
                fontSize: '14'
              },
              formatter: (value) => {
                return '￥ ' + _self.toFixAndToLocaleString(value)
              },
            },
            data: []
          },
        ],
        series: [
          {
            showBackground: true,
            backgroundStyle: {
              color: '#f1f4f9',
              barBorderRadius: 6,
            },
            barWidth: '10px',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#85a0f8'
                }],
                global: false
              },
              barBorderRadius: 8,
            },
            data: [],
            type: 'bar'
          }
        ]
      },
      detailFlag: false,
      detailTitle: '',
      type: null,
    }
  },
  methods: {
    /**
     * @desc   : 去详细
     * @author : 洪旭东
     * @date   : 2024-06-18 11:44
     */
    toDetail(type) {
      this.detailTitle = this.$t(type)
      this.detailFlag = true
      this.type = type
      this.$refs[type].date = this.date
      this.$refs[type].dateType = this.dateType
      this.$refs[type].format = this.format
      this.$refs[type].getSaleProfit()
    },
    /**
     * @desc   : 点击销售毛利日期条件
     * @author : 洪旭东
     * @date   : 2024-06-18 10:27
     */
    clickProfitDate(val) {
      this.byDate = val
      this.getSaleProfit()
    },
    /**
     * @desc   : 查询数据
     * @author : 洪旭东
     * @date   : 2024-06-18 09:06
     */
    getSaleProfit() {
      this.loading = true
      let param = Object.assign({
        byDate: this.byDate
      }, this.getDateBetween(this.date))
      this.excute(this.$service.detailReportService, this.$service.detailReportService.getSaleProfit, param).then(res => {
        if (res.code == 200) {
          this.profit = res.data.profit || {}

          let echarts = require('echarts')
          let chart = echarts.init(document.getElementById('echartsProfitDate'))
          let options = this.options
          options.xAxis[0].data = res.data.dateProfit.map(it => it.accDate)
          options.series[0].data = res.data.dateProfit.map(it => it.profit)
          options.series[1].data = res.data.dateProfit.map(it => it.profitRate)
          chart.setOption(options)

          let echarts2 = require('echarts')
          let chart2 = echarts2.init(document.getElementById('echartsProfitOrg'))
          let options2 = this.options2
          options2.yAxis[0].data = res.data.orgProfit.map(it => it.orgName)
          options2.yAxis[1].data = res.data.orgProfit.map(it => it.profit)
          options2.series[0].data = res.data.orgProfit.map(it => it.profit)
          chart2.setOption(options2)

          let echarts3 = require('echarts')
          let chart3 = echarts3.init(document.getElementById('echartsProfitStaff'))
          let options3 = this.options2
          options3.yAxis[0].data = res.data.staffProfit.map(it => it.staffName)
          options3.yAxis[1].data = res.data.staffProfit.map(it => it.profit)
          options3.series[0].data = res.data.staffProfit.map(it => it.profit)
          chart3.setOption(options3)

          let echarts4 = require('echarts')
          let chart4 = echarts4.init(document.getElementById('echartsProfitSku'))
          let options4 = this.options2
          options4.yAxis[0].data = res.data.skuProfit.map(it => it.skuName)
          options4.yAxis[1].data = res.data.skuProfit.map(it => it.profit)
          options4.series[0].data = res.data.skuProfit.map(it => it.profit)
          chart4.setOption(options4)

        } else{
          this.$Message.warning(res.message)
        }
        this.loading = false
      })
    },
    /**
     * @desc   : 销毁实例
     * @author : 洪旭东
     * @date   : 2024-06-20 09:19
     */
    dispose(id) {
      let echarts = require('echarts')
      if (echarts && document.getElementById(id)) {
        let chart = echarts.getInstanceByDom(document.getElementById(id))
        if (chart) chart.dispose()
      }
    },
    toFixAndToLocaleString(number){
      if(!number){
        return '0.00'
      }
      let arr = number.toString().split('.')
      if(arr.length>1){
        return parseInt(arr[0]).toLocaleString()+(parseFloat('.'+arr[1]).toFixed(2).slice(1,4))
      }else{
        return parseInt(arr[0]).toLocaleString()+'.00'
      }
    },
  },
  created() {
    this.getSaleProfit()
  },
  /**
   * @desc   : 销毁图表
   * @author : 洪旭东
   * @date   : 2024-06-20 16:46
   */
  beforeDestroy() {
    this.dispose('echartsProfitDate')
    this.dispose('echartsProfitOrg')
    this.dispose('echartsProfitStaff')
    this.dispose('echartsProfitSku')
  }
}
</script>

<style scoped>
.top-card {
  height: 80px;
  line-height: 50px;
  font-size: 22px;
}

.top-card-title {
  color: red;
  font-weight: bold;
  float: left;
}

.top-card-icon {
  float: left;
  margin-left: 40px;
  height: 100%;
}

.top-card-money {
  float: right;
}

.top-card-money-num {
  color: #caa977;
  font-weight: bold;
  font-size: 22px;
}

.top-card-percent {
  float: right;
  color: #002340;
}

.top-card-bottom-text {
  color: #95a8cb;
}

.top-card-bottom-text-title {
  float: left;
}

.top-card-bottom-text-num {
  float: right;
}

.card-view2 {
  height: 100%;
}

.card-view2 /deep/ .ivu-card-body {
  height: 100%;
}

.card-view-header {
  display: flex;
  background: linear-gradient(90deg, #deeaff 0%, #FAFEFF 100%);
  padding: 24px;
  border-radius: 15px 15px 0px 0px;
  align-items: center;
  justify-content: space-between;
  height: 20%;
}

.card-view-header2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-view-header-name {
  font-weight: bolder;
  font-size: 18px;
  color: #1B365D;
}

.card-view-header-name2 {
  font-style: normal;
  font-size: 16px;
  color: black;
  font-weight: bolder;
  display: flex;
  align-items: center;
}

.card-view-header-name3 {
  font-size: 14px;
  color: #c7c7c7;
}

.card-view-header-tags-tag {
  color: #95a8cb;
  font-weight: 400;
  font-size: 16px !important;
}
</style>
