<template>
	<div>
		<!-- 		<el-card class="box-card" style="height: 100%;">
 -->
		<!-- <div slot="header" class="clearfix"> -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<!-- <el-breadcrumb-item>承担单位</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/jc/routineMonitor' }">例行检测</el-breadcrumb-item>
			<el-breadcrumb-item>执行任务</el-breadcrumb-item>
			 :to="{ path: '/jc/setTaskcd' }"
			<el-breadcrumb-item>抽样</el-breadcrumb-item> -->
			<el-breadcrumb-item>填报抽样单</el-breadcrumb-item>
		</el-breadcrumb>
  	<!-- <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">
	  江苏省苏州市吴中区吴中大道 1188 号
	</el-descriptions-item> -->
<el-descriptions  title="安徽省农业农村厅 农产品质量安全 例行检测 抽样单" :column="2" border style="margin-top:20px" :contentStyle="{'text-align': left}">
	<el-descriptions-item label="*样品名称" prop="sample_name" class="labelItem" size="mini" required >
		<!-- <el-col :span="12"> -->
		<el-select v-model="form.sample_name" clearable style="width:60%">
				<el-option v-for="item in sampleList"
				:key="item.product_id" 
				:label="item.product_name"
				:value="item.product_name">
				</el-option>
		</el-select>
		<!-- </el-col> -->
	</el-descriptions-item>
	<el-descriptions-item label="样品编码" prop="sample_id" class="labelItem" style="" size="mini">
		<el-input v-model="form.sample_id" disabled>
			<el-button slot="append" @click="createCode">生成</el-button>
		</el-input>
	</el-descriptions-item>
	<el-descriptions-item label="商标" prop="brand" class="labelItem" size="mini">
		<el-input v-model="form.brand"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="包装" prop="ispack" class="labelItem" style="" size="mini">
		<el-radio v-model="form.ispack" label="有">有</el-radio>
		<el-radio v-model="form.ispack" label="无">无</el-radio>
	</el-descriptions-item>
	<el-descriptions-item label="型号规格" prop="type" class="labelItem" size="mini">
		<el-input v-model="form.type"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="执行标准" prop="standard" class="labelItem" style="" size="mini">
		<el-input v-model="form.standard"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="*生产日期或批号" prop="production_date" class="labelItem" size="mini" required>
		<el-input v-model="form.production_date"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="产地" prop="place" class="labelItem" style="" size="mini">
		<el-cascader  :options="options" v-model="selectedOptions" @change="handleChange" style="width:60%"></el-cascader>
	</el-descriptions-item>
	<el-descriptions-item label="*产品认证情况" prop="certicfie" class="labelItem" size="mini" required>
		<el-radio v-model="form.certicfie" label="无公害农产品">无公害农产品</el-radio>
							<el-radio v-model="form.certicfie" label="绿色食品">绿色食品</el-radio>
							<el-radio v-model="form.certicfie" label="有机食品">有机食品</el-radio>
							<el-radio v-model="form.certicfie" label="其他">其他</el-radio>
	</el-descriptions-item>
	<el-descriptions-item label="证书编号" prop="certifie_num" class="labelItem" style="" size="mini">
		<el-input v-model="form.certifie_num"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="*抽样数量" prop="sample_renum" class="labelItem" size="mini" required>
		<el-input v-model="form.sample_renum" style="width:180px"></el-input>
		<a> * 单位 </a><el-input v-model="form.sample_num_unit" clearable="true" style="width:180px"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="抽样基数" prop="sample_base" class="labelItem" size="mini" required>
		<el-input v-model="form.sample_base" style="width:180px"></el-input>
		<a> * 单位 </a><el-input v-model="form.sample_base_unit" clearable="true" style="width:180px"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="*抽样场所" prop="sample_ground" class="labelItem" size="mini" required >
							<el-radio v-model="form.sample_ground" label="生产基地/企业">生产基地/企业</el-radio>
							<el-radio v-model="form.sample_ground" label="屠宰场">屠宰场</el-radio>
							<el-radio v-model="form.sample_ground" label="农贸市场">农贸市场</el-radio>
							<el-radio v-model="form.sample_ground" label="批发市场">批发市场</el-radio>
							<el-radio v-model="form.sample_ground" label="超市">超市</el-radio>
							<el-radio v-model="form.sample_ground" label="其他">其他</el-radio>
	</el-descriptions-item>
	</el-descriptions>
	<!-- 受检单位情况 -->
	<el-descriptions :column="1" border style="" >
		<el-descriptions-item label="受检单位情况" >
			<el-descriptions  :column="1" border  size="mini" style="width:100%">
				<el-descriptions-item label="*单位名称" prop="units_name" class="labelItem" style="" size="mini" required>
									<el-input v-model="form.units_name"></el-input>
				</el-descriptions-item>
				<el-descriptions-item label="*通讯地址" prop="address" class="labelItem" style="" size="mini" required>
									<el-input v-model="form.address"></el-input>
				</el-descriptions-item>
				<el-descriptions-item label="*法定代表人" prop="corporation" class="labelItem" style="" size="mini" required>
									<el-input v-model="form.corporation"></el-input>
				</el-descriptions-item>
				<el-descriptions-item label="*受检人" prop="user_name" class="labelItem" style="" size="mini" required>
									<el-input v-model="form.user_name"></el-input>
				</el-descriptions-item>
				<el-descriptions-item label="电话" prop="phone" class="labelItem" style="" size="mini">
									<el-input v-model="form.phone"></el-input>
				</el-descriptions-item>
				<el-descriptions-item label="传真" prop="fax" class="labelItem" style="" size="mini">
							<el-input v-model="form.fax"></el-input>
				</el-descriptions-item>
			</el-descriptions>
		</el-descriptions-item>
	</el-descriptions>
		<!-- 生产单位情况 -->
		<el-descriptions :column="1" border style="" >
			<el-descriptions-item label="生产单位情况"  >
				<el-descriptions  :column="1" border size="mini" style="width:100%" >
			<el-descriptions-item label="*单位名称" prop="production_name" class="labelItem" style="" size="mini" required>
				<el-input v-model="form.production_name"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="*通讯地址" prop="p_address" class="labelItem" style="" size="mini" required>
				<el-input v-model="form.p_address"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="邮编" prop="p_postcode" class="labelItem" style="" size="mini">
				<el-input v-model="form.p_postcode"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="*联系人" prop="p_user_name" class="labelItem" style="" size="mini" required>
				<el-input v-model="form.p_user_name"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="电话" prop="p_phone" class="labelItem" style="" size="mini">
				<el-input v-model="form.p_phone"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="传真" prop="p_fax" class="labelItem" style="" size="mini">
				<el-input v-model="form.p_fax"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="生产方式" prop="production_class" class="labelItem" style=""  required>
				<el-radio v-model="form.production_class" label="自产">自产</el-radio>
				<el-radio v-model="form.production_class" label="收购">收购</el-radio>
			</el-descriptions-item>
			</el-descriptions>
			</el-descriptions-item>
		</el-descriptions>


		<!-- 抽样单位情况 -->
		<el-descriptions :column="1" border style="" >
			<el-descriptions-item label="抽样单位情况" >
				<el-descriptions  :column="1" border size="mini" style="width:100%">
			<el-descriptions-item label="*单位名称" prop="sample_unit_name" class="labelItem" style="" size="mini"
									required>
									<el-input v-model="form.sample_unit_name"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="*联系人" prop="sample_unit_user" class="labelItem" style="" size="mini"
									required>
									<el-input v-model="form.sample_unit_user"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="*通讯地址" prop="sample_unit_address" class="labelItem" style="" size="mini"
									required>
									<el-input v-model="form.sample_unit_address"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="邮编" prop="sample_unit_postcode" class="labelItem" style="" size="mini">
									<el-input v-model="form.sample_unit_postcode"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="联系电话" prop="sample_unit_phone" class="labelItem" style="" size="mini">
									<el-input v-model="form.sample_unit_phone"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="传真" prop="sample_unit_fax" class="labelItem" style="" size="mini">
									<el-input v-model="form.sample_unit_fax"></el-input>
			</el-descriptions-item>
			<el-descriptions-item label="Email" prop="sample_unit_email" class="labelItem" style="" size="mini">
									<el-input v-model="form.sample_unit_email"></el-input>
			</el-descriptions-item>
			</el-descriptions>
			</el-descriptions-item>
		</el-descriptions>

		<el-descriptions  :column="2" border>
			<el-descriptions-item label="检测任务依据" prop="base" class="labelItem" style="" size="mini" required>
								<el-input v-model="form.base"></el-input>
			</el-descriptions-item>
			<el-descriptions-item  label="抽样时间" prop="sample_date" class="labelItem" style="" size="mini" required>
								<el-date-picker v-model="form.sample_date" type="date" value-format="yyyy-MM-dd">
								</el-date-picker>
			</el-descriptions-item>
			<el-descriptions-item  label="被抽检单位签字盖章附件" prop="filr_url" class="labelItem" style="" size="mini">
								<el-upload class="upload-demo" :file-list="fileList" drag :headers="myHeaders"
									action="http://syjcapi.aielab.net/api/v1/ossUpload" :on-success="uploadSuccess" :limit="1">
									<i class="el-icon-upload"></i>
									<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
								</el-upload>
			</el-descriptions-item>
		</el-descriptions>
<!-- 底部按钮 -->
		<el-form>
				<el-form-item class="btn">
					<el-button type="primary" @click="back">返回抽样列表</el-button>
					<el-button @click="resetForm()">重置</el-button>
					<el-button @click="onSubmit">保存，继续添加</el-button>
				</el-form-item>
			</el-form>
			<!-- <el-form ref="form1" :model="form" label-width="110px"
				style="margin-top: 20px;width: 48%;background-color: aliceblue;padding:10px 1px 1px 10px;">
			</el-form> -->
		</div>
		<!-- </el-card> -->
</template>

<script>
	const token = window.sessionStorage.getItem('token')
	import {
		provinceAndCityData,
		regionData,
		provinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	export default {
		name: 'inputSample',
		data() {
			return {
				myHeaders: {
					Authorization: 'bearer' + token
				},
				fileList: [],
				form: {
					sample_name: '',//样品名称
					sample_id: '',//样品编码
					brand: '',//商标
					ispack: '',//包装
					type: '', //型号规格
					standard: '',//执行标准
					production_date: '',//生产日期或批号
					place: '', //产地,
					certicfie: '',//产品认证情况
					certifie_num: '',//证书编号
					sample_renum: '',//抽样数量
					sample_num_unit: '',//单位
					sample_base: '',//抽样基数
					sample_base_unit: '',//单位
					sample_ground: '',//抽样场所
					// 受检单位情况
					units_name: '',//单位名称
					address: '',//通讯地址
					corporation: '',//法定代表人
					user_name: '',//受检人
					phone: '',//电话
					fax: '',//传真
					// 生产单位情况
					production_class: '',//生产、自购
					production_name: '',//单位名称
					p_address: '',//通讯地址
					p_postcode: '',//邮编
					p_user_name: '',//联系人
					p_phone: '',//电话
					p_fax: '',//传真
					// 抽样单位情况
					sample_unit_name: '',//单位名称
					sample_unit_user: '',//联系人
					sample_unit_address: '',//通讯地址
					sample_unit_postcode: '',//邮编
					sample_unit_phone: '',//联系电话
					sample_unit_fax: '',//传真
					sample_unit_email: '',//Email
					base: '',//检测任务依据
					sample_date: '',//抽样时间
					filr_url: '',//被抽检单位签字盖章附件
						},
				units: [],
				production: [],
				// 样品下拉框
				sampleList: [],
				id: '',
				// 产地
				options: regionData,
				selectedOptions: []
			}
		},
		created() {
			this.id = this.$route.params.id
			console.log(this.id)
			this.getTestObj()
		},
		methods: {

			// 获取样本列别
			async getTestObj() {
				const result = await this.$http.post('getTestObj', {
					id: this.id
				})
				if (result.data.code == 0) {
					this.sampleList = result.data.data
				}
			},
			// 生成样品编码
			async createCode() {
				var that = this
				const result = await this.$http.post('getSampleId', {
					id: this.id
				})
				if (result.data.code == 0) {
					that.form.sample_id = result.data.data.id
				}
			},
			// 获取选择产地
			handleChange() {
				var that = this
				var loc = "";
				// console.log(this.form.place)
				for (let i = 0; i < this.selectedOptions.length; i++) {
					loc += CodeToText[this.selectedOptions[i]];
				}
				// console.log(loc)
				that.form.place = loc
				console.log(that.form.place)
			},
			// 上传成功
			uploadSuccess(res) {
				console.log(res.data)
				this.form.file_url = res.data.fileUrl
				this.form.file_name = res.data.fileName
			},
			async onSubmit() {
				// console.log(this.form.sample_name)
				var that = this
				that.units = {
					'units_name': that.form.units_name,
					'phone': that.form.phone,
					'user_name': that.form.user_name,
					'address': that.form.address,
					'fax': that.form.fax
				}
				that.production = {
					'production_name': that.form.production_name,
					'phone': that.form.p_phone,
					'user_name': that.form.p_user_name,
					'address': that.form.p_address,
					'fax': that.form.p_fax,
					'postcode': that.form.p_postcode,
					'production_class': that.form.production

				}
				that.form['task_id'] = that.id

				that.form.units = that.units
				that.form.production = that.production
				console.log(that.form)
				const result = await this.$http.post('saveSample', that.form)
				if (result.data.code == 0) {
					// that.form.sample_id = result.data.data.id
					this.$message({
						type: 'success',
						message: '提交抽样单成功!'
					});
				}
			},
			// 重置表单
			resetForm() {
				// console.log(this.form)
					this.form='';
					this.selectedOptions = '';
			},
			// 返回
			back() {
				var that = this
				this.$router.push({
					name: 'setTaskcd',
					params: {
						id: that.id
					}
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.form {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-content: flex-start;
	}

	.el-descriptions {
		width: 80%;
		margin: auto;
	}

	/deep/ .el-descriptions__title {
		margin: auto;
		font-size: 1.25rem;
		// font-weight: 31.25rem !important;
	}
	.btn{
		margin-top:20px ;
		// float: right;
		text-align: center;
	}
	.smallTitle{
		margin-top: 20PX;
	}
</style>
