<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="staffIds" ref="staffIds" :multiple="true" style="width:250px;margin-left: 10px"
                 @on-change="changeSearch"
                 :options="staffList"
                 :title="$t('staffId')"
                 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: "staff_order_rank",
  mixins:[mixin],

  components:{
    wxTable
  },
  data(){
    return{
      active:0,
      month:new Date(),
      staffIds:[],
      staffList:[],

      tab1Columns: [
        { name: 'staffName', title: '业务员名称', width: '35%' },
        { name: 'orderAmount', title: '成交金额(万)', type: 'amount', width: '25%' },
      ],

      tab1TopData: [],
      tab1TableData: [],

    }
  },
  methods:{
    getStoreList(){
      let params = {
        cpId: this.$store.state.user.cpId,
        dataSourceCode: "staff",
        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.staffList = 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_staff_order', cpId: this.$store.state.user.cpId,orgIds:[], staffIds: this.staffIds,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'])
        }else{
          this.$Message.error(res.message)
        }
      })
    }
  }
}
</script>

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