<template>
  <div class="home">
    <van-nav-bar title="设备管理" fixed left-arrow @click-left="onClickLeft" />

    <van-cell-group>
      <van-cell title="当前站点" value="李家坝仓库" />
    </van-cell-group>

    <div class="content">
      <van-cell-group>
        <van-cell
          title="设备信息"
          style="font-size: 18px; font-weight: bold; line-height: inherit"
        >
          <template #value>
            <span :class="['status-tag', equipmentInfo.statusClass]">{{
              equipmentInfo.status
            }}</span>
          </template>
        </van-cell>
        <van-cell :title="'设备名称： ' + equipmentInfo.title"> </van-cell>
        <van-cell :title="'设备大类： 小修保养设备'"> </van-cell>
        <van-cell :title="equipmentInfo.label"> </van-cell>
        <van-cell :title="'设备编号： 002'"> </van-cell>
        <van-cell :title="'设备型号： E32、PS2600、专业版1949'"> </van-cell>
        <van-cell :title="'设备位置： 丰都'"> </van-cell>
        <van-cell :title="'设备经纬度： '">
          <template #label>
            <span>设备经度: 108.41763025<br />设备纬度: 31.89751472</span>
          </template>
        </van-cell>
        <van-cell :title="'设备管理人员 张三四'"> </van-cell>
        <van-cell :title="'操作员： 李思思'"> </van-cell>
        <van-cell :title="'购置日期： 2025/10/10'"> </van-cell>
        <van-cell :title="'购买费用（万元）： 29'"> </van-cell>
        <van-cell :title="'应急设备： 否'"> </van-cell>
        <van-cell :title="'纳入市级补助范围： 否'"> </van-cell>
        <van-cell
          :title="'辐射范围： G212兰州-龙邦 K1292+460至K1302+250 S544歌石路K44+0至K67+800'"
        >
        </van-cell>
        <van-cell :title="'上传人： 张三三'"> </van-cell>
        <van-cell :title="'上传时间： 2025/10/10 10:00:00'"> </van-cell>
        <van-cell :title="'生产商： 富士重工业株式会社群马制作所'"> </van-cell>
        <van-cell :title="'所属服务站： 李家坝仓库'"> </van-cell>
        <van-cell :title="'损坏原因： 坏了'"> </van-cell>
        <van-cell :title="'报废原因： 发动机报废'"> </van-cell>
      </van-cell-group>
    </div>

    <van-tabbar>
      <van-tabbar-item>
        <van-popover
          placement="top-start"
          :show="showPopover"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <van-button type="primary" style="width: 80px; border-radius: 10px">
              更多
            </van-button>
          </template>
        </van-popover>
      </van-tabbar-item>
      <van-tabbar-item
        ><template #default>
          <van-button
            type="warning"
            style="width: 80px; border-radius: 10px"
            @click="onBrokenPopupOpen"
          >
            损坏
          </van-button>
        </template></van-tabbar-item
      >
      <van-tabbar-item
        ><template #default>
          <van-button type="primary" style="width: 80px; border-radius: 10px">
            编辑
          </van-button>
        </template></van-tabbar-item
      >
      <van-tabbar-item
        ><template #default>
          <van-button
            type="primary"
            style="width: 80px; border-radius: 10px"
            @click="onRemarkPopupOpen"
          >
            备注
          </van-button>
        </template></van-tabbar-item
      >
    </van-tabbar>

    <van-popup
      :show="showRemarkPopup"
      position="bottom"
      closeable
      close-on-click-overlay
      :style="{ height: '20%' }"
      @close="onRemarkPopupClose"
    >
    </van-popup>
    <van-popup
      :show="showDeletePopup"
      position="bottom"
      closeable
      close-on-click-overlay
      :style="{ height: '20%' }"
      @close="onDeletePopupClose"
    >
      <div
        style="
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 16px;
        "
      >
        <h1
          style="
            margin: 0 0 20px 0;
            font-size: 18px;
            color: #333;
            text-align: center;
          "
        >
          确认删除？
        </h1>

        <div style="display: flex; gap: 20px; width: 100%">
          <van-button
            type="default"
            style="flex: 1; border-radius: 8px"
            @click="onDeletePopupClose"
          >
            取消
          </van-button>
          <van-button
            type="primary"
            style="flex: 1; border-radius: 8px"
            @click="onDeleteConfirm"
          >
            确认
          </van-button>
        </div>
      </div>
    </van-popup>

    <van-popup
      :show="showBrokenPopup"
      position="bottom"
      closeable
      close-on-click-overlay
      :style="{ height: '20%' }"
      @close="onBrokenPopupClose"
    >
    </van-popup>
    <van-popup
      :show="show报废Popup"
      position="bottom"
      closeable
      close-on-click-overlay
      :style="{ height: '30%' }"
      @close="on报废PopupClose"
    >
      <div
        style="
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 16px;
        "
      >
        <h1
          style="
            margin: 0 0 12px 0;
            font-size: 18px;
            color: #333;
            text-align: center;
          "
        >
          报废
        </h1>

        <van-field
          v-model="scrapReason"
          placeholder="请填写原因"
          style="
            width: 100%;
            margin-bottom: 16px;
            border-radius: 8px;
            background: #f7f8fa;
          "
        />

        <div style="display: flex; gap: 20px; width: 100%">
          <van-button
            type="default"
            style="flex: 1; border-radius: 8px"
            @click="on报废PopupClose"
          >
            取消
          </van-button>
          <van-button
            type="primary"
            style="flex: 1; border-radius: 8px"
            @click="on报废Confirm"
          >
            确认
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
  
  <script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";

const router = useRouter();
const route = useRoute();

const showPopover = ref(false);
const actions = [{ text: "删除" }, { text: "报废" }];
const onSelect = (action) => {
  if (action.text === "删除") {
    showDeletePopup.value = true;
  }
  if (action.text === "报废") {
    show报废Popup.value = true;
  }
};
const equipmentInfo = ref({
  title: "",
  label: "",
  status: "",
  statusClass: "",
});
onMounted(() => {
  equipmentInfo.value = JSON.parse(decodeURIComponent(route.params.data));
  console.log("equipmentInfo", equipmentInfo.value);
});

const onClickLeft = () => {
  router.push("/EquipManage");
};

const show报废Popup = ref(false);
const scrapReason = ref(''); // 报废原因
const on报废PopupClose = () => {
  show报废Popup.value = false;
  scrapReason.value = '';
};
const on报废Confirm = () => {
  show报废Popup.value = false;
  scrapReason.value = '';
};

const showBrokenPopup = ref(false);
const onBrokenPopupOpen = () => {
  showBrokenPopup.value = true;
};
const onBrokenPopupClose = () => {
  showBrokenPopup.value = false;
};

const showDeletePopup = ref(false);
const onDeletePopupClose = () => {
  showDeletePopup.value = false;
};
const onDeleteConfirm = () => {
  showDeletePopup.value = false;
};

const showRemarkPopup = ref(false);
const onRemarkPopupOpen = () => {
  showRemarkPopup.value = true;
};
const onRemarkPopupClose = () => {
  showRemarkPopup.value = false;
};
</script>
  
  <style scoped>
.home {
  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
}

.content {
  padding: 16px;
}

.grid {
  margin-top: 16px;
}

.btn {
  margin-top: 24px;
}

.status-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  color: white;
  font-size: 12px;
}
.status-good {
  background-color: #07c160;
}
.status-warning {
  background-color: #ff976a;
}
.status-danger {
  background-color: #ee0a24;
}
</style>
  