<template>
  <div class="my-scheme">
    <!-- 方案切换 -->
    <div class="scheme-tabs">
      <div v-for="item in schemeList" :key="item.id" class="scheme-tab"
        :class="{ 'is-active': activeSchemeId === item.id }" @click="activeSchemeId = item.id">
        <span class="scheme-tab__name">{{ item.name }}</span>
        <el-icon class="scheme-tab__edit" @click.stop="onRenameScheme(item)">
          <Edit />
        </el-icon>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-wrap">
      <el-table :data="tableData" border class="scheme-table" :header-cell-style="headerCellStyle"
        :cell-style="{ verticalAlign: 'top' }">
        <el-table-column prop="name" label="农事名称" min-width="110" fixed />

        <el-table-column label="农事类型" min-width="120">
          <template #default="{ row }">
            <div class="type-tags">
              <span v-for="(item, idx) in row.types" :key="idx" class="type-tag">{{ item }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="trigger" label="触发条件" min-width="160" />

        <el-table-column label="药肥处方" min-width="220">
          <template #default="{ row }">
            <div class="prescription">
              <div class="prescription__title">{{ row.prescription.category }}</div>
              <div class="prescription__desc">{{ row.prescription.desc }}</div>
              <div class="prescription__freq">{{ row.prescription.freq }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="执行窗口" align="center">
          <el-table-column label="执行窗口" min-width="140" align="center">
            <template #default="{ row }">
              <div class="execute-window">{{ row.execute.window }}</div>
            </template>
          </el-table-column>
          <el-table-column label="执行设备" min-width="140">
            <template #default="{ row }">
              <div class="device-groups">
                <div class="device-group">
                  <div class="device-group__label">主要设备:</div>
                  <div class="device-group__tags">
                    <span
                      v-for="(item, idx) in row.execute.primaryDevices"
                      :key="`primary-${idx}`"
                      class="type-tag"
                    >{{ item }}</span>
                  </div>
                </div>
                <div class="device-group">
                  <div class="device-group__label">备用设备:</div>
                  <div class="device-group__tags">
                    <span
                      v-for="(item, idx) in row.execute.backupDevices"
                      :key="`backup-${idx}`"
                      class="type-tag"
                    >{{ item }}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="注意事项" min-width="160" prop="execute.notes" />
        </el-table-column>

        <el-table-column label="复核规程" align="center">
          <el-table-column label="复核时间" min-width="120">
            <template #default="{ row }">
              <span class="review-time">
                执行后 <em class="review-time__num">{{ row.review.days }}</em> 天
              </span>
            </template>
          </el-table-column>
          <el-table-column label="复核标准" prop="review.standard" min-width="160" />
        </el-table-column>

        <el-table-column label="操作" width="190" fixed="right">
          <template #default="{ row }">
            <div class="row-ops">
              <el-button class="row-ops__btn" @click="onEditRow(row)">编辑</el-button>
              <el-button class="row-ops__btn" @click="onDetailRow(row)">详情</el-button>
              <el-button class="row-ops__btn row-ops__btn--danger" type="danger" @click="onDeleteRow(row)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 底部操作 -->
    <div class="page-footer">
      <el-button type="warning" plain @click="onCopyNew">复制为新的方案</el-button>
      <el-button type="warning" @click="onSave">保存方案</el-button>
    </div>

    <FarmWorkEditDialog
      v-model="editVisible"
      :data="currentRow"
      @submit="onEditSubmit"
    />
    <FarmWorkDetailDialog v-model="detailVisible" :data="currentRow" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import FarmWorkEditDialog from "./FarmWorkEditDialog.vue";
import FarmWorkDetailDialog from "./FarmWorkDetailDialog.vue";

const emit = defineEmits(["edit-scheme"]);

const headerCellStyle = {
  background: "#F5F5F5",
  color: "#535353",
  fontWeight: 400,
};

const schemeList = ref([
  { id: 1, name: "方案一" },
  { id: 2, name: "方案二" },
  { id: 3, name: "方案二" },
  { id: 4, name: "方案二" },
]);
const activeSchemeId = ref(1);
const editVisible = ref(false);
const detailVisible = ref(false);
const currentRow = ref(null);

const placeholderTrigger =
  "触发条件条件触发条件触发条件条件触发条件触发条件条件触发条件触发条件条件触发条件触发条件条件触发条件";
const placeholderNotes =
  "注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项";
const placeholderStandard =
  "复核标准标准标准标准复核标准标准标准标准复核标准标准标准标准复核标准标准标准标准";

const createRow = () => ({
  name: "播前基肥",
  types: ["标准农事", "日常营养", "水肥类"],
  trigger: placeholderTrigger,
  prescription: {
    category: "营养类",
    desc: "具体处方具体处方具体处方",
    freq: "频次频次频次频次频次",
  },
  execute: {
    window: "生育起始-生育结束",
    primaryDevices: ["农机设备一"],
    backupDevices: ["农机设备一", "农机设备一"],
    notes: placeholderNotes,
  },
  review: {
    days: 7,
    standard: placeholderStandard,
  },
});

const tableData = ref([createRow(), createRow(), createRow()]);

const onRenameScheme = (item) => {
  emit("edit-scheme", item);
};

const onEditRow = (row) => {
  currentRow.value = row;
  editVisible.value = true;
};

const onDetailRow = (row) => {
  currentRow.value = row;
  detailVisible.value = true;
};

const onEditSubmit = () => {
  // 后续接入保存接口
};

const onDeleteRow = async (row) => {
  try {
    await ElMessageBox.confirm(`确认删除「${row.name}」？`, "提示", {
      type: "warning",
      confirmButtonText: "删除",
      cancelButtonText: "取消",
    });
    ElMessage.success("已删除");
  } catch {
    // cancelled
  }
};

const onCopyNew = () => {
  ElMessage.success("已复制为新的方案");
};

const onSave = () => {
  ElMessage.success("方案已保存");
};
</script>

<style lang="scss" scoped>
$primary: $warning-color;
$primary-light: color.mix(#fff, $warning-color, 90%);
$text: rgba(0, 0, 0, 0.6);

.my-scheme {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;

  .scheme-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 0;

    .scheme-tab {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 10px;
      border: 1px solid transparent;
      border-radius: 3px;
      background: #F3F3F3;
      color: $text;
      cursor: pointer;

      &:hover {
        border-color: $primary;
        background: $primary-light;
        color: $primary;
      }

      &.is-active {
        border-color: $primary;
        background: $primary-light;
        color: $primary;
      }

      &__edit {
        font-size: 14px;
      }
    }
  }

  .table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;

    .scheme-table {
      color: #000;

      .type-tags {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }

      .type-tag {
        padding: 1px 6px;
        border-radius: 4px;
        font-size: 12px;
        color: #2199f8;
        background: rgba(33, 153, 248, 0.1);
      }

      .prescription {
        &__title {
          display: inline-block;
          width: fit-content;
          color: #4c4c4c;
          margin-bottom: 2px;
          background: rgba(125, 125, 125, 0.1);
          padding: 0 6px;
          border-radius: 2px;
        }

        &__desc {
          font-size: 13px;
          line-height: 1.6;
        }

        &__freq {
          font-size: 12px;
          color: #86909c;
          line-height: 1.5;
        }
      }

      .device-groups {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .device-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;

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

        &__tags {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
        }
      }

      .execute-window {
        color: rgba(0, 0, 0, 0.4);
      }

      .review-time {
        color: #000;
        font-style: normal;

        &__num {
          color: $primary;
          font-style: normal;
          font-weight: 500;
        }
      }

      .row-ops {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        &__btn {
          margin: 0;
          height: 28px;
          padding: 0 10px;
          font-size: 13px;
          color: #4c4c4c;
          background: #fff;
          border: 1px solid #d2d2d2;
          border-radius: 2px;

          &:hover {
            color: $primary;
            border-color: rgba($primary, 0.45);
            background: rgba($primary, 0.06);
          }

          &--danger {
            color: #fff;
            background: #f56b6b;
            border-color: #f56b6b;

            &:hover {
              color: #fff;
              background: #f78989;
              border-color: #f78989;
            }
          }
        }
      }
    }
  }
}

.page-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 20px 10px 10px;
}
</style>
