<template>
  <div class="form-wrap">
    <div
      class="table-box"
      style="margin-top:30px">
      <div class="block-title">
        售票员票仓
        <el-table
          border
          stripe
          ref="multipleTable"
          tooltip-effect="dark"
          v-loading="loading"
          :data="accoutList">
          <el-table-column
            prop="id"
            label="编号"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
          >
          </el-table-column>
          <el-table-column
            label="库存"
          >
            <template slot-scope="scope">
              {{ scope.row.ticket_stock_num === -1 ? 0: scope.row.ticket_stock_num }}
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                size="small"
                @click="$refs.sellerDialog.show(scope.row)"
              >
                查看记录
              </el-link>
              <!-- <el-link
                type="primary"
                size="small"
                v-if="scope.row.id===userId"
                @click="$refs.changeStockDialog.show(scope.row.id)"
              >
                回仓
              </el-link> -->
              <el-link
                type="primary"
                size="small"
                v-if="scope.row.id===userId"
                @click="$refs.invalidDialog.show(scope.row)"
              >
                作废
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page.sync="form.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.pageSize"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="getAccountList()"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <InvalidDialog
      ref="invalidDialog"
      @update="getAccountList"></InvalidDialog>
    <SellerDialog
      ref="sellerDialog"
    ></SellerDialog>
    <ChangeStockDialog
      ref="changeStockDialog"
      :table-data="tableData"
      @updateAccountList="getAccountList"></ChangeStockDialog>
  </div>
</template>

<script>
import SellerDialog from './sellerDialog'
import InvalidDialog from './invalidDialog'
import ChangeStockDialog from './changeStockDialog'
import { getAccountList } from '@/api/systemSetting/account'
import { getTicketInventoryList, deleteTicketInventory } from '@/api/ticketInventory'

export default {
  created () {
    this.getAccountList()
    this.getList()
  },
  components: {
    SellerDialog,
    InvalidDialog,
    ChangeStockDialog
  },
  data () {
    return {
      form: {
        keyWords1: ''
      },
      total: 0,
      accoutList: [],
      loading: false,
      tableData: []
    }
  },
  computed: {
    userId () {
      return this.$store.state.user.id
    }
  },
  methods: {
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    getList () {
      this.loading = true
      getTicketInventoryList({ pageSize: -1, pageNum: 0 }).then(res => {
        this.tableData = res.list
        // 更新全局节目信息
      }).finally(() => {
        this.loading = false
      })
    },
    getAccountList () {
      this.loading = true
      getAccountList({ pageSize: -1, pageNum: 0 }).then(res => {
        this.accoutList = res.list.filter(i => i.id === this.userId)
        this.total = this.accoutList.length
      }).finally(() => {
        this.loading = false
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    handleDelete (id) {
      this.$confirm('确认删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTicketInventory(id).then(res => {
          this.$message.success('删除成功')
        })
      }).catch(() => {})
    }
  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  .el-input,.el-select,.el-date-editor,.el-date-editor.el-input,.el-input-number {
    width: 300px;
  }
}

</style>
