<template>
	<div>
		<div class="flex">
			<el-button @click="bindMachine">绑定机器</el-button>
		</div>
		<el-table v-loading="loading" :data="list">
			<el-table-column label="机器编码" align="center" prop="code" />
			<el-table-column label="设备型号" align="center" prop="type" />
			<el-table-column label="绑定时间" align="center" prop="bindTime" />
			<el-table-column label="状态" align="center" prop="state">
				<template slot-scope="scope">
					<span v-if="scope.row.state == 1">正常</span>
					<span v-if="scope.row.state == 2">故障</span>
					<span v-if="scope.row.state == 3">关停</span>
				</template>
			</el-table-column>

			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-popconfirm title="确定要解绑吗？" @confirm="unbound(scope.row.id)">
						<el-button slot="reference" size="mini" type="text" icon="el-icon-delete">解绑
						</el-button>
					</el-popconfirm>

				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
		<el-dialog title="店铺设置" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="机器编码" prop="code">
					<el-input v-model="form.code" placeholder="请输入机器编码" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>

import { machine, bindMachine, unbound } from "@/api/system/shop";

export default {
	props: ['shopId'],
	data() {
		return {
			loading: false,
			open: false,
			queryParams: {},
			total: 0,
			list: [],
			form: {},
			rules: {
				code: [
					{ required: true, message: "不能为空", trigger: "change" },
				],
			}
		}
	},
	watch: {
		//shopId() {
			//this.getList()
		//}
	},
	mounted() {
		if (!this.shopId) return
		//this.getList()
	},
	methods: {
		/** 查询列表 */
		getList() {
			this.loading = true;
			const sendparams = { shopId: this.shopId, ...this.queryParams };
			machine(sendparams).then((response) => {
				this.list = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		bindMachine() {
			this.open = true;
		},
		unbound(id) {
			unbound({ id }).then(() => {
				this.$modal.msgSuccess("解绑成功！");
				this.getList();

			})
		},
		submitForm() {
			this.$refs["form"].validate((valid) => {
				if (valid) {
					bindMachine({ ...this.form, shopId: this.shopId }).then((response) => {
						this.$modal.msgSuccess("绑定成功！");
						this.open = false;
						this.getList();
					});
				}
			});
		},
		cancel() {
			this.form = {};
			this.open = false;
		}
	}
}
</script>

<style>
.flex {
	height: 50px;
	align-items: center;
	text-align: right;

}
</style>