<template>
	<div>
		<el-table v-loading="loading" :data="orderList">
			<el-table-column label="商品名称" align="center" prop="name" />
			<el-table-column label="编码" align="center" prop="code" />
			<el-table-column label="折扣价" align="center" prop="discount" />
			<el-table-column label="原价" align="center" prop="price" />
			<el-table-column label="销售总量" align="center" prop="salesVolume" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-popconfirm title="确定要移除吗？" @confirm="removeRecommend(scope.row)">
						<el-button type="text" slot="reference">移除推荐</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" />
	</div>
</template>

<script>
import { recommendList, removeRecommend } from '@/api/system/shop'
export default {
	props: ['shopId'],
	data() {
		return {
			loading: false,
			orderList: [],
			radio2: '',
			total: 0,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
			}
		}
	},
	watch: {
		shopId() {
			this.getList()
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		getList() {
			this.loading = true;
			recommendList({ ...this.queryParams, shopId: this.shopId, type: 1 }).then(response => {
				this.orderList = response.rows;
				this.total = response.total;
				this.loading = false
			});
		},
		removeRecommend(data) {
			removeRecommend({ goodsId: data.id, type: 1, shopId: this.shopId }).then(res => {
				this.$modal.msgSuccess("移除成功");
				this.getList()
			})
		}
	}
}
</script>

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

}
</style>