<template>
  <el-dialog v-model="visible" title="编辑方案" width="560px" class="edit-scheme-dialog" :close-on-click-modal="false"
    @closed="onClosed" align-center append-to-body>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="96px" class="edit-scheme-form">
      <el-form-item label="方案名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入方案名称" clearable />
      </el-form-item>

      <el-form-item label="适用作物：" required>
        <div class="crop-selects">
          <el-form-item prop="category" class="crop-selects__item">
            <el-select v-model="form.category" placeholder="请选择品类" clearable>
              <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="variety" class="crop-selects__item">
            <el-select v-model="form.variety" placeholder="请选择品种" clearable>
              <el-option v-for="item in varietyOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
      </el-form-item>

      <el-form-item label="土壤类型：" prop="soilType">
        <div class="field-block">
          <el-radio-group v-model="form.soilType">
            <el-radio v-for="item in soilTypeOptions" :key="item.value" :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
          <span class="field-hint">
            遥感监测到某某农场的土壤类型为
            <span class="field-hint__value">{{ soilTypeLabel }}</span>
          </span>
        </div>
      </el-form-item>

      <el-form-item label="ph值：" prop="phValue">
        <div class="field-block">
          <el-radio-group v-model="form.phValue">
            <el-radio v-for="item in phOptions" :key="item.value" :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
          <span class="field-hint">
            遥感监测到某某农场的土壤ph值为
            <span class="field-hint__value">{{ phValueLabel }}</span>
          </span>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="warning" @click="onConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, reactive, ref, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue", "confirm"]);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

const formRef = ref(null);

const categoryOptions = [
  { label: "荔枝", value: "lychee" },
  { label: "水稻", value: "rice" },
];

const varietyOptions = [
  { label: "妃子笑", value: "feizixiao" },
  { label: "桂味", value: "guiwei" },
];

const soilTypeOptions = [
  { label: "沙土", value: "sand" },
  { label: "壤土", value: "loam" },
  { label: "粘土", value: "clay" },
];

const phOptions = [
  { label: "强酸", value: "strong_acid" },
  { label: "酸性", value: "acid" },
  { label: "中性", value: "neutral" },
  { label: "碱性", value: "alkaline" },
  { label: "强碱", value: "strong_alkaline" },
];

const createDefaultForm = () => ({
  name: "",
  category: "",
  variety: "",
  soilType: "sand",
  phValue: "strong_acid",
});

const form = reactive(createDefaultForm());

const rules = {
  name: [{ required: true, message: "请输入方案名称", trigger: "blur" }],
  category: [{ required: true, message: "请选择品类", trigger: "change" }],
  variety: [{ required: true, message: "请选择品种", trigger: "change" }],
  soilType: [{ required: true, message: "请选择土壤类型", trigger: "change" }],
  phValue: [{ required: true, message: "请选择ph值", trigger: "change" }],
};

const soilTypeLabel = computed(
  () => soilTypeOptions.find((item) => item.value === form.soilType)?.label || "-"
);

const phValueLabel = computed(
  () => phOptions.find((item) => item.value === form.phValue)?.label || "-"
);

const resetForm = () => {
  Object.assign(form, createDefaultForm());
  formRef.value?.clearValidate?.();
};

watch(
  () => props.modelValue,
  (val) => {
    if (val) resetForm();
  }
);

const onClosed = () => {
  resetForm();
};

const onConfirm = async () => {
  if (!formRef.value) return;
  try {
    await formRef.value.validate();
    emit("confirm", { ...form });
    visible.value = false;
  } catch {
    // validation failed
  }
};
</script>

<style lang="scss" scoped>
.edit-scheme-dialog {
  .edit-scheme-form {
    // 抵消 .el-dialog 默认 padding(16px)，让 border 通栏
    margin: 0 -16px;
    padding: 10px 16px 0;
    border-top: 1px solid #e5e6eb;
    box-sizing: border-box;

    :deep(.el-form-item__label) {
      color: #1d2129;
    }

    .crop-selects {
      display: flex;
      gap: 10px;
      width: 100%;

      &__item {
        flex: 1;
      }
    }

    .field-block {
      display: flex;
      flex-direction: column;
    }

    .field-hint {
      font-size: 13px;
      color: #86909c;

      &__value {
        color: $warning-color;
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 -16px;
    padding: 12px 16px 0;
    border-top: 1px solid #e5e6eb;
    box-sizing: border-box;
  }
}
</style>
