<template>
  <div>
    <div>
      <el-tabs v-model="xiangTab">
        <el-tab-pane label="申请内容" name="first">
          <div style="margin-top: 30px;" class="editcss">
            <TitleWithCircle title="租赁信息" />
            <div style="padding: 20px;margin-top: 10px;">
              <el-form :model="info" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="经营用途" prop="businessPurpose">
                      <div class="duiqi">{{info.businessPurpose}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="租期" prop="intendedLeaseTerm">
                      <div class="duiqi">{{info.intendedLeaseTerm}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="开店名称" prop="sectionNumber">
                      <div class="duiqi">{{info.sectionNumber}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="品牌名称" prop="contractName">
                      <div class="duiqi">{{info.contractName}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="租金方案" prop="contractSigningDate">
                      <div class="duiqi">{{info.contractSigningDate}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="租金" prop="earnestMoney">
                      <div class="duiqi">{{info.earnestMoney}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="付款日" prop="leaseStartDate">
                  <div class="duiqi">{{info.leaseStartDate}}</div>
                </el-form-item>
                <el-form-item label="优惠政策" prop="contractTerminationDate">
                  <div class="duiqi">{{info.contractTerminationDate}}</div>
                </el-form-item>
                <el-form-item label="其他说明" prop="contractTerminationDate">
                  <div class="duiqi">{{info.contractTerminationDate}}</div>
                </el-form-item> -->
              </el-form>
            </div>
            <TitleWithCircle title="营业执照信息" />
            <div style="padding: 20px;margin-top: 10px;">
              <el-form :model="info" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="主体名称" prop="entityName">
                      <div class="duiqi">{{info.entityName}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
                      <div class="duiqi">{{info.unifiedSocialCreditCode}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="类型" prop="entityType">
                      <div class="duiqi">{{info.entityType}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="法定代表人" prop="legalRepresentative">
                      <div class="duiqi">{{info.legalRepresentative}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="经营范围" prop="businessScope">
                  <div class="duiqi">{{info.businessScope}}</div>
                </el-form-item>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="注册资本" prop="registeredCapital">
                      <div class="duiqi">{{info.registeredCapital}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="成立日期" prop="establishmentDate">
                      <div class="duiqi">{{info.establishmentDate}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="住所" prop="residence">
                  <div class="duiqi">{{info.residence}}</div>
                </el-form-item>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="邮箱地址" prop="emailAddress">
                      <div class="duiqi">{{info.emailAddress}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="营业期限" prop="businessStartDate">
                      <div class="duiqi">{{info.businessStartDate}} - {{info.businessEndDate}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="营业执照" prop="businessLicense">
                  <!-- <div class="duiqi">{{info.businessLicense}}</div> -->
                  <el-image style="width: 200px;" :src="$baseURL+info.businessLicense" fit="contain"></el-image>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商家信息" name="second">
          <div style="margin-top: 30px;" class="editcss">
            <TitleWithCircle title="基础信息" />
            <div style="padding: 20px;margin-top: 10px;">
              <el-form :model="shop" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="姓名" prop="operatorName">
                      <div class="duiqi">{{info.operatorName}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="手机号" prop="phone">
                      <div class="duiqi">{{info.phone}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <el-form-item label="证件类型" prop="idCardType">
                      <div class="duiqi">{{info.idCardType}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="身份证号码" prop="idNumber">
                      <div class="duiqi">{{info.idNumber}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="身份证照片（正）" prop="idPhotoFront">
                  <div style="margin-top: 10px;">
                    <el-image style="width: 200px;" :src="$baseURL+info.idPhotoFront" fit="contain"></el-image>
                  </div>
                </el-form-item>
                <el-form-item label="身份证照片（反）" prop="idPhotoBack">
                  <div style="margin-top: 10px;">
                    <el-image style="width: 200px;" :src="$baseURL+info.idPhotoBack" fit="contain"></el-image>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="资源信息" name="third">
          <div style="margin-top: 30px;" class="editcss">
            <TitleWithCircle title="基础信息" />
            <div style="padding: 20px;" v-if="info.cereBasicInformationShop.id">
              <el-form :model="info.cereBasicInformationShop" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="商铺名称" prop="shopName">
                      <div class="duiqi">{{info.cereBasicInformationShop.shopName}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="场地编号" prop="venueNumber">
                      <div class="duiqi">{{info.cereBasicInformationShop.venueNumber}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="门牌号" prop="houseNumber">
                      <div class="duiqi">{{info.cereBasicInformationShop.houseNumber}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="建筑形式" prop="architecturalForm">
                      <div class="duiqi">{{info.cereBasicInformationShop.architecturalForm}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="所属绿道段" prop="belongingGreenwaySection">
                      <div class="duiqi">{{info.cereBasicInformationShop.belongingGreenwaySection}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="所属公园/步道" prop="belongingParkTrail">
                      <div class="duiqi">{{info.cereBasicInformationShop.belongingParkTrail}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="建筑面积" prop="floorSpace">
                      <div class="duiqi">{{info.cereBasicInformationShop.floorSpace}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="实际使用面积" prop="actualUsableArea">
                      <div class="duiqi">{{info.cereBasicInformationShop.actualUsableArea}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="所属区域" prop="belongingRegion">
                      <div class="duiqi">{{info.cereBasicInformationShop.belongingRegion}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="归属部门" prop="belongingDepartment">
                      <div class="duiqi">{{info.cereBasicInformationShop.belongingDepartment}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="负责人" prop="head">
                      <div class="duiqi">{{info.cereBasicInformationShop.head}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="详细位置" prop="detailedLocation">
                      <div class="duiqi">{{info.cereBasicInformationShop.detailedLocation}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="建筑图纸" prop="architecturalDrawings">
                  <div>
                    <img :src="$baseURL+item" alt="" style="width:140px;height:140px;"
                      v-for="item in info.cereBasicInformationShop.architecturalDrawings.split(',')">
                  </div>
                </el-form-item>
                <el-form-item label="商铺描述" prop="shopDescription">
                  <div class="duiqi">{{info.cereBasicInformationShop.shopDescription}}</div>
                </el-form-item>
                <el-form-item label="展示主图" prop="displayMainImage">
                  <div>
                    <img :src="$baseURL+item" alt="" style="width:140px;height:140px;"
                      v-for="item in info.cereBasicInformationShop.displayMainImage.split(',')">
                  </div>
                  <!-- <img :src="info.cereBasicInformationShop.displayMainImage" alt="" style="width:140px;height:140px;"> -->
                </el-form-item>
                <!-- <el-form-item label="其他图片/视频" prop="otherImageVideos">
                  <div class="duiqi">{{info.cereBasicInformationShop.otherImageVideos}}</div>
                </el-form-item> -->
              </el-form>
            </div>
            <div style="padding: 20px;" v-if="info.cereAdvertisingInformation.id">
              <el-form :model="info.cereAdvertisingInformation" ref="ruleForm" label-width="140px"
                class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="广告位名称" prop="advertisingName">
                      <div class="duiqi">{{info.cereAdvertisingInformation.advertisingName}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="广告位编号" prop="advertisingSpaceNumber">
                      <div class="duiqi">{{info.cereAdvertisingInformation.advertisingSpaceNumber}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="广告位类型" prop="advertisingType">
                      <div class="duiqi">{{info.cereAdvertisingInformation.advertisingType}}</div>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">

                  <el-col :span="8">
                    <el-form-item label="所属端" prop="affiliation" v-if="ontype =='线上广告位'">
                      <div class="duiqi">{{info.cereAdvertisingInformation.affiliation}}</div>
                    </el-form-item>
                    <el-form-item label="详细位置" prop="detailedLocation" v-if="ontype =='实体广告位'">
                      <div class="duiqi">{{info.cereAdvertisingInformation.detailedLocation}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="轮播顺序" prop="rotationOrder" v-if="ontype =='线上广告位'">
                      <div class="duiqi">{{info.cereAdvertisingInformation.rotationOrder}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="广告尺寸" prop="dimensions" v-if="ontype =='线上广告位'">
                      <div class="duiqi">{{info.cereAdvertisingInformation.dimensions}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="可上传大小" prop="size" v-if="ontype =='线上广告位'">
                      <div class="duiqi">{{info.cereAdvertisingInformation.size}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="上传格式" prop="uploadFormat" v-if="ontype =='线上广告位'">
                      <div class="duiqi">{{info.cereAdvertisingInformation.uploadFormat}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备类型" prop="deviceType" v-if="ontype =='实体广告位'">
                      <div class="duiqi">{{info.cereAdvertisingInformation.deviceType}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">

                  <el-col :span="12">
                    <el-form-item label="设备大小" prop="equipmentSize" v-if="ontype =='实体广告位'">
                      <div style="display: flex;">
                        <div>
                          <span style="font-size: 14px;">长：</span>
                          <span>{{ info.cereAdvertisingInformation.equipmentSizeH }}</span>
                          <span style="font-size: 14px;margin-right:5px;">mm</span>
                        </div>
                        <div>
                          <span style="font-size: 14px;">宽：</span>
                          <span>{{ info.cereAdvertisingInformation.equipmentSizeK }}</span>
                          <span style="font-size: 14px;margin-right:5px;">mm</span>
                        </div>
                        <div>
                          <span style="font-size: 14px;">高：</span>
                          <span>{{ info.cereAdvertisingInformation.equipmentSizeG }}</span>
                          <span style="font-size: 14px;margin-right:5px;">mm</span>
                        </div>
                      </div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="广告尺寸" v-if="ontype =='实体广告位'">
                      <div style="display: flex;">
                        <div>
                          <span style="font-size: 14px;">长：</span>
                          <span>{{ info.cereAdvertisingInformation.dimensionsH }}</span>
                          <span style="font-size: 14px;margin-right:5px;">mm</span>
                        </div>
                        <div>
                          <span style="font-size: 14px;">宽：</span>
                          <span>{{ info.cereAdvertisingInformation.dimensionsK }}</span>
                          <span style="font-size: 14px;margin-right:5px;">mm</span>
                        </div>
                      </div>
                    </el-form-item>
                  </el-col>

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


                  <el-col :span="8">
                    <el-form-item label="广告材质" prop="advertisingMaterial" v-if="ontype =='实体广告位'">
                      <div class="duiqi">{{info.cereAdvertisingInformation.advertisingMaterial}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>


                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="位置示意图" prop="locationDiagram">
                      <img :src="info.cereAdvertisingInformation.locationDiagram" alt=""
                        style="width:140px;height:140px;">
                    </el-form-item>
                  </el-col>

                </el-row>
              </el-form>
            </div>
            <div style="padding: 20px;" v-if="info.cereBasicInformationVenue.id">
              <el-form :model="info.cereBasicInformationVenue" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="场地名称" prop="venueName">
                      <div class="duiqi">{{info.cereBasicInformationVenue.venueName}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="场地类型" prop="venueType">
                      <div class="duiqi">{{info.cereBasicInformationVenue.venueType}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="实际使用面积" prop="actualArea">
                      <div class="duiqi">{{info.cereBasicInformationVenue.actualArea}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所属区域" prop="district">
                      <div class="duiqi">{{info.cereBasicInformationVenue.district}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="归属部门" prop="department">
                      <div class="duiqi">{{info.cereBasicInformationVenue.department}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="负责人" prop="responsiblePerson">
                      <div class="duiqi">{{info.cereBasicInformationVenue.belongingParkTrail}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="详细位置" prop="detailedLocation">
                      <div class="duiqi">{{info.cereBasicInformationVenue.detailedLocation}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="场地描述" prop="description">
                      <div class="duiqi">{{info.cereBasicInformationVenue.description}}</div>

                    </el-form-item>
                  </el-col>

                </el-row>

                <el-form-item label="规划图纸" prop="planningDrawing">
                  <div>
                    <img :src="$baseURL+item" alt="" style="width:140px;height:140px;"
                      v-for="item in info.cereBasicInformationVenue.planningDrawing.split(',')">
                  </div>

                </el-form-item>

                <el-form-item label="展示主图" prop="displayImage">
                  <div>
                    <img :src="$baseURL+item" alt="" style="width:140px;height:140px;"
                      v-for="item in info.cereBasicInformationVenue.displayImage.split(',')">
                  </div>

                </el-form-item>
                <!-- <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="其他图片/视频" prop="otherMedia">
                      <div class="duiqi">{{info.cereBasicInformationVenue.otherMedia}}</div>
                    </el-form-item>
                  </el-col>
                </el-row> -->
              </el-form>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- v-if='info.auditStatus == 1' -->
    <div v-if='info.auditStatus == 1' style="border-top: 2px solid #eee;">
      <div style="padding-left: 130px;margin: 25px 0;">
        <el-radio v-model="radio" label="2">同意</el-radio>
        <el-radio v-model="radio" label="3">拒绝</el-radio>
      </div>
      <el-form :model="info" label-width="130px" class="demo-ruleForm">
        <el-form-item label="审核意见">
          <el-input maxlength="200" show-word-limit rows="4" v-model="info.reviewComments" placeholder="请输入审核意见"
            type="textarea" />
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button v-if='info.auditStatus == 1' @click="minSev"
        style="background-color: #3F9B6A;color: #fff;">确定</el-button>
      <el-button class="buttonHover"
        style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;margin-top: 20px;"
        @click="changetype">返回</el-button>
    </div>
  </div>
</template>

<script>
  import {
    queryByContractcontractNumber
  } from '../../api/commodityLease.js'
  import {
    businessListGetById
  } from '../../api/business.js'
  import TitleWithCircle from '@/components/top/index';
  import MapXian from "@/components/MapContainer/MapXian";
  import {
    msgedit,

  } from '@/api/cereBusinessInfo'
  export default {
    components: {
      TitleWithCircle,
      MapXian
    },
    props: {
      info: {
        type: Object,
        default: function() {
          return {}; // 返回一个空数组作为默认值
        },
      },
    },
    data() {
      return {
        radio: '2',
        ontype: '线上广告位',
        url: '',
        type: '1',
        tableData: [],
        xiangTab: 'first',
        siteIds: [],
        list: [],
        advIds: [],
        shopIds: [],
        shop: {},
        newshop: {},
        newinfo: {},
        parentMessage: {}
      }
    },
    created() {
      console.log(this.info)
      if (this.info.cereAdvertisingInformation) {
        this.ontype = this.info.cereAdvertisingInformation.advertisingType
      }
    },
    computed: {

    },
    methods: {
      minSev() {
        console.error(this.info)
        console.error(this.radio)

        msgedit({
          id: this.info.id,
          'auditStatus': this.radio,
          reviewComments: this.info.reviewComments
        }).then(res => {
          console.error(res)
          if (res.code == 200) {
            this.$message({
              message: '处理成功',
              type: 'success'
            })
            this.info.auditStatus = this.radio
          } else {
            this.$message({
              message: '处理失败',
              type: 'error'
            })
          }
        })
      },
      openfile(e) {
        if (e) {
          const fullUrl = this.url + e;
          try {
            window.open(fullUrl, '_blank'); // 在新标签页中打开文件
          } catch (error) {
            console.error('打开文件失败:', error);
          }
        } else {
          console.error('无文件可查看');
        }
      },
      changetype() {
        this.xiangTab = 'first'
        if (this.type == '1') {
          this.$emit('removeonaction', '1')
        } else {
          this.type = '1'
        }
      },
      open(row) {
        console.error(row)
        this.type = '2'
        this.newinfo = row
        businessListGetById({
          shopId: row.relatedMerchants
        }).then(res => {
          console.log(res)
          this.newshop = res.data
        })
      },
      closeFn() {
        this.$emit('change', false);
      },
    }
  }
</script>
<style>
  .el-form-item__label {
    color: #a2a2a2;
  }

  .greens {
    color: #3F9B6A;
  }
</style>
