<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="handleClose"
    :title="`${queryName}——库存进出记录`"
    width="80%">
    <div class="table-box">
      <el-form
        :inline="true"
        label-width="120"
        label-position="right"
        class="buyer-info">
        <el-form-item
          label="状态"
        >
          <el-select
            v-model="status"
            placeholder="请选择"
          >
            <el-option
              label="全部"
              value="INOUT"></el-option>
            <el-option
              v-for="item in inventoryStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-table
        border
        :data="transferList"
        v-loading="loading"
      >
        <el-table-column
          prop="id"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          label="来源"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.type ==='TOTALTOBRANCH'"> {{ scope.row.from_warehouse_name }}——{{ scope.row.to_warehouse_name }}</span>
            <span v-if="scope.row.type ==='BRANCHTOTOTAL'">{{ scope.row.from_warehouse_name }}——{{ scope.row.to_warehouse_name }}</span>
            <span v-if="scope.row.type ==='BRANCHTOMANAGER'">{{ scope.row.from_warehouse_name }}——{{ scope.row.to_manager_name }}</span>
            <span v-if="scope.row.type ==='MANAGERTOBRANCH'">{{ scope.row.to_manager_name }}——{{ scope.row.to_warehouse_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
        >
          <template slot-scope="scope">
            <span> {{ scope.row.to_warehouse_id===queryId ?'增加':'减少' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="数量"
          prop="number"
        >
        </el-table-column>
        <el-table-column
          label="票的税印起始"
          prop="ticketpaper_num_begin"
        >
        </el-table-column>
        <el-table-column
          label="票的税印结束"
          prop="ticketpaper_num_end"
        >
        </el-table-column>
        <el-table-column
          label="操作时间"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTime }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="pageNum"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="getListTransfer()"
        :total="total">
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { getListTransfer } from '@/api/ticketInventory'
export default {
  computed: {
    userId () {
      return this.$store.state.user.id
    }
  },
  components: {
  },
  data () {
    return {
      visible: false,
      queryId: '',
      queryName: '',
      transferList: [],
      loading: false,
      status: 'INOUT',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      inventoryStatus: [
        {
          label: '增加',
          value: 'IN'
        },
        {
          label: '减少',
          value: 'OUT'
        }
      ]

    }
  },
  methods: {
    show (data) {
      console.log('data', data)
      this.visible = true
      this.queryId = data.id
      this.queryName = data.name
      this.getListTransfer()
    },
    getListTransfer () {
      this.loading = true
      let params = {
        keyWords1: 'WAREHOUSE',
        keyWords2: String(this.queryId),
        keyWords3: this.status,
        pageNum: this.pageNum
      }
      getListTransfer(params).then(res => {
        console.log('res', res)
        this.transferList = res.list
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    handleClose () {
      this.visible = false
      this.status = 'INOUT'
    }
  },
  watch: {
    status (val) {
      if (val) {
        this.getListTransfer()
      }
    }
  }
}
</script>

<style lang="scss">

</style>
