<template>
  <div class="form-wrap">
    <div
      class="table-box"
      style="margin-top:30px">
      <div class="block-title">
        票仓管理
        <el-button
          type="primary"
          v-if="activeName ==='子票仓设置'"
          @click="$refs.dialog.show(null,'add')"
        >
          新增
        </el-button>

        <el-tabs v-model="activeName">
          <el-tab-pane
            label="子票仓设置"
            name="子票仓设置">
            <span slot="label">
              子票仓设置
            <!-- <Tip msg="仅包含窗口的门票销售数据，不包含线上门票的销售数据。"></Tip> -->
            </span>
            <el-table
              border
              stripe
              ref="multipleTable"
              tooltip-effect="dark"
              v-loading="loading"
              :data="tableData">
              <el-table-column
                prop="id"
                label="编号"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
              >
              </el-table-column>
              <el-table-column
                prop="stock_num"
                label="库存"
              >
              </el-table-column>

              <el-table-column
                label="操作"
              >
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    size="small"
                    v-if="checkPermissionById(scope.row.id)"
                    @click="$refs.inventoryDialog.show(scope.row)"
                  >
                    记录
                  </el-link>
                  <el-link
                    type="primary"
                    size="small"
                    v-if="checkPermissionById(scope.row.id)"
                    @click="$refs.dialog.show(scope.row,'edit')"
                  >
                    编辑
                  </el-link>
                  <el-link
                    type="primary"
                    size="small"
                    v-if="checkMasterPermission(scope.row.id)"
                    @click="$refs.changeStockDialog.show(scope.row.id,'add')"
                  >
                    增加
                  </el-link>

                  <el-link
                    type="primary"
                    size="small"
                    v-if="checkMasterPermission(scope.row.id)"
                    @click="$refs.changeStockDialog.show(scope.row.id,'totaltobranch')"
                  >
                    分仓
                  </el-link>

                  <el-link
                    type="primary"
                    size="small"
                    v-if="checkMasterPermission(scope.row.id)"
                    @click="$refs.changeStockDialog.show(scope.row.id,'backToTotal')"
                  >
                    回仓
                  </el-link>

                  <el-link
                    type="primary"
                    size="small"
                    v-if="checkBranchPermission(scope.row.id)"
                    @click="$refs.changeStockDialog.show(scope.row.id,'backToBranch')"
                  >
                    售票员回仓
                  </el-link>

                  <el-link
                    type="primary"
                    size="small"
                    v-if="checkBranchPermission(scope.row.id)"
                    @click="$refs.changeStockDialog.show(scope.row.id,'distribute')"
                  >
                    分仓
                  </el-link>

                  <el-link
                    v-if="checkBranchPermission(scope.row.id)"
                    type="primary"
                    size="small"
                    @click="handleDelete(scope.row.id)"
                  >
                    删除
                  </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="getList()"
              :total="total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane
            label="售票员"
            name="售票员">
            <span slot="label">
              售票员
            <!-- <Tip msg="仅包含窗口的门票销售数据，不包含线上门票的销售数据。"></Tip> -->
            </span>
            <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,'backToBranch')"
                  >
                    回仓
                  </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="form1.pageNum"
              :page-size="form1.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="getAccountList()"
              @size-change="handleSizeChange1"
              :total="total1">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <Dialog
      ref="dialog"
      @update="getList"></Dialog>
    <ChangeStockDialog
      ref="changeStockDialog"
      @update="getList"
      @updateAccountList="getAccountList"></ChangeStockDialog>
    <InvalidDialog
      ref="invalidDialog"
      @update="getAccountList"></InvalidDialog>
    <InventoryDialog
      ref="inventoryDialog"
      @update="getList"></InventoryDialog>
    <SellerDialog
      ref="sellerDialog"
      @update="getList"></SellerDialog>
  </div>
</template>

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

export default {
  created () {
    this.getList()
    this.getAccountList()
  },
  components: {
    Dialog,
    ChangeStockDialog,
    SellerDialog,
    InventoryDialog,
    InvalidDialog
  },
  data () {
    return {
      form: {
        pageNum: 1,
        pageSize: 10,
        keyWords1: ''
      },
      form1: {
        pageNum: 1,
        pageSize: 10,
        keyWords1: ''
      },
      total: 0,
      total1: 0,
      accoutList: [],
      loading: false,
      tableData: [],
      multipleSelection: [],
      transferList: [], // 售票员门票记录
      activeName: '子票仓设置'
    }
  },
  computed: {
    userId () {
      return this.$store.state.user.id
    }
  },
  methods: {
    checkPermissionById (id) {
      if (id === 1) {
        return checkPermission('ticket_type_scenic:ticket_master_warehouse_mgt')
      } else {
        return checkPermission('ticket_type_scenic:ticket_branch_warehouse_mgt')
      }
    },
    checkMasterPermission (id) {
      return id === 1 && checkPermission('ticket_type_scenic:ticket_master_warehouse_mgt')
    },
    checkBranchPermission (id) {
      return id !== 1 && checkPermission('ticket_type_scenic:ticket_branch_warehouse_mgt')
    },
    handleSizeChange1 (size) {
      this.form.pageSize = size
      this.getAccountList()
    },
    getAccountList () {
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.form1))
      getAccountList(params).then(res => {
        this.accoutList = res.list
        this.total1 = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    getList () {
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.form))
      getTicketInventoryList(params).then(res => {
        this.tableData = res.list
        this.total = res.total
        // 更新全局节目信息
      }).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('删除成功')
          this.getList()
        })
      }).catch(() => {})
    }
  },
  watch: {
    activeName (val) {
      if (val === '售票员') {
        this.getAccountList()
      }
    }
  }
}
</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>
