<template>
	<div>
		<div class="describe">标的需求</div>
		<div class="padding">
			<div class="buttons">
				<el-button @click="add">添加</el-button>
				<el-button @click="delAllSelection">删除</el-button>
			</div>
			<dataTable :table-data="tableData" :columns="columns" :is-pageobj="false" @sendSelection="getSelection">
				<el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="examine(scope.row,scope.$index)">编辑</el-button>
						<el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</dataTable>
			<el-dialog :visible.sync="dialogVisible" title="添加标的" width="50%">
				<!-- <dataForm 
          ref="dataform" 
          :search-form="searchForm" 
          :search-data="searchData" 
		  :rules="rules"
          :is-inline="true" 
          :is-handle="false"
          label-width="200px"></dataForm> -->
				<el-form :model="searchData" :rules="rules" ref="searchData" label-width="150px">
					<el-form-item label="标的编码：" prop="encoding">
						<el-input v-model.trim="searchData.encoding" placeholder='请输入' maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="标的名称：" prop="bidName">
						<el-input v-model.trim="searchData.bidName" placeholder='请输入' maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="数量：" prop="quantity">
						<el-input v-model.trim="searchData.quantity" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder='请输入'
						 maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="计量单位：" prop="unit">
						<el-input v-model.trim="searchData.unit" placeholder='请输入' maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="品牌：" prop="brand">
						<el-input v-model.trim="searchData.brand" placeholder='请输入' maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="规格型号：" prop="specification">
						<el-input v-model.trim="searchData.specification" placeholder='请输入' maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="标杆价(元)：" prop="price">
						<el-input-number v-model="searchData.price" :min="0" :controls="false" :precision="2" placeholder="请输入"></el-input-number>
					</el-form-item>
					<el-form-item label="备注：" prop="remark">
						<el-input v-model.trim="searchData.remark" placeholder='请输入' maxlength="30"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="sure">确 定</el-button>
				</div>
			</el-dialog>
		</div>
		<div class="button">
			<el-button @click="upper">上一步</el-button>
			<el-button type="primary" @click="next">下一步</el-button>
		</div>
	</div>
</template>

<script>
	import {
		generateNumber
	} from '@api/common/list'
	import dataTable from '@components/nopageTable.vue'
	import dataForm from '@components/dataForm.vue'
	export default {
		components: {
			dataTable,
			dataForm
		},
		data() {
			return {
				// searchForm: [{
				//        type: 'input',
				//        label: '标的编码：',
				//        prop: 'encoding',
				//        width: '100%',
				//        placeholder: '请输入',
				//        disabled: false
				//      },
				//      {
				//        type: 'input',
				//        label: '标的名称：',
				//        prop: 'bidName',
				//        width: '100%',
				//        placeholder: '请输入',
				//        disabled: false
				//      },
				//      {
				//        type: 'input',
				//        label: '数量：',
				//        prop: 'quantity',
				//        width: '100%',
				//        placeholder: '请输入',
				//        disabled: false
				//      },
				//      {
				//        type: 'input',
				//        label: '计量单位：',
				//        prop: 'unit',
				//        width: '100%',
				//        placeholder: '请输入',
				//        disabled: false
				//      },
				//      {
				//        type: 'input',
				//        label: '品牌：',
				//        prop: 'brand',
				//        width: '100%',
				//        placeholder: '请输入',
				//        disabled: false
				//      },
				//      {
				//        type: 'input',
				//        label: '规格型号：',
				//        prop: 'specification',
				//        width: '100%',
				//        placeholder: '请输入',
				//        disabled: false
				//      },
				//      {
				//        type: 'input',
				//        label: '标杆价(元)：',
				//        prop: 'price',
				//        width: '100%',
				//        placeholder: '请输入',
				//        disabled: false
				//      },
				//   {
				//     type: 'input',
				//     label: '备注：',
				//     prop: 'remark',
				//     width: '100%',
				//     placeholder: '请输入',
				//     disabled: false
				//   }
				//      ],
				// 表单验证
				rules: {
					encoding: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					bidName: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					quantity: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					unit: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					brand: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					specification: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					// remark: [{
					// 	required: true,
					// 	message: '请输入',
					// 	trigger: 'blur'
					// }],
				},
				multipleSelection: [],
				dialogVisible: false,
				searchData: {
					encoding: '',
					bidName: '',
					quantity: '',
					unit: '',
					brand: '',
					specification: '',
					price: undefined,
					remark: ""
				},
				tableData: [],
				columns: [{
						selection: true
					},
					{
						label: '标的编码',
						prop: 'encoding'
					},
					{
						label: '标的名称',
						prop: 'bidName'
					},
					{
						label: '数量',
						prop: 'quantity'
					},
					{
						label: '计量单位',
						prop: 'unit'
					},
					{
						label: '品牌',
						prop: 'brand'
					},
					{
						label: '规格型号',
						prop: 'specification'
					},
					{
						label: '标杆价(元)',
						prop: 'price'
					},
					{
						label: '备注',
						prop: 'remark'
					},
					{
						slot: 'operate'
					}
				], // 操作列

				pageObj: {
					size: 10,
					total: 1,
					currentPage: 1,
					sizes: [100, 200, 300],
					func: (currentPage) => {
						this.pageTurning(currentPage)
					}
				},
				type: '',
				idx: ''
			}
		},
		methods: {
			// 删除操作
			handleDelete(row, index) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$message.success('删除成功')
						this.tableData.splice(index, 1)
					})
					.catch(() => {})
			},
			getSelection(val) {
				console.log(val)
				this.multipleSelection = val
			},
			// 删除操作
			delAllSelection() {
				let val = this.multipleSelection
				if (val.length > 0) {
					console.log(val);
					val.forEach((va, index) => {
						this.tableData.forEach((v, i) => {
							if (va.bidName === v.bidName) {
								this.tableData.splice(i, 1)
							}
						})
					})
					this.$message.success("删除成功");
					this.multipleSelection = [];
				} else {
					this.$message.error("没有选择删除的项");
				}
			},
			// 确认添加需求
			async sure() {
				const valid = await this.$refs['searchData'].validate();
				console.log(valid)
				if (valid) {
					let type = this.type
					if (type === 0) {
						this.tableData.push(this.searchData)
					} else {
						this.$set(this.tableData, this.idx, this.searchData)
					}
					this.dialogVisible = false
				}
			},
			examine(row, index) {
				this.type = 1
				this.idx = index
				this.searchData = Object.assign({}, row)
				this.dialogVisible = true
			},
			async add() {
				try {
					this.type = 0
					this.dialogVisible = true
					const {
						data,
						code
					} =await generateNumber(2)
					let searchData = {
						encoding: data,
						bidName: '',
						quantity: '',
						unit: '',
						brand: '',
						specification: '',
						price: '',
						remark: ""
					}
					console.log(searchData)
					this.searchData = searchData
				} catch (e) {
					console.log(e)
				}
			},
			next() {
				let projectCommodityList = this.tableData;
				// if (projectCommodityList.length > 0) {
				// 	let ruleForm = {};
				// 	ruleForm.projectCommodityList = projectCommodityList;
				// 	this.$emit('getruleForm', ruleForm)
				// 	this.$parent.next()
				// } else {
				// 	this.$message.error('请添加标的需求');
				// }
				let ruleForm = {};
				ruleForm.projectCommodityList = projectCommodityList;
				this.$emit('getruleForm', ruleForm)
				this.$parent.next()
			},
			upper() {
				this.$parent.upper()
			}
		}
	}
</script>

<style scoped>
	.padding {
		box-sizing: border-box;
		padding: 10px 20px 30px 20px
	}

	.buttons {
		margin-bottom: 30px;
	}

	.button {
		display: flex;
		justify-content: flex-end;
		padding-bottom: 20px;
		margin-right: 20px;
	}
</style>
