<template>
	<div class="m-record">
		<h3>巡查记录</h3>
		<div>
			<div class="u-table-btn1 mt10" v-if="formType == 'edit'">
				<el-button size="small" class="diy-button--blue" :disabled="btnDisabled || disabled" @click="handleAdd">新增</el-button>
			</div>
			<div class="m-table-item">
				<el-table :data="tableData" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" class="resi-table" row-key="id" border style="width: 100%">
					<el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
					<el-table-column prop="patrolTime" label="检查时间" align="center" width="200px">
						<template slot-scope="scope">
							<el-date-picker
								v-if="scope.row.isEdit"
								v-model="scope.row.patrolTime"
								type="date"
								class="input-width"
								value-format="yyyy-MM-dd"
								placeholder="选择日期"
							></el-date-picker>
							<div v-else class="div-content">{{ scope.row.patrolTime }}</div>
						</template>
					</el-table-column>

					<el-table-column prop="staffId" label="检查人员" align="center" width="200px">
						<template slot-scope="scope">
							<el-select
								v-if="scope.row.isEdit"
								v-model="scope.row.staffId"
								placeholder="请选择"
								class="input-width"
								@change="handleChangeStaff(scope.row)"
								clearable
							>
								<el-option v-for="subItem in optionStaff" :key="subItem.value" :label="subItem.label" :value="subItem.value"></el-option>
							</el-select>
							<div v-else class="div-content">{{ scope.row.staffName }}</div>
						</template>
					</el-table-column>

					<el-table-column prop="mobile" label="联系电话" align="center" width="200px">
						<template slot-scope="scope">
							<el-input v-if="scope.row.isEdit" type="number" v-model="scope.row.mobile" placeholder="请输入" class="input-width" clearable disabled></el-input>
							<div v-else class="div-content">{{ scope.row.mobile }}</div>
						</template>
					</el-table-column>

					<el-table-column prop="result" label="检查结果" align="center" width="200px">
						<template slot-scope="scope">
							<el-select v-if="scope.row.isEdit" v-model="scope.row.result" placeholder="请选择" class="input-width" size="small" clearable>
								<el-option v-for="subItem in optionResult" :key="subItem.value" :label="subItem.label" :value="subItem.value"></el-option>
							</el-select>
							<div v-else class="div-content">{{ scope.row.result == 1 ? '正常' : '异常' }}</div>
						</template>
					</el-table-column>

					<!-- <el-table-column
						prop="detailed"
						label="隐患明细"
						align="center"
						width="200px"
					>
						<template slot-scope="scope">
							<el-input
								v-if="scope.row.isEdit"
								type="text"
								v-model="scope.row.detailed"
								placeholder="请输入"
								class="input-width"
								maxlength="500"
								clearable
							></el-input>
							<div v-else class="div-content">
								{{ scope.row.detailed }}
							</div>
						</template>
					</el-table-column> -->

					<el-table-column prop="imgList" label="图片列表" align="center">
						<template slot-scope="scope">
							<div v-if="scope.row.isEdit">
								<el-upload
									:headers="$getElUploadHeaders()"
									class="avatar-uploader"
									:action="uploadUrl"
									:data="{ customerId: customerId }"
									:show-file-list="true"
									:limit="3"
									:file-list="scope.row.imgList"
									:on-success="res => handleImgSuccess(res, scope.row)"
									:on-remove="res => handleImgRemove(res, scope.row)"
									list-type="picture"
									:before-upload="beforeImgUpload"
								>
									<i class="el-icon-plus avatar-uploader-icon"></i>
									最多三张图片
								</el-upload>
							</div>

							<div v-else class="div-content">
								<el-image
									v-if="scope.row.imgList.length > 0"
									style="width: 100px; height: 50px"
									:src="scope.row.imgList[0]"
									fit="cover"
									:preview-src-list="scope.row.imgList"
								></el-image>
							</div>
						</template>
					</el-table-column>

					<el-table-column prop="reviewTime" label="拟复查时间" align="center" width="200px">
						<template slot-scope="scope">
							<el-date-picker
								v-if="scope.row.isEdit"
								v-model="scope.row.reviewTime"
								type="date"
								class="input-width"
								value-format="yyyy-MM-dd"
								placeholder="选择日期"
							></el-date-picker>
							<div v-else class="div-content">{{ scope.row.reviewTime }}</div>
						</template>
					</el-table-column>

					<el-table-column v-if="!disabled" fixed="right" label="操作" align="center" width="120">
						<template slot-scope="scope">
							<template v-if="scope.row.isEdit">
								<el-button @click="handleEdit(scope.row)" type="text" size="small" class="btn-color-edit">保存</el-button>
								<el-button @click="handleChange(scope.row, 'cancle')" type="text" size="small" class="btn-color-edit">取消</el-button>
							</template>
							<template v-else>
								<el-button v-if="formType == 'edit'" @click="handleChange(scope.row, 'edit')" type="text" size="small" :disabled="disabled" class="btn-color-edit">
									修改
								</el-button>
								<el-popconfirm v-if="formType == 'edit'" title="删除之后无法恢复，确认删除？" @onConfirm="del(scope.row)" @confirm="del(scope.row)">
									<el-button slot="reference" type="text" size="small" class="btn-color-del" style="margin-left: 10px">删除</el-button>
								</el-popconfirm>
							</template>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
import { requestPost, requestGet } from '@/js/dai/request';
export default {
	props: {
		id: {
			type: String,
			default: ''
		},
		info: {
			type: Object,
			default: () => ({})
		},
		disabled: {
			type: Boolean,
			default: false
		},
		formType: {
			type: String,
			default: ''
		},
		source: {
			//展示来源：manage  管理平台    visiual  可视化平台
			type: String,
			default: 'manage'
		}
	},
	data() {
		return {
			uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
			customerId: localStorage.getItem('customerId'),

			btnDisabled: false,
			btnType: 'cancle',
			isEdit: false,
			tableData: [],
			tempRow: {},

			optionResult: [
				{
					label: '异常',
					value: '0'
				},
				{
					label: '正常',
					value: '1'
				}
			],
			optionStaff: [
				// {
				//   label: "人名",
				//   value: "inspectStaffId",
				// },
			]
		};
	},

	computed: {
		allowOperate() {
			const {
				info: { agencyId }
			} = this;
			return agencyId && agencyId == this.$store.state.user.agencyId;
		}
	},

	watch: {
		id: {
			handler(val) {
				if (val.length > 0) {
					this.btnDisabled = false;
					this.getList();
				} else this.btnDisabled = true;
			},
			immediate: true
		}
	},

	created() {
		this.getOptionStaff();
	},

	methods: {
		beforeImgUpload(file) {
			console.log(file);
			const isLt1M = file.size / 1024 / 1024 < 10;
			const srcType = file.type;
			const format = file.name.split('.').pop();

			if (!isLt1M) {
				this.$message.error('上传文件大小不能超过 10MB!');
				return false;
			}
			if (srcType.indexOf('image') == -1) {
				this.$message.error('仅限图片格式');
				return false;
			}
			return true;
		},

		handleImgSuccess(res, row) {
			if (res.code === 0 && res.msg === 'success') {
				row.imgList.push(res.data.url);
				this.computeImgShowList(row);
			} else {
				this.$message.error(res.msg);
			}
		},

		computeImgShowList(row) {
			row.imgShowList = row.imgList.map(url => {
				return { name: '', url };
			});
		},

		handleImgRemove(file, row) {
			let url = file.url || file.response.data.url;
			if (url) {
				row.imgList = row.imgList.filter(item => item !== url);
				this.computeImgShowList(row);
			}
		},

		getRowClass({ rowIndex, columnIndex }) {
			if (rowIndex === 0) {
				return 'background: #2195fe; color: #fff;';
			}
		},

		handleChange(row, type) {
			if (type == 'cancle') {
				row = { ...this.tempRow };
				row.isEdit = false;
				if (this.btnType == 'add') this.tableData.pop();
				this.getList();
			} else {
				this.tempRow = { ...row };
				row.isEdit = true;
			}
			this.btnType = type;
			this.isEdit = !this.isEdit;
		},

		handleChangeStaff(row) {
			const { staffId } = row;
			const { optionStaff } = this;
			let item = optionStaff.find(item => item.value == staffId);
			if (item) {
				row.staffName = item.name;
				row.mobile = item.mobile;
			}
		},

		async getOptionStaff() {
			let url = `/data/aggregator/org/staff-select-list/${this.$store.state.user.agencyId}`;
			const { data, code, msg } = await requestPost(url, {});

			if (code === 0) {
				this.optionStaff = data || [];
			} else {
				this.$message.error('请求工作人员数据失败！');
			}
		},

		async handleEdit(row) {
			if (row.result == '0' && row.reviewTime == '') {
				this.$message.error('拟复查时间不能为空');
			} else {
				if (this.btnType == 'add') this.save(row);
				else this.edit(row);
			}
		},

		handleAdd() {
			this.btnType = 'add';
			this.isEdit = true;

			const item = {
				isEdit: true,
				enterpriseId: this.id,
				patrolTime: '',
				staffId: '',
				staffName: '',
				mobile: '',
				result: '',
				reviewTime: '',
				imgList: []
			};
			this.computeImgShowList(item);
			this.tableData.push(item);
		},

		async save(row) {
			const params = {
				enterpriseId: this.id,
				...row
			};
			const url = `/gov/org/enterprise/addorupdate-patrol`;
			const { data, code, msg } = await requestPost(url, params);
			if (code === 0) {
				this.$message.success('保存成功');
				row.isEdit = false;
				this.isEdit = false;
				this.btnType = 'cancle';
				this.getList();
			} else {
				this.$message.error(msg);
			}
		},

		async edit(row) {
			const params = {
				...row
			};
			const url = `/gov/org/enterprise/addorupdate-patrol`;
			const { data, code, msg } = await requestPost(url, params);
			if (code === 0) {
				this.$message.success('保存成功');
				row.isEdit = false;
				this.isEdit = false;
				this.getList();
			} else {
				this.$message.error(msg);
			}
		},

		async del(row) {
			const url = `/gov/org/enterprise/del-patrol/${row.patrolId}`;
			const { data, code, msg } = await requestPost(url);

			if (code === 0) {
				this.$message.success('删除成功');
				this.getList();
			} else {
				this.$message.error(msg);
			}
		},

		async getList() {
			const url = `/gov/org/enterprise/patrollist/${this.id}`;
			console.log('getList---------------------------------------------------------------------------', url);
			const { data, code, msg } = await requestPost(url);
			if (code === 0) {
				console.log('data', data);
				this.tableData = data.list.map(item => {
					this.computeImgShowList(item);
					return {
						...item,
						isEdit: false
					};
				});
			} else {
				this.$message.error(msg);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/buttonstyle.scss';
@import '@/assets/scss/modules/management/list-main.scss';
.m-record h3{
	font-size: 1.17em;
	&::before {
		display: none;
	}
	
}
.mt10 {
	margin-bottom: 10px;
}
.input-width {
	width: 170px;
}
</style>
