<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="handleClose"
    :title="`${queryName}——库存进出记录`"
    width="80%">
    <div style="padding:10px 20px">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick">
        <el-tab-pane
          label="票仓分发回仓记录"
          name="inventory">
          <div class="table-box">
            <el-form
              :inline="true"
              label-width="120"
              label-position="right"
              class="buyer-info">
              <el-form-item
                label="起始时间"
                prop="startDate"
              >
                <el-date-picker
                  v-model="form.startDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  @change="changeDate"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                label="截止时间"
                prop="endDate"
              >
                <el-date-picker
                  default-time="23:59:59"
                  v-model="form.endDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  @change="changeDate"

                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                label="状态"
              >
                <el-select
                  v-model="status"
                  placeholder="请选择"
                >
                  <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 ==='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">
                  {{ getTicketStatus(scope.row.type) }}
                </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="form.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="form.pageSize"
              @size-change="handleSizeChange"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="getListTransfer()"
              :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="售票员票仓消耗记录"
          name="saleman">
          <div class="table-box">
            <el-form
              :inline="true"
              label-width="120"
              label-position="right"
              class="buyer-info">
              <el-form-item
                label="起始时间"
                prop="startDate"
              >
                <el-date-picker
                  v-model="form.startDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  @change="changeDate"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                label="截止时间"
                prop="endDate"
              >
                <el-date-picker
                  default-time="23:59:59"
                  v-model="form.endDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  @change="changeDate"

                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                label="状态"
              >
                <el-select
                  v-model="status_invalid"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    label="全部"
                    value=""></el-option>
                  <el-option
                    v-for="item in ticketStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-table
              border
              :data="invalidList"
              v-loading="loading"
            >
              <el-table-column
                prop="id"
                label="序号"
              >
              </el-table-column>
              <el-table-column
                label="类型"
              >
                <template slot-scope="scope">
                  {{ getTicketStatus(scope.row.type) }}
                </template>
              </el-table-column>
              <el-table-column
                label="数量"
                prop="number"
              >
              </el-table-column>
              <el-table-column
                label="票的税印起始"
                prop="ticketpaper_num_begin"
              >
                <template slot-scope="scope">
                  {{ scope.row.ticketpaper_num_begin?scope.row.ticketpaper_num_begin:'' }}
                </template>
              </el-table-column>
              <el-table-column
                label="票的税印结束"
              >
                <template slot-scope="scope">
                  {{ scope.row.ticketpaper_num_end?scope.row.ticketpaper_num_end:'' }}
                </template>
              </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="form.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="form.pageSize"
              @size-change="handleSizeChange"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="getListConsumeLog()"
              :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
import { getListTransfer, getListConsumeLog } from '@/api/ticketInventory'
import moment from 'moment'
const defaultForm = {
  keyWords1: 'SALEMAN',
  keyWords2: '',
  keyWords3: '',
  startDate: new Date(moment().format('YYYY-MM-DD') + ' 00:00:00'),
  endDate: new Date(moment().format('YYYY-MM-DD') + ' 23:59:59')
}
export default {
  computed: {
    userId () {
      return this.$store.state.user.id
    }
    // recordList () {
    //   let recordList = this.transferList.concat(this.invalidList)
    //   this.sortKey(recordList, 'createTime')
    //   return this.status ? recordList.filter(i => i.type === this.status) : recordList
    // }
  },
  components: {
  },
  data () {
    return {
      visible: false,
      activeName: 'inventory',
      queryName: '',
      transferList: [], // 增加库存
      invalidList: [], // 减少库存
      loading: false,
      status: 'INOUT',
      status_invalid: '',
      form: {
        ...defaultForm
      },
      // form_invalid: {
      //   ...defaultForm
      // },
      total: 0,
      inventoryStatus: [
        {
          label: '全部',
          value: 'INOUT'
        },
        {
          label: '增加',
          value: 'IN'
        },
        {
          label: '减少',
          value: 'OUT'
        }
      ],
      ticketStatus: [
        {
          label: '网络取票消耗',
          value: 'PICK'
        },
        {
          label: '售票消耗',
          value: 'BUY'
        },
        {
          label: '作废消耗',
          value: 'INVALID'
        }
      ]

    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab.name)
      this.form.pageNum = 1
      if (tab.name === 'inventory') {
        this.getListTransfer()
      } else {
        this.getListConsumeLog()
      }
    },
    show (data) {
      this.visible = true
      this.queryName = data.name
      this.$nextTick(() => {
        this.form = JSON.parse(JSON.stringify(defaultForm))
        this.form.keyWords2 = String(data.id)
        this.getListTransfer()
      })
    },
    changeDate () {
      this.getListTransfer()
      this.getListConsumeLog()
    },
    getTicketStatus (val) {
      switch (val) {
        case 'MANAGERTOBRANCH':
          return '回仓'
        case 'BRANCHTOMANAGER':
          return '分仓'
        case 'BUY':
          return '售票消耗'
        case 'PICK':
          return '网络取票消耗'
        case 'INVALID':
          return '作废消耗'
        default:
          break
      }
    },
    getListTransfer () {
      this.loading = true
      let params = {
        keyWords1: 'SALEMAN',
        keyWords2: String(this.form.keyWords2),
        keyWords3: this.status,
        startDate: this.form.startDate,
        endDate: this.form.endDate,
        pageNum: this.form.pageNum

      }
      getListTransfer(params).then(res => {
        this.transferList = res.list
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    sortKey (array, key) {
      return array.sort(function (a, b) {
        var x = a[key]
        var y = b[key]
        return x > y ? -1 : x < y ? 1 : 0
      })
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getListConsumeLog()
    },
    getListConsumeLog () {
      let params = {
        startDate: this.form.startDate,
        endDate: this.form.endDate,
        keyWords1: this.status_invalid,
        keyWords2: this.form.keyWords2,
        pageNum: this.form.pageNum
      }

      getListConsumeLog(params).then(res => {
        this.invalidList = res.list
        console.log('this.invalidList', this.invalidList)
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    handleClose () {
      this.visible = false
      this.status = 'INOUT'
    }
  },
  watch: {
    status (val) {
      this.getListTransfer()
    },
    status_invalid (val) {
      this.getListConsumeLog()
    }
    // invalidList (val) {
    //   this.recordList = this.transferList.concat(val)
    // }
  }
}
</script>

<style lang="scss">

</style>
