<template>
	<div class="app-container" style="display: flex;flex-wrap: wrap">

		<!--    <el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 2 : 0">-->

		<el-card class="box-card">
			<div class="container">
				<el-button type="primary" plain @click="handleAdd" style="border: none;">
					+ 新建表单
				</el-button>

			</div>
		</el-card>
		
		<el-card class="box-card" v-for="o in cardList" :key="o">
			<div class="clearfix">
				<span style="font-size: 23px;
				color: #000000;
				background-color:#ffffff;
				border-color: #fdfdff;">{{o.title}}</span>
				<el-button style="float: right; padding: 3px 0" type="text" @click="handelExtend(o.id)">推广</el-button>
			</div>
			<div style="display: flex;justify-content: space-between">
				<div style="width: 30%">
					<div style="font-size: 18px;  color: #999595;
		        background-color:#ffffff;
		        border-color: #fdfdff;">总浏览量</div>
					<p style="font-size: 25px">{{o.pageView}}</p>
				</div>
				<div style="width: 30%">
					<el-link style="font-size: 18px;
		        color: #999595;
		        background-color:#ffffff;
		        border-color: #fdfdff;" @click="extendList(o.id)">采集数量</el-link>
					<p style="font-size: 25px" @click="extendList(o.id)">{{o.collectionQuantity}}</p>
				</div>
			</div>
			<div style="display: flex;justify-content: space-between">
				<div>
					<span style="font-size: 16px;
		        color: #999595;
		        background-color:#ffffff;
		        border-color: #fdfdff;">创建人：{{o.createPeople}}</span>
				</div>
				<div style="font-size: 16px;
		        color: #999595;
		        background-color:#ffffff;
		        border-color: #fdfdff;">创建时间：{{o.createTime}}</div>
			</div>
		</el-card>
		
		<!-- 添加表单对话框 -->
		<el-dialog :title="title" v-model="open" width="500">
		
			<div style="text-align: center">
				<!--        <el-form-item label="表单标题">-->
				<div><span>标题</span> <el-input style="border-bottom: 1px solid skyblue;margin-bottom: 10px"
						v-model="addParams.title" placeholder="请输入表单标题" />
				</div>
				<!--        </el-form-item>-->
				<!--        <el-form-item label="字段名称">-->
				<div v-for="(item,index) in inputarr" :key="index" style="margin-bottom: 10px;">
					<span>字段</span> 
					<el-input style="border: 1px solid #DCDFE6;border-radius: 3px; "
						v-model="inputarr[index]" placeholder="请输入字段" />
				</div>
				<div>
					<el-button @click="adinput"
						style="text-align: center;width: 90%;background-color: rgb(232,244,255);color:#1890ff">添加字段</el-button>
				</div>
		
				<!--        </el-form-item>-->
			</div>
			
			<div class="el-input-foot">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		
		<!--    推广链接对话框-->
		<el-dialog :title="extendTitle" v-model="extendOpen" width="500px" append-to-body>
			<el-input v-model="extendLink" placeholder="请输入内容" :disabled="true" />
			<el-button @click="copyAddress">复制</el-button>
		</el-dialog>
		
		<!--   采集数据列表 -->
		<el-dialog :title="collectTitle" v-model="collectOpen" append-to-body>
			<el-table border v-loading="loading" :data="collectLink" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center" />
				<div>
		
				</div>
				<!--        <el-table-column label="编号" align="center" prop="id" />-->
				<!--        <el-table-column label="id" align="center" prop="dynamicDataId" />-->
				<!--        <el-table-column v-for="item in collectLink" :label="item.map" align="center" :prop="item" />-->
				<template v-for="(item, index) in Object.keys(collectLink[0])" :key="index">
					<el-table-column :label="item">
						<template #default="scope">
							<span>{{scope.row[item]}}</span>
						</template>
					</el-table-column>
				</template>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	import {FollowUpRecordApi} from "@/api/crm/intelligent.ts";
	export default {
		name: "Business",
		dicts: ['stage_type', 'sales_stage'],
		data() {
			return {
				id: '',
				inputarr: [''],
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 弹出层标题
				title: "",
				//推广弹出框标题
				extendTitle: "",
				//采集数据列表弹出标题
				collectTitle: "",
				// 是否显示弹出层
				open: false,
				// 是否显示推广弹出层
				extendOpen: false,
				//是否显示采集数据列表弹出层
				collectOpen: false,
				//推广链接数据
				extendLink: '',
				//采集数据列表数据
				collectLink: [{}],
				//下拉框客户列表
				customerList: [],
				//卡片列表
				cardList: [],
				addParams: {
					title: '',
					pageView: '',
					collectionQuantity: '',
					inputarr: []
				}
			};
		},
		created() {
			this.getIntelligentList();
		},
		methods: {
			//添加表单
			adinput() {
				this.inputarr.push('')
				console.log(this.inputarr)
			},
			getIntelligentList() {
				this.loading = true;
				FollowUpRecordApi.selectDynamicData().then(response => {
					this.cardList = response.data;
					// this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
			},
			//提交按钮
			submitForm() {
				console.log('ssssss')
				this.addParams.inputarr = this.inputarr
				this.addParams.pageView = '0'
				this.addParams.collectionQuantity = '0'
				FollowUpRecordApi.saveDynamicData(this.addParams).then(response => {
					// this.cardList = response.data;
					// this.total = response.total;
					this.loading = false;
					this.open = false;
					this.getIntelligentList();
				});
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.inputarr = []
				this.addParams = {
					title: '',
					inputarr: []
				}
				this.open = true;
				this.title = "添加表单";
			},
			//推广按钮操作
			handelExtend(id) {
				this.extendLink = 'http://101.43.112.107/form/extendLink/form?id=' + id
				this.extendOpen = true;
				this.extendTitle = "推广链接";
			},
			//复制按钮操作
			copyAddress() {
				const input = document.createElement('input');
				input.value = this.extendLink;
				document.body.appendChild(input);
				input.select();
				document.execCommand('copy');
				document.body.removeChild(input);
				alert('已复制到剪贴板');
			},
			//采集数据展示
			extendList(id) {
				this.collectLink = null;
				this.id = id
				this.collectOpen = true;
				this.collectTitle = "采集数据";
				collectDataList(this.id).then(response => {
					this.collectLink = response.data
				});
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
		},
	};
</script>
<style scoped>
	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 32%;
		margin-bottom: 10px;
		margin-right: 10px;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100px;
		/* 可根据需要调整高度 */
		color: #ccc;
		/* 灰白色 */
	}

	.el-input-foot {
		padding: 20px;
		padding-top: 10px;
		text-align: center;
		box-sizing: border-box;
	}

	::v-deep.el-input--medium {
		width: 80%;
	}

	::v-deep.el-input--medium .el-input__inner {
		border: none;
		/* border-bottom:1px solid blue; */
	}
</style>