<template>
  <div>
    <div style="z-index: 10;display: flex;height: 50px;width: 480px;align-items: center;position: fixed;top: 51px;background: #fff;justify-content: space-between;">
      <DatePicker transfer ref="date-picker" @on-change="onChangeDate" :editable="false" v-model="month" :clearable="false" placement="bottom-start" type="month" :format="format" :options="options2" placeholder="Select date" style="width: 45%"></DatePicker>
      <SelectPop v-model="orgIds" ref="orgIds" :multiple="true" style="width:250px;margin-left: 10px"
                 @on-change="changeSearch"
                 :options="orgList"
                 :title="$t('orgId')"
                 labelKey="name"
                 valueKey=id>
      </SelectPop>
      <Button style="margin-left: 5px;width: 50px" size="small"  type="success" @click="getReport()">更新</Button>
    </div>
    <div style="height:50px;"></div>
    <van-tabs ref="van-tabs" animated v-model="active">
      <van-tab title="销售任务">
        <wx-table :columns="tab1Columns" :table-data="tab1TableData" :top-data="tab1TopData" />
      </van-tab>
      <van-tab title="退货情况">
        <wx-table :columns="tab2Columns" :table-data="tab2TableData" :top-data="tab2TopData" />
      </van-tab>
      <van-tab title="客单价">
        <wx-table :columns="tab3Columns" :table-data="tab3TableData" :top-data="tab3TopData" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import wxTable from '@/components/wx-table/index.vue'
import util from './util.js'
import {mixin} from './mixin'

export default {
  name: "order_analysis",
  mixins: [mixin],
  components:{
    wxTable
  },
  data(){
    return{
      active:0,
      month:new Date(),
      orgIds:[],
      orgList:[],

      tab1Columns: [{ name: 'orgName', title: '门店名称', width: '35%' }, { name: 'orderAmount', title: '成交金额(万)', type: 'amount', width: '25%' }],
      tab2Columns: [{ name: 'orgName', title: '门店名称', width: '30%' }, { name: 'rejectAmount', title: '退货额(万)', type: 'amount', width: '25%' }, { name: 'outAmount', title: '出库额(万)', type: 'amount', width: '25%' }, { name: 'kpiRate', title: '退货占率', width: '20%', after: '%' }],
      tab3Columns: [{ name: 'orgName', title: '门店名称', width: '30%' }, { name: 'csmRate', title: '客单价(万)', type: 'amount', width: '25%' }, { name: 'sumAmount', title: '成交金额(万)', type: 'amount', width: '25%' }, { name: 'csmCount', title: '成交户数', width: '20%' }],

      tab1TopData: [],
      tab1TableData: [],

      tab2TopData: [],
      tab2TableData: [],

      tab3TopData: [],
      tab3TableData: [],

      tabs: ['销售任务', '退货情况', '客单价', '活动效果', '定+智品类'],
    }
  },
  methods:{
    getStoreList(){
      let params = {
        cpId: this.$store.state.user.cpId,
        dataSourceCode: "org",
        docName: "客户资料",
        orgId: this.$store.state.user.orgId,
        sysId: this.$store.state.user.sysId
      }
      this.excute(this.$service.wxCommonService, this.$service.wxCommonService.wxStoreList, params).then(res=>{
        if (res.code === 200) {
          this.orgList = res.data
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    getReport(){
      let params = {
        tab1: Object.assign(this.dateType===6?this.getQjDate():util.getBeginDateAndEndDate(this.month),{ userId:this.$store.state.user.id,type: 'f_report_s001_index_org_order', cpId: this.$store.state.user.cpId, orgIds: this.orgIds,dateType:this.dateType }),
        tab2:Object.assign(this.dateType===6?this.getQjDate():util.getBeginDateAndEndDate(this.month), { userId:this.$store.state.user.id,type: 'f_report_s001_order_analysis_reject', cpId: this.$store.state.user.cpId, orgIds: this.orgIds,dateType:this.dateType }),
        tab3:Object.assign(this.dateType===6?this.getQjDate():util.getBeginDateAndEndDate(this.month), { userId:this.$store.state.user.id,type: 'f_report_s001_order_analysis_csm', cpId: this.$store.state.user.cpId, orgIds: this.orgIds ,dateType:this.dateType}),
      }
      this.excute(this.$service.detailReportService, this.$service.detailReportService.getReportBatch, params).then(res => {
        if(res.code === 200){
            this.tab1TopData = [{ title: '成交额（总额:万）', type: 'amount', value: util.parseFloatFixed2(res.data.tab1.sumAmount / 10000) }, { title: '成交额（均值:万）', type: 'amount', value: util.parseFloatFixed2(res.data.tab1.avgAmount / 10000) }],
            this.tab1TableData =  util.calc10000(res.data.tab1.items, ['orderAmount'])

            this.tab2TopData = [{ title: '退货额（总额:万）', type: 'amount', value: util.parseFloatFixed2(res.data.tab2.sumAmount / 10000) }, { title: '退货额（均值:万）', type: 'amount', value: util.parseFloatFixed2(res.data.tab2.avgAmount / 10000) }],
            this.tab2TableData = util.calc10000(res.data.tab2.items, ['rejectAmount', 'outAmount'])

            this.tab3TopData = [{ title: '客户单价（均值:万）', type: 'amount', value: util.parseFloatFixed2(res.data.tab3.avgAmount / 10000) }, { title: '成交户数', value: res.data.tab3.csmCount }],
            this.tab3TableData = util.calc10000(res.data.tab3.items, ['sumAmount', 'csmRate'])
        }else{
          this.$Message.error(res.message)
        }
      })
    }
  }
}
</script>

<style scoped>
  /deep/.van-tabs__line{
   background-color: #00A7B5 !important;
  }
</style>
