<template>
  <div>
    <Spin size="large" v-if="loading" fix ></Spin>
    <div style="z-index: 10;display: flex;height: 50px;width: 565px;align-items: center;position: fixed;top: 51px;background: #fff;justify-content: space-between;">
      <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>
      <DatePicker transfer 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: 60%"></DatePicker>
      <SelectPop v-model="orderBy" ref="orderBy" :multiple="false" style="width:40%;margin-left: 10px"
                 :options="orderByList"
                 labelKey="text"
                 valueKey="value"
                 @on-select="getSaleProfit"
      >
      </SelectPop>
      <Button style="margin-left: 5px;width: 50px" size="small"  type="success" @click="getSaleProfit()">更新</Button>

    </div>
    <div style="height:50px;"></div>

    <wx-table :columns="tab1Columns" :table-data="tab1TableData" :top-data="tab1TopData" />

  </div>
</template>
<script>
import wxTable from '@/components/wx-table/index.vue'
import { mixin } from '@/view/fin/profit-report/mixin'

export default {
  mixins:[mixin],
  components:{
    wxTable
  },
  data(){
    return{
      tab1Columns: [
        { name: 'skuName', title: '商品型号/名称', width: '50%' },
        { name: 'profit', title: '销售利润', type: 'amount', width: '30%' },
        { name: 'profitRate', title: '利润率', width: '20%', after: '%' },
      ],
      tab1TopData: [],
      tab1TableData: [],
    }
  },
  methods:{
    getSaleProfit(){
      this.loading = true
      let param = this.getDateBetween(this.date)
      param.orderBy = this.orderBy
      this.excute(this.$service.detailReportService, this.$service.detailReportService.getSaleProfitGroupBySku, param).then(res => {
        if (res.code == 200) {
          this.tab1TopData = [{ title: '销售利润（总额）', type: 'amount', value: res.data.profit ? res.data.profit.profit : 0 },
            { title: '利润率', type: '', value: (res.data.profit ? res.data.profit.profitRate : 0) + '%' }
          ]
          this.tab1TableData = res.data.skuProfit
        } else{
          this.$Message.warning(res.message)
        }
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
</style>
