<template>
	<div class="app-container">
		<div>
			<search-bar
				:formConfigs="formConfig"
				ref="searchBarForm"
				:isFold="true"
				@headBtnClick="buttonClick" />
			<div style="font-size: 14px">
				自动刷新(5s)
				<el-switch v-model="autoRefresh"></el-switch>
			</div>
		</div>
		<base-table
			v-loading="dataListLoading"
			:table-props="tableProps"
			:page="listQuery.pageNo"
			:limit="listQuery.pageSize"
			:max-height="tableH"
			:table-data="tableData">
			<method-btn
				v-if="tableBtn.length"
				slot="handleBtn"
				:width="260"
				label="操作"
				:method-list="tableBtn"
				@clickBtn="handleClick" />
		</base-table>
		<pagination
			:limit.sync="listQuery.pageSize"
			:page.sync="listQuery.pageNo"
			:total="listQuery.total"
			@pagination="getDataList" />
		<!-- //新增 -->
		<base-dialog
			:dialogTitle="'新建人工任务'"
			:dialogVisible="addOrUpdateVisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel"
			:destroy-on-close="true"
			width="70%">
			<add-or-update
				ref="addOrUpdate"
				@setSN="setStepNum"
				@refreshDataList="successSubmit"></add-or-update>
			<template #footer>
				<slot name="footer">
					<el-row slot="footer" type="flex" justify="end">
						<el-col :span="24">
							<el-button
								v-if="stepNum > 1"
								size="small"
								class="btnTextStyle"
								@click="handleConfirm('up')">
								上一步
							</el-button>
							<el-button
								size="small"
								class="btnTextStyle"
								@click="handleCancel">
								取消
							</el-button>
							<el-button
								v-if="stepNum == 3"
								type="primary"
								class="btnTextStyle"
								size="small"
								plain
								@click="successSubmit">
								创建任务
							</el-button>
							<el-button
								type="primary"
								class="btnTextStyle"
								size="small"
								@click="handleConfirm">
								{{ stepNum < 3 ? '下一步' : '创建并下发' }}
							</el-button>
						</el-col>
					</el-row>
				</slot>
			</template>
		</base-dialog>
		<!-- //详情 -->
		<detail-drawer
			ref="detailDrawer"
			@closeDrawer="closeDrawer"></detail-drawer>
		<!-- //有货终止 -->
		<base-dialog
			:dialogTitle="'终止任务'"
			:dialogVisible="stopStockVisible"
			@cancel="handleCancelStopStock"
			@confirm="handleConfirmStopStock"
			:before-close="handleCancelStopStock"
			:destroy-on-close="true"
			width="50%">
			<stop-in-stock ref="StopStockRef"></stop-in-stock>
		</base-dialog>
	</div>
</template>

<script>
import AddOrUpdate from './components/add-or-updata.vue';
import subSpan1 from './components/subSpan1.vue';
import subSpan2 from './components/subSpan2.vue';
import subSpan3 from './components/subSpan3.vue';
import subSpan4 from './components/subSpan4.vue';
import detailDrawer from './components/detailDrawer.vue';
import stopInStock from './components/stopInStock.vue'
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
import { parseTime } from '@/filter/code-filter';

const tableProps = [
	{
		prop: 'code',
		label: '任务编号',
		width: 140,
	},
	{
		prop: 'val1',
		label: '创建方式',
		filter: (val) => (val ? ['自动', '人工'][val] : '-'),
	},
	{
		prop: 'val2',
		label: '任务类型',
		subcomponent: subSpan1,
	},
	{
		prop: 'val3',
		label: '状态',
		subcomponent: subSpan2,
	},
	{
		prop: 'val4',
		label: '搬运对象(L/R)',
		subcomponent: subSpan3,
		width: 160,
	},
	{
		prop: 'val5',
		label: '起点(L/R)',
		subcomponent: subSpan3,
		width: 160,
	},
	{
		prop: 'val6',
		label: '终点(L/R)',
		subcomponent: subSpan3,
		width: 160,
	},
	{
		prop: 'val7',
		label: '执行车辆',
		subcomponent: subSpan4,
	},
	{
		prop: 'creatTime',
		label: '创建时间',
		filter: parseTime,
		width: 150,
	},
	{
		prop: 'Time',
		label: '执行时长',
		filter: (val) => parseTime(val, '{HH}:{mm}:{ss}'),
		width: 100,
	},
];

export default {
	mixins: [tableHeightMixin],
	data() {
		return {
			tableProps,
			tableBtn: [
				{
					type: 'detail',
					btnName: '详情',
				},
				{
					type: 'issue',
					btnName: '下发',
					showParam: {
						type: '&',
						data: [
							{
								type: 'equal',
								name: 'status',
								value: 1,
							},
						],
					},
				},
				{
					type: 'pause',
					btnName: '暂停',
					showParam: {
						type: '&',
						data: [
							{
								type: 'unequal',
								name: 'status',
								value: 1,
							},
						],
					},
				},
				{
					type: 'reassign',
					btnName: '改派',
				},
				{
					type: 'stop',
					btnName: '终止',
				},
				{
					type: 'recycle',
					btnName: '回收',
				},
			].filter((v) => v),
			tableData: [],
			listQuery: {
				//分页
				pageSize: 10,
				pageNo: 1,
				total: 1,
			},
			formConfig: [
				{
					type: 'select',
					label: '任务类型',
					selectOptions: [
						{
							id: 1,
							name: '满盘搬运',
						},
						{
							id: 2,
							name: '备料搬运',
						},
						{
							id: 3,
							name: '临时搬运',
						},
						{
							id: 4,
							name: '空盘搬运',
						},
					],
					param: 'val1',
					filterable: true,
				},
				{
					type: 'select',
					label: '业务类型',
					selectOptions: [
						{
							id: 1,
							name: '满盘搬运',
						},
						{
							id: 2,
							name: '空盘搬运',
						},
						{
							id: 3,
							name: '备料搬运',
						},
						{
							id: 4,
							name: '临时搬运',
						},
					],
					param: 'val2',
					filterable: true,
				},
				{
					type: 'select',
					label: '状态',
					selectOptions: [
						{
							id: 1,
							name: '待下发',
						},
						{
							id: 2,
							name: '待执行',
						},
						{
							id: 3,
							name: '执行中',
						},
						{
							id: 4,
							name: '已完成',
						},
						{
							id: 5,
							name: '暂停中',
						},
						{
							id: 6,
							name: '已终止',
						},
						{
							id: 7,
							name: '异常',
						},
					],
					param: 'val3',
					filterable: true,
				},
				{
					type: 'select',
					label: '执行车辆',
					selectOptions: [],
					param: 'val4',
					labelField: 'label',
					valueField: 'name',
					filterable: true,
				},
				{
					type: 'datePicker',
					label: '创建日期',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'searchTime',
				},
				{
					type: 'select',
					label: '回收任务',
					selectOptions: [
						{
							id: 1,
							name: '是',
						},
						{
							id: 0,
							name: '否',
						},
					],
					param: 'val5',
					filterable: true,
				},
				{
					type: 'input',
					label: '编号',
					placeholder: '编号',
					param: 'code',
				},
				{
					type: 'button',
					btnName: '搜索',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '重置',
					name: 'reset',
				},
				{
					type: 'separate',
				},
				{
					type: this.$auth.hasPermi('monitoring:cost-othercost-log:create')
						? 'button'
						: '',
					btnName: '新增',
					name: 'add',
					color: 'success',
					plain: true,
				},
			],
			addOrUpdateVisible: false, //dialog状态
			dataListLoading: false,
			autoRefresh: false,
			refreshTimer: null,
			stepNum: 1,
			stopStockVisible: false, //有货终止任务的dialog
		};
	},
	watch: {
		autoRefresh(newVal) {
			if (newVal) {
				// 开启时立即执行一次，然后每5秒执行
				this.getDataList();
				this.refreshTimer = setInterval(() => {
					this.getDataList();
				}, 5000);
			} else {
				// 关闭时清除定时器
				if (this.refreshTimer) {
					clearInterval(this.refreshTimer);
					this.refreshTimer = null;
				}
			}
		},
	},
	beforeDestroy() {
		// 组件销毁前清除定时器
		if (this.refreshTimer) {
			clearInterval(this.refreshTimer);
		}
	},
	components: {
		AddOrUpdate,
		detailDrawer,
    stopInStock,
	},
	created() {},
	mounted() {
		this.autoRefresh = true;
	},
	methods: {
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 20;
					this.listQuery.name = val.name || null;
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
					this.listQuery.endTime = val.searchTime
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
						: null;
					this.getDataList();
					break;
				case 'add':
					this.addOrUpdateHandle();
					break;
				case 'reset':
					this.listQuery.code = null;
					this.listQuery = {
						pageSize: 10,
						pageNo: 1,
						total: 1,
					};
					this.getDataList();
					break;
				default:
					console.log(val);
			}
		},
		// 获取数据列表
		getDataList() {
			this.tableData = [
				{
					code: 1,
				},
			];
			// this.dataListLoading = true
			// this.urlOptions.getDataListURL(this.listQuery).then(response => {
			//   this.tableData = response.data.list;
			//   this.listQuery.total = response.data.total;
			// this.dataListLoading = false
			// });
		},
		// 每页数
		sizeChangeHandle(val) {
			this.listQuery.pageSize = val;
			this.listQuery.pageNo = 1;
			this.getDataList();
		},
		// 当前页
		currentChangeHandle(val) {
			this.listQuery.pageNo = val;
			this.getDataList();
		},
		// 新增
		addOrUpdateHandle() {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init();
			});
		},
		successSubmit() {
			this.addOrUpdateVisible = false;
			this.stepNum = 1;
			this.getDataList();
		},
		//tableBtn点击
		handleClick(val) {
			if (val.type === 'stop') {
				if (val.data === '无货') {
					this.stopFun(val.data);
				} else {
					this.stopStockVisible = true;
					this.$nextTick(() => {
						this.$refs.stopStockRef.init();
					});
				}
			} else if (val.type === 'detail') {
				this.$nextTick(() => {
					this.$refs.detailDrawer.init(val.data, 'detail');
				});
			} else {
				this.otherMethods(val);
			}
		},
		stopFun(val) {
			this.$prompt('确认终止空载该任务？此操作不可恢复', '终止任务', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputType: 'textarea',
				inputPlaceholder: '请输入终止原因',
			})
				.then(({ value }) => {
					console.log('终止原因' + value);
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消终止',
					});
				});
		},
		setStepNum(val) {
			this.stepNum = val;
		},
		// 新增dialog取消
		handleCancel() {
			this.addOrUpdateVisible = false;
		},
		handleConfirm(val) {
			if (val == 'up') {
				this.$refs.addOrUpdate.upSubmit();
			} else {
				this.$refs.addOrUpdate.nextSubmit();
			}
		},
		// 有货任务终止dialog取消
		handleCancelStopStock() {
			this.stopStockVisible = false;
		},
		handleConfirmStopStock() {
			this.$refs.stopStockRef.submit();
		},
		closeDrawer() {},
	},
};
</script>
