<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>商户意向管理</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">招商意向管理</span></div>
			</div>
			<div>
				<!-- 搜索 -->
				<div class="formSearch">

				</div>
				<div style="margin-bottom:20px;">
					<el-button style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
						icon="el-icon-circle-plus-outline" @click="pipei">一键匹配</el-button>
				</div>
				<!-- 表格 -->
				<el-table :data="tableData"
					:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
					<el-table-column label="序号" min-width="50">
						<template slot-scope="scope">
							{{scope.$index +1 }}
						</template>
					</el-table-column>
					<el-table-column label="意向资源类型" prop="applicableResources"  min-width="150" show-overflow-tooltip>

					</el-table-column>
					<el-table-column label="意向区域" prop="belongingRegion" min-width="150" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="租金周期" prop="leaseTerm" min-width="150" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="租金价格" prop="rentalPrice" min-width="150" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="actualUsableArea" min-width="150" label="实际使用面积" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="createTime" label="匹配时间" min-width="140">
						<template slot-scope="scope">
								{{formatISODate(scope.row.createTime)}}
						</template>
						</el-table-column>
						<el-table-column prop="shopId" label="匹配人" min-width="150">
							
							</el-table-column>
					<el-table-column label="操作" min-width="100" fixed="right">
						<template slot-scope="scope">
							<!-- <div class="tableBtn greens" @click="handleEditForm(scope.row)">
								查看
							</div> -->
							<div class="tableBtn greens" @click="delGuan(scope.row.id)">
								删除
							</div>
							<!-- <div class="tableBtn greens" @click="pipei(scope.row)" >
                    一键匹配
                  </div> -->
						</template>
					</el-table-column>
				</el-table>

				<div class="fenye">
					<el-pagination class="pagination" background :current-page="currentPage"
						layout="prev, pager, next,total" :total="total" @size-change="handleSizeChange"
						@current-change="handleCurrentChange" />
				</div>



			</div>
		</div>
		<!-- 一键匹配 -->
		<el-dialog :visible.sync="pip" style="padding: 0" width="70%" center :close-on-click-modal="false" @close="closede">
			<div style="
          background-color: #fafafa;
          border: 1px solid #eaeaea;
          height: 42px;
          width: 100%;
          padding: 0 20px;
          line-height: 42px;
        ">
				匹配记录
			</div>
			<div style="padding: 0 20px;max-height:750px;">
				<div style="">
					<el-form ref="pipform" :model="pipeiSel" :rules="rules" style="padding-top: 10px;"
						label-width="120px" class="formcontainer">
						<el-form-item label="意向资源类型" prop="resources.cereRentalPolicies.applicableResources">
							<el-select v-model="pipeiSel.resources.cereRentalPolicies.applicableResources"
								placeholder="请选择" style="width: 100%;">
								<el-option label="商铺" value="商铺" />
								<el-option label="实体广告位" value="广告位" />
								<el-option label="场地" value="场地" />
							</el-select>
						</el-form-item>
						<el-form-item label="意向区域" prop="belongingRegion">
							<el-select v-model="pipeiSel.belongingRegion" placeholder="请选择" style="width: 100%;">
								<el-option label="成华区" value="成华区" />
								<el-option label="武侯区" value="武侯区" />
								<el-option label="锦江区" value="锦江区" />
								<el-option label="青羊区" value="青羊区" />
								<el-option label="金牛区" value="金牛区" />
								<el-option label="双流区" value="双流区" />
								<el-option label="郫都区" value="郫都区" />
								<el-option label="龙泉驿区" value="龙泉驿区" />
								<el-option label="温江区" value="温江区" />
							</el-select>
						</el-form-item>
						<el-form-item label="意向面积" prop="actualUsableArea">
							<el-select v-model="pipeiSel.actualUsableArea" style="width: 100%;">
								<el-option label="0-100" value="0-100" />
								<el-option label="100-200" value="100-200" />
								<el-option label="200-300" value="200-300" />
							</el-select>
						</el-form-item>
						<el-form-item label="租金周期" prop="resources.cereRentalPolicies.leaseTerm">
							<el-select v-model="pipeiSel.resources.cereRentalPolicies.leaseTerm" style="width: 100%;">
								<el-option label="年" value="年" />
								<el-option label="季" value="季" />
								<el-option label="月" value="月" />
								<el-option label="日" value="日" />
							</el-select>
						</el-form-item>
						<el-form-item label="租金范围" prop="resources.cereRentalPolicies.rentalPrice">
							<el-select v-model="pipeiSel.resources.cereRentalPolicies.rentalPrice" placeholder="请选择"
								style="width: 100%;">
								<el-option label="0-2000" value="0-2000" />
								<el-option label="2001-5000" value="2001-5000" />
								<el-option label="5001-10000" value="5001-10000" />
								<el-option label="10001-20000" value="10001-20000" />
							</el-select>
						</el-form-item>
						<el-form-item style="margin-left: -70px;">
							<div>
								<el-button style="background-color: #3F9B6A;color: #fff"
									@click="pipeiBtn">查询</el-button>
								<el-button class="buttonHover"
									style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
									@click="pipeiClose">重置</el-button>


							</div>
						</el-form-item>
					</el-form>

				</div>
				<el-table :data="
		      pipData.slice(
		        (pipcurrentPage - 1) * 10,
		        pipcurrentPage * 10
		      )
		    " :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
					<el-table-column label="序号" min-width="80">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column label="资源名称" prop="intentCustomerName" min-width="150" >
						<template slot-scope="scope">
					{{scope.row.resources.shopIds.length!=0?scope.row.resources.shopIds[0].shopName:scope.row.resources.advIds.length!=0?scope.row.resources.advIds[0].advertisingName:scope.row.resources.siteIds.length!=0?scope.row.resources.siteIds[0].venueName:'无'}}
							</template>
						</el-table-column>
					<el-table-column label="意向资源类型" prop="shopName" min-width="150">
						<template slot-scope="scope">
									{{scope.row.resources.shopIds.length!=0?'商铺':scope.row.resources.advIds.length!=0?'广告位':scope.row.resources.siteIds.length!=0?'场地':'无'}}
							</template>
					</el-table-column>
					<el-table-column label="租金周期" prop="contactInformation" min-width="150">
						<template slot-scope="scope">
									{{scope.row.resources.cereRentalPolicies.leaseTerm?scope.row.resources.cereRentalPolicies.leaseTerm:'无'}}
								</template>
						</el-table-column>
					<el-table-column label="意向租金单价(元/平方)" prop="contactInformation" min-width="250" >
						<template slot-scope="scope">
									{{scope.row.resources.cereRentalPolicies.rentalPrice?scope.row.resources.cereRentalPolicies.rentalPrice:'无'}}
								</template>
						</el-table-column>
					<el-table-column prop="auditStatus" label="资源状态" min-width="150">
						<template slot-scope="scope">
								{{scope.row.resources.shopIds.length!=0?getStatusText(scope.row.resources.shopIds[0].publishStatus):scope.row.resources.advIds.length!=0?getStatusText(scope.row.resources.advIds[0].publishStatus):scope.row.resources.siteIds.length!=0?getStatusText(scope.row.resources.siteIds[0].publishStatus):'无'}}
						</template>
						</el-table-column>
					
				</el-table>

				<div class="fenye" style="padding-bottom: 30px;">
					<el-pagination class="pagination" background :current-page="pipcurrentPage"
						layout="prev, pager, next,total" :total="pipData.length" @size-change="pipSizeChange"
						@current-change="pipCurrentChange" />
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		uploadUrl,
		token
	} from '@/utils/request'
	import {
		recordGetAll,
		recordInsert,
		recordEdit,
		ziyuanduiy
	} from '../../../api/rsaManagement'
	import upimg from "@/components/ImageUpload/index"
	export default {
		components: {
			upimg
		},

		data() {
			return {
				detbox: false, // 详情
				action: uploadUrl, // 上传图片
				secondData: {},
				tableData: [],
				pipData: [],
				currentPage: 1,
				pipcurrentPage: 1,
				total: 10,
				flag: false,
				pageSize: 10,
				msgid: '',
				pageindex: {
					pageNumber: 0,
					pageSize: 10,
				},
				pip: false,
				pipeiSel: {
					belongingRegion: '',
					actualUsableArea: '',
					resources: {
						cereRentalPolicies: {
							applicableResources: '',
							leaseTerm: '',
							rentalPrice: ''
						}
					},
					pageNumber: 1,
					pageSize: 10,
				},
				rules: {
					'resources.cereRentalPolicies.applicableResources': [{
						required: true,
						message: '请选择意向资源类型',
						trigger: 'change'
					}],
					'belongingRegion': [{
						required: true,
						message: '请选择意向区域',
						trigger: 'change'
					}],
					'actualUsableArea': [{
						required: true,
						message: '请选择意向面积',
						trigger: 'change'
					}],
					'resources.cereRentalPolicies.leaseTerm': [{
						required: true,
						message: '请选择意向租金周期',
						trigger: 'change'
					}],
					'resources.cereRentalPolicies.rentalPrice': [{
						required: true,
						message: '请选择意向租金范围',
						trigger: 'change'
					}]
				}
			}
		},

		created() {
			this.getAll();
		},
		mounted() {},
		// beforeDestroy() {
		//   const editor = this.editor
		//   if (editor == null) return
		//   editor.destroy() // 组件销毁时，及时销毁编辑器
		// },
		methods: {
			 getStatusText(val) {	 
			    switch (val) {
			        case '0':
			            return '空置';
			        case '1':
			            return '待审核';
			        case '2':
			            return '已发布';
			        case '3':
			            return '不通过';
			        case '4':
			            return '已租赁';
			        default:
			            return '无';
			    }
			},
			// 获取当前时间
			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');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 查询全数据
			async getAll() {
				const res = await recordGetAll(this.pageindex);
				this.tableData = res.data.content
				this.total = res.data.totalElements
			},


			// 详情点击
			handleEditForm(item) {

			},

			handleCurrentChange(val) {
				this.currentPage = val;
			},
			handleSizeChange(val) {
				this.pageSize = val;
			},
			pipSizeChange(val) {
				this.pipeiSel.pageSize = val
			},
			pipCurrentChange(val) {
				this.pipcurrentPage = val
			},
			// 取消
			closeFn(val) {
				if (val == 1) {
					this.detbox = false;
					this.edit = true;
				}
			},
			//删除管理列表
			async delGuan(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') {
							recordEdit({
								id: item
							}).then(res => {
								this.getAll()
								done();
							})
						} else {
							done();
						}
					}
				})

			},

			pipei(item) {
				this.pip = true
				this.pipData = []
			},
			pipeiBtn() {
				this.$refs.pipform.validate((valid) => {

					if (valid) {
						ziyuanduiy(this.pipeiSel).then(res => {
							this.pipData = res.data.content
							if(res.data.content.length!=0){
								let obj ={
									leaseTerm: this.pipeiSel.resources.cereRentalPolicies.leaseTerm,
									rentalPrice:this.pipeiSel.resources.cereRentalPolicies.rentalPrice,
									actualUsableArea:this.pipeiSel.actualUsableArea,
									belongingRegion:this.pipeiSel.belongingRegion,
									applicableResources:this.pipeiSel.resources.cereRentalPolicies.applicableResources,
									matchingRecord: JSON.stringify(res.data.content),
									type:2,
									shopId:localStorage.getItem('roleName')
								}
								recordInsert(obj).then(item=>{})
							}
						
						})
						
					} else {
						console.log('error submit!!');
						return false;
					}
				})
			},
			
			closede(){
				this.pip = false
				this.getAll()
			},
			pipeiClose() {
				this.pipeiSel = {
					belongingRegion: '',
					actualUsableArea: '',
					resources: {
						cereRentalPolicies: {
							applicableResources: '',
							leaseTerm: '',
							rentalPrice: ''
						}
					},
					pageNumber: 1,
					pageSize: 10,
				}
				this.$refs.pipform.resetFields();
				this.pipData = []
			},
			formatISODate(isoDateStr, format = 'YYYY-MM-DD HH:mm:ss') {
			    const date = new Date(isoDateStr);
			    const year = date.getFullYear();
			    const month = String(date.getMonth() + 1).padStart(2, '0');
			    const day = String(date.getDate()).padStart(2, '0');
			    const hours = String(date.getHours()).padStart(2, '0');
			    const minutes = String(date.getMinutes()).padStart(2, '0');
			    const seconds = String(date.getSeconds()).padStart(2, '0');
			
			    return format
			      .replace('YYYY', year)
			      .replace('MM', month)
			      .replace('DD', day)
			      .replace('HH', hours)
			      .replace('mm', minutes)
			      .replace('ss', seconds);
			}
		}
	}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
	.formcontainer {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
		/* 可选，设置列之间的间隙 */
	}

	/deep/ .first-column-bg {
		background-color: #f4f4f5 !important;
	}

	.zhuti {
		padding: 0 20px 20px 20px;
		min-height: calc(100vh - 50px - 20px);
		background-color: #fff;
	}


	.tableBtn {
		display: inline-block;
		margin-right: 10px;
	}

	.formSearch {

		display: flex;
		width: 100%;
		font-size: 14px;
		justify-content: space-between;

	}

	.greens {
		color: #3f9b6a;
	}

	/deep/ .el-table__row {
		font-size: 14px;
		color: #000000e6;
		height: 42px;
	}

	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: flex-end;
		position: relative;
	}

	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3f9b6a;
	}

	:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		/* background: #d3dce6; */
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	/deep/ .bg-purple[data-v-0e3fe4ec] {
		background: #fff;
		height: 50px;
	}


	.demo-input-suffix {
		display: flex;
		margin-right: 20px;
	}

	.pagination {
		text-align: right;
		line-height: 20px;
	}


	.dialog_css {
		padding: 0px;
	}

	.dialog_xin {
		padding: 0px;
	}

	/deep/.el-dialog__body {
		padding: 0px;
	}

	/deep/ .el-dialog__header {
		background-color: #fff;
		padding: 0;
	}

	/deep/.el-dialog__title {
		color: #000;
	}

	.el-row {
		&:last-child {
			margin-bottom: 0;
		}
	}

	/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-tabs__item.is-active {
		color: #3f9b6a;
		opacity: 1;
	}

	/deep/ .el-tabs__nav-wrap::after {
		background-color: #fff;
	}

	::v-deep .el-tabs__item:hover {
		color: #3f9b6a;
		cursor: pointer;
		opacity: 1;
	}

	/deep/ .el-tabs__active-bar {
		background-color: #389865;
	}

	/deep/ .el-table_2_column_13 {
		font-weight: 100;
	}

	::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-steps .el-step__head.is-wait {
  background-color: red; /* 修改为你想要的颜色 */

	/* 修改未进行步骤的描述文字颜色 */
	::v-deep .el-steps .el-step__description.is-wait {
		color: #999;
		/* 修改为你想要的颜色 */
	}

	/* 修改未进行步骤的图标颜色 */
	::v-deep .el-steps .el-step__icon.is-text.is-wait {
		color: #999;
		/* 修改为你想要的颜色 */
	}

	/* 修改未进行步骤的边框色 */
	::v-deep .el-steps .el-step__line.is-wait {
		border-color: #eee;
		/* 修改为你想要的颜色 */
	}

	::v-deep .el-steps .is-process .el-step__line {
		background-color: #3f9b6a;
		/* 修改线的颜色 */
	}

	::v-deep .el-steps .is-process .el-step__title {
		color: #fe7b6a;
		/* 修改进行中步骤的标题颜色 */
	}

	::v-deep .el-steps .is-process .el-step__icon {
		color: #fff;
		/* 修改进行中步骤的图标颜色 */
		background: #3f9b6a;
		/* 修改进行中步骤图标的边框颜色 */
		border: 0px;
	}

	::v-deep .el-step__icon-inner {
		line-height: 0;
	}

	/* 线条长度 */
	::v-deep .el-step.is-vertical .el-step__line {
		top: 30px;
		height: 60px;
	}

	::v-deep .moren {
		.el-input__inner {
			margin-top: 5px;
			padding: 0 20px;
		}
	}

	/deep/ .el-radio-group {
		margin-top: 11px;
	}

	/deep/ .el-radio__input.is-checked .el-radio__inner {
		border-color: #3f9b6a;
		background: #3f9b6a;
	}

	::v-deep .el-col {
		padding: 0 !important;
	}

	/deep/ .el-radio-group {
		width: 100%;
	}

	.radio-right-side {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	/deep/ .radio-right-side .el-radio__label {
		display: flex;
		align-items: center;
	}

	/deep/ .radio-right-side .el-radio__inner {
		order: 1;
	}

	/deep/ .radio-right-side .el-radio__input {
		display: flex;
		order: 2;
	}

	/deep/ .radio-right-side {
		&:hover {
			color: #000;
		}
	}

	::v-deep .el-dialog__wrapper {
		.dialog_css {
			margin-right: 12px;
			margin-top: 61px !important;

			.el-dialog__title {
				font-size: 16px !important;
				font-weight: 600;
				color: #000;
			}
		}
	}

	::v-deep .setup {
		.el-steps {
			justify-content: center;
		}
	}

	::v-deep .el-step__head.is-finish {
		color: #c0c4cc;
		border-color: #c0c4cc;
	}

	::v-deep .el-step__title.is-finish {
		color: #c0c4cc;
	}

	::v-deep .el-step__title.is-process {
		color: #c0c4cc;
	}

	::v-deep .el-tabs {
		width: 100%;
	}

	::v-deep .setup {
		.el-step__main {
			margin-left: -17px;
		}

		.el-step__title.is-process {
			color: #3f9b6a;
		}

	}

	::v-deep .el-pagination__jump {
		margin-top: 5px;
	}

	::v-deep .linClass {
		.el-dialog__header {
			padding: 20px 20px 10px;
			font-size: 14px;
		}
	}
</style>
<style lang="scss" scoped>
	::v-deep .bian_css {
		.el-dialog__header {
			padding: 0px;
		}
	}

	::v-deep .buttonHover:hover {
		color: #3f9b6a !important;
		border-color: #c5e1d2 !important;
		background-color: #ecf5f0 !important;
		outline: none;
	}

	::v-deep .el-pagination__total {
		position: absolute;
		left: 10px;
	}

	::v-deep .diaslog_zhong {
		.el-dialog__body {
			padding: 10px 20px 20px 20px;
		}

		.el-upload--picture-card {
			width: 130px;
			height: 130px;
		}
	}
</style>