<template>
	<div class="goodList">
		<Table ref="table" no-data-text="暂无数据" @on-select-all="selectAll" @on-select-all-cancel="cancelAll"
			@on-select="TableSelectRow" @on-select-cancel="TableSelectCancelRow" no-filtered-data-text="暂无筛选结果"
			:columns="columns4" :data="tableList" :loading="loading" class="mr-20" height="500">
			<!-- <template slot-scope="{ row }" slot="store_name">
				<Tooltip max-width="200" placement="bottom">
					<span class="line2">{{ row.store_name }}{{row.suk}}</span>
					<p slot="content">{{ row.store_name }}{{row.suk}}</p>
				</Tooltip>
			</template> -->
			<template slot-scope="{ row, index }" slot="workdays">
				<!-- <el-tag v-for="witem in row.checkin_option.checkindate[0].workdays">{{witem | showWd}}</el-tag> -->
				<div v-for="witem in row.checkin_option.checkindate" class="jg">
					<div>
						<span>工作日：</span>
						<el-tag v-for="item in witem.workdays">{{item | showWd}}</el-tag>
					</div>
					<div class="flex">
						<span>上班时段：</span>
						<div>
							<div v-for="itemx in witem.checkintime">
								<span>{{itemx.work_sec| showTime}} </span> -
								<span>{{itemx.off_work_sec | showTime}}</span>
							</div>
						</div>
					</div>
			
				</div>
			</template>
		</Table>
		<div class="acea-row row-right page">
			<Page :total="total" show-elevator show-total @on-change="pageChange" :page-size="formValidate.limit" />
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";

	import {
		checkRuleList
	} from '@/api/check'

	export default {
		name: "index",
		props: {
			serviceProject: {
				type: Number,
				default: 0,
			},
			serviceCard: {
				type: Number,
				default: 0,
			},
			goodsType: {
				type: Number,
				default: 0,
			},
			storeType: {
				type: Number,
				default: 0,
			},
			is_new: {
				type: String,
				default: "",
			},
			diy: {
				type: Boolean,
				default: false,
			},
			isdiy: {
				type: Boolean,
				default: false,
			},
			ischeckbox: {
				type: Boolean,
				default: false,
			},
			liveStatus: {
				type: Boolean,
				default: false,
			},
			isLive: {
				type: Boolean,
				default: false,
			},
			datas: {
				type: Object,
				default: function() {
					return {};
				},
			},
		},
		data() {
			return {
				//选中商品集合
				selectEquips: [],
				// 选中的id集合
				selectEquipsIds: [],
				labelSelect: [],
				cateIds: [],
				modal_loading: false,
				treeSelect: [],
				formValidate: {
					page: 1,
					limit: 10,
				},
				total: 0,
				modals: false,
				loading: false,
				grid: {
					xl: 10,
					lg: 10,
					md: 12,
					sm: 24,
					xs: 24,
				},
				tableList: [],
				currentid: 0,
				productRow: {},
				columns4: [{
						title: "规则ID",
						key: "id",
					},
					{
						title: '工作日',
						slot: 'workdays',
						minWidth: 300
					},
					{
						title: "创建时间",
						key: "create_time",
						minWidth: 100,
					},
				],
				images: [],
				many: "",
			};
		},
		created() {
			let radio = {
				title: "选择",
				width: 70,
				align: "center",
				render: (h, params) => {
					let id = params.row.id;
					let flag = false;
					if (this.currentid === id) {
						flag = true;
					} else {
						flag = false;
					}
					let self = this;
					return h("div", [
						h("Radio", {
							props: {
								value: flag,
							},
							on: {
								"on-change": () => {
									self.currentid = id;
									this.productRow = params.row;
									console.log('zhe+++')
									this.$emit("getProductId", this.productRow);
									
								},
							},
						}),
					]);
				},
			};

			let checkbox = {
				type: "selection",
				width: 60,
				align: "center",
			};
			let many = "";
			if (this.ischeckbox) {
				many = "many";
			} else {
				many = this.$route.query.type;
			}
			this.many = many;
			if (many === "many") {
				this.columns4.unshift(checkbox);
				this.columns5.unshift(checkbox);
			} else {
				this.columns4.unshift(radio);
				this.columns5.unshift(radio);
			}
		},
		mounted() {
			this.getList();
		},
		filters: {
			showWd(day) {
				let str = ''
				if(day) {
					switch (day*1){
						case 1:
							str = '星期一'
							break;
						case 2:
							str = '星期二'
							break;
						case 3:
							str = '星期三'
							break;
						case 4:
							str = '星期四'
							break;
						case  5:
							str = '星期五'
							break;
						case 6:
							str = '星期六'
							break;
						case  0:
							str = '星期日'
							break;
						default:
							break;
					}
				}
				return str
			}
		},
		methods: {
			
			// 判断是否选中
			sortData() {
				if (this.selectEquipsIds.length) {
					this.tableList.forEach(ele => {
						if (this.selectEquipsIds.includes(ele.id)) ele._checked = true;
					})
				}
			},
			// 选中一行
			TableSelectRow(selection, row) {
				if (!this.selectEquipsIds.includes(row.id)) {
					this.selectEquipsIds.push(row.id);
					this.selectEquips.push(row);
				}
			},
			// 取消选中一行
			TableSelectCancelRow(selection, row) {
				var _index = this.selectEquipsIds.indexOf(row.id);
				if (_index != -1) {
					this.selectEquipsIds.splice(_index, 1);
					this.selectEquips.splice(_index, 1);
				}
			},
			// 选中所有
			selectAll() {
				for (let i = this.tableList.length - 1; i >= 0; i--) {
					this.TableSelectRow(null, this.tableList[i]);
				}
			},
			// 取消选中所有
			cancelAll() {
				for (let i = this.tableList.length - 1; i >= 0; i--) {
					this.TableSelectCancelRow(null, this.tableList[i]);
				}
			},

			handleSelectAll() {
				this.$refs.table.selectAll(false);
			},
			pageChange(index) {
				this.formValidate.page = index;
				this.getList();
			},
			// 列表
			getList() {
				this.loading = true;
				checkRuleList(this.formValidate)
					.then(async (res) => {
						let data = res.data;
						this.tableList = data.data;
						this.total = res.data.count;
						this.sortData();
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});

			},
			changeCheckbox(selection) {
				let images = [];
				selection.forEach(function(item) {
					let imageObject = {
						image: item.image,
						product_id: item.id,
						store_name: item.store_name,
						temp_id: item.temp_id
					};
					images.push(imageObject);
				});
				this.images = images;
				this.$emit("getProductDiy", selection);
			},
			ok() {
				// console.log('selectEquips',this.selectEquips)
				this.$emit("getProductId", this.selectEquips);
				// let images = [];
				// this.selectEquips.forEach(function(item) {
				// 	let imageObject = {
				// 		image: item.image,
				// 		product_id: item.id,
				// 		store_name: item.store_name,
				// 		temp_id: item.temp_id
				// 	};
				// 	images.push(imageObject);
				// });
				// if (images.length > 0) {
				// 	if (this.$route.query.fodder === "image") {
				// 		let imageValue = form_create_helper.get("image");
				// 		form_create_helper.set("image", imageValue.concat(images));
				// 		form_create_helper.close("image");
				// 	} else {
				// 		if (this.isdiy) {
				// 			this.$emit("getProductId", this.selectEquips);
				// 		} else {
				// 			this.$emit("getProductId", images);
				// 		}
				// 	}
				// } else {
				// 	this.$Message.warning("请先选择商品");
				// }
			},
			treeSearchs(value) {
				this.cateIds = value;
				this.formValidate.page = 1;
				this.getList();
			},
			// 表格搜索
			userSearchs() {
				this.formValidate.page = 1;
				this.getList();
			},
			clear() {
				this.productRow.id = "";
				this.currentid = "";
			},
		},
	};
</script>

<style scoped lang="stylus">
	/deep/.ivu-table-header thead tr th {
		padding: 8px 5px;
	}

	/deep/.ivu-radio-wrapper {
		margin-right: 0 !important;
	}

	.footer {
		margin: 15px 0;
	}

	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.tabform {
		>>>.ivu-form-item {
			margin-bottom: 16px !important;
		}
	}

	.btn {
		margin-top: 20px;
		float: right;
	}

	.goodList {}

	.mr-20 {
		margin-right: 10px;
	}
</style>