<template>
	<view class="page">
		<view class="search_input">
			<uni-easyinput class="uni-mt-5" suffixIcon="close" v-model="tableData.title" placeholder="请输入项目查找"
				@iconClick="clear" @input="change" @change="onSubmit"></uni-easyinput>
		</view>
		<tui-list-view color="#777">
			<tui-list-cell v-for="(item,index) in tableData" :key="item.id" arrow unlined>
				<view class="list-item" @click="navTo('/pages/responsibility/sign/detail',item)">
					模板标题:
					<span>{{item.title}}</span>
				</view>
				<view class="button_group">
					<tui-button class="btn" width="150rpx" height="50rpx"
						@click="navTo('/pages/responsibility/sign/sign',item)">签署协议</tui-button>
					<!-- 	<tui-button class="btn" width="150rpx" height="50rpx" type="warning"
						@click="navTo('/pages/responsibility/sign/add',item)">新建</tui-button> -->
					<tui-button class="btn" width="150rpx" height="50rpx" type="danger" @click="del(item)">删除</tui-button>
					<!-- 					<tui-modal :show="modal" @click="handleClick" @cancel="hideModal" title="提示"
						content="你确定删除这条数据？"></tui-modal> -->
				</view>
			</tui-list-cell>
		</tui-list-view>
		<!-- <Floating-Button @click="navTo('/pages/responsibility/sign/add')"></Floating-Button> -->
	</view>
</template>

<script>
	import {
		template
	} from '@babel/core'
	import html2canvas from 'html2canvas'
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex';
	import {
		getStorage
	} from '@/utils/storage.js';
	export default {
		data() {
			return {
				pageLoading: true,
				tableLoading: false,
				engineeringAry: [],
				searchForm: {
					title: '',
					limit: 15,
					page: 1
				},
				isshowImage: false,
				srcList: [],
				dialogVisible: false,
				dialogVisibleToContent: false,
				title: '新增',
				total: 1,
				editor: null,
				template: null,
				tableData: [],
				modal: false,
				itemInfo: {},
				baseIndex: '/{:config("shop.backend_index")}/',
				upurl: '/admin/attachment/upload',
				upurl2: '/admin/attachment/uploadOtherFile',
				form: {

				},
				loading: false,
				formAddRules: {
					sort: [{
						required: true,
						message: '请输入必填项'
					}],
				},
				multipleSelection: [],
				iselect: true,
				cycletypeArr: [{
						value: '1',
						label: '日'
					},
					{
						value: '2',
						label: '周'
					},
					{
						value: '3',
						label: '月'
					},
				],
				isDisabled: false,

			}
		},
		onLoad() {
			this.getList()
			this.template = getStorage('template_id')
			this.page.on('index', (data) => {
				this.itemInfo = data
			})
			// this.getEngineeringlist()
			// this.pageLoading = false
		},
		computed: {
			...mapState(['APIHOST', 'userinfo']),
		},
		methods: {
			// 获取列表
			async getList() {
				// this.tableLoading = true
				let res = await this.$request.get('responsibility/template/showTemplate/index', {
					params: {
						title: this.tableData.title,
						limit: 30,
					}
				})
				if (res.code == 0) {
					this.tableData = res.data.list.data
					this.total = res.data.list.total
					this.basicArrs = res.data.belist
					this.tableLoading = false
				}
			},
			// async getEngineeringlist() {
			//     let res = await this.$request.get('safebasic/redLine/getList')
			//     this.engineeringAry = res.data
			// },
			// 初始化表单
			initForm() {
				this.form = {
					id: null,
					sort: '',
					categroy: '',
					categroy_mark: '',
					check_method: '',
					question: '',
					standard: '',
				}
			},
			// 搜索
			onSubmit() {
				this.getList()
			},
			async check(item) {
				this.dialogCheckVisible = true;
				this.title = '查看详情';
				this.item = item;
				let res = await this.$request.get('responsibility/template/showTemplate/getTemplate', {
					template_id: item.id
				})
				if (res.code == 0) {
					this.content = res.data.content;
				}
			},
			async upload(formData) {
				let res = await this.$request.post(
					'https://anquansys.sxlq.com:37100/uploadoss/upload?token=1add2b5e9c36ce7d75a1ff3d11b9ffb8',
					formData)
				this.form.signImage = res.data.url;
			},
			async saveUserImage(item) {
				const opts = {
					useCORS: true,
					allowTaint: false,
					tainttest: true,
					logging: false
				};
				let checkImg = document.getElementById('checkImg');
				let canvas = await html2canvas(checkImg, opts);
				let imgData = canvas.toDataURL('image/png');
				let formData = new FormData();
				let blob = this.dataURLtoFile(imgData, 'image/png');
				let fileOfBlob = new File([blob], item.title + new Date() + ".png");
				formData.append("file", fileOfBlob);
				let img = document.createElement("img");
				img.src = imgData;
				this.upload(formData);
				$("#uploadImg").css("display", "none");
			},

			// handleClick(e, item) {
			// 	let index = e.index;
			// 	if (index == 0) {
			// 		this.tui.toast('你点击了取消按钮');
			// 	} else {
			// 		this.tui.toast('你点击了确认按钮');
			// 	}
			// 	this.modal = false;

			// },
			// 删除
			del(item) {
				let res = uni.request({
					url: this.APIHOST + 'responsibility/template/showTemplate/destroy',
					method: "POST",
					header: {
						authorization: "Bearer " + getStorage("sxlq_token"),
					},
					data: {
						template_id: item.id,
						user_id: getStorage('sxlq_userId')
					},
					success: (res) => {
						console.log('删除成功')
						uni.showToast({
							title: res.msg,
							duration: 1000
						})
					}

				})
				console.log(res)

			},
			dataURLtoFile(dataURI, type) {
				let binary = atob(dataURI.split(',')[1]);
				let array = [];
				for (let i = 0; i < binary.length; i++) {
					array.push(binary.charCodeAt(i));
				}
				return new Blob([new Uint8Array(array)], {
					type: type
				});
			},
			async saveSignature(item) {
				const opts = {
					useCORS: true,
					allowTaint: false,
					tainttest: true,
					logging: false
				};
				const canvasDiv = this.$refs.canvas;
				let canvas = await html2canvas(canvasDiv, opts);
				let imgData = canvas.toDataURL('image/png');
				let formData = new FormData();
				let blob = this.dataURLtoFile(imgData, 'image/png');
				let fileOfBlob = new File([blob], item.title + new Date() + ".png");
				formData.append("file", fileOfBlob);
				let img = document.createElement("img");
				img.src = imgData;
				this.upload(formData);
				this.form.template_id = item.id;
				let res = await this.$request.post('responsibility/template/showTemplate/signSafeBasic',
					this.form)
				if (res.code == 0) {
					this.dialogVisible = false
					this.$message.success(res.msg)
					this.getList()
				} else {
					this.$message.error(res.msg)
				}
			},
			show(item) {
				this.getAllEdit(item)
				this.isDisabled = true
				this.dialogVisible = true
			},
			pidchange2(e) {
				let _t = e.length;
				this.form.enhineering = e[_t - 1];
				this.getInspectData(e[_t - 1])
			},

			handleSelectionChange(val) {
				this.multipleSelection = [];
				if (val.length > 0) {
					this.iselect = false;
				} else {
					this.iselect = true;
				}
				val.map((item, index) => {
					this.multipleSelection.push(item.id);
				})

			},


			// 分页
			handlePageChange(page) {
				this.searchForm.page = page
				this.getList()
			},
			async getAllEdit(item) {
				let res = await this.$request.get('safebasic/redLine/show', {
					id: item.id
				})
				this.form = res.data
			},
			navTo(url, item) {
				if (url == '/pages/responsibility/sign/sign') {
					uni.navigateTo({
						url,
						success: (res) => {
							uni.setStorageSync("template_id", item);
						}
					});
				} else {
					uni.navigateTo({
						url,
						success: (res) => {
							res.eventChannel.emit('detail', item)
						}
					});
				}

			},

			// 新增或编辑
			optSubmit(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						this.loading = true
						delete this.form.enhineering
						if (this.form.id) {
							res = await this.$request.post('safebasic/redLine/update', this.form)
						} else {
							res = await this.$request.post('safebasic/redLine/store', this.form)
						}

						this.loading = false
						if (res.code == 0) {
							this.dialogVisible = false
							this.$message.success(res.msg)
							this.getList()
						} else {
							this.$message.error(res.msg)
						}
					}
				});
			}
		}

	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0rpx 20rpx;
	}

	.tui-list-cell {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 20rpx auto;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.list-item {
		font-size: $uni-font-size-sm;

		span {
			margin-left: 20rpx;
		}

		img {
			width: 500rpx;
			height: 500rpx;
		}

	}

	.button_group {
		display: flex;
		justify-content: space-between;
	}

	.search_input {
		margin: 20rpx auto 0;
	}
</style>