<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>
      <wx-table :columns="tab1Columns" :table-data="tab1TableData" :top-data="tab1TopData" />
  </div>
</template>
<script>
import wxTable from '@/components/wx-table/index.vue'
import util from './util.js'
import {mixin} from './mixin.js'

export default {
  name: "product_analysis",
  mixins:[mixin],

  components:{
    wxTable
  },
  data(){
    return{

      month:new Date(),
      orgIds:[],
      orgList:[],

      tab1Columns: [
        { name: 'specsName', title: '品类名称', width: '35%' },
        { name: 'sumAmount', title: '成交金额(万)', type: 'amount', width: '25%' },
        { name: 'sumCount', title: '成交数量', width: '20%' },
        { name: 'countRate', title: '数量占比', width: '20%',after:'%' }
      ],
      tab1TopData: [],
      tab1TableData: [],

    }
  },
  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_spu_analysis', 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) }],
          this.tab1TableData = util.calc10000(res.data.tab1.items,['sumAmount'])
        }else{
          this.$Message.error(res.message)
        }
      })
    }
  }
}
</script>

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