<template>
	<a-card :bordered="false" class="satelliteWarehouseInventoryList-wrap">
		<!-- 搜索条件 -->
		<div class="table-page-search-wrapper">
			<a-form-model
				id="satelliteWarehouseInventoryList-form"
				ref="ruleForm"
				:model="queryParam"
				:rules="rules"
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
				@keyup.enter.native="$refs.table.refresh(true)" >
				<a-row :gutter="15">
					<a-col :md="6" :sm="24">
						<a-form-model-item label="客户名称" prop="customer">
							<a-select
								placeholder="请选择客户"
								allowClear
								v-model="queryParam.customer"
								:showSearch="true"
								option-filter-prop="children"
								:filter-option="filterOption"
							>
								<a-select-option v-for="item in brandData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
					<a-col :md="6" :sm="24">
						<a-form-model-item label="配件名称">
							<a-input id="satelliteWarehouseInventoryList-bundleName" v-model.trim="queryParam.bundleName" allowClear placeholder="请输入配件名称" />
						</a-form-model-item>
					</a-col>
					<a-col :md="6" :sm="24">
						<a-form-model-item label="配件编码">
							<a-input id="satelliteWarehouseInventoryList-bundleName" v-model.trim="queryParam.bundleName" allowClear placeholder="请输入产品编码或产品原厂编码" />
						</a-form-model-item>
					</a-col>
					<a-col :md="6" :sm="24">
						<a-button type="primary" @click="handleSearch" :disabled="disabled" id="satelliteWarehouseInventoryList-refresh" style="margin-top: 4px">
							查询
						</a-button>
						<a-button @click="resetSearchForm" :disabled="disabled" id="satelliteWarehouseInventoryList-reset" style="margin: 4px 0 0 8px">重置</a-button>
					</a-col>
				</a-row>
			</a-form-model>
		</div>
		<!-- 操作按钮 -->
		<div class="table-operator">
      <a-button id="satelliteWarehouseInventoryList-replenishment" type="primary" @click="handleReplenishment">
        补货清单
        <span v-if="checkedList.length>0">（{{checkedList.length}}）</span>
      </a-button>
    </div>
		<!-- 列表 -->
		<s-table class="sTable" ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" bordered>
			<!-- 操作 -->
			<template slot="action" slot-scope="text, record">
        <a-button size="small" type="danger" v-if="checkedList.indexOf(record.id) != -1" @click="handleRemove(record)" id="satelliteWarehouseInventoryList-remove-btn">移出补货清单</a-button>
				<a-button size="small" type="primary" v-else @click="handleAdd(record)" id="satelliteWarehouseInventoryList-add-btn">加入补货单</a-button>
      </template>
		</s-table>
		<!-- 客户详情 -->
		<satellite-warehouse-inventory-add-modal :openModal="openModal" @close="closeModal" />
	</a-card>
</template>

<script>
import moment from 'moment';
// import { customerBundleDelayList, customerBundleExportDelay } from '@/api/FinancialManagement'
import { STable, VSelect } from '@/components';
import satelliteWarehouseInventoryAddModal from './addModal.vue';
export default {
	components: { STable, VSelect, satelliteWarehouseInventoryAddModal },
	data() {
		return {
			labelCol: { span: 8 },
			wrapperCol: { span: 16 },
			queryParam: {
				//  查询条件
				customer: undefined, //  客户名称
				bundleName: '', //  套餐名称
				itemName: '', //  服务名称
				brand: undefined //  产品品牌
			},
			rules: {
				customer: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
			},
			disabled: false, //  查询、重置按钮是否可操作
			brandData: [], //  产品品牌下拉数据
			columns: [
				{ title: '序号', dataIndex: 'no', width: 70, align: 'center' },
				{ title: '客户名称', dataIndex: 'productName', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
				{ title: '配件名称', dataIndex: 'productBrand', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
				{ title: '产品编码', dataIndex: 'productOldNum', align: 'center', customRender: function (text) { return text || '--' } },
				{ title: '原厂编码', dataIndex: 'productType', align: 'center', customRender: function (text) { return text || '--' } },
				{ title: '当前库存', dataIndex: 'inventoryNumss', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
				{ title: '操作', scopedSlots: { customRender: 'action' }, width: 150, align: 'center' }
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				this.disabled = true;
				// return customerBundleDelayList( Object.assign(parameter, this.queryParam) ).then(res => {
				//   const data = res.data
				//   const no = (data.pageNo - 1) * data.pageSize
				//   for (var i = 0; i < data.list.length; i++) {
				//     data.list[i].no = no + i + 1
				//   }
				//   this.disabled = false
				//   return data
				// })
				const _this = this;
				return new Promise(function(resolve, reject) {
					const data = {
						pageNo: 1,
						pageSize: 10,
						list: [
							{ id: '1', productNum: 'jgqp11111111111', productName: '产品1', productOldNum: 'jgqp111123545', productBrand: '箭冠品牌', inventoryNumss: '0' },
							{ id: '2', productNum: 'jgqp11111111111', productName: '产品1', productOldNum: 'jgqp111123545', productBrand: '箭冠品牌', inventoryNumss: '0' },
							{ id: '3', productNum: 'jgqp11111111111', productName: '产品1', productOldNum: 'jgqp111123545', productBrand: '箭冠品牌', inventoryNumss: '0' },
						]
					};
					const no = (data.pageNo - 1) * data.pageSize;
					for (var i = 0; i < data.list.length; i++) {
						data.list[i].no = no + i + 1;
					}
					_this.disabled = false;
					resolve(data);
				})
			},
			openModal: false, //  查看客户详情  弹框
      checkedList: []  //  加入补货单数据
		};
	},
	methods: {
		// 不可选日期
		disabledDate(date, dateStrings) {
			return date && date.valueOf() > Date.now()
		},
    //  查询
    handleSearch(){
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$refs.table.refresh(true)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
		//  重置
		resetSearchForm() {
			this.queryParam.orderBundleNo = ''
			this.queryParam.orderBundle.custMobile = ''
			this.queryParam.bundleName = ''
			this.queryParam.itemName = ''
			this.oldTime = undefined
			this.newTime = undefined
			this.$refs.table.refresh(true)
		},
		//  补货清单
		handleReplenishment() {
			this.openModal = true
		},
		//  加入补货单
		handleAdd(row) {
      this.checkedList.indexOf(row.id) == -1 ? this.checkedList.push(row.id) : null
    },
    //  移出补货单
    handleRemove(row){
      this.checkedList.splice(this.checkedList.indexOf(row.id), 1)
    },
		//  关闭弹框
		closeModal() {
			this.openModal = false
		},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
		}
	}
};
</script>

<style lang="less"></style>
