<template>
    <!--分配结果预览-->
    <el-dialog :visible.sync="dialogVisible" width="80%" :center="true"
                 :title="$t('traceMgr.previewOfAssignmentResults')"
                 :editModel="editModel"
                 :appendToBody="true"
                 :footerBtnShow="false">
        <el-form>
            <el-row>
                <business-data-statistics-by-product-list :tableApi="tableApi" :loadPage="loadPage" :queryParas="abc"></business-data-statistics-by-product-list>
            </el-row>
            <el-row>
                <el-tabs type="card" style="margin-top: 10px;" @tab-click="handleClick">
            <el-tab-pane style="" :label="$t('traceMgr.businessDataStatisticsByProductGroup')">
                <business-data-statistics-by-product-group-list :groupApi="groupApi" :loadGroupList="loadGroupList" :queryParas="groupParas" :productGroupData="productGroupData"  ></business-data-statistics-by-product-group-list>
            </el-tab-pane>
            <el-tab-pane name="second"  :label="$t('traceMgr.businessDataStatisticsByProductPerson')">
                <business-data-statistics-by-product-person-list :personApi="personApi" :loadPersonList="loadPersonList" :queryParas="personParas" :personListData="personListData"   ></business-data-statistics-by-product-person-list>
            </el-tab-pane>
        </el-tabs>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="button" size="medium" @click="closeDialogVisible()">{{$t('common.close')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import BaseEditPage from '@/pages/baseEditPage'
import { DialogEdit } from 'newepoch-components'
import BusinessDataStatisticsByProductList from './businessDataStatisticsByProductList'
import BusinessDataStatisticsByProductGroupList from './businessDataStatisticsByProductGroupList'
import BusinessDataStatisticsByProductPersonList from './businessDataStatisticsByProductPersonList'
import tracemgrApi from '@/api/tracemgrApi'
export default {
  name: 'distributionOrderPreviewDialog',
  extends: new BaseEditPage(''),
  props: {
    editModel: {
      type: String
    },
    queryParas: {
      type: Object
    },
    form: {
      type: Object
    }
  },
  components: {
    DialogEdit,
    BusinessDataStatisticsByProductList,
    BusinessDataStatisticsByProductGroupList,
    BusinessDataStatisticsByProductPersonList,
    tracemgrApi
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    }
  },
  data () {
    return {
      tableApi: {},
      groupApi: {},
      personApi: {},
      abc: {},
      groupParas: {},
      loadPage: '',
      loadGroupList: '',
      loadPersonList: '',
      personParas: {},
      sourceDataOne: [],
      productGroupData: [],
      personListData: []
    }
  },
  watch: {
    dialogVisible (value, oldVal) {
      if (value) {
        this.$nextTick(function () { this.searchData() })
      }
    }
  },
  methods: {
    closeDialogVisible () {
      this.dialogVisible = false
    },
    searchData () {
      // this.queryParas = val
      // this.isLoading = true
      console.log(this.queryParas)
      this.loadPage = 'getDataStatisticsByProduct'
      this.tableApi = tracemgrApi['distributionOrderPreviewDialog']
      this.abc = Object.assign({}, this.queryParas)
      // 根据产品分类统计产品的订单分配情况
      // tracemgrApi[''].getDataStatisticsByProduct(this.queryParas).then(res => {
      //   this.sourceDataOne = res.data.datas
      //   console.log(res.datas)
      //   // this.isLoading = false
      // }, res => {
      //   // this.isLoading = false
      // })
      // 根据组别分类统计订单分配情况
      this.loadGroupList = 'getDataStatisticsByGroup'
      this.groupApi = tracemgrApi['distributionOrderPreviewDialog']
      this.groupParas = Object.assign({}, this.queryParas)
      // tracemgrApi['distributionOrderPreviewDialog'].getDataStatisticsByGroup(this.queryParas).then(res => {
      //   this.productGroupData = res.data.datas
      //   console.log(res.datas)
      //   // this.isLoading = false
      // }, res => {
      //   // this.isLoading = false
      // })
      // this.val = []
      // 根据保理专员分类统计订单分配情况
      this.loadPersonList = 'getDataStatisticsByFactoringCommissioner'
      this.personApi = tracemgrApi['distributionOrderPreviewDialog']
      this.personParas = Object.assign({}, this.queryParas)
    },
    handleClick (tab, event) {
      if (tab.name === 'second') {
        // this.isLoading = true
        // 根据保理专员分类统计订单分配情况
        // tracemgrApi['distributionOrderPreviewDialog'].getDataStatisticsByFactoringCommissioner(this.queryParas).then(res => {
        //   this.personListData = res.data.datas
        //   console.log(res.datas)
        //   // this.isLoading = false
        // }, res => {
        //   // this.isLoading = false
        // }).catch(
        //   res => {
        //     // this.isLoading = false
        //   }
        // )
      }
    }
  }
}
</script>
