<template>
  <div class="customs-data">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="采购商" name="buyers">
        <div class="customs-loading" v-loading="buyersLoading">
          <buyers
              v-if="!buyersLoading"
              :data="buyersData"
              :page-params="pageParams"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
              @handleDetail="handleDetail"
          ></buyers>
        </div>
      </el-tab-pane>
      <el-tab-pane label="供应商" name="supplier">
        <div class="customs-loading" v-loading="buyersLoading">
          <buyers
              v-loading="supplierLoading"
              :data="supplierData"
              :page-params="pageParams"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
              @handleDetail="handleDetail"
          ></buyers>
        </div>
      </el-tab-pane>
      <el-tab-pane label="详单" name="detail">
        <div class="customs-loading" v-loading="detailLoading">
          <detail-list
              :data="detailData"
              :apiurl="apiurl"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
              @importChooseCountry="importChooseCountry"
              @exportChooseCountry="exportChooseCountry"
              :page-params="pageParams"
          ></detail-list>
        </div>
      </el-tab-pane>
    </el-tabs>

    <buyers-detail
        :params="params"
        :apiurl="apiurl"
        :type="activeName"
        :status="buyersDrawer"
        :data="curBuyersItem"
        v-if="buyersDrawerStatus"
        @handleDrawerClose="buyersDrawer = false"
        @handleDrawerClosed="buyersDrawerStatus = false"
    ></buyers-detail>
  </div>
</template>

<script>
export default {
  name: 'CustomsData',
  props: {
    params: {
      type: Object,
      default: () => {}
    },
    apiurl: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      buyersLoading: false,
      buyersData: {},
      supplierLoading: false,
      supplierData: {},
      activeName: 'buyers',
      buyersDrawer: false,
      buyersDrawerStatus: false,
      curBuyersItem: {},
      pageParams: {
        "pageIndex": 1,
        "pageSize": 10
      },
      detailData: {},
      detailLoading: false,
      importerCountryCode: [],
      exporterCountryCode: [],
    }
  },
  mounted() {
    this.getBuyersData()
    EventBus.$on('handleParamsSearch', this.handleParamsSearch)
  },
  destroyed() {
    EventBus.$off('handleParamsSearch', this.handleParamsSearch)
  },
  methods: {
    async getBuyersData () {
      this.buyersLoading = true
      const res = await axios.post(this.apiurl + '/customs/tradeProduct/impEnterprise', _.assign({}, this.params, this.pageParams))
      this.$emit('backsearch', res.search);
      if (res.status === "success" && res.data && res.data.data) {
        const copyData = res.data
        copyData.data.forEach(item => {
          item.seeStatus = false
        })
        this.buyersData = copyData
        this.buyersLoading = false
      } else {
        this.buyersLoading = false
      }
      if (res.status === "error") {
        this.$message.error(res.message)
        this.buyersLoading = false
      }
    },
    async getSupplierData () {
      this.supplierLoading = true
      const res = await axios.post(this.apiurl + '/customs/tradeProduct/expEnterprise', _.assign({}, this.params, this.pageParams))
      this.$emit('backsearch', res.search);
      if (res.status === "success" && res.data && res.data.data) {
        const copyData = res.data
        copyData.data.forEach(item => {
          item.seeStatus = false
        })
        this.supplierData = copyData
        this.supplierLoading = false
      } else {
        this.supplierLoading = false
      }
      if (res.status === "error") {
        this.$message.error(res.message)
        this.supplierLoading = false
      }
    },
    async getDetailData () {
      this.detailLoading = true
      const res = await axios.post(this.apiurl + '/customs/trade/pageTradeDetail', _.assign({}, this.params, {...this.pageParams, importerCountryCode: this.importerCountryCode, exporterCountryCode: this.exporterCountryCode}))
      this.$emit('backsearch', res.search);
      if (res.status === "success" && res.data && res.data.data) {
        this.detailData = res.data
        this.detailLoading = false
      } else {
        this.detailLoading = false
      }
      if (res.status === "error") {
        this.$message.error(res.message)
        this.detailLoading = false
      }
    },
    handleTabClick (v) {
      // 每次切换时，重置分页参数
      this.pageParams.pageIndex = 1
      this.pageParams.pageSize = 10

      if (this.activeName === 'supplier' && !Object.keys(this.supplierData).length) {
        this.getSupplierData()
      }
      if (this.activeName === 'buyers' && !Object.keys(this.buyersData).length) {
        this.getBuyersData()
      }
      if (this.activeName === 'detail' && !Object.keys(this.detailData).length) {
        this.getDetailData()
      }
    },
    handleDetail (item) {
      this.curBuyersItem = _.cloneDeep(item)
      this.buyersDrawerStatus = true
      this.buyersDrawer = true
    },
    handleParamsSearch () {
      if (this.activeName === 'supplier') {
        this.getSupplierData()
      }
      if (this.activeName === 'buyers') {
        this.getBuyersData()
      }
      if (this.activeName === 'detail') {
        this.getDetailData()
      }
    },
    handleSizeChange (v) {
      this.pageParams.pageSize = v
      this.handleParamsSearch()
    },
    handleCurrentChange (v) {
      this.pageParams.pageIndex = v
      this.handleParamsSearch()
    },
    exportChooseCountry (arr) {
      this.exporterCountryCode = arr
      this.getDetailData()
    },
    importChooseCountry (arr) {
      this.importerCountryCode = arr
      this.getDetailData()
    }
  }
}
</script>