<template>
	<el-drawer
		v-model="visible"
		title="任务详情"
		:size="900"
		destroy-on-close
		@closed="$emit('closed')"
	>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-date-picker
						placeholder="工作日期"
						v-model="paramsObj.start_date"
						type="date"
						value-format="YYYY-MM-DD"
						@change="handleMtaskQuery"
					/>
				</div>
			</el-header>
			<el-main>
				<scTable
					ref="drawer_table"
					:apiObj="apiObj"
					row-key="id"
					stripe
					:params="paramsObj"
				>
					<el-table-column type="index" width="50" />
					<el-table-column
						label="工段"
						prop="mgroup_name"
						show-overflow-tooltip
					>
					</el-table-column>
					<el-table-column label="任务编号" prop="number">
					</el-table-column>
					<el-table-column label="数量" prop="count">
					</el-table-column>
					<el-table-column
						label="工作日期"
						prop="start_date"
						width="180"
					>
						<template #default="scope">
							<span
								v-if="
									scope.row.start_date == scope.row.end_date
								"
								>{{ scope.row.start_date }}</span
							>
							<span v-else
								>{{ scope.row.start_date }} —
								{{ scope.row.end_date }}</span
							>
						</template>
					</el-table-column>
					<!-- <el-table-column label="工作日期" prop="start_date">
					</el-table-column>
					<el-table-column label="工作日期" prop="end_date">
					</el-table-column> -->
					<el-table-column
						label="状态"
						prop="state"
						show-overflow-tooltip
					>
						<template #default="scope">
							<el-tag v-if="scope.row.state !== 40">
								{{ state_[scope.row.state] }}
							</el-tag>
							<el-tag v-else type="success">
								{{ state_[scope.row.state] }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" fixed="right" width="60">
						<template #default="scope">
							<el-button
								link
								type="primary"
								v-auth="'mtask.update'"
								v-if="scope.row.state == 10"
								@click="table_edit(scope.row)"
								>编辑
							</el-button>
							<el-button link type="info" v-else disabled
								>编辑
							</el-button>
							<el-button
								link
								type="danger"
								v-auth="'mtask.delete'"
								v-if="scope.row.state == 10"
								@click="table_delete(scope.row)"
								>删除
							</el-button>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-drawer>
	<el-dialog title="编辑任务" v-model="dialogVisible">
		<el-form :model="form" ref="dialogForm">
			<el-row>
				<el-col :md="12" :sm="24">
					<el-form-item label="任务编号：" width="100">
						{{ form.number }}
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="工段：" width="100">
						{{ form.mgroup_name }}
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="工作日期：" width="100">
						{{ form.start_date }}
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="数量：" width="100">
						<el-input-number
							v-model="form.count"
							controls-position="right"
							:min="0"
							:step="1"
							:step-strictly="true"
							style="width: 100%"
							placeholder="请输入数量"
						>
						</el-input-number>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-footer>
			<el-button type="primary" @click="updateMtaskSubmit"
				>确定</el-button
			>
			<el-button @click="dialogVisible = false">取消</el-button>
		</el-footer>
	</el-dialog>
</template>
<script>
export default {
	emits: ["closed"],
	props: {
		utaskId: { type: String, default: "" },
	},
	data() {
		return {
			visible: false,
			apiObj: null,
			paramsObj: {},
			form: {},
			state_: {
				10: "创建中",
				14: "已分解",
				20: "已下达",
				30: "生产中",
				40: "已提交",
			},
			isSaveing: false,
			dialogVisible: false,
		};
	},
	mounted() {},
	methods: {
		handleMtaskQuery() {
			this.$refs.drawer_table.queryData(this.paramsObj);
		},
		open() {
			this.visible = true;
			this.paramsObj.utask = this.utaskId;
			this.apiObj = this.$API.pm.mtask.list;
			return this;
		},
		table_edit(row) {
			this.form = {};
			let item = row;
			this.form = Object.assign(item, this.form);
			this.dialogVisible = true;
		},
		table_delete(row){
			let that = this;
			that.$API.pm.mtask.delete.req(row.id).then((res) => {
				that.$message.success("删除成功");
				that.$refs.drawer_table.refresh();
			})
		},
		updateMtaskSubmit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					this.$API.pm.mtask.update
						.req(this.form.id, this.form)
						.then((res) => {
							this.isSaveing = false;
							this.dialogVisible = false;
						})
						.catch((err) => {
							this.isSaveing = false;
						});
				} else {
				}
			});
		},
	},
};
</script>
