<template>
  <div class="detail-container">
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-position="right"
      label-width="150px"
      style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
    >
      <el-form-item label="所属服务站：">
        <span>{{ yhzData.rawName }}</span>
      </el-form-item>
      <el-form-item label="物资名称：" prop="wzmc">
        <el-input
          maxlength="20"
          show-word-limit
          v-model="form.material.wzmc"
        ></el-input>
      </el-form-item>
      <el-form-item label="数量与单位：" required>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item prop="sl">
              <el-input
                v-model.number="form.material.sl"
                type="number"
                placeholder="请输入数量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="dw">
              <el-select
                v-model="form.material.dw"
                filterable
                allow-create
                clearable
                placeholder="选择单位"
              >
                <el-option label="个" value="个"></el-option>
                <el-option label="包" value="包"></el-option>
                <el-option label="盒" value="盒"></el-option>
                <el-option label="桶" value="桶"></el-option>
                <el-option label="箱" value="箱"></el-option>
                <el-option label="袋" value="袋"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="设备经度：">
        <span>{{ yhzData.jd }}</span>
      </el-form-item>
      <el-form-item label="设备纬度：">
        <span>{{ yhzData.wd }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>
    
    <script setup>
import { ref, computed } from "vue";
const formRef = ref(null);
defineExpose({ formRef });

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

const rules = computed(() => {
  return {
    wzmc: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.material.wzmc) {
            callback();
          } else {
            callback(new Error("请输入物资名称"));
          }
        },
        trigger: "blur",
      },
    ],
    sl: [
      {
        required: true,
        type: "number",
        validator: (rule, value, callback) => {
          if (props.form.material.sl) {
            callback();
          } else {
            callback(new Error("请输入数量"));
          }
        },
        trigger: "blur",
      },
    ],
    dw: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.material.dw) {
            callback();
          } else {
            callback(new Error("请选择或输入单位"));
          }
        },
        trigger: "change",
      },
    ],
  };
});
</script>
    
    <style>
</style>