<template>
<div class="tf-order">
  <div v-show="$route.name === 'ownerTransfer'">
    <Query
      class="tf-order__query"
      :selection="selection"
      @getList="getList"
    ></Query>
    <List
      :currentNo="currentNo"
      :pageSize="pageSize"
      :list="tfOrderList"
      :total="total"
      @toCreator="toCreator"
      @getList="getList"
      @selectionChange="cacheSelection"
    ></List>
  </div>
  <router-view></router-view>
</div>
</template>

<script>
import Query from './components/Query'
import List from './components/List'
import routerMixins from '../routerMixins'

export default {
  name: 'OwnerTransfer',
  mixins: [routerMixins],
  components: { Query, List },
  created () {
  },
  mounted () {
    this.getList()
  },

  data () {
    return {
      query: {
        'page.currentPage': 1,
        'page.limitCount': 10,
      }, // 查询条件
      tfOrderList: [], // 盘点列表
      total: 0, // 总数据量
      selection: '', // 选中的id字符串序列 (','隔开)
      currentNo: 1,
      pageSize: 10
    }
  },
  methods: {
    // 获取盘点列表
    getList (query = {}) {
      const url = this.$API.inventory.tfOrder.getList
      const param = { ...this.query, ...query }
      param.tfNo !== undefined && (param.tfNo = `%${param.tfNo}%`) // 避免传空值只能查到部分数据
      this.$https.post(url, param)
        .then(data => {
          this.tfOrderList = data.rows
          this.total = data.total
          this.currentNo = data.currentPage
          this.pageSize = data.limit
        })
    },
    // 勾选变化, 缓存id
    cacheSelection (selection) {
      this.selection = selection
    },
    // 编辑 或 详情
    toCreator (tfNo, mode = 'detail') {
      const url = this.$API.inventory.tfOrder.detail
      const param = { tfNo }
      this.$https.post(url, param)
        .then(data => {
          this.$message.closeAll() // 因这个接口会返回'操作成功'
          this.$router.push({
            name: 'tfCreator',
            params: {
              detailData: data.data,
              mode,
            }
          })
        })
    }
  },
}
</script>

<style lang="scss" scoped>
.tf-order__query {
  margin-bottom: 20px;
}
</style>
