<template>
  <div class="detail-container">
    <el-form ref="formRef" :model="form" label-position="right" label-width="150px"
      style="max-height: 60vh; overflow-y: auto; padding-right: 50px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="区县名称" prop="区县名称">
            <el-input disabled v-model="form.districtName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路线编码" prop="路线编码">
            <el-input disabled v-model="form.routeNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="实施里程" prop="实施里程">
            <el-input-number disabled v-model="form.implementMileage" :controls="false">
              <template #suffix>
                <span>公里</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="塌方及损失" prop="塌方及损失">
            <el-input-number disabled v-model="form.earthworkLoss" :controls="false">
              <template #suffix>
                <span>方/万元</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="起点桩号" prop="起点桩号">
            <el-input disabled v-model="form.startStakeNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="止点桩号" prop="止点桩号">
            <el-input disabled v-model="form.endStakeNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="路况位置" prop="路况位置">
            <el-input disabled v-model="form.roadLocation"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="阻断点小地名" prop="阻断点小地名">
            <el-input disabled v-model="form.blockedPointName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="灾害类型" prop="灾害类型">
            <el-input disabled v-model="form.disasterType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预估费用" prop="预估费用">
            <el-input-number disabled v-model="form.estimatedCost" :controls="false">
              <template #suffix>
                <span>万元</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="技术等级" prop="技术等级">
            <el-select v-model="form.technicalGrade">
              <el-option
                v-for="item in [{ value: '三级', label: '三级' }, { value: '二级', label: '二级' }, { value: '一级', label: '一级' }]"
                :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资金来源" prop="资金来源">
            <el-input v-model="form.fundingSource"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="处置灾毁处数" prop="处置灾毁处数">
            <el-input-number v-model="form.disposalCount" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="已完工处数" prop="已完工处数">
            <el-input-number v-model="form.completedCount" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="总投资" prop="总投资">
            <el-input-number v-model="form.totalInvestment" :controls="false">
              <template #suffix>
                <span>万元</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目费用类型" prop="项目费用类型">
            <el-radio-group v-model="form.projectExpenseType">
              <el-radio value="自费重修">自费重修</el-radio>
              <el-radio value="申报重修">申报重修</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { request } from "@/utils/request";
const formRef = ref(null);
defineExpose({ formRef });

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
});

const rules = computed(() => {
  return {
    技术等级: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.technicalGrade) {
            callback();
          } else {
            callback(new Error("请选择技术等级"));
          }
        },
        trigger: "blur",
      },
    ],
    资金来源: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.fundingSource) {
            callback();
          } else {
            callback(new Error("请填写资金来源"));
          }
        },
        trigger: "blur",
      },
    ],
    处置灾毁处数: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.disposalCount) {
            callback();
          } else {
            callback(new Error("请填写处置灾毁处数"));
          }
        },
        trigger: "blur",
      },
    ],
    已完工处数: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.completedCount) {
            callback();
          } else {
            callback(new Error("请填写已完工处数"));
          }
        },
        trigger: "blur",
      },
    ],
    总投资: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.totalInvestment) {
            callback();
          } else {
            callback(new Error("请填写总投资数"));
          }
        },
        trigger: "blur",
      },
    ],
    项目费用类型: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.projectExpenseType) {
            callback();
          } else {
            callback(new Error("请选择项目费用类型"));
          }
        },
        trigger: "blur",
      },
    ],
  };
});
</script>

<style></style>