<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>{{title}}</h3>
			<h5>{{title}}购标信息、邮寄信息、发票信息、缴费信息</h5>
		</div> 
		<div class="othercontent">
			<el-form ref="ruleForm" :model="ruleForm"  label-width="200px" class="demo-ruleForm">
				<div class="message">
					<div>
						<div class="describe">确认购标信息</div>
						<div class="message-form">
							<div>
								<el-form-item label="单位名称" prop="companyName">
									<el-input v-model="ruleForm.companyName" disabled></el-input>
								</el-form-item>
							</div>
							<div class="flex-between">
								<el-form-item label="联系人：" prop="contacts">
									<el-input v-model="ruleForm.contacts" disabled></el-input>
								</el-form-item>
								<el-form-item label="固定电话：" prop="companyTel">
									<el-input v-model="ruleForm.companyTel" disabled></el-input>
								</el-form-item>
							</div>
							<div class="flex-between">
								<el-form-item label="手机：" prop="companyPhone">
									<el-input v-model="ruleForm.companyPhone" disabled></el-input>
								</el-form-item>
								<el-form-item label="传真：" prop="companyFacsimile">
									<el-input v-model="ruleForm.companyFacsimile" disabled></el-input>
								</el-form-item>
							</div>
							<div>
								<el-form-item label="邮箱：" prop="companyEmail">
									<el-input v-model="ruleForm.companyEmail" disabled></el-input>
								</el-form-item>
							</div>
						</div>
					</div>
					<div>
						<div class="describe">邮寄信息</div>
						<div class="message-form">
							<div class="flex-between">
								<el-form-item label="收件人名称：">
									<el-input v-model="ruleForm.recipientsName" disabled></el-input>
								</el-form-item>
								<el-form-item label="收件人单位：">
									<el-input v-model="ruleForm.recipientsCompany" disabled></el-input>
								</el-form-item>
							</div>
							<div class="flex-between">
								<el-form-item label="联系方式：">
									<el-input v-model="ruleForm.recipientsPhone" disabled></el-input>
								</el-form-item>
								<el-form-item label="邮政编码：">
									<el-input v-model="ruleForm.recipientsMail" disabled></el-input>
								</el-form-item>
							</div>
							<div>
								<el-form-item label="邮寄地址：">
									<el-input v-model="ruleForm.recipientsAddress " disabled></el-input>
								</el-form-item>
							</div>

						</div>
					</div>
					<div>
						<div class="describe">发票信息</div>
						<div class="message-form">

							<div class="flex-between">
								<el-form-item label="发票类型：" prop="invoiceType">
									<el-radio-group v-model="ruleForm.invoiceType" disabled>
										<el-radio :label="1">增值税普通发票</el-radio>
										<el-radio :label="2">增值税专用发票</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="发票抬头：" prop="invoiceHead">
									<el-input v-model="ruleForm.invoiceHead" disabled></el-input>
								</el-form-item>
							</div>
							<div class="flex-between">
								<el-form-item label="纳税人识别号：" prop="invoiceTaxNumber ">
									<el-input v-model="ruleForm.invoiceTaxNumber " disabled></el-input>
								</el-form-item>
								<el-form-item label="地址：" prop="invoiceAddress">
									<el-input v-model="ruleForm.invoiceAddress" disabled></el-input>
								</el-form-item>
							</div>
							<div class="flex-between">
								<el-form-item label="电话：" prop="invoiceTel">
									<el-input v-model="ruleForm.invoiceTel" disabled></el-input>
								</el-form-item>
								<el-form-item label="开户行及账号：" prop="invoiceAccount">
									<el-input v-model="ruleForm.invoiceAccount" disabled></el-input>
								</el-form-item>
							</div>
						</div>
					</div>
					<div>
						<div class="describe">缴费信息</div>
						<div class="message-form">
							<el-form-item label="付款方式：" prop="feeWay">
								<el-input v-model="ruleForm.feeWay" disabled>
								</el-input>
							</el-form-item>
							<el-form-item label="备注：" prop="remark">
								<el-input :rows="5" v-model="ruleForm.remark" type="textarea" disabled>
								</el-input>
							</el-form-item>
							<el-form-item label="上传缴费凭证：" prop="voucherUrl">
								
							</el-form-item>
						</div>
					</div>
				</div>
			</el-form>
		</div>
				<!-- 拒绝原因 -->
		<el-dialog title="审核拒绝" :visible.sync="dialogFormVisible">
		  <el-form :model="form" :rules="rules" ref="form">
		    <el-form-item label="拒绝原因" label-width="100">
		      <el-input v-model="form.reason"   type="textarea" :rows="2" placeholder="请输入内容"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="refuse">确 定</el-button>
		  </div>
		</el-dialog>
		<div class="bottomButton" v-if="type=='see'">
			<el-button @click="back">返回</el-button>
		</div>
		<div class="bottomButton" v-else>
			<el-button @click="back">取消</el-button>
			<el-button type="primary" @click="dialogFormVisible = true">审核拒绝</el-button>
			<el-button type="primary" @click="adopt">审核通过</el-button>
		</div>
	</div>

</template>

<script>
	import {
		bidbookDetail,operationAduit
	} from '@api/purchaser/bid'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	import Upload from '@components/Upload/Upload.vue'
	export default {
		components: {
			dataBreadcrumb,
			Upload
		},
		data() {
			// 测试图片
			let checkimg = (rule, value, callback) => {
				if (this.ruleForm.voucherUrl.length === 0) {
					callback(new Error('请上传凭证'));
				} else {
					callback();
				}
			};
			return {
				dialogFormVisible:false,
				breads: ['招标管理', '招标项目管理', '工作台'],
				ruleForm: {},
				form:{
				   reson:""
				},
				 rules: {
				        reason: [{
				          required: true,
				          message: '请输入',
				          trigger: 'blur'
				        }]
				      }
			}
		},
		methods: {
			back(){
				this.$router.go(-1)
			},
		
			 async getBidbookDetail(feeId) {
			      try {
			        const {
			          data,
			          code
			        } = await bidbookDetail(feeId)
					if(code==200){
						this.ruleForm=data
					}
			      } catch (e) {
			        console.log(e)
			      }
			    },
				// 审核拒绝
				async refuse() {
				      try {
				        const valid = await this.$refs['form'].validate()
				        if (valid) {
							let form=this.form;
							form.aduit=2
							form.id=this.feeId
				          const { code,msg } = await operationAduit(form)
				          if (code === 200) {
				            this.$success.success(msg)
				          }else{
							   this.$success.error(msg)
						  } 
				        }
				      } catch (e) {
				       console.log(e)
				    }
				},
				//审核通过
				async adopt() {
				      try {
							let form={};
							form.aduit=1
							form.id=this.feeId
				          const { code,msg } = await operationAduit(form)
				          if (code === 200) {
				            this.$success.success(msg)
				          }else{
							   this.$success.error(msg)
						  } 
				      } catch (e) {
				       console.log(e)
				    }
				}
		},
		created() {
			this.type=this.$route.query.type;
			if(this.type=="examine"){
				this.title="审核"
			}else{
				this.title="查看"
			}
			let feeId=this.$route.query.feeId;
			this.feeId=feeId
			this.getBidbookDetail(feeId);
		}
	}
</script>


<style scoped>
	.message {}

	.message>div {
		background: #fff;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.message-form {
		width: 70%;
		margin: 0 auto
	}
</style>
