<template>
<div class="owners-business">
  <!--查询区域-->
  <Query
    class="owners-business__query"
    @getInfo="getInfo"
  ></Query>
  <!--货主信息-->
  <Info :info="ownerInfo" />
  <!--数据区域-->
  <el-tabs
    v-model="activeName"
    type="border-card"
    @tab-click="swiftTab"
  >
    <el-tab-pane label="当前库存信息" name="list">
      <List
        :list="list"
        :total="total"
        :currentNo="currentNo"
        :pageSize="pageSize"
        @getList="getList"
      ></List>
    </el-tab-pane>
    <el-tab-pane label="入库单信息" name="stockIn">
      <StockInCharts :chartsData="stockInData"></StockInCharts>
    </el-tab-pane>
    <el-tab-pane label="出库单信息" name="stockOut">
      <StockOutCharts :chartsData="stockOutData"></StockOutCharts>
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
import Query from './components/Query'
import List from './components/List'
import Info from './components/Info'
import StockInCharts from '../../SummaryReport/StockInBusiness/components/Charts'
import StockOutCharts from '../../SummaryReport/StockOutBusiness/components/Charts'

export default {
  name: 'OwnersBusiness',
  components: { Query, List, Info, StockInCharts, StockOutCharts },
  created () {
  },
  mounted () {
  },

  data () {
    return {
      query: {
      }, // 查询条件
      activeName: 'list',
      list: [], // 库存列表
      total: 0, // 总数据量
      currentNo: 1,
      pageSize: 20,
      ownerInfo: {}, // 货主信息
      stockInData: {}, // 入库图表数据
      stockOutData: {}, // 出库图表数据
      tabName: 'list', // 初始默认
    }
  },
  methods: {
    // 本不打算用tab-click 但隐藏tab的图表渲染有问题, 只得切换图表时再渲染
    // 切换选项卡
    swiftTab (tab) {
      if (!this.query.ownerCode || this.tabName === tab.name) return
      switch (tab.name) {
        case 'list':
          // 列表
          this.getList()
          break
        case 'stockIn':
          this.getStockInData()
          break
        case 'stockOut':
          this.getStockOutData()
          break
      }
      this.tabName = tab.name // 缓存当前页
    },
    // 获取信息
    getInfo (query) {
      this.query = { ...this.query, ...query }
      if (!this.query.ownerCode) return
      this.getOwnerInfo()
      switch (this.activeName) {
        case 'list':
          // 列表
          this.getList()
          break
        case 'stockIn':
          // 入库
          this.getStockInData()
          break
        case 'stockOut':
          // 出库
          this.getStockOutData()
          break
      }
    },
    // 获取库存列表
    getList (query = {}) {
      this.query = { ...this.query, ...query }
      const url = this.$API.enterprise.ownersBusiness.list
      const param = this.query
      this.$https.post(url, param)
        .then(data => {
          this.list = data.rows
          this.total = data.total
          this.currentNo = data.currentPage
          this.pageSize = data.limit
        })
    },
    // 获取货主信息
    getOwnerInfo () {
      const url = this.$API.enterprise.ownersBusiness.ownerInfo
      const param = {
        queryParams: JSON.stringify(this.query)
      }
      this.$https.post(url, param)
        .then(data => {
          this.ownerInfo = data.data
        })
    },
    // 获取入库信息
    getStockInData () {
      const url = this.$API.enterprise.ownersBusiness.stockInChart
      const param = this.query
      this.$https.post(url, param)
        .then(data => {
          this.stockInData = data.data
        })
    },
    // 获取出库信息
    getStockOutData () {
      const url = this.$API.enterprise.ownersBusiness.stockOutChart
      const param = this.query
      this.$https.post(url, param)
        .then(data => {
          this.stockOutData = data.data
        })
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
