<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;">
              <el-form :model="editbgid" ref="formInline" label-width="100px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="广告位名称" prop="advertisingName">
                      <div class="duiqi">{{editbgid.advertisingName}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="广告位编号" prop="advertisingSpaceNumber">
                      <div class="duiqi">{{editbgid.advertisingSpaceNumber}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="广告位类型" prop="advertisingType">
                      <div class="duiqi">{{editbgid.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='leixing'>
                      <div class="duiqi">{{editbgid.affiliation}}</div>
                    </el-form-item>
                    <el-form-item label="详细位置" prop="detailedLocation" v-if='leixing == false'>
                      <div class="duiqi">{{editbgid.detailedLocation}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="轮播顺序" prop="rotationOrder" v-if='leixing'>
                      <div class="duiqi">{{editbgid.rotationOrder}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="广告尺寸" prop="dimensions" v-if='leixing'>
                      <div class="duiqi">{{editbgid.dimensions}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="地图标点" prop="mapPunctuation" v-if='leixing == false'>
                      <div style="width: 100%;height: 300px;">
                        <MapXian :message="parentMessage"></MapXian>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="可上传大小" prop="size" v-if='leixing'>
                      <div class="duiqi">{{editbgid.size}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="上传格式" prop="uploadFormat" v-if='leixing'>
                      <div class="duiqi">{{editbgid.uploadFormat}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备类型" prop="deviceType" v-if='leixing == false'>
                      <div class="duiqi">{{editbgid.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='leixing == false'>
                      <div style="display: flex;">
                        <div>
                          <span style="font-size: 14px;">长：</span>
                          <span>{{ editbgid.equipmentSizeH }}</span>
                          <span style="font-size: 14px;margin-right:5px;">mm</span>
                        </div>
                        <div>
                          <span style="font-size: 14px;">宽：</span>
                          <span>{{ editbgid.equipmentSizeK }}</span>
                          <span style="font-size: 14px;margin-right:5px;">mm</span>
                        </div>
                        <div>
                          <span style="font-size: 14px;">高：</span>
                          <span>{{ editbgid.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='leixing == false'>
                      <div style="display: flex;">
                        <div>
                          <span style="font-size: 14px;">长：</span>
                          <span>{{ editbgid.dimensionsH }}</span>
                          <span style="font-size: 14px;margin-right:5px;">mm</span>
                        </div>
                        <div>
                          <span style="font-size: 14px;">宽：</span>
                          <span>{{ editbgid.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='leixing == false'>
                      <div class="duiqi">{{editbgid.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="editbgid.locationDiagram" alt="" style="width:140px;height:140px;">
                    </el-form-item>
                  </el-col>

                </el-row>



              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="招商方案信息" name="second" >
            <div style="margin-top: 30px;" class="editcss">
              <div class="titles">
                招商方案信息
              </div>
              <div style="padding: 20px;">
                <el-form :model="editbgid" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="招商方案名称" prop="shopName">
                        <div class="duiqi">{{editbgid.shopName}}</div>

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

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

                    <el-col :span="24">
                      <el-form-item label="招商政策与条件" prop="architecturalForm">
                        <div class="duiqi">{{editbgid.architecturalForm}}</div>

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

                    <el-col :span="24">
                      <el-form-item label="方案概述" prop="belongingGreenwaySection">
                        <div class="duiqi">{{editbgid.belongingGreenwaySection}}</div>

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

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="附件信息" prop="floorSpace">
                        <div class="duiqi">{{editbgid.floorSpace}}</div>

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



                </el-form>
              </div>
              <div class="titles">
                策略方案
              </div>
              <div style="padding: 20px;">
                <el-form :model="editbgid" :rules="rules" 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">{{editbgid.shopName}}</div>

                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="适用资源" prop="shopName">
                        <div class="duiqi">{{editbgid.shopName}}</div>

                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="是否出租" prop="shopName">
                        <div class="duiqi">{{editbgid.shopName}}</div>

                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="经营类型" prop="shopName">
                        <div class="duiqi">{{editbgid.shopName}}</div>

                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="租金价格" prop="shopName">
                        <div class="duiqi">{{editbgid.shopName}}</div>

                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="付款周期" prop="shopName">
                        <div class="duiqi">{{editbgid.shopName}}</div>

                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="租赁时段" prop="shopName">
                        <div class="duiqi">{{editbgid.shopName}}</div>

                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="免租条件" prop="shopName">
                        <div class="duiqi">{{editbgid.shopName}}</div>

                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="免租期" prop="shopName">
                        <div class="duiqi">{{editbgid.shopName}}</div>

                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="付款日" prop="shopName">
                        <div class="duiqi">{{editbgid.shopName}}</div>

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


                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="优惠政策" prop="floorSpace">
                        <div class="duiqi">{{editbgid.floorSpace}}</div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="其他说明" prop="floorSpace">
                        <div class="duiqi">{{editbgid.floorSpace}}</div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
          </el-tab-pane> -->
        <!-- <el-tab-pane label="租赁记录" name="third" >
            <div style="margin-top: 30px;" class="editcss">
              <div class="titles">
                租赁记录
              </div>
              <div style="padding: 20px;">
                <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                  :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                  tooltip-effect="dark custom-tooltip-effect">
                  <el-table-column label="承租商家" min-width="80">

                  </el-table-column>
                  <el-table-column label="租赁期限" prop="houseNumber" min-width="80" show-overflow-tooltip>

                  </el-table-column>
                  <el-table-column label="经营类型" prop="actualUsableArea" min-width="150" show-overflow-tooltip>
                  </el-table-column>

                  <el-table-column label="租金/周期" prop="head" min-width="120" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column label="租赁状态" prop="rentalStatus" min-width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                      {{scope.row.rentalStatus=='0'?'待租':'已租'}}
                    </template>
                  </el-table-column>
                  <el-table-column label="当前状态" prop="publishStatus" min-width="150" show-overflow-tooltip>
                    <template slot-scope="scope">
                      {{scope.row.publishStatus=='0'?'待发布':scope.row.publishStatus=='1'?'待审核':'已审核'}}
                    </template>
                  </el-table-column>

                  <el-table-column label="操作" min-width="160" fixed="right">
                    <template slot-scope="scope">
                      <div @click="handleEditForm(scope.row)" class="tableBtn greens">查看</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane> -->
        <!--   <el-tab-pane label="人流情况" name="fourth" >
              <div style="margin-top: 30px;" class="editcss">
                <div class="titles">
                  人流量情况
                </div>
               </div>
            </el-tab-pane>
            <el-tab-pane label="物业维护记录" name="five" >
              <div style="margin-top: 30px;" class="editcss">
                <div class="titles">
                  物业维护记录
                </div>
               </div>
            </el-tab-pane> -->
      </el-tabs>
    </div>
    <div>
      <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 MapXian from "@/components/MapContainer/MapXian";
  import TitleWithCircle from '@/components/top/index';
  export default {
    components: {
      TitleWithCircle,
      MapXian
    },
    props: {
      leixing: {
        type: Boolean,
        default: true
      },
      editbgid: {
        type: Object,
        default: function() {
          return {};
        },
      },
    },
    data() {
      return {
        xiangTab: 'first',
        list: [],
        parentMessage: {}
      }
    },
    created() {
      let dimensions_parts = this.editbgid.dimensions.split(" ")
      let dimensions = this.editbgid.equipmentSize.split(" ")

      dimensions_parts.forEach(part => {
        if (part.startsWith("长")) {
          this.editbgid.dimensionsH = part.split("：")[1];
        } else if (part.startsWith("宽")) {
          this.editbgid.dimensionsK = part.split("：")[1];
        }
      })
      dimensions.forEach(part => {
        if (part.startsWith("长")) {
          this.editbgid.equipmentSizeH = part.split("：")[1];
        } else if (part.startsWith("宽")) {
          this.editbgid.equipmentSizeK = part.split("：")[1];
        } else if (part.startsWith("高")) {
          this.editbgid.equipmentSizeG = part.split("：")[1];
        }
      })
      if (this.leixing == false) {
        this.parentMessage = JSON.parse(this.editbgid.mapPunctuation)
      }
    },
    computed: {

    },
    methods: {
      changetype() {
        this.xiangTab = 'first'
        this.$emit('removeonaction', '1')
      },
    }
  }
</script>
<style>
  .el-form-item__label {
    color: #a2a2a2;
  }

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