<template>
	<view class="">
		<company :cid="id" type="company"></company>
		<view class="need_contract" v-if="!company.contract||!company.contract.status||!company.company.is_contract">
			<!-- <view class="title">电子合同</view> -->
			<picker v-if="company.contract&&company.contract.check_status==0||!company.contract"
				:range="contractTypeList" range-key="name" @change="changeType">
				<button class="btns" style="width: 694rpx;height: 90rpx; margin: 0 auto;border-radius: 54rpx;overflow: hidden;background-color: #0122c7;color: #fff;">
					<u-icon name="../../static/img/company/HT.png" size="20" style="margin-right: 10rpx;"></u-icon>
					发起合同
				</button>
				<!-- <view style="width: 694rpx; margin: 0 auto;border-radius: 54rpx;overflow: hidden;">
          <mybtn text="生成合同" :position="false"><u-icon name="../../static/img/company/HT.png" size="20" style="margin-right: 10rpx;"></u-icon></mybtn>
        </view> -->
			</picker>
			<view v-if="company.contract&&company.contract.check_status==1">
				<button class="btn tips_center">合同已生成,请等待审核</button>
				<!-- <mybtn text="生成合同" position="false" disabled></mybtn> -->
			</view>
			<view v-if="company.contract&&company.contract.check_status==2&&company.contract.file" class="card">
				<view class="contract_box send">
					<view class="left">
						<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
						<view class="text">
							<view class="name">{{company.contract.contract_type_name}}</view>
							<view>
								<text>{{company.contract&&company.contract.create_time}}</text>
							</view>
						</view>
					</view>
					<view class="right" @click="naviToContract(company.contract.file)">
						<!-- <image class="icon"></image> -->
						<uni-icons type="paperclip" color="#3274F9"></uni-icons>
						<view>查看</view>
					</view>
				</view>
				<u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
				<view class="bottom">
					<button class="send_btn" @click="clickContract(2)">发送合同</button>
				</view>
			</view>
			<view v-if="company.contract&&company.contract.check_status==3" class="card">
				<view class="contract_box send">
					<view class="left">
						<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
						<view class="text">
							<view class="name">{{company.contract.contract_type_name}}</view>
							<view>
								<text>{{company.contract&&company.contract.create_time}}</text>
							</view>
						</view>
					</view>
					<view class="right" @click="naviToContract(company.contract.file)">
						<!-- <image class="icon"></image> -->
						<uni-icons type="paperclip" color="#3274F9"></uni-icons>
						<view>查看</view>
					</view>
				</view>
				<u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
				<view class="bottom">
					<button class="send_btn" @click="getPostsms" v-if="timerCount==0">再次发送短信</button>
					<button class="send_btn tips_center" v-else>{{cTimerCount+'秒后可继续再次发送短信'}}</button>
				</view>
			</view>
		</view>
    <u-modal :show="modelShow" title="提醒" :content="modelType==1?'请检查信息无误后再生成合同':'请检查合同无误后再发送'" closeOnClickOverlay showCancelButton cancel-text="我再看看" confirm-text="确认无误" close="modelShow=false" @cancel="modelShow=false" @confirm="modelType==1?createContract():addContract();modelShow=false"></u-modal>
	</view>
</template>

<script>
	import {
		companyView,
		initiateContract,
		Draftingcontracts,
		postsms
	} from "@/api/company.js"
	import {
		dictDataLists
	} from "@/api/oaPbulic.js"
	import {
		Toast
	} from "../../libs/uniApi";
	import {
		companyContractType
	} from "@/static/server/contract.js";
	export default {
		data() {
			return {
				id: '',
				company: {},
				skeleton: true,
				show: false,
				typeShow: false,
				timer: null, // 计时器
				timerCount: 0, //倒计时
				contractTypeList: [],
        modelShow: false,
        modelType: 1,
        nowContractType: -1
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.initCompany();
			this.initContractTypeList();
			let time = uni.getStorageSync('ctime' + this.id);
			if (time > 0 && (time - Date.now()) / 1000 > 0) {
				this.startTimer((time - Date.now()) / 1000);
			}
		},
		onUnload() {
			if (this.timerCount > 0) uni.setStorageSync('ctime' + this.id, this.timerCount * 1000 + Date.now());
		},
		computed: {
			cTimerCount() {
				return this.timerCount;
			}
		},
		methods: {
			async initCompany() {
				let res = await companyView({
					id: this.id,
				})
				this.company = res.data;
				if (this.company.contract == [] || this.company.contract == {} || this.company.contract.length == 0)
					this
					.company.contract = null;
			},
			changeType(e) {
				// console.log(this.contractTypeList[e.detail.value]);
        this.nowContractType = e.detail.value;
        this.clickContract(1);
				// this.createContract({
				// 	party_b: this.id,
				// 	contract_type: this.contractTypeList[e.detail.value].id,
				// 	type: 1 //1-公司,2-个人
				// })
			},
			// 查看合同
			naviToContract(file) {
				uni.navigateTo({
					url: `/subpkg/pdfView/pdfView?url=${file}`
				})
			},
			// 初始化合同类型
			async initContractTypeList() {
				let res = await dictDataLists({
					type_id: 7
				})
				res.data = res.data.filter(item => {
					return companyContractType.find(t => item.id == t);
				})
				this.contractTypeList = res.data;
			},
      clickContract(e){
        this.modelType = e;
        this.modelShow = true;
      },
			// 生成合同
			async createContract(data) {
        uni.showLoading({
        	title: '合同生成中',
        	mask: true
        })
        let res = await initiateContract({
        	party_b: this.id,
        	contract_type: this.contractTypeList[this.nowContractType].id,
        	type: 1
        })
        this.initCompany();
        uni.hideLoading();
        Toast(res.msg || '合同已生成');
        this.navTo('/subpkg/submit/submit?type=' + 1);
				// uni.showModal({
				// 	content: '请检查信息无误后再生成合同',
				// 	confirmText: '确认无误',
				// 	cancelText: '我再看看',
				// 	confirmColor: '#0122c7',
				// 	success: async (e) => {
				// 		if (e.confirm) {
							
				// 		}
				// 	}
				// })
			},
			// 发送合同
			async addContract(data) {
        try {
        	uni.showLoading({
        		title: '合同发送中',
        		mask: true
        	})
        	let res = await Draftingcontracts({
        		id: this.id
        	});
        	this.initCompany();
        	this.startTimer();
        	uni.hideLoading();
        	Toast('合同已发送');
        	// this.navTo('/subpkg/submit/submit');
        } catch (e) {
        	uni.hideLoading();
        	Toast(e.msg || '合同发送失败');
        }
				// uni.showModal({
				// 	content: '请检查合同无误后再发送',
				// 	confirmText: '确认无误',
				// 	cancelText: '我再看看',
				// 	confirmColor: '#0122c7',
				// 	success: async (e) => {
				// 		if (e.confirm) {
							
				// 		}
				// 	}
				// })
			},
			// 发送短信
			async getPostsms() {
				try {
					uni.showLoading({
						title: '发送中',
						mask: true
					})
					if (this.timerCount == 0) {
						this.startTimer();
						let res = await postsms({
							id: this.id
						})
						Toast('短信已发送');
						// this.navTo('/subpkg/submit/submit');
					}
				} catch (e) {
					uni.hideLoading();
					Toast(e.msg || '合同发送失败');
				}
			},
			// 定时器
			startTimer(time = 60) {
				this.timerCount = time.toFixed(0);
				this.timer = setInterval(() => {
					this.timerCount--;
					if (this.timerCount <= 0) {
						clearInterval(this.timer);
						this.loadUserDetail();
					}
				}, 1000);
			},
			navTo(url) {
				if(url){
          uni.showLoading({
            title: '加载中',
            mask: true
          });
          uni.navigateTo({
          	url: url,
            success() {
              uni.hideLoading()
            }
          })
        }else Toast('暂未开放')
			},
		},
		onPullDownRefresh() {
      this.initCompany().then(()=>{
        uni.stopPullDownRefresh()
      })
		}
	}
</script>

<style lang="scss">
	.btns {
		color: white;
		background-color: $theme-oa-color;
    display: flex;
    justify-content: center;
    align-items: center;
	}

	.need_contract {
		padding-bottom: 30rpx;

		.title {
			font-size: 35rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 21rpx;
			margin-left: 28rpx;
		}

		.card {
			padding-top: 0;
			margin: 28rpx;
			padding: 28rpx;
			background-color: #fff;
			border-radius: 14rpx;

			.contract_box {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;

					.contract_img {
						width: 102rpx;
						height: 102rpx;
						background: #F5F5F5;
						border-radius: 14rpx 14rpx 14rpx 14rpx;
						margin-right: 21rpx;
					}

					.text {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-size: 32rpx;
							;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.8);
							line-height: 35rpx;
						}

						.nickname {
							margin-right: 35rpx;
						}

						text {
							height: 39rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #666666;
							line-height: 35rpx;
						}
					}
				}

				.right {
					font-size: 28rpx;
					font-weight: 500;
					color: #3274F9;
					line-height: 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						width: 35rpx;
						height: 39rpx;
						background-color: #3274F9;
						opacity: 1;
						margin-right: 10rpx
					}
				}

			}

			.send {
				padding-top: 28rpx;
			}

			.send_btn {
				width: 100%;
				height: 84rpx;
				background: $theme-oa-color;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
			}

			.tips_center {
				background-color: #666;
				color: #eee;
			}
		}

		.btn {
			margin: 0 auto;
			margin-top: 32rpx;
			// margin-bottom: 40rpx;
			width: 694rpx;
			height: 84rpx;
			background: $theme-oa-color;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
		}

		.tips_center {
			background-color: #666;
			color: #eee;
		}
	}
</style>