<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>
      <van-tab title="成交情况">
        <wx-table :columns="tab1Columns" :table-data="tab1TableData" :top-data="tab1TopData" />
      </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.js'

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

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

      tab1Columns: [
        { name: 'fromName', title: '客户来源', width: '25%' },
        { name: 'orderAmount', title: '成交金额（万）', type: 'amount', width: '35%' },
        { name: 'customerQty', title: '成交客户', width: '20%' },
        { name: 'rate', title: '占比', width: '20%',after:'%' }
      ],
      tab3Columns: [
        { name: 'fromName', title: '客户来源', width: '25%' },
        { name: 'csmCount', title: '潜在客户', width: '25%' },
        { name: 'orderCsmCount', title: '成交客户', width: '25%' },
        { name: 'designCsmCount', title: '设计制图', width: '25%' }
      ],
      tab1TopData: [],
      tab1TableData: [],

      tab3TopData: [],
      tab3TableData: [],

    }
  },
  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_csm_from_order', 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_csm_from_filing', 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.tab3TopData = [{ title: '新增潜客', value: res.data.tab3.csmCount }, { title: '新增成交', value: res.data.tab3.orderCsmCount }, { title: '设计制图', value: res.data.tab3.designCsmCount }],
            this.tab3TableData =  res.data.tab3.items
        }else{
          this.$Message.error(res.message)
        }
      })
    }
  }
}
</script>

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