<template>
  <div class="container">
    <!-- 顶部信息 -->
    <div class="containertop">
      <div class="topleft">
        <img src="../../../assets/images/detailsicon/1.png" alt="">
        <span>规划信息</span>
      </div>
      <div class="topright" v-if="action === 'fill' || !action || action === 'okay'">
        <el-button v-if="!isEditing" type="primary" size="medium" plain
          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="edit">
          <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
          编辑
        </el-button>
        <el-button v-else type="primary" size="medium" plain
          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="save">
          <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="保存"
            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
          保存
        </el-button>
        <el-button type="primary" size="medium" plain v-if="checkRole(['admin', 'common'])"
          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleExport">
          <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="导出"
            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
          导出
        </el-button>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="content">
      <div class="descriptionsdiv">
        <el-descriptions class="margin-top" :column="4" border>
          <el-descriptions-item>
            <template slot="label">
              <span style="color: red;">*</span>
              总用地面积(平方米)
            </template>
            <el-input v-if="isEditing" v-model="form.zydmj" style="width: 100%;"></el-input>
            <span v-else>{{ form.zydmj }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <span style="color: red;">*</span>
              容积率
            </template>
            <el-input v-if="isEditing" v-model="form.rjl" style="width: 100%;"></el-input>
            <span v-else>{{ form.rjl }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <span style="color: red;">*</span>
              总建筑面积（平方米）
            </template>
            <el-input v-if="isEditing" v-model="form.zjzmj" style="width: 100%;"></el-input>
            <span v-else>{{ form.zjzmj }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="标准层建筑面积（平方米）">
            <el-input v-if="isEditing" v-model="form.bzcjzmj" style="width: 100%;"></el-input>
            <span v-else>{{ form.bzcjzmj }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="计容积率建筑面积(平方米)">
            <el-input v-if="isEditing" v-model="form.jrjljzmj" style="width: 100%;"></el-input>
            <span v-else>{{ form.jrjljzmj }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="建筑密度(%)">
            <el-input v-if="isEditing" v-model="form.jzmd" style="width: 100%;"></el-input>
            <span v-else>{{ form.jzmd }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="绿地率(%)">
            <el-input v-if="isEditing" v-model="form.ldl" style="width: 100%;"></el-input>
            <span v-else>{{ form.ldl }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <span style="color: red;">*</span>
              建筑栋数（栋）
            </template>
            <el-input v-if="isEditing" v-model="form.jzds" style="width: 100%;"></el-input>
            <span v-else>{{ form.jzds }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="地上建筑面积(平方米)">
            <el-input v-if="isEditing" v-model="form.dsjzmj" style="width: 100%;"></el-input>
            <span v-else>{{ form.dsjzmj }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="地下建筑面积(平方米)">
            <el-input v-if="isEditing" v-model="form.dxjzmj" style="width: 100%;"></el-input>
            <span v-else>{{ form.dxjzmj }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <span style="color: red;">*</span>
              最高建筑层数（层）
            </template>
            <el-input v-if="isEditing" v-model="form.zgjzcs" style="width: 100%;"></el-input>
            <span v-else>{{ form.zgjzcs }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="最高建筑高度(米)">
            <el-input v-if="isEditing" v-model="form.zgjzgd" style="width: 100%;"></el-input>
            <span v-else>{{ form.zgjzgd }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="机动车停车位(辆)">
            <el-input v-if="isEditing" v-model="form.jdctcw" style="width: 100%;"></el-input>
            <span v-else>{{ form.jdctcw }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="非机动车停车位(辆)">
            <el-input v-if="isEditing" v-model="form.fjdctcw" style="width: 100%;"></el-input>
            <span v-else>{{ form.fjdctcw }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <span style="color: red;">*</span>
              防火等级
            </template>
            <el-input v-if="isEditing" v-model="form.fhdj" style="width: 100%;"></el-input>
            <span v-else>{{ form.fhdj }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="规划文件">
            <div v-if="isEditing">
              <span v-if="form.ghwj">{{ form.ghwj.split('/').pop() }}</span>
              <el-tooltip class="item" effect="dark" content="支持pdf或word文件，大小不得超过50MB" placement="top-start">
                <el-button type="text" icon="el-icon-upload" @click="showFileDialog">
                  <span v-if="form.ghwj">编辑文件</span>
                  <span v-else>上传文件</span>
                </el-button>
              </el-tooltip>
            </div>
            <span v-else>
              <a v-if="form.ghwj" :href="form.ghwj" target="_blank">{{ form.ghwj.split('/').pop() }}</a>
              <span v-else>未上传文件</span>
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog title="上传规划文件" :visible.sync="dialogVisible" width="30%">
      <FileUpload @file-uploaded="handleFileUploaded" v-model="form.ghwj" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload2'
import { checkPermi, checkRole } from "@/utils/permission";

export default {
  components: { FileUpload },
  props: {
    size: {
      type: String,
      default: ''
    },
    planInfo: {
      type: Object,
      required: true
    },
    xmId: {
      type: Number,
      required: true
    },
    action: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      isEditing: false,
      dialogVisible: false,
      form: {
        id: 0,
        xmId: 0,
        zydmj: 0,
        rjl: 0,
        zjzmj: 0,
        bzcjzmj: 0,
        jrjljzmj: 0,
        jzmd: 0,
        ldl: 0,
        jzds: 0,
        dsjzmj: 0,
        dxjzmj: 0,
        zgjzcs: 0,
        zgjzgd: 0,
        jdctcw: 0,
        fjdctcw: 0,
        fhdj: null,
        ghwj: '',
        createBy: '',
        createId: 0,
        createTime: null,
        updateBy: '',
        updateId: 0,
        updateTime: null,
      },
      rules: {

      }
    };
  },
  watch: {
    planInfo: {
      handler(newVal) {
        this.form = { ...newVal };
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    checkPermi,
    checkRole,
    /** 导出 */
    handleExport() {
      this.download(
        "/gysl/planInformation/export",
        {
          xmId: this.form.xmId
        },
        `规划信息${new Date().getTime()}.xlsx`
      );
    },
    // 打开编辑模式
    edit() {
      this.isEditing = true;
      document.addEventListener('click', this.handleClickOutside);
    },
    // 保存数据
    save() {
      if (this.validateForm()) {
        const formData = this.prepareFormData(this.form);
        // 触发事件，将数据传递给父组件
        this.$emit('update-data', formData);
        this.isEditing = false;
        document.removeEventListener('click', this.handleClickOutside);
      }
    },
    // 手动验证表单
    validateForm() {
      const requiredFields = ['zydmj', 'rjl', 'zjzmj', 'jzds', 'zgjzcs', 'fhdj'];
      for (const field of requiredFields) {
        if (!this.form[field]) {
          this.$message.error('请填写完整的规划信息');
          return false;
        }
      }
      return true;
    },
    // 准备表单数据
    prepareFormData(formData) {
      return {
        ...formData,
        createBy: '',
        createId: 0,
        createTime: '',
        updateBy: '',
        updateId: 0,
        updateTime: ''
      };
    },
    // 显示文件上传弹窗
    showFileDialog() {
      this.dialogVisible = true;
    },
    // 处理文件上传结果
    handleFileUploaded(fileName) {
      this.form.ghwj = `${this.baseUrl}/${fileName}`;
    },
    handleClickOutside(event) {
      const saveButton = this.$el.querySelector('.el-button:contains("保存")');
      if (!this.$el.contains(event.target) || saveButton.contains(event.target)) {
        return;
      }
    }
  }
};
</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;
}

.content {
  padding: 1rem;
  display: flex;
}

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

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

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

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

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