<template>
  <a-card size="small" :bordered="false" class="warehousingConfirmationList-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <!-- 搜索条件 -->
      <div 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="单据状态">
                <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">
              <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="warehousingConfirmationList-refresh">查询</a-button>
              <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm" :disabled="disabled" id="warehousingConfirmationList-reset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 列表 -->
      <div v-if="$hasPermissions('B_warehousingConfirmationpl')" style="margin-bottom: 15px">
        <a-button type="primary" id="warehousingConfirmationList-export" :loading="loading" @click="handleBatchAudit">批量确认</a-button>
        <span style="margin-left: 8px">
          <template v-if="hasSelected">{{ `已选 ${selectedRowKeys.length} 项` }}</template>
        </span>
      </div>
      <s-table
        class="sTable"
        ref="table"
        size="small"
        :row-selection="rowSelection"
        :rowKey="(record) => record.stockPutSn"
        :columns="columns"
        :data="loadData"
        :scroll="{ x: 1530, y: tableHeight }"
        bordered>
        <!-- 入库单号 -->
        <template slot="stockPutNo" slot-scope="text, record">
          <span :class="$hasPermissions('B_warehousingConfirmationDetail')?'active':'common'" @click="handleDetail(record)">{{ 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-warning"
            @click="handleAudit(record)"
            id="warehousingConfirmationList-audit-btn">入库确认</a-button>
          <span v-else>--</span>
        </template>
      </s-table>
    </a-spin>
    <!-- 查看 -->
    <confirmation-detail-modal :openModal="openModal" :itemSn="itemSn" :nowData="nowData" @close="closeModal" />
    <!-- 入库确认 -->
    <a-modal
      centered
      class="confirmation-modal"
      :footer="null"
      :maskClosable="false"
      v-model="confirmationModal"
      @cancle="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 type="primary" class="button-error" @click="handleConfirmationFail">不通过</a-button>
        <a-button type="primary" class="button-info" @click="handleConfirmationOk">通过</a-button>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import { STable, VSelect } from '@/components'
import confirmationDetailModal from './detailModal.vue'
import { stockPutList, stockPutConfirm } from '@/api/stockPut'
export default {
  components: { STable, VSelect, confirmationDetailModal },
  data () {
    return {
      spinning: false,
      queryParam: { //  查询条件
        stockPutNo: '', //  入库单号
        auditState: undefined //  状态
      },
      tableHeight: 0,
      disabled: false, //  查询、重置按钮是否可操作
      columns: [
        { title: '入库时间', dataIndex: 'putTime', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '入库单号', scopedSlots: { customRender: 'stockPutNo' }, width: 220, align: 'center' },
        { title: '商户名称', dataIndex: 'providerName', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '入库数量', dataIndex: 'productTotalQty', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '入库成本', dataIndex: 'productTotalCost', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '入库类型', dataIndex: 'putBizTypeDictValue', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '单据状态', dataIndex: 'auditStateDictValue', width: 110, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '财务审核时间', dataIndex: 'auditTime', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '备注', dataIndex: 'remark', width: 140, align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center', fixed: 'right' }
      ],
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        if (this.tableHeight == 0) {
          this.tableHeight = window.innerHeight - 370
        }
        return stockPutList(Object.assign(parameter, this.queryParam, { confirm: true })).then(res => {
          const data = res.data
          this.disabled = false
          return data
        })
      },
      openModal: false,
      itemSn: '',
      nowData: null,
      confirmationModal: false,
      confirmationInfo: null,
      isBatch: false
    }
  },
  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },
    rowSelection () {
      if (this.$hasPermissions('B_warehousingConfirmationpl')) {
        return {
			  selectedRowKeys: this.selectedRowKeys,
			  onChange: (selectedRowKeys, selectedRows) => {
			    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
			    this.onSelectChange(selectedRowKeys)
			  },
			  getCheckboxProps: record => ({
			    props: {
			      disabled: record.auditState != 'WAIT'
			    }
			  })
        }
      } else {
        return null
      }
    }
  },
  methods: {
    //  重置
    resetSearchForm () {
      this.queryParam.stockPutNo = ''
      this.queryParam.auditState = 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.selectedRowKeys, true)
      } else {
        this.auditOrder([this.confirmationInfo.stockPutSn], true)
      }
    },
    // 不通过
    handleConfirmationFail () {
      if (this.isBatch) { //  批量
        this.auditOrder(this.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.selectedRowKeys = []
            _this.selectedRows = []
          }
          _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.selectedRowKeys.length < 1) {
        _this.$message.warning('请在列表勾选后再进行批量操作！')
        return
      }
      this.isBatch = true
      this.confirmationModal = true
    },
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>

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