<template>
  <el-dialog v-model="visible" :title="detail.name || '农事详情'" width="720px" class="farm-work-detail-dialog" align-center
    append-to-body>
    <div class="detail-body">
      <div class="detail-row">
        <span class="detail-row__label">农事类型：</span>
        <div class="type-tags">
          <span v-for="(item, idx) in detail.types" :key="idx" class="type-tag">{{ item }}</span>
        </div>
      </div>

      <div class="detail-row">
        <span class="detail-row__label">触发条件：</span>
        <span class="detail-row__value">{{ detail.trigger }}</span>
      </div>

      <div class="detail-row detail-row--top">
        <span class="detail-row__label">药肥处方：</span>
        <div class="prescription-list">
          <div v-for="(item, idx) in detail.prescriptions" :key="idx" class="prescription-card">
            <div class="prescription-card__title">{{ item.category }}</div>
            <div class="prescription-card__desc">{{ item.desc }}</div>
            <div class="prescription-card__freq">{{ item.freq }}</div>
          </div>
        </div>
      </div>

      <div class="section-title">执行规程</div>

      <div class="detail-row">
        <span class="detail-row__label">执行窗口：</span>
        <span class="detail-row__value">{{ detail.execute.window }}</span>
      </div>

      <div class="detail-row">
        <span class="detail-row__label">执行设备：</span>
        <div class="device-inline">
          <div class="device-inline__item">
            <span class="device-inline__label">主要设备</span>
            <span
              v-for="(item, idx) in detail.execute.primaryDevices"
              :key="`p-${idx}`"
              class="type-tag"
            >{{ item }}</span>
          </div>
          <div class="device-inline__item">
            <span class="device-inline__label">备用设备</span>
            <span
              v-for="(item, idx) in detail.execute.backupDevices"
              :key="`b-${idx}`"
              class="type-tag"
            >{{ item }}</span>
          </div>
        </div>
      </div>

      <div class="detail-row">
        <span class="detail-row__label">注意事项：</span>
        <span class="detail-row__value">{{ detail.execute.notes }}</span>
      </div>

      <div class="section-title">复核规程</div>

      <div class="detail-row">
        <span class="detail-row__label">复核时间：</span>
        <span class="detail-row__value">
          执行后 <span class="days">{{ detail.review.days }}</span> 天
        </span>
      </div>

      <div class="detail-row">
        <span class="detail-row__label">复核标准：</span>
        <span class="detail-row__value">{{ detail.review.standard }}</span>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed } from "vue";

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

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

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

const detail = computed(() => {
  const row = props.data || {};
  return {
    name: row.name || "播前基肥",
    types: row.types || ["标准农事", "日常营养", "水肥类"],
    trigger: row.trigger || "-",
    prescriptions: row.prescription
      ? [
        {
          category: row.prescription.category || "营养类",
          desc: row.prescription.desc || "-",
          freq: row.prescription.freq || "-",
        },
        {
          category: row.prescription.category || "营养类",
          desc: row.prescription.desc || "-",
          freq: row.prescription.freq || "-",
        },
      ]
      : [
        { category: "营养类", desc: "具体处方具体处方具体处方", freq: "频次频次频次频次频次" },
        { category: "营养类", desc: "具体处方具体处方具体处方", freq: "频次频次频次频次频次" },
      ],
    execute: {
      window: row.execute?.window || "生育期起始-生育期结束",
      primaryDevices: row.execute?.primaryDevices || ["农机设备一"],
      backupDevices: row.execute?.backupDevices || ["农机设备一", "农机设备一"],
      notes: row.execute?.notes || "-",
    },
    review: {
      days: row.review?.days ?? 7,
      standard: row.review?.standard || "-",
    },
  };
});
</script>

<style lang="scss" scoped>
.detail-body {
  margin: 0 -16px;
  padding: 20px 26px 20px;
  border-top: 1px solid #e5e6eb;

  .detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;

    &--top {
      align-items: flex-start;
    }

    &__label {
      color: #1D2129;
    }

    &__value {
      flex: 1;
      color: #000;
    }

    .type-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .type-tag {
      display: inline-block;
      padding: 3px 6px;
      border-radius: 2px;
      font-size: 12px;
      color: #FB8E33;
      background: rgba(251, 142, 51, 0.1);
    }

    .prescription-list {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;

      .prescription-card {
        padding: 6px;
        border: .5px solid #E3E3E3;
        border-radius: 5px;

        &__title {
          display: inline-block;
          margin-bottom: 5px;
          padding: 2px 6px;
          border-radius: 2px;
          font-size: 12px;
          color: #4C4C4C;
          background: rgba(125, 125, 125, 0.1);
        }

        &__freq {
          margin-top: 2px;
          font-size: 12px;
          color: #979797;
        }
      }
    }

    .device-inline {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
      min-width: 0;

      &__item {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }

      &__label {
        color: #86909c;
        font-size: 13px;
        line-height: 1;
      }
    }

    .days {
      color: $warning-color;
      font-weight: 500;
    }
  }

  .section-title {
    padding-top: 15px;
    margin-bottom: 16px;
    font-weight: 500;
    color: $warning-color;
  }
}
</style>
