<template>
	<div class="widgets-home" ref="main">
		<div class="widgets-content">
			<div class="retangleWrap retangleWrapTop">
				<div class="retangle retangleImg">
					<div class="companyName">光芯科技</div>
					<div class="companyDesc">
						公司秉承“善用资源，服务建设”的核心理念，践行“材料创造美
					</div>
					<div class="companyDesc">
						好世界”的企业使命，坚持“创新、绩效、和谐、责任”的核心价
					</div>
					<div class="companyDesc">
						值观，努力成长为具有创新精神和全球视野的光芯材料领先企业。
					</div>
					<img class="topCardImg" src="img/topCard.png" />
				</div>
			</div>
			<el-row style="margin-bottom: 20px">
				<el-col :span="8">
					<div
						class="retangleWrap retangleWrapTable"
						style="padding-right: 0"
					>
						<div class="retangle tableRetangle">
							<div class="Retangle_container">
								<div class="title">生产设备</div>
							</div>
							<div style="padding: 20px 24px 24px 24px">
								<el-table
									:data="equipList"
									style="width: 100%; height: 285px"
								>
									<el-table-column
										prop="number"
										label="设备编号"
									/>
									<el-table-column
										prop="name"
										label="设备名称"
									/>
									<el-table-column
										prop="belong_dept_name"
										label="所在车间"
									/>
									<el-table-column
										prop="state"
										label="设备状态"
									>
										<template #default="scope">
											<el-tag
												class="ml-2"
												type="success"
												v-if="scope.row.state == 10"
												>{{
													eqState_[scope.row.state]
												}}</el-tag
											>
											<el-tag
												class="ml-2"
												type="warning"
												v-if="scope.row.state == 20"
												>{{
													eqState_[scope.row.state]
												}}</el-tag
											>
											<el-tag
												class="ml-2"
												type="info"
												v-if="scope.row.state == 30"
												>{{
													eqState_[scope.row.state]
												}}</el-tag
											>
											<el-tag
												class="ml-2"
												type="danger"
												v-if="scope.row.state == 40"
												>{{
													eqState_[scope.row.state]
												}}</el-tag
											>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="retangleWrap retangleWrapTable">
						<div class="retangle tableRetangle">
							<div class="Retangle_container">
								<div class="title">库存情况</div>
								<div class="radios_group">
									<el-radio-group
										v-model="materialType"
										@change="materialTypeChange"
									>
										<el-radio label="20">半成品</el-radio>
										<el-radio label="10">成品</el-radio>
									</el-radio-group>
								</div>
							</div>
							<div style="padding: 20px 24px 24px 24px">
								<el-table
									:data="tableData"
									style="width: 100%; height: 293px"
								>
									<el-table-column
										label="#"
										type="index"
										width="50"
									></el-table-column>
									<el-table-column
										prop="name"
										label="名称"
									></el-table-column>
									<el-table-column
										prop="specification"
										label="规格"
									></el-table-column>
									<el-table-column
										prop="model"
										label="型号"
									></el-table-column>
									<el-table-column
										prop="unit"
										label="单位"
									></el-table-column>
									<el-table-column
										prop="count"
										label="库存"
									></el-table-column>
								</el-table>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="retangleWrap" style="padding-left: 0">
						<div class="retangle bottomRetangle">
							<div class="warningHead">
								<div class="warningHeadText">预警提示</div>
							</div>
							<div class="warningTableHead">
								<div style="flex: 2">名称</div>
								<div class="warningFlex1">型号</div>
								<div class="warningFlex1">规格</div>
								<div
									class="warningFlex1"
									style="text-align: right"
								>
									数量
								</div>
							</div>
							<div class="warningTbleBody">
								<div
									style="height: fit-content"
									v-if="warningMaterial.length > 0"
								>
									<div
										v-for="item in warningMaterial"
										:key="item.id"
										style="display: flex; height: 25px"
									>
										<div style="flex: 2">
											{{ item.name }}
										</div>
										<div class="warningFlex1">
											{{ item.model }}
										</div>
										<div class="warningFlex1">
											{{ item.specification }}
										</div>
										<div
											class="warningFlex1 warningNumberStyle"
										>
											{{ item.count }}
										</div>
									</div>
								</div>
								<div v-else>暂无数据</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
import * as echarts from "echarts";
export default {
	data() {
		return {
			time: "",
			day: "",
			year_s: "",
			day_s: "",
			month_s: "",
			yesterday: "",

			eqState_: {
				10: "完好",
				20: "限用",
				30: "在修",
				40: "禁用",
			},
			equipList: [],
			tableData: [],
			warningMaterial: [],
			materialType: "20",
		};
	},
	mounted() {
		this.$emit("on-mounted");
		let that = this;
		var myDate = new Date();
		let year = myDate.getFullYear();
		let month = myDate.getMonth() + 1;
		let day = myDate.getDate();
		that.year_s = year;
		that.month_s = month;
		that.day_s = day;
		// this.getEquipList();
		// this.getMaterialWarning();
		// this.getMaterialList();
	},
	methods: {
		// 动态绑定Class
		bindClass(rate) {
			let classInfo = {
				socketDom: true,
				redColor: false,
				greenColor: true,
			};
			if (rate > 0) {
				classInfo.greenColor = true;
			} else if (rate < 0) {
				classInfo.redColor = true;
			}
			return classInfo;
		},
		//设备列表
		getEquipList() {
			this.$API.em.equipment.list
				.req({ page: 0, type: 10 })
				.then((res) => {
					this.equipList = res;
				});
		},

		materialTypeChange() {
			this.getMaterialList();
		},
		//获取库存
		getMaterialList() {
			let that = this;
			that.$API.mtm.material.list
				.req({ page: 0, type: that.materialType })
				.then((res) => {
					that.tableData = res.filter((item) => {
						return item.count > 0;
					});
				});
		},
		//库存警告
		getMaterialWarning() {
			let that = this;
			that.$API.mtm.material.list
				.req({ page: 0, type__in: "10,20", count__lte: 1 })
				.then((res) => {
					if (res.length > 0) {
						console.log("getMaterialWarning", res);
						that.warningMaterial = res;
					} else {
					}
				});
		},
	},
};
</script>
<style scoped lang="scss">
.retangleWrap {
	width: 100%;
	padding: 20px 20px 0 20px;
	box-sizing: border-box;
}

.retangle {
	width: 100%;
	border-radius: 15px;
	box-sizing: border-box;
	position: relative;
	background: #ffffff;
}
.Retangle_container {
	display: flex;
	justify-content: space-between;
	padding: 0 24px;
}
.Retangle_container > .title {
	color: rgb(30, 30, 30);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}
.radios_group {
	color: rgb(122, 121, 121);
	size: 12px;
	font-weight: 290;
	line-height: 22px;
	height: 23px;
}
.retangleImg {
	height: 188px;
	color: #ffffff;
	padding-left: 43px;
	background: linear-gradient(
		180deg,
		rgb(58, 149, 255),
		rgb(27, 92, 255) 100%
	);
}

.companyName {
	padding-top: 28px;
	font-size: 24px;
	line-height: 28px;
	padding-bottom: 23px;
}

.companyDesc {
	padding-left: 4px;
	font-size: 14px;
	line-height: 20px;
}

.topCardImg {
	height: 188px;
	position: absolute;
	right: 10px;
	top: 0;
}

.countRetangle {
	height: 180px;
	padding-top: 20px;
	box-sizing: border-box;
}

.countItem {
	width: 20%;
	padding-left: 24px;
	display: inline-block;
	box-sizing: border-box;
	border-right: 1px solid #eeeeee;
}

.countItem:last-child {
	border-right: 0;
}

.countname {
	font-size: 14px;
	line-height: 22px;
	color: rgba(94, 94, 94);
}

.countnum {
	font-size: 30px;
	padding-bottom: 11px;
	line-height: 38px;
}

.countrate {
	line-height: 20px;
	color: rgba(0, 0, 0, 0.45);
}

.redColor {
	color: rgb(255, 73, 87);
}

.greenColor {
	color: rgb(71, 201, 58);
}

.middleRetangle {
	border-radius: 2px;
	position: relative;
	box-sizing: border-box;
}

.middleItem {
	width: 25%;
	padding-left: 34px;
	display: inline-block;
	box-sizing: border-box;
}

.middleItem:first-child {
	border-right: 1px solid #eeeeee;
}

.tableRetangle {
	height: auto;
	padding-top: 20px;
}

.bottomRetangle {
	padding: 20px 0;
	box-sizing: border-box;
	background: #ffffff;
}

.warningHead {
	display: flex;
	justify-content: space-between;
	padding: 0 24px;
}
.warningHeadText {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}
.warningTableHead {
	display: flex;
	height: 35px;
	line-height: 35px;
	font-size: 18spx;
	padding: 0 24px;
}
.warningTbleBody {
	padding: 0 24px;
	height: 276px;
	overflow-y: scroll;
}
.warningFlex1 {
	flex: 1;
}
.warningNumberStyle {
	color: red;
	font-weight: bold;
	text-align: right;
}
</style>
