<template>
  <!-- 主容器div -->
  <div class="addEdit-block">
    <!-- ElementUI表单组件 -->
    <el-form
      <!-- 表单类名 -->
      class="detail-form-content"
      <!-- 表单引用标识 -->
      ref="ruleForm"
      <!-- 数据模型绑定 -->
      :model="ruleForm"
      <!-- 验证规则 -->
      :rules="rules"
      <!-- 标签宽度 -->
      label-width="80px"
      <!-- 动态背景色 -->
      :style="{backgroundColor:addEditForm.addEditBoxColor}"
    >
      <!-- ElementUI布局行 -->
      <el-row>
        <!-- 布局列(合同编号) -->
        <el-col :span="12">
          <!-- 编辑模式输入项 -->
          <el-form-item class="input" v-if="type!='info'" label="合同编号" prop="hetongbianhao">
            <!-- 可编辑输入框 -->
            <el-input v-model="ruleForm.hetongbianhao"
                placeholder="合同编号" clearable  :readonly="ro.hetongbianhao"></el-input>
          </el-form-item>
          <!-- 查看模式展示 -->
          <div v-else>
            <el-form-item class="input" label="合同编号" prop="hetongbianhao">
              <!-- 只读展示 -->
              <el-input v-model="ruleForm.hetongbianhao"
                placeholder="合同编号" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>

        <!-- 房屋名称字段(结构同上) -->
        <el-col :span="12">
          <el-form-item class="input" v-if="type!='info'" label="房屋名称" prop="fangwumingcheng">
            <el-input v-model="ruleForm.fangwumingcheng"
                placeholder="房屋名称" clearable  :readonly="ro.fangwumingcheng"></el-input>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="房屋名称" prop="fangwumingcheng">
              <el-input v-model="ruleForm.fangwumingcheng"
                placeholder="房屋名称" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>

        <!-- 其他字段按相同结构省略... -->

        <!-- 图片上传区域 -->
        <el-col :span="24">
          <!-- 上传控件 -->
          <el-form-item class="upload" v-if="type!='info' && !ro.tupian" label="图片" prop="tupian">
            <!-- 自定义上传组件 -->
            <file-upload
              tip="点击上传图片"
              action="file/upload"
              :limit="3"
              :multiple="true"
              :fileUrls="ruleForm.tupian?ruleForm.tupian:''"
              @change="tupianUploadChange"
            ></file-upload>
          </el-form-item>
          <!-- 图片预览 -->
          <div v-else>
            <el-form-item v-if="ruleForm.tupian" label="图片" prop="tupian">
              <!-- 循环显示图片 -->
              <img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.tupian.split(',')"
                :src="item" width="100" height="100">
            </el-form-item>
          </div>
        </el-col>

        <!-- 报修日期字段 -->
        <el-col :span="12">
          <el-form-item class="date" v-if="type!='info'" label="报修日期" prop="baoxiuriqi">
            <!-- 日期选择器 -->
            <el-date-picker
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              v-model="ruleForm.baoxiuriqi"
              type="date"
              placeholder="报修日期">
            </el-date-picker>
          </el-form-item>
          <!-- 只读展示 -->
          <div v-else>
            <el-form-item class="input" v-if="ruleForm.baoxiuriqi" label="报修日期" prop="baoxiuriqi">
              <el-input v-model="ruleForm.baoxiuriqi"
                placeholder="报修日期" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>

        <!-- 其他字段按相同结构省略... -->

      </el-row>

      <!-- 操作按钮组 -->
      <el-form-item class="btn">
        <!-- 提交按钮 -->
        <el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
        <!-- 取消按钮 -->
        <el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
        <!-- 返回按钮 -->
        <el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 导入验证工具函数
import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";
export default {
  data() {
    let self = this;
    // 身份证验证函数
    var validateIdCard = (rule, value, callback) => {
      if(!value){
        callback();
      } else if (!checkIdCard(value)) {
        callback(new Error("请输入正确的身份证号码"));
      } else {
        callback();
      }
    };
    // URL验证函数
    var validateUrl = (rule, value, callback) => {
      if(!value){
        callback();
      } else if (!isURL(value)) {
        callback(new Error("请输入正确的URL地址"));
      } else {
        callback();
      }
    };
    // 手机号验证函数
    var validateMobile = (rule, value, callback) => {
      if(!value){
        callback();
      } else if (!isMobile(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    // ...其他验证函数省略

    return {
      // 表单样式配置对象
      addEditForm: {"btnSaveFontColor":"#fff",...}, // 实际为完整样式对象
      id: '', // 记录ID
      type: '', // 操作类型
      ro:{ // 只读控制对象
        hetongbianhao : false,
        // ...其他字段只读状态
      },
      ruleForm: { // 表单数据对象
        hetongbianhao: '',
        // ...其他字段初始化
      },
      leixingOptions: [], // 下拉选项
      rules: { // 验证规则对象
        hetongbianhao: [],
        // ...其他字段规则
      }
    };
  },
  props: ["parent"], // 接收父组件参数
  computed: {}, // 计算属性
  created() { // 生命周期钩子
    this.addEditStyleChange()
    this.addEditUploadStyleChange()
  },
  methods: {
    // 文件下载方法
    download(file){
      window.open(`${file}`)
    },
    // 初始化方法
    init(id,type) {
      if (id) {
        this.id = id;
        this.type = type;
      }
      // 根据类型加载数据
      if(this.type=='info'||this.type=='else'){
        this.info(id);
      }else if(this.type=='cross'){
        // 处理跨表关联数据
      }
      // 获取用户信息
      this.$http({
        url: `${this.$storage.get('sessionTable')}/session`,
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var json = data.data;
        } else {
          this.$message.error(data.msg);
        }
      });
      // 设置下拉选项
      this.leixingOptions = "水工,电工,木工".split(',')
    },
    // 获取详情数据
    info(id) {
      this.$http({
        url: `fangwubaoxiu/info/${id}`,
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.ruleForm = data.data;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 表单提交方法
    onSubmit() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: `fangwubaoxiu/${!this.ruleForm.id ? "save" : "update"}`,
            method: "post",
            data: this.ruleForm
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.parent.showFlag = true;
                  this.parent.addOrUpdateFlag = false;
                  this.parent.fangwubaoxiuCrossAddOrUpdateFlag = false;
                  this.parent.search();
                  this.parent.contentStyleChange();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 获取UUID
    getUUID () {
      return new Date().getTime();
    },
    // 返回列表页
    back() {
      this.parent.showFlag = true;
      this.parent.addOrUpdateFlag = false;
      this.parent.fangwubaoxiuCrossAddOrUpdateFlag = false;
      this.parent.contentStyleChange();
    },
    // 图片上传回调
    tupianUploadChange(fileUrls) {
      this.ruleForm.tupian = fileUrls;
      this.addEditUploadStyleChange()
    },
    // 动态样式更新
    addEditStyleChange() {
      this.$nextTick(() => {
        // 通过DOM操作设置各表单控件样式
      })
    },
    // 上传控件样式更新
    addEditUploadStyleChange() {
      this.$nextTick(() => {
        // 设置上传组件样式
      })
    },
  }
};
</script>

<style lang="scss">
.editor{
  height: 500px; // 富文本高度
  & /deep/ .ql-container {
	  height: 310px; // 内容区高度
  }
}
.amap-wrapper {
  width: 100%; // 地图容器
  height: 500px;
}
.search-box {
  position: absolute; // 定位搜索框
}
.addEdit-block {
	margin: -10px; // 容器外边距
}
.detail-form-content {
	padding: 12px; // 表单内边距
}
.btn .el-button {
  padding: 0; // 按钮内边距
}
</style>
