<template>
	<div>
		<div style="height:58px;line-height:58px;background:#fff;padding-left:20px;">
			<div style="color:#0006"> <span>品牌策划</span> <span style="padding:0 5px;">></span> <span
					style="color:#000000e6">氛围方案新增</span></div>
		</div>
		<div style="padding:15px 10px 10px 10px;background-color:#fff">
			<el-tabs :before-leave="beforeTabLeave">
				<!-- <el-tab-pane label="方案编辑">
					<div style="border: 1px solid #E5E5E5;padding: 1px" id="bian">
						<div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;">
							方案编辑器
						</div>
						<div style="padding: 15px;width:100%">
							<wang-editor v-model="ruleForm.solutionEditor" ref="editor"></wang-editor>
						</div>
					</div>
				</el-tab-pane> -->
				<el-tab-pane label="基本信息">
					<div style="border: 1px solid #E5E5E5;padding: 1px" id="jiben">
						<div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;">
							基本信息
						</div>
						<div style="padding: 15px;">
							<el-form label-position="right" ref="jibenFrom" :model="ruleForm" :rules="rules"
								label-width="150px" style="position: relative">
								<el-row :gutter="20">
									<el-col :span="12">
										<el-form-item label="方案分类" class="grid-content bg-purple device-from"
											prop="classificationCode">
											<el-cascader v-model="ruleForm.classificationCode" :options="fenleiName"
												@change="fenleiChange" :props="{ checkStrictly: true }"
												:show-all-levels="false" clearable style="width: 100%;"></el-cascader>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="方案名称" class="grid-content bg-purple device-from"
											prop="planName">
											<el-input v-model="ruleForm.planName" placeholder="请输入" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="20">
									<el-col :span="12">
										<el-form-item label="类型" class="grid-content bg-purple" prop="planType">
											<el-select v-model="ruleForm.planType" placeholder="请选择" disabled
												style="width: 100%">
												<el-option label="氛围策划" value="氛围策划"></el-option>
											</el-select>
										</el-form-item>
									</el-col>

									<el-col :span="12">
										<el-form-item label="氛围地点" class="grid-content bg-purple" prop="eventAddrs">
											<el-input v-model="ruleForm.eventAddrs" placeholder="请输入" />
										</el-form-item>
									</el-col>
								</el-row>

								<el-row :gutter="20">
									<el-col :span="12">
										<el-form-item label="氛围时间" class="grid-content bg-purple" prop="plan_Time"
											style="position: relative">
											<el-date-picker style="width: 100%;" v-model="ruleForm.plan_Time"
												value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
												range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
												align="right" @change="dateFormat">
											</el-date-picker>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="氛围主题" class="grid-content bg-purple" prop="eventTheme">
											<el-input v-model="ruleForm.eventTheme" placeholder="请输入" />
										</el-form-item>
									</el-col>
								</el-row>

								<el-row :gutter="20">
									<el-col :span="12">
										<el-form-item label="氛围主办方" class="grid-content bg-purple" prop="sponsor">
											<el-input v-model="ruleForm.sponsor" placeholder="请输入" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="氛围参与方" prop="participants" class="grid-content bg-purple">
											<el-input v-model="ruleForm.participants" placeholder="请输入" />
										</el-form-item>
									</el-col>

								</el-row>
								<el-row :gutter="20">
									<el-col :span="12">
										<el-form-item label="范围设置" class="grid-content bg-purple" prop="sponsor">
											<el-select v-model="ruleForm.rangeSetting" placeholder="请选择"
												style="width: 100%">
												<!-- <el-option label="活动绿道段内" value="活动绿道段内"></el-option>
												<el-option label="活动场地内" value="活动场地内"></el-option> -->
												<el-option v-for="(item,index) in rangeSettingList" :key="index" :label="item.label" :value="item.value"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="历史氛围方案" class="grid-content bg-purple device-from">
											<el-select v-model="lishiList" placeholder="请选择" style="width:100%"
												@change="lichange">
												<el-option v-for="(item,index) in fenxiData" :key="item.id"
													:label="item.planName" :value="index">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="20">

									<el-col :span="12">
										<el-form-item label="氛围主要目的" prop="mainPurpose" class="grid-content bg-purple">
											<el-input v-model="ruleForm.mainPurpose" placeholder="请输入" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="20">
									<el-col :span="24">
										<el-form-item label="氛围封面海报" prop="coverPoster" class="grid-content bg-purple">
											<upimg filePath="act" :value="ruleForm.coverPoster" inputtype="coverPoster"
												:limit="1" @changimg="e=>changimg(e,'coverPoster')"></upimg>
										</el-form-item>
									</el-col>
								</el-row>

							</el-form>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="活动明细">
					<div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
						<div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;">
							<div>活动明细</div>
							<div style="color: #2d8a58;margin-left: 10px;" @click="addMing = true">
								添加明细
							</div>
						</div>
						<div style="padding: 15px;">
							<div style="padding: 0px 20px 0px 0px">
								<el-table :data="tableData"
									:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
									style="width: 100%">
									<!-- <el-table-column label="序号" width="auto" min-width="5%" align="center">
										<template slot-scope="scope">
											{{scope.$index + 1}}
										</template>
									</el-table-column> -->
									<el-table-column label="明细项名称" prop="detailLtemName" width="auto" min-width="22%">

									</el-table-column>
									<el-table-column label="预估数量" prop="estimatedQuantity" width="auto" min-width="15%">

									</el-table-column>
									<el-table-column label="预估费用(元)" prop="estimatedCost" width="auto" min-width="15%">
										
									</el-table-column>
									<el-table-column prop="notes" label="备注" width="auto" min-width="15%">
									</el-table-column>
									<el-table-column label="操作" width="auto" min-width="18%">
										<template slot-scope="scope">
											<!-- <div @click="handleEdit(scope.$index, scope.row)" class="tableBtn greens">编辑</div> -->
											<div @click="MingDelete(scope.$index)" class="tableBtn greens">删除</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="活动成本">
					<div style="border: 1px solid #E5E5E5;padding: 1px" id="cheng">
						<div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;">
							<div>活动成本</div>
						</div>
						<div style="padding: 15px;">
							<div style="">
								<el-form size="mini" label-position="right" ref="ruleFormInfo" :model="ruleForm"
									label-width="180px" style="position: relative">
									<el-row :gutter="20">
										<el-col :span="12">
											<el-form-item label="内部人力成本预估(元)" class="grid-content bg-purple device-from"
												prop="internalLaborCostEstimation">
												<el-input v-model="ruleForm.internalLaborCostEstimation"
													placeholder="请输入" />
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="外部人力成本预估(元)" class="grid-content bg-purple"
												prop="externalLaborCostEstimation">
												<el-input v-model="ruleForm.externalLaborCostEstimation"
													placeholder="请输入" />
											</el-form-item>
										</el-col>


									</el-row>

									<el-row :gutter="20">
										<el-col :span="12">
											<el-form-item label="商品成本预估(元)" class="grid-content bg-purple"
												prop="costEstimationGoods">
												<el-input v-model="ruleForm.costEstimationGoods" placeholder="请输入" />
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="设备成本预估(元)" class="grid-content bg-purple"
												prop="setCostEstimate">
												<el-input v-model="ruleForm.setCostEstimate" placeholder="请输入" />
											</el-form-item>
										</el-col>


									</el-row>
									<el-row :gutter="20">


										<el-col :span="12">
											<el-form-item label="宣传费用预估(元)" class="grid-content bg-purple"
												prop="estimatedPromotionalExpenses">
												<el-input v-model="ruleForm.estimatedPromotionalExpenses"
													placeholder="请输入" />
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="其他必要成本预估(元)" class="grid-content bg-purple"
												prop="otherNecessaryEstimates">
												<el-input v-model="ruleForm.otherNecessaryEstimates"
													placeholder="请输入" />
											</el-form-item>
										</el-col>
									</el-row>
									<el-row :gutter="20">
										<el-col :span="12">
											<el-form-item label="总成本预估(元)" prop="totalCostEstimation"
												class="grid-content bg-purple">
												<el-input v-model="ruleForm.totalCostEstimation" placeholder="请输入" />
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="备注" prop="notes" class="grid-content bg-purple">
												<el-input v-model="ruleForm.notes" placeholder="请输入" />
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="预估效果信息">
					<div style="border: 1px solid #E5E5E5;padding: 1px" id="yugu">
						<div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;">
							<div>预估效果信息</div>
						</div>
						<div style="padding: 15px;">
							<div>
								<el-form size="mini" label-position="right" ref="ruleFormInfo" :model="ruleForm"
									label-width="150px" style="position: relative">
									<el-row :gutter="20">
										<el-col :span="12">
											<el-form-item label="预计吸引流量" class="grid-content bg-purple device-from"
												prop="expectedAttractTraffic">
												<el-input v-model="ruleForm.expectedAttractTraffic" placeholder="请输入" />
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="预计参与人数" class="grid-content bg-purple"
												prop="expectedParticipation">
												<el-input v-model="ruleForm.expectedParticipation" placeholder="请输入" />
											</el-form-item>
										</el-col>


									</el-row>
									<el-row :gutter="20">
										<el-col :span="12">
											<el-form-item label="预计直接收益(元)" class="grid-content bg-purple"
												prop="expectedDirectBenefits">
												<el-input v-model="ruleForm.expectedDirectBenefits" placeholder="请输入" />
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="预计间接收益(元)" class="grid-content bg-purple"
												prop="expectedIndirectBenefits">
												<el-input v-model="ruleForm.expectedIndirectBenefits"
													placeholder="请输入" />
											</el-form-item>
										</el-col>

									</el-row>
								</el-form>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="相关附件">
					<div style="border: 1px solid #E5E5E5;padding: 1px" id="fu">
						<div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;">
							<div style="line-height:38px;">相关附件</div>
							<div>
								<upfile filePath="act" inputtype="otherImageVideos" :limit="10" :islist="false"
									:accept="'.docx'" :value="ruleForm.otherImageVideos"
									@changimg="e=>changimg(e,'otherImageVideos')"></upfile>
							</div>
						</div>
						<div style="padding: 15px;">
							<div style="padding: 0px 20px 0px 0px">
								<el-table :data="dataList"
									:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
									style="width: 100%">
									<!-- <el-table-column label="序号" width="auto" min-width="7%" align="center">
										<template slot-scope="scope">
											{{scope.$index + 1}}
										</template>
									</el-table-column> -->
									<el-table-column label="附件名称" prop="name" width="auto" min-width="75%">
										<template slot-scope="scope">
											{{scope.row.name}}
										</template>
									</el-table-column>
									<el-table-column label="操作" width="auto" min-width="18%">
										<template slot-scope="scope">
											<div @click="fileDelete(scope.$index)" class="tableBtn greens">删除</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
			<div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
				<el-button plain @click="close" size="mini" style="background-color: #3F9B6A;color: #fff;">取消
				</el-button>
				<el-button @click="onSubmit(1)" style="background-color: #3F9B6A;color: #fff;">暂存
				</el-button>
				<el-button plain @click="onSubmit(0)" size="mini" style="background-color: #3F9B6A;color: #fff;">保存
				</el-button>
			</div>
		</div>




		<el-dialog title="新增明细" :visible.sync="addMing" custom-class='XDD_css' style="padding: 0;" width="50%"
			append-to-body center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div style="padding: 15px;width:100%">
				<div style="">
					<div style="padding: 15px;">
						<el-form size="mini" label-position="right" ref="ruleFormInfo" :model="mingFrom"
							label-width="150px" style="position: relative">
							<el-form-item label="明细项名称" class="grid-content bg-purple device-from" prop="planName">
								<el-input v-model="mingFrom.detailLtemName" placeholder="请输入" />
							</el-form-item>
							<el-form-item label="预估数量" class="grid-content bg-purple" prop=" planType">
								<el-input v-model="mingFrom.estimatedQuantity" placeholder="请输入" />
							</el-form-item>

							<el-form-item label="预估费用(元)" class="grid-content bg-purple" prop="eventAddrs">
								<el-input v-model="mingFrom.estimatedCost" placeholder="请输入" />
							</el-form-item>
							<el-form-item label="备注" class="grid-content bg-purple device-from" prop="planName">
								<el-input v-model="mingFrom.notes" placeholder="请输入" />
							</el-form-item>
						</el-form>
					</div>
				</div>

			</div>
			<div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
				<el-button plain @click="addMing=false" size="mini" style="background-color: #3F9B6A;color: #fff;">取消
				</el-button>
				<el-button plain @click="minSev" size="mini" style="background-color: #3F9B6A;color: #fff;">确定
				</el-button>
				
				

			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		add,
		edit,
		deleteById,
		MingAdd,
		mingTable,
		Mingdan,
		MingEdit,
		MingDel,
		fujiaAdd,
		lishiDeta,
		queryByPage
	} from '../../api/activityBz'
	import wangEditor from "@/components/editor/index";
	import upimg from "@/components/ImageUpload/index"
	import {
		uploadUrl
	} from '@/utils/request'
	import html2canvas from 'html2canvas'
	import jsPDF from 'jspdf'
	import upfile from "@/components/fujianUpload/fujianList"
	export default {
		props: {
			showAdd: {
				type: Boolean,
				default: false
			},
			fenleiName: {
				type: Array,
				default: function() {
					return []; // 返回一个空数组作为默认值
				},
			}
		},
		components: {
			wangEditor,
			upimg,
			upfile
		},
		data() {
			return {
				uploadFileUrl: uploadUrl, // 请求地址
				editTrue: false,
				addMing: false,
				ruleForm: {
					classificationCode: '',
					plan_Time: '',
					planName: '', //方案名称
					planType: '氛围策划', //类型
					eventAddrs: '', //活动地点
					eventStartTime: 0, //活动开始时间
					eventEndTime: 0, //活动结束时间
					eventTheme: '', //活动主题
					sponsor: '', //活动主办方
					participants: '', //活动参与方
					rangeSetting: '',
					mainPurpose: '', //活动主要目的
					coverPoster: '', //封面海报
					internalLaborCostEstimation: '', //内部人工成本预估
					externalLaborCostEstimation: '', //外部人工成本预估
					costEstimationGoods: '', //商品成本预估
					setCostEstimate: '', //设置成本预估
					estimatedPromotionalExpenses: '', //宣传费用预估
					otherNecessaryEstimates: '', //其他成本预估
					totalCostEstimation: '', //总成本预估
					notes: '', //备注
					expectedAttractTraffic: '', //预计吸引流量
					expectedParticipation: '', //预计参与人数
					expectedDirectBenefits: '', //预计直接收益
					expectedIndirectBenefits: '', //预计间接收益
					createDate: '',
					solutionEditor: null,
				},
				rules: {
					classificationCode: [{
						required: true,
						message: '请选择方案分类',
						trigger: 'change'
					}],
					planName: [{
						required: true,
						message: '请输入方案名称',
						trigger: 'blur'
					}],
					planType: [{
						required: true,
						message: '请选择方案类型',
						trigger: 'change'
					}],
					eventAddrs: [{
						required: true,
						message: '请输入活动地点',
						trigger: 'blur'
					}],
					plan_Time: [{
						required: true,
						message: '请选择活动时间',
						trigger: 'change'
					}],
					eventTheme: [{
						required: true,
						message: '请输入活动主题',
						trigger: 'blur'
					}],
					sponsor: [{
						required: true,
						message: '请输入活动主办方',
						trigger: 'blur'
					}],
				},
				tableData: [],
				fileData: [],
				dataList: [],
				mingFrom: {
					detailLtemName: '',
					estimatedQuantity: '',
					estimatedCost: '',
					notes: ''
				},
				currentTime: '',
				ActiveName: 0,
				tuxiangData: {
					bian: null,
					jiben: null,
					huodong: null,
					cheng: null,
					yugu: null,
					fun: null
				},
				fenxiData: [],
				lishiList: '',
			}
		},
		mounted() {

			this.lishi()
		},
		computed: {
            rangeSettingList() {
				return this.$store.state.cent.rangeSettingList;
			},
		},  
		methods: {
			changimg(e, type) {
				this.ruleForm[type] = e

				if (type == 'otherImageVideos') {
					const parts = e.split('/');
					const filename = parts[parts.length - 1];
					let file = {
						url: e,
						name: filename
					}
					this.dataList.push(file)
				}
			},
			//获取当前时间
			updateCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0');
				const day = now.getDate().toString().padStart(2, '0');
				const hours = now.getHours().toString().padStart(2, '0');
				const minutes = now.getMinutes().toString().padStart(2, '0');
				const seconds = now.getSeconds().toString().padStart(2, '0');

				this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			lishi() {
			queryByPage({
				pageNumber: 1,
				pageSize: 10,
				dataOwnership: '2',
				isDraft: 0,
				state:'5'
				
			}).then(res => {
				this.fenxiData = res.data.content
			})
			
			},
			lichange(e) {
	let msg = this.fenxiData[e]
				
				// let obj = msg.originalData
				this.ruleForm={
					// classificationCode: msg.classificationCode,
					plan_Time: [msg.eventStartTime,msg.eventEndTime],
					planName: msg.planName, //方案名称
					planType: '活动策划', //类型
					eventAddrs: msg.eventAddrs, //活动地点
					eventStartTime:  msg.eventStartTime, //活动开始时间
					eventEndTime:  msg.eventEndTime, //活动结束时间
					eventTheme:msg.eventTheme, //活动主题
					sponsor: msg.sponsor, //活动主办方
					participants: msg.participants, //活动参与方
					rangeSetting: msg.rangeSetting,
					mainPurpose: msg.mainPurpose, //活动主要目的
					coverPoster: msg.coverPoster, //封面海报
					internalLaborCostEstimation:  msg.internalLaborCostEstimation, //内部人工成本预估
					externalLaborCostEstimation: msg.externalLaborCostEstimation, //外部人工成本预估
					costEstimationGoods: msg.costEstimationGoods, //商品成本预估
					setCostEstimate: msg.setCostEstimate, //设置成本预估
					estimatedPromotionalExpenses: msg.estimatedPromotionalExpenses, //宣传费用预估
					otherNecessaryEstimates:msg.otherNecessaryEstimates, //其他成本预估
					totalCostEstimation: msg.totalCostEstimation, //总成本预估
					notes:  msg.notes, //备注
					expectedAttractTraffic: msg.expectedAttractTraffic, //预计吸引流量
					expectedParticipation: msg.expectedParticipation, //预计参与人数
					expectedDirectBenefits: msg.expectedDirectBenefits, //预计直接收益
					expectedIndirectBenefits: msg.expectedIndirectBenefits, //预计间接收益
				}
				// let msg = this.fenxiData[e]
				// let obj = JSON.parse(msg.originalData)

				// for (let key in obj) {
				// 	if (this.ruleForm.hasOwnProperty(key)) {
				// 		this.ruleForm[key] = obj[key];
				// 	}
				// }
			},
			// 切换事件
			beforeTabLeave(activeName, oldActiveName) {

				//  let bian= document.getElementById('bian')
				//  let jiben= document.getElementById('jiben')
				//  let huodong= document.getElementById('huodong')
				//  let cheng= document.getElementById('cheng')
				//   let yugu= document.getElementById('yugu')
				//  let fu= document.getElementById('fu')
				//  this.ActiveName = activeName
				//    if(oldActiveName==0){
				//       html2canvas(bian).then(canvas => {
				//         // 将canvas转换为图片
				//         const imgData = canvas.toDataURL('image/png');
				//         this.tuxiangData.bian = imgData
				//       })

				//    }else if(oldActiveName==1){
				//         html2canvas(jiben).then(canvas => {
				//           // 将canvas转换为图片
				//           const imgData = canvas.toDataURL('image/png');
				//           this.tuxiangData.jiben = imgData
				//         })
				//    }else if(oldActiveName==2){
				//         html2canvas(huodong).then(canvas => {
				//           // 将canvas转换为图片
				//           const imgData = canvas.toDataURL('image/png');
				//           this.tuxiangData.huodong = imgData
				//         })
				//    }else if(oldActiveName==3){
				// html2canvas(cheng).then(canvas => {
				//   // 将canvas转换为图片
				//   const imgData = canvas.toDataURL('image/png');
				//   this.tuxiangData.cheng = imgData
				// })
				//  }else if(oldActiveName==4){
				//    html2canvas(yugu).then(canvas => {
				//      // 将canvas转换为图片
				//      const imgData = canvas.toDataURL('image/png');
				//      this.tuxiangData.yugu = imgData
				//    })
				//  }else if(oldActiveName==5){
				//    html2canvas(fu).then(canvas => {
				//      // 将canvas转换为图片
				//      const imgData = canvas.toDataURL('image/png');
				//      this.tuxiangData.fu = imgData
				//    })
				//  }
			},
			//保存
			onSubmit(val) {
				this.updateCurrentTime();
				let that = this
				let FlieName = this.ruleForm.planName
				this.ruleForm.createDate = this.currentTime
				this.ruleForm.createUser = localStorage.getItem('roleName')
				this.ruleForm.dataOwnership = '2'
				// this.$nextTick(() => {
				//   var bian = document.getElementById('bian')
				//   var jiben = document.getElementById('jiben')
				//   var huodong = document.getElementById('huodong')
				//   var cheng = document.getElementById('cheng')
				//   var yugu = document.getElementById('yugu')
				//   var fu = document.getElementById('fu')


				// })
				// if (that.ActiveName == 0) {
				//   html2canvas(bian).then(canvas => {
				//     // 将canvas转换为图片
				//     const imgData = canvas.toDataURL('image/png');
				//     that.tuxiangData.bian = imgData
				//   })
				// } else if (that.ActiveName == 1) {
				//   html2canvas(jiben).then(canvas => {
				//     // 将canvas转换为图片
				//     const imgData = canvas.toDataURL('image/png');
				//     that.tuxiangData.jiben = imgData
				//   })
				// } else if (that.ActiveName == 2) {
				//   html2canvas(huodong).then(canvas => {
				//     // 将canvas转换为图片
				//     const imgData = canvas.toDataURL('image/png');
				//     that.tuxiangData.huodong = imgData
				//   })
				// } else if (that.ActiveName == 3) {
				//   html2canvas(cheng).then(canvas => {
				//     // 将canvas转换为图片
				//     const imgData = canvas.toDataURL('image/png');
				//     that.tuxiangData.cheng = imgData
				//   })
				// } else if (that.ActiveName == 4) {
				//   html2canvas(yugu).then(canvas => {
				//     // 将canvas转换为图片
				//     const imgData = canvas.toDataURL('image/png');
				//     that.tuxiangData.yugu = imgData
				//   })
				// } else if (that.ActiveName == 5) {
				//   html2canvas(fu).then(canvas => {
				//     // 将canvas转换为图片
				//     const imgData = canvas.toDataURL('image/png');
				//     that.tuxiangData.fu = imgData
				//   })
				// }
				this.$refs.jibenFrom.validate((valid) => {
					if (valid) {
						this.ruleForm.isDraft = val
						add(this.ruleForm).then(res => {
							this.$message({
								message: '保存成功',
								type: 'success'
							});
							console.log(this.tableData,'111111111111111111')
							for (let i = 0; i < this.tableData.length; i++) {
								this.tableData[i].detailsId = res.data.id
								MingAdd(this.tableData[i]).then(res => {
									
								})
							}
							console.log(this.dataList,'22222222222222222222')
							for (let i = 0; i < this.dataList.length; i++) {
							let fuji = {
								detailsId: res.data.id,
								attachmentName: this.dataList[i].name,
								attachmentUrl: this.dataList[i].url,
							}
							fujiaAdd(fuji).then(res => {
								console.log('成功')
							})
							}

							// const pdf = new jsPDF('p', 'mm', 'a4');
							// Object.keys(that.tuxiangData).forEach((key, index) => {
							//   // console.log(this.tuxiangData[key])
							//   if (that.tuxiangData[key] != null) {
							//     pdf.addImage(that.tuxiangData[key], 'PNG', 5, 10 + index * 80, 200, 60); // 调整位置和尺寸以适应你的需求
							//   }

							// });
							// const pdfData = pdf.output('arraybuffer');
							// const blob = new Blob([pdfData], {
							//   type: `${FlieName}.pdf`
							// });
							// const url = URL.createObjectURL(blob);
							// pdf.save(`${FlieName}.pdf`)
							// // 创建FormData
							// const formData = new FormData();
							// formData.append('file', blob, `'${FlieName}.pdf'`);
							// // 使用fetch上传文件
							// fetch(uploadUrl, {
							//     method: 'POST',
							//     body: formData,
							//   })
							//   .then(response => response.json())
							//   .then(data => console.log(data))
							//   .catch(error => console.log(error));
							this.$emit('childClose', false);
							this.$refs.editor.html = '<p><br></p>'
							this.ruleForm = {
								classificationCode: '',
								plan_Time: '',
								planName: '', //方案名称
								planType: '氛围策划', //类型
								eventAddrs: '', //活动地点
								eventStartTime: 0, //活动开始时间
								eventEndTime: 0, //活动结束时间
								eventTheme: '', //活动主题
								sponsor: '', //活动主办方
								participants: '', //活动参与方
								mainPurpose: '', //活动主要目的
								coverPoster: '', //封面海报
								internalLaborCostEstimation: '', //内部人工成本预估
								externalLaborCostEstimation: '', //外部人工成本预估
								costEstimationGoods: '', //商品成本预估
								setCostEstimate: '', //设置成本预估
								estimatedPromotionalExpenses: '', //宣传费用预估
								otherNecessaryEstimates: '', //其他成本预估
								totalCostEstimation: '', //总成本预估
								notes: '', //备注
								expectedAttractTraffic: '', //预计吸引流量
								expectedParticipation: '', //预计参与人数
								expectedDirectBenefits: '', //预计直接收益
								expectedIndirectBenefits: '', //预计间接收益
								createDate: '', //创建时间
								solutionEditor: null,
							}
						})
						
					} else {
						this.$message({
							message: '请填写数据',
							type: 'error',
							offset: 100
						})
						return false;
					}
				})


			},
			//附件上传成功
			handleUploadSuccess(response, file, fileList) {
				this.dataList.push(file)
			},
			fileDelete(val) {
				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '是否删除 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							this.dataList.splice(val, 1)
							done()
						} else {
							done();
						}
					}
				})




			},
			close() {
				this.tuxiangData = {
					bian: null,
					jiben: null,
					huodong: null,
					cheng: null,
					yugu: null,
					fun: null
				}
				this.$emit('childClose', false);
				this.$refs.editor.html = '<p><br></p>'
				this.ruleForm = {
					classificationCode: '',
					plan_Time: '',
					planName: '', //方案名称
					planType: '氛围策划', //类型
					eventAddrs: '', //活动地点
					eventStartTime: 0, //活动开始时间
					eventEndTime: 0, //活动结束时间
					eventTheme: '', //活动主题
					sponsor: '', //活动主办方
					participants: '', //活动参与方
					rangeSetting: '',
					mainPurpose: '', //活动主要目的
					coverPoster: '', //封面海报
					internalLaborCostEstimation: '', //内部人工成本预估
					externalLaborCostEstimation: '', //外部人工成本预估
					costEstimationGoods: '', //商品成本预估
					setCostEstimate: '', //设置成本预估
					estimatedPromotionalExpenses: '', //宣传费用预估
					otherNecessaryEstimates: '', //其他成本预估
					totalCostEstimation: '', //总成本预估
					notes: '', //备注
					expectedAttractTraffic: '', //预计吸引流量
					expectedParticipation: '', //预计参与人数
					expectedDirectBenefits: '', //预计直接收益
					expectedIndirectBenefits: '', //预计间接收益
					createDate: '', //创建时间
					solutionEditor: null,
				}

			},
			dateFormat() {
				this.ruleForm.eventStartTime = this.ruleForm.plan_Time[0]
				this.ruleForm.eventEndTime = this.ruleForm.plan_Time[1]

			},
			minSev() {
				this.tableData.push(this.mingFrom)
				this.mingFrom = {
					detailLtemName: '',
					estimatedQuantity: '',
					estimatedCost: '',
					notes: ''
				}
				this.addMing = false
			},
			MingDelete(item) {

				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '是否删除 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							this.tableData.splice(item, 1);
							done();
						} else {
							done();
						}
					}
				})




			},
			fenleiChange(value) {
				this.ruleForm.classificationCode = value[value.length - 1]
			}
		}
	}
</script>

<style scoped>
	.zhuti {
		background-color: #Fff;
		min-height: calc(100vh - 50px - 20px);
	}

	/deep/ .avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 108px;
		height: 108px;
		line-height: 108px;
		/*text-align: center;*/
	}

	.avatar {
		width: 108px;
		height: 108px;
		display: block;
	}

	::v-deep .el-input__inner {
		height: 32px;
		line-height: 32px;
	}

	::v-deep .el-input__inner:focus {
		border: #3F9B6A 1px solid;
	}

	::v-deep .el-input__inner:hover {
		border: #3F9B6A 1px solid;
	}

	::v-deep .el-select .el-input.is-focus .el-input__inner {
		border-color: #3F9B6A
	}

	::v-deep .el-form-item__label {
		font-weight: 100;
		font-size: 14px;
		color: #000000e6;
	}

	.greens {
		color: #3F9B6A;
	}

	.tableBtn {
		display: inline-block;
		margin-right: 10px;
	}
</style>
<style lang="scss" scoped>
	::v-deep .dialog_css {
		margin-top: 11vh;
		margin-left: 13%;

		.el-dialog__body {
			padding: 0px;
			background-color: #fff;
		}

		.el-dialog__header {
			background-color: #fff;
			padding: 10px 20px 10px 20px;
			border-bottom: 1px solid #EFEFEF;
		}

		.el-dialog__title {
			font-size: 14px;
			color: #000;
		}
	}

	::v-deep .el-tabs--border-card {
		border: none;
		-webkit-box-shadow: none;
		box-shadow: none;

		.el-tabs__content {
			border: 1px solid #E4E7ED;
			padding: 0;
		}

		.el-tabs__header {
			background-color: #fff;
			border-bottom: none;
		}

		.el-tabs__content {
			border: none;
		}

		.el-tabs__header .el-tabs__item {
			border: none;
			margin-right: 10px;
			background-color: #F2F2F2;
			font-size: 14px;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			padding: 0 15px;
		}

		.el-tabs__header .el-tabs__item.is-active {
			color: #fff;
			background-color: #3F9B6A;
		}

		.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
			color: #3F9B6A;
		}
	}

	::v-deep .el-date-table td.end-date span,
	.el-date-table td.start-date span {
		background-color: #3F9B6A;
	}

	::v-deep .el-date-table td.available:hover {
		color: #3F9B6A;
	}

	::v-deep .el-button.is-plain:focus,
	.el-button.is-plain:hover {
		border-color: fff;
		color: #3F9B6A;
	}
</style>