<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="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="venueNumber">
                      <div class="duiqi">{{editbgid.venueNumber}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="商铺类型" prop="shopType">
                      <div class="duiqi">{{editbgid.shopType=='1'?'移动铺位':editbgid.shopType=='2'?'固定铺位':'无'}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="测绘面积" prop="surveyingArea">
                      <div class="duiqi">{{editbgid.surveyingArea || '无'}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="产权面积" prop="propertyArea">
                      <div class="duiqi">{{editbgid.propertyArea || '无'}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="实际使用面积" prop="actualUsableArea">
                      <div class="duiqi">{{editbgid.actualUsableArea || '无'}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="所属区域" prop="belongingRegion">
                      <div class="duiqi">{{editbgid.belongingRegion || '无'}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="归属部门" prop="belongingDepartment">
                      <div class="duiqi">{{editbgid.belongingDepartment || '无'}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="负责人" prop="head">
                      <div class="duiqi">{{editbgid.head || '无'}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="联系人" prop="contacts">
                      <div class="duiqi">{{editbgid.contacts || '无'}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="联系方式" prop="telephone">
                      <div class="duiqi">{{editbgid.telephone || '无'}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    
                  </el-col>
                </el-row>
                <el-form-item label="详细位置" prop="detailedLocation">
                  <div class="duiqi">{{editbgid.detailedLocation || '无'}}</div>
                </el-form-item>
                <el-form-item label="地图标点" prop="mapPunctuation">
                  <div style="width: 100%;height: 300px;">
                    <!-- :edit='edit' :sendMap='getChildDate' -->
                    <newmap :isx="false" :message="editbgid.mapPunctuation"></newmap>
                  </div>
                </el-form-item>
                <el-form-item label="建筑图纸" prop="architecturalDrawings">
                  <div v-if="editbgid.architecturalDrawings">
                    <img :src="$baseURL+item" alt="" style="width:140px;height:140px;margin-left: 15px;"
                      v-for="item in editbgid.architecturalDrawings.split(',')">
                  </div>
                  <div  class="duiqi" v-else>无</div>
                </el-form-item>
                <el-form-item label="商铺描述" prop="shopDescription">
                  <div class="duiqi">{{editbgid.shopDescription || '无'}}</div>
                </el-form-item>
                <el-form-item label="展示主图" prop="displayMainImage">
                  <img  v-for="item in editbgid.displayMainImage.split(',')" :src="$baseURL+item" alt="" style="width:140px;height:140px;margin-left: 15px;">
                </el-form-item>
                <el-form-item label="其他视频" prop="otherImageVideos"  >
                  <div class="duiqi" :class="editbgid.otherImageVideos?'greens':''" @click ="editbgid.otherImageVideos?openfile($baseURL+editbgid.otherImageVideos):''">{{editbgid.otherImageVideos?'查看详情':'无'}}</div>
                  <!-- <div class="duiqi" v-for="item in editbgid.otherImageVideos.split(',')">{{$baseURL+item}}</div> -->
                </el-form-item>
              </el-form>
            </div>
            <TitleWithCircle title="历史发布/下架记录" />
            <div style="padding: 20px;">
              <el-table :data="datalistxsj"
              :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
              tooltip-effect="dark custom-tooltip-effect">
                <el-table-column label="类型" prop="type" >
                </el-table-column>
                <el-table-column label="操作时间" prop="operationTime" >
                </el-table-column>
                <el-table-column label="操作人" prop="operator">
                </el-table-column>
              </el-table>
              <div style="display: flex;justify-content: space-between;" class="bom">
                <div style="font-size: 14px;">共 <span style="color: #3F9B6A;">{{totalsxj}}</span> 项数据</div>
                <el-pagination :current-page="pagequerysxj.pageNumber+1" :page-sizes="[10, 20, 50, 100]" :page-size="pagequerysxj.pageSize"
                  background small layout="prev, pager, next" :total="totalsxj" @size-change="handleSizeChangesxj"
                  @current-change="handleCurrentChangesxj">
                </el-pagination>
              </div>
            </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" >
                </el-table-column>
                <el-table-column label="适用资源" prop="applicableResources" >
                </el-table-column>
                <!-- <el-table-column label="经营类型" prop="businessType" min-width="100">

                </el-table-column> -->
                <el-table-column label="租金价格" prop="rentalPrice">
                </el-table-column>
                <el-table-column label="付款周期" prop="leaseTerm">
                </el-table-column>
                <el-table-column label="付款日" prop="payDay" show-overflow-tooltip></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-tab-pane label="租赁记录" name="third" v-if="edit">
          <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" v-if="edit">
            <div style="margin-top: 30px;" class="editcss">
              <div class="titles">
                人流量情况
              </div>
             </div>
          </el-tab-pane>
          <el-tab-pane label="物业维护记录" name="five" v-if="edit">
            <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';
  import {
    cereResourceStrategylist,
    cereBusinessPlan,
    cereBusinessOperationqueryByPage
  } from '@/api/newly';
  import newmap from "@/components/newmap/index";
  export default {
    components: {
      TitleWithCircle,
      MapXian,
      newmap
    },
    props: {
      editbgid: {
        type: Object,
        default: function() {
          return {};
        },
      },
    },
    data() {
      return {
        totalsxj:0,
        pagequerysxj:{
          pageNumber: 0,
          pageSize: 10,
          resourcesId: 'sp' + this.editbgid.id
        },
        xiangTab: 'first',
        list: [],
        parentMessage: {},
        datalist: [],
        datalist1:[],
        datalistxsj:[]
      }
    },
    created() {

      console.error(this.editbgid)
      if (this.editbgid.id) {
        let c1 = {
          pageNumber: 0,
          pageSize: 10,
          resourcesId: 'sp' + this.editbgid.id
        }
        cereResourceStrategylist(c1).then(res => {
          console.error(res)
          if (!Array.isArray(res.data)) {
            this.datalist = [];
            return;
          }
          this.datalist = res.data
        })
        cereBusinessPlan(c1).then(res => {
          console.error(res)
          if (!Array.isArray(res.data)) {
            this.datalist1 = [];
            return;
          }
          this.datalist1 = res.data
        })
        this.getAllxsj()
        
      }
    },
    computed: {

    },
    methods: {
      
      handleCurrentChangesxj(val) {
        this.pagequerysxj.pageNumber = val - 1
        this.getAllxsj()
      },
      handleSizeChangesxj(val) {
        this.pagequerysxj.pageSize = val
        this.pagequerysxj.pageNumber = 0
        this.getAllxsj()
      },
      getAllxsj() {
        cereBusinessOperationqueryByPage(this.pagequerysxj).then(res => {
          console.error(res)
          if (!Array.isArray(res.data.content)) {
            this.datalistxsj = [];
            return;
          }
          this.datalistxsj = res.data.content
          this.totalsxj = res.data.totalElements
        })
      },
      openfile(e) {
        if (e) {
          const fullUrl = e;
          try {
            window.open(fullUrl, '_blank'); // 在新标签页中打开文件
          } catch (error) {
            console.error('打开文件失败:', error);
          }
        } else {
          console.error('无文件可查看');
        }
      },
      changetype() {
        this.xiangTab = 'first'
        this.$emit('removeonaction', '1')
      },
    }
  }
</script>
<style>
  .el-form-item__label {
    color: #a2a2a2;
    
  }

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