<template>
	<ContainerQuery>
		<el-form slot="more" size="small" :inline="true">
			<el-form-item>
				<el-input v-model="search_key" placeholder="项目名称" clearable style="width: 220px"
					@keyup.enter.native="pageChange(1)" @clear="pageChange(1)">
					<el-button slot="append" icon="el-icon-search" @click="pageChange(1)"></el-button>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="is_show" filterable placeholder="上下架" @change="getShopProjectList">
					<el-option label="全部" value=""></el-option>
					<el-option label="上架" value="2"></el-option>
					<el-option label="下架" value="1"></el-option>
				</el-select>
			</el-form-item>
			<!-- <el-form-item>
				<DepartmentSel v-model="departmentPidPath" width="150" clearable @change="departmentChange" />
			</el-form-item> -->
			<!-- <el-form-item>
				<RoleSelect v-model="rolePidPath" width="150" clearable @change="roleChange" />
			</el-form-item> -->
		</el-form>
		<el-button slot="left" size="small" type="primary" @click="openModel">
			新增项目
		</el-button>

		<el-table size="small" :data="tableData">
			<el-table-column prop="id" label="ID" min-width="100"></el-table-column>
			<el-table-column prop="name" label="项目" min-width="250"></el-table-column>
			<el-table-column prop="price" label="现价" min-width="100"></el-table-column>
			<el-table-column prop="ot_price" label="原价" min-width="100"></el-table-column>
			<el-table-column prop="service_time" label="服务时间(分)" min-width="100"></el-table-column>
			<el-table-column prop="commission" label="提成金额(元)" min-width="100"></el-table-column>
			<el-table-column prop="commission" label="状态" min-width="100">
				<template slot-scope="scope">
					<el-switch
					  v-model="scope.row.is_show"
					  class="switchStyle"
					  active-color="#36B365"
					  :active-value="1"
					  :inactive-value="0"
					  active-text="上架"
					  inactive-text="下架"
					  @change="changeGoodsStatus($event, scope.row)"
					></el-switch>
					<!-- <div v-else>
					  <span v-if="scope.row.is_show === 0" class="success-status">
					    下架
					  </span>
					  <span v-else class="info-status">上架</span>
					</div> -->
				</template>
			</el-table-column>
			<el-table-column label="操作" min-width="130" fixed="right" header->
				<template slot-scope="scope">
					<el-button type="text" @click="openEditModel(scope.row.id)">
						编辑
					</el-button>
					<el-button type="text" @click="del(scope.row.id)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<FooterPage :page-size="page_size" :total-page="total_count" :current-page="page" @pageChange="pageChange"
			@sizeChange="sizeChange" />
		<!--   新增项目-->
		<AddItem v-if="add_Item" :is-edit="isEdit" :visible="add_Item" @close="add_Item = false"
			@confirm="Confirm"></AddItem>
	</ContainerQuery>
</template>

<script>
	import {
		getShopProjectList,
		deleteShopProject,
		setShopProject
	} from "@/api/OrderSubscribe";
	import AddItem from "./components/addItem.vue";
	// import DepartmentSel from "@/component/common/DepartmentSel";
	// import RoleSelect from "../../../component/common/RoleSelect";
	export default {
		name: "AddSubscribe",
		components: {
			// RoleSelect,
			// DepartmentSel,
			AddItem,
		},
		data() {
			return {
				// 上下架
				is_show:'',//1下架2上架
				// 搜索项目名称
				search_key:"",
				// 添加班次弹窗
				add_Item: false,
				// 列表数据
				tableData: [],
				page: 1,
				page_size: 10,
				// 数据总条数
				total_count: 0,
				// 保存选中的itemid
				item_id: '',
				form:{
					
				}
			};
		},
		created() {
			console.log(sessionStorage.getItem("nodes"), '权限');
			this.getShopProjectList();
		},
		activated() {
			if (this.$_isInit()) return;
			this.getShopProjectList();
		},
		methods: {
			// 上架下架
			async changeGoodsStatus(val,row){
				try {
				  const data = await setShopProject({
				    id: row.id,
				    is_shop: val,
				  });
				  this.$message({
				    type: "success",
				    message: "操作成功!",
				  });
				} catch (e) {
				  this.getShopProjectList();
				}
			},
			Confirm() {
				this.getShopProjectList();
			},
			//  获取列表
			async getShopProjectList() {
				const data = await getShopProjectList({
					name:this.search_key,
					is_show:this.is_show,
					page: this.page,
					pageSize: this.page_size,
				});
				this.tableData = data.data;
				console.log(data, 'fanhui');
				console.log(this.tableData, 'fanhui');
				this.total_count = data.pageTotal;
			},
			// 删除排班
			del(id) {
				this.$confirm("你确定删除此服务项目么吗?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await deleteShopProject({
						id: id
					});

					this.getShopProjectList();
					this.$message({
						type: "success",
						message: "删除成功!",
					});
				});
			},

			pageChange(page) {
				this.page = page;
				this.getShopProjectList();
			},
			sizeChange(size) {
				this.page_size = size;
				this.pageChange(1);
			},
			//  编辑员工
			openEditModel(id) {
				this.$router.push(`/goods/item/editItem?id=${id}&setDetail=1`);
			},
			// 打开添加班次页面
			openModel() {
				// if (parseInt(this.$store.getters["MUser/enterpriseScope"]) === 4) {
				//   this.$router.push("/goods/sale/AddGoodsOneStore");
				// } else {
				//   this.$router.push("/goods/sale/AddGoods");
				// }
				this.$router.push("/goods/item/AddItem?setDetail=0");
			},
		},
	};
</script>

<style scoped></style>
