<template>
	<div class="app-container">
		<el-card class="box-card" style="padding: 20px 10px; margin-bottom: 20px">
			<div class="contract">
				<div>
					<p>合同名称</p>
					<el-input v-model="form.name" placeholder="请输入合同名称" style="width: 500px" clearable
						@input="getContractNo" />
				</div>
				<div>
					<p>合同编号</p>
					<el-input v-model="form.contractNo" placeholder="请输入合同编号" style="width: 500px" disabled />
				</div>
			</div>

			<div class="titlesa">
				<span>合同附件</span>
				<span style="color: #d05c39">*支持上传pdf、jpg/jpeg、png格式</span>
			</div>
			<div>
				<el-upload action="https://ht.9026.com/api/File" list-type="picture-card" :auto-upload="false"
					:on-change="handlepics" :file-list="form.pics">
					<i slot="default" class="el-icon-plus" />
					<div slot="file" slot-scope="{ file }">
						<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">

					</div>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="form.pics" alt="">
				</el-dialog>
			</div>
			<div class="titlesa">
				<span>发票附件</span>
				<span style="color: #d05c39">*支持上传pdf、jpg/jpeg、png格式</span>
			</div>
			<div>
				<el-upload action="https://ht.9026.com/api/File" list-type="picture-card" :auto-upload="false"
					:on-change="handleinvoicePics" :file-list="form.invoicePics">
					<i slot="default" class="el-icon-plus" />
					<div slot="file" slot-scope="{ file }">
						<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
						<!-- <span class="el-upload-list__item-actions">
							<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
								<i class="el-icon-zoom-in"></i>
							</span>
							<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
								<i class="el-icon-download"></i>
							</span>
							<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
								<i class="el-icon-delete"></i>
							</span>
						</span> -->
					</div>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="form.invoicePics" alt="">
				</el-dialog>
			</div>
			<div class="titlesa">
				<span>贸易合同</span>
				<span style="color: #d05c39">*支持上传pdf、jpg/jpeg、png格式</span>
			</div>
			<div>
				<el-upload action="https://ht.9026.com/api/File" list-type="picture-card" :auto-upload="false"
					:on-change="handletradePics" :file-list="form.tradePics">
					<i slot="default" class="el-icon-plus" />
					<div slot="file" slot-scope="{ file }">
						<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
						<span class="el-upload-list__item-actions">
							<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
								<i class="el-icon-zoom-in" />
							</span>
							<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
								<i class="el-icon-download" />
							</span>
							<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
								<i class="el-icon-delete" />
							</span>
						</span>
					</div>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="form.tradePics" alt="">
				</el-dialog>
			</div>
		</el-card>

		<div v-for="(item, index) in form.contractDrafts" class="form">
			<el-form ref="form" :model="item" label-width="90px">
				<el-form-item label="汇票名称">
					<el-input v-model="item.name" class="ipwidth" placeholder="请填写汇票名称" style="width: 220px" />
				</el-form-item>

				<el-form-item label="预计贴现日">
					<el-date-picker v-model="item.expectDiscountDate" type="date" placeholder="选择日期" @change="
              changeE;
              xpectDiscountDate($event, index);
            " />
				</el-form-item>
				<el-form-item label="出票日期">
					<el-date-picker v-model="item.acceptDate" type="date" placeholder="选择日期" class="ipwidth" />
				</el-form-item>
				<el-form-item label="承兑日期">
					<el-date-picker v-model="item.issueDate" type="date" placeholder="选择日期"
						@change="changeIssueDate($event, index)" />
				</el-form-item>
				<el-form-item label="到期日期">
					<el-date-picker v-model="item.expireDate" type="date" placeholder="选择日期" />
				</el-form-item>
			</el-form>
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="汇票号码">
					<el-input v-model="item.draftNo" class="ipwidth" placeholder="请填写汇票号码" style="width: 220px" />
				</el-form-item>
				<el-form-item label="金额">
					<el-input v-model="item.money" class="ipwidth" placeholder="请填写金额" style="width: 220px"
						@change="computed" />
				</el-form-item>
				<el-form-item label="服务费">
					<el-input v-model="item.serviceMoney" class="ipwidth" placeholder="计算得出服务费" style="width: 220px" />
				</el-form-item>
				<el-form-item label="最高贷款额度">
					<el-input v-model="item.loanLimit" class="ipwidth" placeholder="计算得出最高贷款额度" style="width: 220px" />
				</el-form-item>
				<el-form-item label="利息">
					<el-input v-model="item.interest" class="ipwidth" placeholder="计算得出利息" style="width: 220px" />
				</el-form-item>
			</el-form>
			<el-form ref="form" :model="form" label-width="90px">
				<el-form-item label="出票人">
					<el-select v-model="form.drawersName" placeholder="请选择出票人">
						<el-option label="新增出票人" value="" style="color: darkorange" @click.native="addDrawer" />
						<!-- <el-option
              v-for="item in drawersName"
              :label="item"
              :value="item"
            /> -->
					</el-select>
				</el-form-item>
				<el-form-item label="承兑人">
					<el-select v-model="form.acceptorName" placeholder="请选择承兑人">
						<!-- <el-option
              v-for="val in acceptorName"
              :label="val"
              :value="val"
              @click.native="getRate"
            /> -->
					</el-select>
				</el-form-item>

				<el-form-item label="服务费率">
					<el-input v-model="item.serviceRate" class="ipwidth" placeholder="服务费率" style="width: 220px"
						@input="inputServiceRate($event, index)" />
				</el-form-item>
				<el-form-item label="利率">
					<el-input v-model="item.interestRate" class="ipwidth" placeholder="利率" style="width: 220px"
						@input="inputInterestRate($event, index)" />
				</el-form-item>
			</el-form>
			<div>
				<el-row>
					<el-col style="margin: 0 auto">
						<div class="titlesa">
							<span>附件</span>
							<span style="color: #d05c39">*支持上传pdf、jpg/jpeg、png格式</span>
						</div>
						<div>
							<!-- el-upload accept=".pdf, .jpg, .jpeg, .png" action="https://ht.9026.com/api/File"
								list-type="picture-card" :show-file-list="true" :auto-upload="false"
								:before-upload="beforeUpload" :on-change="handlepicUrls(file,fileList,index)"
								:file-list="form.contractDrafts[index].picUrls"> -->
							<el-upload action="https://ht.9026.com/api/File" list-type="picture-card" :auto-upload="false"
								:on-change="handlepicUrls(file,fileList,index)" :file-list="form.contractDrafts[index].picUrls">
								<i class="el-icon-plus" />
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
								<img width="100%" :src="form.contractDrafts[index].picUrls" alt="">
							</el-dialog>
						</div>
					</el-col>
				</el-row>
				<el-button type="primary" @click="deletedraft(index)"
					style="width: 100px;height: 50px;margin-top: 50px;">删除汇票</el-button>
			</div>

		</div>

		<div class="commit">
			<div class="addnew">
				<el-button type="primary" @click="adddraft">新增汇票</el-button>
			</div>
			<div class="addall">
				<el-button type="warning" style="width: 180px; height: 45px; font-size: 16px" @click="onSubmit">确认上传
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				disabled: false,
				drawersList: [],
				acceptorList: [],
				contractList: [],
				form: {
					// 承兑人列表
					acceptorName: [],
					// 出票人列表
					drawersName: [],
					contractNo: '',
					supplierId: 2,
					name: '',
					invoicePics: [],
					pics: [],
					tradePics: [],
					contractDrafts: [{
						name: '',
						draftNo: '',
						acceptorId: '',
						drawersId: '',
						money: '',
						acceptDate: '',
						loanLimit: '',
						serviceRate: '',
						serviceMoney: '',
						interestRate: '',
						interest: '',
						picUrls:[],
						expectDiscountDate: '',
						issueDate: '',
						expireDate: ''
					}]
				},
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now()
					},
					shortcuts: [{
							text: '今天',
							onClick(picker) {
								picker.$emit('pick', new Date())
							}
						},
						{
							text: '昨天',
							onClick(picker) {
								const date = new Date()
								date.setTime(date.getTime() - 3600 * 1000 * 24)
								picker.$emit('pick', date)
							}
						},
						{
							text: '一周前',
							onClick(picker) {
								const date = new Date()
								date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
								picker.$emit('pick', date)
							}
						}
					]
				}
			}
		},

		mounted() {
			this.$request({
				url: '/api/Contract/search',
				method: 'post',
				data: {
					pageIndex: 1,
					pageSize: 100
				}
			}).then((res) => {
				this.contractList = res.data.result
			})
			this.$request({
				url: '/api/Acceptor/search',
				method: 'post',
				data: {
					pageIndex: 1,
					pageSize: 100
				}
			}).then((res) => {
				this.acceptorList = res.data.result
				this.acceptorName = Array.from(this.acceptorList, ({
					name
				}) => name)
				console.log(this.acceptorName)
				// 去除重复的承兑人
				//  for (var i = 0; i < this.acceptorName.length; i++) {    // 首次遍历数组
				//         for (var j = i + 1; j < this.acceptorName.length; j++) {   // 再次遍历数组
				//             if (this.acceptorName[i] === this.acceptorName[j]) {          // 判断连个值是否相等
				//                 this.acceptorName.splice(j, 1);           // 相等删除后者
				//                 j--;
				//             }
				//         }
				//     }
				// console.log(this.acceptorName)
			})
			this.$request({
				url: '/api/Drawer/search',
				method: 'post',
				data: {
					pageIndex: 1,
					pageSize: 100
				}
			}).then((res) => {
				this.drawersList = res.data.result
				this.drawersName = Array.from(this.drawersList, ({
					name
				}) => name)
				// 去除重复的出票人
				for (var i = 0; i < this.drawersName.length; i++) {
					// 首次遍历数组
					for (var j = i + 1; j < this.drawersName.length; j++) {
						// 再次遍历数组
						if (this.drawersName[i] === this.drawersName[j]) {
							// 判断连个值是否相等
							this.drawersName.splice(j, 1) // 相等删除后者
							j--
						}
					}
				}
				console.log(this.drawersName)
			})
		},
		methods: {
			onSubmit() {
				console.log(this.form)
				// this.$request({
				// 	url: '/api/Contract',
				// 	method: 'post',
				// 	data: this.form
				// }).then((res) => {
				// 	console.log(res)
				// 	this.$message({
				// 		message:'上传成功',
				// 		type:'success'
				// 	})
				// })
			},
			handlepics(file, fileList) {
				console.log(file, fileList)
				// this.form.pics.push(file)
				this.form.pics = fileList
				console.log(this.form.pics)
			},
			handleinvoicePics(file, fileList) {
				// this.form.invoicePics.push(file)
				this.form.invoicePics = fileList
				console.log(this.form.invoicePics)
			},
			handletradePics(file, fileList) {
				// this.form.tradePics.push(file)
				this.form.tradePics = fileList
				console.log(this.form.tradePics)
			},
			handlepicUrls(file, fileList, index) {
				this.form.contractDrafts[index].picUrls = fileList
				console.log(this.form.contractDrafts[index])
			},
			getContractNo() {
				const temporaryList = this.contractList.filter(
					(item) => item.name === this.form.name
				)
				if (this.form.name === '' || temporaryList === '') {
					this.form.contractNo = ''
				} else {
					this.form.contractNo = temporaryList[0].contractNo
				}
			},
			getRate() {
				const list = this.acceptorList.filter(
					(item) => item.name === this.form.acceptorName
				)
				this.form.contractDrafts[0].interestRate = list[0].interest
				this.form.contractDrafts[0].serviceRate = list[0].serviceRate
			},
			computed() {
				console.log(this.form.contractDrafts[0].money)
			},
			addDrawer() {
				this.$router.push({
					path: '/form/addTicketdrawer'
				})
			},
			adddraft() {
				this.form.contractDrafts.push({
					name: '',
					draftNo: '',
					acceptorId: '',
					drawersId: '',
					money: '',
					acceptDate: '',
					loanLimit: '',
					serviceRate: '',
					serviceMoney: '',
					interestRate: '',
					interest: '',
					picUrls: [],
					expectDiscountDate: '',
					issueDate: '',
					expireDate: ''
				})
			},

			deletedraft(index) {
				const contractDraftsLength = this.form.contractDrafts.length
				if (contractDraftsLength > 1) {
					this.form.contractDrafts.splice(index, 1)
				} else {
					this.$message.error('至少一个')
				}
				console.log(this.form.contractDrafts[0].money)
			},
			// 服务费率
			inputServiceRate(val, index) {
				console.log(val, index)
			},
			// 利率
			inputInterestRate(val, index) {
				console.log(val, index)
			},
			// 预计贴现日
			changeExpectDiscountDate(val, index) {
				console.log(val, index)
			},
			// 承兑日期
			changeIssueDate(val, index) {
				console.log(val, index)
			}
		}
	}
</script>

<style lang="scss">
	.contract {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.form {
		display: flex;
		justify-content: space-around;
	}

	.addnew {
		display: flex;
		justify-content: flex-end;
	}

	.addall {
		display: flex;
		justify-content: center;
	}

	.commit {
		margin: 20px 0;
	}
</style>
