<template>
  <div>
    <div style="display: flex;height: 50px;width: 480px;align-items: center;position: fixed;top: 51px;background: #fff;z-index: 10;">
      <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>
<!--      <Select transfer v-model="orgIds" size="small" multiple clearable style="width:45%;margin-left: 10px" @on-change="changeSearch" placeholder="请选择门店">-->
<!--        <Option v-for="item in orgList" :value="item.id" :key="item.id">{{ item.name }}</Option>-->
<!--      </Select>-->
      <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>
      <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-tabs>
  </div>
</template>
<script>
import wxTable from '@/components/wx-table/index.vue'
import util from './util.js'
import {mixin} from './mixin'

export default {
  name: "collection_analysis",
  mixins:[mixin],
  components:{
    wxTable
  },
  data(){
    return{

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

      tab1Columns: [{name:'orgName',title:'门店名称',width:'35%'},{name:'repayAmount',title:'收款金额(万)',type:'amount',width:'25%'}],
      tab2Columns: [{name:'orgName',title:'门店名称',width:'35%'},{name:'receivable',title:'欠款额(万)',type:'amount',width:'25%'},{name:'orderAmount',title:'成交额(万)',type:'amount',width:'25%'},{name:'csmCount',title:'欠款户数',width:'15%'}],

      tab1TopData: [],
      tab1TableData: [],

      tab2TopData: [],
      tab2TableData: [],

      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_repay',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_repay_debt',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,['repayAmount']),
            this.tab2TopData = [{title:'欠款额（总额:万）',type:'amount',value:util.parseFloatFixed2(res.data.tab2.receivable/10000)},{title:'欠款额（均值:万）',type:'amount',value:util.parseFloatFixed2(res.data.tab2.avgAmount/10000)}],
            this.tab2TableData = util.calc10000(res.data.tab2.items,['orderAmount','receivable'])
        }else{
          this.$Message.error(res.message)
        }
      })
    }
  }
}
</script>

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