<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-date-picker
					v-model="query.year"
					type="year"
					format="YYYY"
					value-format="YYYY"
					placeholder="年份"
					class="headerSearch"
				/>
				<el-select
					v-model="query.mgroup"
					placeholder="关联工段"
					clearable
					class="headerSearch"
				>
					<el-option
						v-for="item in mgroupOptions"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					></el-option>
				</el-select>
				<el-select
					v-model="query.goal_cate"
					placeholder="目标种类"
					clearable
					class="headerSearch"
				>
					<el-option
						v-for="item in goalOptions"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					></el-option>
				</el-select>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
			<!-- <div class="right-panel">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="roleAdd"
					v-auth="'goal.create'"
				></el-button>
			</div> -->
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				row-key="id"
				@selection-change="selectionChange"
			>
				<el-table-column
					label="#"
					type="index"
					width="50"
					fixed="left"
				></el-table-column>
				<el-table-column
					label="工段"
					prop="mgroup_name"
					width="90"
					fixed="left"
				></el-table-column>
				<el-table-column
					label="目标（项目）"
					prop="goal_cate_name"
					width="190"
					fixed="left"
				></el-table-column>
				<el-table-column
					label="1月"
					prop="goal_val_1"
				></el-table-column>
				<el-table-column
					label="2月"
					prop="goal_val_2"
				></el-table-column>
				<el-table-column
					label="3月"
					prop="goal_val_3"
				></el-table-column>
				<el-table-column
					label="4月"
					prop="goal_val_4"
				></el-table-column>
				<el-table-column
					label="5月"
					prop="goal_val_5"
				></el-table-column>
				<el-table-column
					label="6月"
					prop="goal_val_6"
				></el-table-column>
				<el-table-column
					label="7月"
					prop="goal_val_7"
				></el-table-column>
				<el-table-column
					label="8月"
					prop="goal_val_8"
				></el-table-column>
				<el-table-column
					label="9月"
					prop="goal_val_9"
				></el-table-column>
				<el-table-column
					label="10月"
					prop="goal_val_10"
				></el-table-column>
				<el-table-column
					label="11月"
					prop="goal_val_11"
				></el-table-column>
				<el-table-column
					label="12月"
					prop="goal_val_12"
				></el-table-column>
				<el-table-column
					label="年目标值"
					prop="goal_val"
				></el-table-column>
				<el-table-column
					label="操作"
					fixed="right"
					align="center"
					width="100"
				>
					<template #default="scope">
						<el-button
							link
							size="small"
							@click="roleEdit(scope.row)"
							v-auth="'goal.update'"
							type="primary"
							>编辑</el-button
						>
						<!-- <el-divider direction="vertical"></el-divider> -->
						<el-popconfirm
							title="确定删除吗？"
							@confirm="handleDel(scope.row)"
						>
							<template #reference>
								<el-button
									link
									size="small"
									v-auth="'goal.delete'"
									type="danger"
									>删除</el-button
								>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<el-dialog :title="titleMap[type]" v-model="limitedVisible">
		<el-form
			:model="form"
			:rules="rules"
			ref="addForm"
			label-width="100px"
			style="padding: 0 10px"
		>
			<el-row>
				<el-col :md="12" :sm="24">
					<el-form-item label="年份" prop="year">
						<el-date-picker
							v-model="form.year"
							type="year"
							format="YYYY"
							value-format="YYYY"
							placeholder="年份"
							style="width: 100%"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="关联工段" prop="mgroup">
						<el-select
							v-model="form.mgroup"
							placeholder="关联工段"
							clearable
							style="width: 100%"
						>
							<el-option
								v-for="item in mgroupOptions"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="目标种类" prop="goal_cate">
						<el-select
							:disabled="type == 'edit'"
							v-model="form.goal_cate"
							placeholder="目标种类"
							clearable
							style="width: 100%"
						>
							<el-option
								v-for="item in goalOptions"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="年目标值" prop="goal_val">
						<el-input-number
							v-model="form.goal_val"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="1月目标值" prop="goal_val_1">
						<el-input-number
							v-model="form.goal_val_1"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="2月目标值" prop="goal_val_2">
						<el-input-number
							v-model="form.goal_val_2"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="3月目标值" prop="goal_val_3">
						<el-input-number
							v-model="form.goal_val_3"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="4月目标值" prop="goal_val_4">
						<el-input-number
							v-model="form.goal_val_4"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="5月目标值" prop="goal_val_5">
						<el-input-number
							v-model="form.goal_val_5"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="6月目标值" prop="goal_val_6">
						<el-input-number
							v-model="form.goal_val_6"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="7月目标值" prop="goal_val_7">
						<el-input-number
							v-model="form.goal_val_7"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="8月目标值" prop="goal_val_8">
						<el-input-number
							v-model="form.goal_val_8"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="9月目标值" prop="goal_val_9">
						<el-input-number
							v-model="form.goal_val_9"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="10月目标值" prop="goal_val_10">
						<el-input-number
							v-model="form.goal_val_10"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="11月目标值" prop="goal_val_11">
						<el-input-number
							v-model="form.goal_val_11"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="12月目标值" prop="goal_val_12">
						<el-input-number
							v-model="form.goal_val_12"
							style="width: 100%"
							clearable
							:min="0"
							controls-position="right"
						/>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="limitedVisible = false">取 消</el-button>
			<el-button
				v-if="type !== 'show'"
				type="primary"
				:loading="isSaving"
				@click="submitHandle()"
				>保 存</el-button
			>
		</template>
	</el-dialog>
</template>
<script>
const defaultForm = {
	year: [{ required: true, message: "请选择年份" }],
	mgroup: "",
	year: "",
	goal_cate: "",
	goal_val: "",
	goal_val_1: "",
	goal_val_2: "",
	goal_val_3: "",
	goal_val_4: "",
	goal_val_5: "",
	goal_val_6: "",
	goal_val_7: "",
	goal_val_8: "",
	goal_val_9: "",
	goal_val_10: "",
	goal_val_11: "",
	goal_val_12: "",
};
export default {
	name: "dept",
	data() {
		return {
			apiObj: this.$API.mtm.goal.list,
			search: {
				keyword: null,
			},
			query: {},
			isSaving: false,
			limitedVisible: false,
			checkStrictly: true,
			type: "add",
			titleMap: {
				add: "新增月度年度目标值",
				edit: "编辑月度年度目标值",
				show: "查看月度年度目标值",
			},
			//表单数据
			form: {},
			//验证规则
			rules: {
				year: [{ required: true, message: "请选择年份" }],
				mgroup: [{ required: true, message: "请选择关联工段" }],
				goal_cate: [{ required: true, message: "请选择目标种类" }],
				goal_val: [{ required: true, message: "请填写年目标值" }],
				goal_val_1: [{ required: true, message: "请填写1月份目标值" }],
				goal_val_2: [{ required: true, message: "请填写2月份目标值" }],
				goal_val_3: [{ required: true, message: "请填写3月份目标值" }],
				goal_val_4: [{ required: true, message: "请填写4月份目标值" }],
				goal_val_5: [{ required: true, message: "请填写5月份目标值" }],
				goal_val_6: [{ required: true, message: "请填写6月份目标值" }],
				goal_val_7: [{ required: true, message: "请填写7月份目标值" }],
				goal_val_8: [{ required: true, message: "请填写8月份目标值" }],
				goal_val_9: [{ required: true, message: "请填写9月份目标值" }],
				goal_val_10: [
					{ required: true, message: "请填写10月份目标值" },
				],
				goal_val_11: [
					{ required: true, message: "请填写11月份目标值" },
				],
				goal_val_12: [
					{ required: true, message: "请填写12月份目标值" },
				],
			},
			goalOptions: [],
			mgroupOptions: [],
			productList: [],
		};
	},
	mounted() {
		this.getMgroup();
		this.getGoals(); //目标种类
	},
	methods: {
		//目标种类
		getGoals() {
			let that = this;
			this.$API.system.dict.list
				.req({ page: 0, type__code: "goal_cate" })
				.then((res) => {
					debugger;
					console.log(res);
					that.goalOptions = res;
				});
		},
		//获取工段列表
		getMgroup() {
			this.$API.mtm.mgroup.list.req({ page: 0 }).then((res) => {
				this.mgroupOptions = res;
			});
		},
		//添加目标
		roleAdd() {
			this.limitedVisible = true;
			this.type = "add";
			this.form = {};
			this.form = Object.assign({}, defaultForm);
		},
		submitHandle() {
			let that = this;
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					this.isSaveing = true;
					if (this.type === "add") {
						this.$API.mtm.goal.create.req(that.form).then((res) => {
							this.isSaveing = false;
							this.limitedVisible = false;
							this.$refs.table.refresh();
						});
					} else {
						this.$API.mtm.goal.update
							.req(that.form.id, that.form)
							.then((res) => {
								this.isSaveing = false;
								this.limitedVisible = false;
								this.$refs.table.refresh();
							});
					}
				}
			});
		},
		//编辑目标
		roleEdit(row) {
			this.type = "edit";
			this.form = Object.assign(defaultForm, row);
			this.form.year = row.year + "";
			this.limitedVisible = true;
		},

		//删除目标
		async handleDel(row) {
			var id = row.id;
			var res = await this.$API.mtm.goal.delete.req(id);
			if (res.err_msg) {
				this.$message.error(res.err_msg);
			} else {
				this.$refs.table.refresh();
				this.$message.success("删除成功");
			}
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		handleQuery() {
			this.$refs.table.queryData(this.query);
		},
		//本地更新数据
		handleSaveSuccess() {
			this.$refs.table.refresh();
		},
	},
};
</script>
<style scoped>
.treeMain {
	width: 100%;
	height: 280px;
	overflow: auto;
	border: 1px solid #dcdfe6;
	margin-bottom: 10px;
}
</style>
