<template>
  <div>
    <a-card size="small" :bordered="false" class="searchBoxNormal">
      <!-- 搜索条件 -->
      <div ref="tableSearch" class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
          <a-row :gutter="15">
            <a-col :md="6" :sm="24">
              <a-form-item label="入库单号">
                <a-input id="warehousingConfirmationList-stockPutNo" v-model.trim="queryParam.stockPutNo" allowClear placeholder="请输入入库单号"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="业务单号">
                <a-input id="warehousingConfirmationList-putBizNo" v-model.trim="queryParam.putBizNo" allowClear placeholder="请输入业务单号"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="入库类型">
                <v-select
                  v-model="queryParam.putBizType"
                  id="warehousingConfirmationList-putBizType"
                  code="PUT_STOCK_TYPE"
                  placeholder="请选择入库类型"
                  allowClear></v-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="单据状态">
                <v-select
                  v-model="queryParam.auditState"
                  ref="auditState"
                  id="warehousingConfirmationList-auditState"
                  code="PUT_CONFIRM_STATE"
                  placeholder="请选择单据状态"
                  allowClear></v-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24" v-show="isShowWarehouse">
              <a-form-model-item label="仓库">
                <chooseWarehouse ref="warehouse" v-model="queryParam.warehouseSn" :isPermission="true"></chooseWarehouse>
              </a-form-model-item>
            </a-col>
            <a-col :md="isShowWarehouse?6:24" :sm="24" style="margin-bottom: 10px;" :style="{textAlign:isShowWarehouse?'left':'center'}">
              <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="warehousingConfirmationList-refresh">查询</a-button>
              <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="warehousingConfirmationList-reset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card size="small" :bordered="false" class="warehousingConfirmationList-wrap">
      <a-spin :spinning="spinning" tip="Loading...">
        <!-- 列表 -->
        <div v-if="$hasPermissions('B_warehousingConfirmationpl')" style="margin-bottom: 10px">
          <a-button type="primary" id="warehousingConfirmationList-export" :loading="loading" @click="handleBatchAudit">批量确认</a-button>
          <span style="margin-left: 10px">
            <template v-if="rowSelectionInfo&&rowSelectionInfo.selectedRowKeys.length>0"> {{ `已选 ${rowSelectionInfo.selectedRowKeys.length} 项` }} </template>
          </span>
        </div>
        <s-table
          class="sTable fixPagination"
          ref="table"
          :style="{ height: tableHeight+70+'px' }"
          size="small"
          :rowKey="(record) => record.stockPutSn"
          rowKeyName="stockPutSn"
          :row-selection="$hasPermissions('B_warehousingConfirmationpl') ? { columnWidth: 40, getCheckboxProps: record => ({ props: { disabled: record.auditState != 'WAIT' } }) } : null"
          @rowSelection="rowSelectionFun"
          :columns="columns"
          :data="loadData"
          :pageSize="30"
          :scroll="{ y: tableHeight }"
          :defaultLoadData="false"
          bordered>
          <!-- 入库单号 -->
          <template slot="stockPutNo" slot-scope="text, record">
            <span :id="'warehousingConfirmationList-detail-'+record.stockPutNo" v-if="$hasPermissions('B_warehousingConfirmationDetail')" class="link-bule" @click="handleDetail(record)">{{ record.stockPutNo }}</span>
            <span v-else>{{ record.stockPutNo }}</span>
          </template>
          <!-- 操作 -->
          <template slot="action" slot-scope="text, record">
            <a-button
              size="small"
              type="link"
              v-if="record.auditState=='WAIT' && $hasPermissions('B_warehousingConfirmationAlone')"
              class="button-info"
              @click="handleAudit(record)"
              :id="'warehousingConfirmationList-audit-btn-'+record.stockPutNo">入库确认</a-button>
            <span v-else>--</span>
          </template>
        </s-table>
      </a-spin>
      <!-- 查看 -->
      <confirmation-detail-modal v-drag :openModal="openModal" :itemSn="itemSn" :nowData="nowData" @close="closeModal" />
      <!-- 入库确认 -->
      <a-modal
        centered
        v-drag
        class="confirmation-modal"
        :footer="null"
        :maskClosable="false"
        v-model="confirmationModal"
        @cancel="confirmationModal=false"
        :width="416">
        <div class="confirmation-main">
          <a-icon type="question-circle" style="color: #faad14;font-size: 22px;margin-right: 16px;" />
          <div class="confirmation-cont">
            <p class="confirmation-tit">提示</p>
            <p class="confirmation-txt">请点击下方按钮确认操作？</p>
          </div>
        </div>
        <div class="btn-box">
          <a-button
            v-if="confirmationInfo&&confirmationInfo.putBizType!='PURCHASE'"
            id="confir-ruku-cancel"
            type="primary"
            :loading="spinning"
            class="button-error"
            @click="handleConfirmationFail">不通过</a-button>
          <a-button id="confir-ruku-ok" type="primary" :loading="spinning" class="button-info" @click="handleConfirmationOk">通过</a-button>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { STable, VSelect } from '@/components'
import confirmationDetailModal from './detailModal.vue'
import chooseWarehouse from '@/views/common/chooseWarehouse'
import { stockPutList, stockPutConfirm } from '@/api/stockPut'
export default {
  name: 'WarehousingConfirmationList',
  mixins: [commonMixin],
  components: { STable, VSelect, confirmationDetailModal, chooseWarehouse },
  data () {
    return {
      spinning: false,
      loading: false,
      queryParam: { //  查询条件
        stockPutNo: '', //  入库单号
        putBizNo: '', //  业务单号
        putBizType: undefined, //  入库类型
        auditState: undefined, //  状态
        warehouseSn: undefined // 仓库
      },
      tableHeight: 0, // 表格高度
      disabled: false, //  查询、重置按钮是否可操作
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        this.spinning = true
        return stockPutList(Object.assign(parameter, this.queryParam, { confirm: true })).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            this.disabled = false
          }
          this.spinning = false
          return data
        })
      },
      openModal: false, // 详情弹框
      itemSn: '', // 详情弹框单据sn
      nowData: null, // 详情弹框当前操作数据
      confirmationModal: false, // 入库确认弹框
      confirmationInfo: null, // 确认入库得单据数据
      isBatch: false, // 是否批量确认入库
      rowSelectionInfo: null // 批量操作已选数据
    }
  },
  computed: {
    // 列表表头
    columns () {
      const arr = [
        { title: '入库时间', dataIndex: 'putTime', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '入库单号', scopedSlots: { customRender: 'stockPutNo' }, width: '12%', align: 'center' },
        { title: '业务单号', dataIndex: 'putBizNo', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '商户名称', dataIndex: 'providerName', align: 'left', width: '18%', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '入库数量', dataIndex: 'productTotalQty', width: '7%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '入库类型', dataIndex: 'putBizTypeDictValue', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '单据状态', dataIndex: 'auditStateDictValue', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '财务审核时间', dataIndex: 'auditTime', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '备注', dataIndex: 'remark', width: '15%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: '8%', align: 'center' }
      ]
      // 是否显示仓库
      if (this.isShowWarehouse) {
        arr.splice(3, 0, { title: '仓库', dataIndex: 'warehouseName', width: '12%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true })
      }
      if (this.$hasPermissions('M_warehousingConfirmationList_costPrice')) { // 成本价权限
        arr.splice(this.isShowWarehouse ? 5 : 4, 0, { title: '入库成本', dataIndex: 'productTotalCost', width: '7%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') })
      }

      return arr
    }
  },
  methods: {
    // 表格选中项
    rowSelectionFun (obj) {
      this.rowSelectionInfo = obj || null
    },
    //  重置
    resetSearchForm () {
      this.queryParam.stockPutNo = ''
      this.queryParam.putBizNo = ''
      this.queryParam.putBizType = undefined
      this.queryParam.auditState = undefined
      this.queryParam.warehouseSn = undefined
      this.$refs.table.refresh(true)
    },
    // 详情
    handleDetail (row) {
      if (this.$hasPermissions('B_warehousingConfirmationDetail')) {
        this.itemSn = row.stockPutSn
        this.nowData = row
        this.openModal = true
      }
    },
    // 关闭详情弹框
    closeModal () {
      this.itemSn = ''
      this.nowData = null
      this.openModal = false
    },
    // 入库确认通过
    handleConfirmationOk () {
      if (this.isBatch) { //  批量
        this.auditOrder(this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys, true)
      } else {
        this.auditOrder([this.confirmationInfo.stockPutSn], true)
      }
    },
    // 入库确认不通过
    handleConfirmationFail () {
      if (this.isBatch) { //  批量
        this.auditOrder(this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys, false)
      } else {
        this.auditOrder([this.confirmationInfo.stockPutSn], false)
      }
    },
    // 打开入库确认
    handleAudit (row) {
      this.confirmationInfo = row
      this.isBatch = false
      this.confirmationModal = true
    },
    // 入库确认接口调用
    auditOrder (snList, flag) {
      const _this = this
      if (this.isBatch) {
        _this.loading = true
      }
      _this.spinning = true
      stockPutConfirm({ stockPutSnList: snList, confirm: flag }).then(res => {
        if (this.isBatch) {
          _this.loading = false
        }
        if (res.status == 200) {
          if (this.isBatch) {
            _this.$refs.table.clearSelected() // 清空表格选中项
          }
          _this.$message.success(res.message)
          _this.$refs.table.refresh()
          _this.confirmationModal = false
          _this.spinning = false
        } else {
          _this.confirmationModal = false
          _this.spinning = false
        }
      })
    },
    // 批量入库确认
    handleBatchAudit () {
      const _this = this
      if (!_this.rowSelectionInfo || (_this.rowSelectionInfo && _this.rowSelectionInfo.selectedRowKeys.length < 1)) {
        _this.$message.warning('请在列表勾选后再进行批量操作！')
        return
      }
      this.isBatch = true
      this.confirmationModal = true
    },
    // 页面初始
    pageInit () {
      const _this = this
      this.$nextTick(() => { // 页面渲染完成后的回调
        _this.setTableH()
      })
      this.rowSelectionInfo = null
      this.$refs.table.clearTable()
    },
    // 表格高度
    setTableH () {
      const tableSearchH = this.$refs.tableSearch.offsetHeight
      this.tableHeight = window.innerHeight - tableSearchH - 240
    }
  },
  watch: {
    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时，需同时更改表格高度
      this.setTableH()
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.pageInit()
      this.resetSearchForm()
    }
  },
  activated () {
    // 如果是新页签打开，则重置当前页面
    if (this.$store.state.app.isNewTab) {
      this.pageInit()
      this.resetSearchForm()
    }
    // 仅刷新列表，不重置页面
    if (this.$store.state.app.updateList) {
      this.pageInit()
      this.$refs.table.refresh()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>

<style lang="less">
	.active{
		color: #ed1c24;
		cursor: pointer;
	}
	.common{
		color: rgba(0, 0, 0);
	}
  .confirmation-modal{
    .ant-modal-body{
      padding: 32px 32px 24px;
    }
    .confirmation-main{
      display: flex;
      .confirmation-cont{
        .confirmation-tit{
          color: rgba(0, 0, 0);
          font-weight: 500;
          font-size: 16px;
          line-height: 1.4;
          margin: 0;
        }
        .confirmation-txt{
          margin: 8px 0 0;
          color: rgba(0, 0, 0);
          font-size: 14px;
          line-height: 1.5;
        }
      }
    }
    .btn-box{
      text-align: right;
      margin-top: 24px;
    }
  }
</style>
