<template>
  <div class="container">
    <!-- 顶部信息 -->
    <div class="containertop">
      <div class="topleft">
        <img src="../../../assets/images/detailsicon/1.png" alt="">
        <span>企业入驻信息</span>
      </div>
      <div class="topright">
        <!-- 编辑按钮 -->
        <el-button type="primary" size="medium" plain
          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="toggleEdit">
          <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
          {{ editMode ? '保存' : '编辑' }}
        </el-button>
      </div>
    </div>

    <!-- 内容区上方的表格 -->
    <div class="tagdiv">
      <div class="descriptionsdiv">
        <el-descriptions class="margin-top" :column="4" border>
          <el-descriptions-item>
            <template slot="label">
              入驻企业数（家）
            </template>
            <el-input v-model="currentCompany.rzqys" v-if="editMode"></el-input>
            <span v-else>{{ currentCompany.rzqys }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              入驻企业行业类型
            </template>
            <el-input v-model="currentCompany.rzqyhylx" v-if="editMode"></el-input>
            <span v-else>{{ currentCompany.rzqyhylx }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              人员数量（人）
            </template>
            <el-input v-model="currentCompany.rysl" v-if="editMode"></el-input>
            <span v-else>{{ currentCompany.rysl }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              入住率（%）
            </template>
            <el-input v-model="currentCompany.rzl" v-if="editMode"></el-input>
            <span v-else>{{ currentCompany.rzl }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              已出租（售）面积（平方米）
            </template>
            <el-input v-model="currentCompany.yczmj" v-if="editMode"></el-input>
            <span v-else>{{ currentCompany.yczmj }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              空置出租（售）面积（平方米）
            </template>
            <el-input v-model="currentCompany.kzczmj" v-if="editMode"></el-input>
            <span v-else>{{ currentCompany.kzczmj }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              工业厂房平均租金（元/平方米*月）
            </template>
            <el-input v-model="currentCompany.gycfpjzj" v-if="editMode"></el-input>
            <span v-else>{{ currentCompany.gycfpjzj }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              工业厂房平均物业费(元/平方米*月)
            </template>
            <el-input v-model="currentCompany.gycfpjwyf" v-if="editMode"></el-input>
            <span v-else>{{ currentCompany.gycfpjwyf }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script>
import { updateqyrz, getqyrzById } from '@/api/ManageApi/index';

export default {
  data() {
    return {
      editMode: false, // 编辑模式状态
      currentCompany: {
        rzqys: 0, // 入驻企业数
        rzqyhylx: '', // 入驻企业行业类型
        rysl: 0, // 人员数量
        rzl: 0, // 入住率
        yczmj: 0, // 已出租面积
        kzczmj: 0, // 空置出租面积
        gycfpjzj: 0, // 工业厂房平均租金
        gycfpjwyf: 0, // 工业厂房平均物业费
      },
    };
  },
  mounted() {
    this.fetchCompanyData(); // 页面加载时获取数据
  },
  methods: {
    // 切换编辑模式
    toggleEdit() {
      if (this.editMode) {
        this.saveData(); // 如果是编辑模式，点击后保存数据
      }
      this.editMode = !this.editMode; // 切换编辑模式
    },
    // 获取企业入驻信息
    async fetchCompanyData() {
      try {
        const response = await getqyrzById(this.$route.params.id);
        this.currentCompany = response.data; // 更新数据
      } catch (error) {
        console.error('获取企业入驻信息失败:', error);
        this.$message.error('获取企业入驻信息失败');
      }
    },
    // 保存数据
    async saveData() {
      try {
        const response = await updateqyrz(this.currentCompany);
        if (response.success) {
          this.$message.success('保存成功');
        } else {
          this.$message.error('保存失败');
        }
      } catch (error) {
        console.error('保存失败:', error);
        this.$message.error('保存失败');
      }
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.containertop {
  height: auto;
  display: flex;
  justify-content: space-between;
  padding: .7rem 0;
  padding: .5rem;
  border-bottom: 1px solid #E5E5E5;
}

.topleft {
  width: 8rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.topleft img {
  width: 0.81rem;
  height: 0.81rem;
}

.topleft span {
  width: auto;
  height: 0.88rem;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 500;
  font-size: 0.88rem;
  color: #3D424C;
  line-height: 0.88rem;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.descriptionsdiv {
  width: 100%;
  margin-left: 1rem;
  height: auto;
}

.tagdiv {
  padding: 1rem 3em 1rem 1rem;
}
</style>