<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="120px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="场地名称" prop="venueName">
                      <div  class="duiqi">{{editbgid.venueName}}</div>
                
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="场地类型" prop="venueType">
                      <div class="duiqi" >{{editbgid.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">{{editbgid.actualArea}}</div>
               
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所属区域" prop="district">
                      <div  class="duiqi">{{editbgid.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">{{editbgid.department}}</div>
                
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="负责人" prop="responsiblePerson">
                      <div  class="duiqi">{{editbgid.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">{{editbgid.detailedLocation}}</div>
          
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="地图标点" prop="mapMarker">
                      <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="12">
                    <el-form-item label="场地描述" prop="description">
                      <div  class="duiqi">{{editbgid.description}}</div>
             
                    </el-form-item>
                  </el-col>

                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="规划图纸" prop="planningDrawing">
                      <!-- <img :src="editbgid.planningDrawing" alt="" style="width:140px;height:140px;" > -->

                      <div >
                        <img :src="$baseURL+item" alt="" style="width:140px;height:140px;"
                          v-for="item in editbgid.planningDrawing.split(',')">
                      </div>
                 
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="展示主图" prop="displayImage">
                      <div >
                        <img :src="$baseURL+item" alt="" style="width:140px;height:140px;"
                          v-for="item in editbgid.displayImage.split(',')">
                      </div>
                      <!-- <img :src="$baseURL+editbgid.displayImage" alt="" style="width:140px;height:140px;" > -->
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="其他图片/视频" prop="otherMedia">
                      <div  class="duiqi">{{editbgid.otherMedia}}</div>
                    </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">
            <!-- <TitleWithCircle title="招商方案信息" />
            <div style="padding: 20px;">
              <el-table :data="datalist1"
                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                tooltip-effect="dark custom-tooltip-effect">
                <el-table-column label="招商方案名称" prop="planName" min-width="200">
                </el-table-column>
                <el-table-column label="创建日期" prop="createTime" min-width="100">
                </el-table-column>
              </el-table>
            </div> -->
            <TitleWithCircle title="策略方案" />
            <div style="padding: 20px;">
              <el-table :data="datalist"
                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                tooltip-effect="dark custom-tooltip-effect">
                <el-table-column label="策略名称" prop="policyName" min-width="200">
                </el-table-column>
                <el-table-column label="适用资源" prop="applicableResources" min-width="100">
                </el-table-column>
                <el-table-column label="经营类型" prop="businessType" min-width="100">

                </el-table-column>
                <el-table-column label="租金价格" prop="rentalPrice" min-width="150">
                </el-table-column>
                <el-table-column label="租期" prop="leaseTerm" min-width="100">
                </el-table-column>
                <el-table-column label="是否出租" prop="isRental" min-width="100">
                  <template slot-scope="scope">
                    {{scope.row.isRental == '0'?'否':'是'}}
                  </template>
                </el-table-column>
                <el-table-column label="是否自营" prop="planningObjectives" min-width="100">
                  <template slot-scope="scope">
                    {{scope.row.isSelfOperated == '0'?'否':'是'}}
                  </template>
                </el-table-column>
              </el-table>
            </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';
  import {
    cereResourceStrategylist,
    cereBusinessPlan
  } from '@/api/newly';
  export default {
    components: {
      TitleWithCircle,
      MapXian
    },
    props: {
      leixing: {
        type: Boolean,
        default: true
      },
      editbgid: {
        type: Object,
        default: function() {
          return {};
        },
      },
    },
    data() {
      return {
        xiangTab: 'first',
        list: [],
        parentMessage: {},
        datalist: [],
        datalist1:[]
      }
    },
    created() {
      if (this.editbgid.id) {
        let c1 = {
          pageNumber: 0,
          pageSize: 10,
          resourcesId: 'sp' + this.editbgid.id
        }
        cereResourceStrategylist(c1).then(res => {
          console.error(res)
          this.datalist = res.data
        })
        cereBusinessPlan(c1).then(res => {
          console.error(res)
          this.datalist1 = res.data
        })
        if (typeof this.editbgid.mapMarker == 'string' && this.editbgid.mapMarker != '') {
          this.parentMessage = JSON.parse(this.editbgid.mapMarker)
        } else {
          this.parentMessage = this.editbgid.mapMarker
        }
      }
      
    },
    computed: {

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

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