<template>
  <div class="home">
    <van-nav-bar title="物资管理" fixed left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <van-search
      shape="round"
      v-model="searchValue"
      :show-action="false"
      placeholder="请输入物资名称"
    />
    <van-cell-group>
      <van-cell title="当前站点" :value="yhzDetail.mc" />
    </van-cell-group>

    <div class="content">
      <van-cell-group>
        <van-cell
          v-for="(item, index) in materialList"
          :key="index"
          :title="item.wzmc"
          is-link
          :label="`余量：${item.sl} (${item.dw})`"
          :to="{
            name: 'MaterialDetail',
            params: {
              data: encodeURIComponent(
                JSON.stringify({
                  yhzDetail: yhzDetail,
                  material: item,
                })
              ),
            },
          }"
        >
        </van-cell>
      </van-cell-group>
    </div>

    <van-button type="primary" class="add-btn" icon="plus" @click="handleAdd">
      添加物资
    </van-button>

    <!-- 弹出层 -->
    <van-popup
      :show="showPopup"
      position="bottom"
      closeable
      close-on-click-overlay
      :style="{ height: '60%' }"
      @close="onPopupClose"
    >
      <van-form class="materialAddForm" label-align="left" colon>
        <h3>设备信息</h3>

        <!-- 物资名称 -->
        <van-field
          v-model="form.wzmc"
          label="物资名称"
          placeholder="请输入物资名称"
          :rules="[{ required: true, message: '请填写物资名称' }]"
        >
          <template #button>
            <span class="counter">{{ form.wzmc.length }}/20</span>
          </template>
        </van-field>

        <!-- 数量 -->
        <van-field
          v-model="form.sl"
          label="数量"
          placeholder="请输入数量"
          type="number"
          :rules="[{ required: true, message: '请填写物资数量' }]"
        />

        <!-- 单位 -->
        <van-field v-model="form.dw" label="单位" placeholder="物资单位" />

        <!-- 负责人 -->
        <van-field
          v-model="form.fzr"
          label="负责人"
          placeholder="请输入负责人"
        />

        <!-- 联系电话 -->
        <van-field
          v-model="form.lxdh"
          label="联系电话"
          placeholder="请输入联系电话"
        />

        <!-- 存放地点 -->
        <van-field
          v-model="form.cfdd"
          label="存放地点"
          placeholder="请输入存放地点"
        />

        <!-- 入库单位 -->
        <van-field
          v-model="form.rkdw"
          label="入库单位"
          placeholder="请输入入库单位"
        />

        <!-- 入库日期 -->
        <van-field
          v-model="form.rkrq"
          is-link
          arrow-direction="down"
          readonly
          label="入库日期"
          placeholder="请选择日期"
          @click="showTimePicker = true"
        />

        <!-- 入库日期弹窗 -->
        <van-popup
          :show="showTimePicker"
          round
          position="bottom"
          close-on-click-overlay
          @close="showTimePicker = false"
        >
          <van-date-picker
            v-model="currentDate"
            title="选择入库日期"
            @confirm="onDateConfirm"
            @cancel="showTimePicker = false"
          />
        </van-popup>
      </van-form>
      <div
        style="
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 16px;
          background: white;
          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
          z-index: 100;
        "
      >
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          @click="handleSubmit"
        >
          保存
        </van-button>
      </div>
    </van-popup>
  </div>
</template>
    
    <script setup>
import "vant/es/toast/style";
import "vant/es/popup/style";
import { ref, onMounted, reactive, toRaw, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showToast, showLoadingToast } from "vant";
import { request } from "../../../../shared/utils/request";

const router = useRouter();
const route = useRoute();
const searchValue = ref(""); // 搜索框输入值
const showPopup = ref(false); // 控制弹出层显示隐藏
const yhzDetail = ref({}); // 养护站详情数据
const materialList = ref([]); // 物资列表数据
const INIT_FORM = {
  rid: "",
  rkrq: "", // 入库日期
  rkdw: "", // 入库单位
  sl: 0, // 数量
  dw: "", // 单位
  cfdd: "", // 存放地点
  fzr: "", // 负责人
  lxdh: "", // 联系电话
  ye: "", // 余量
  qxmc: "", // 区县名称
  wzmc: "", // 物资名称
  fzrid: "", // 负责人id
  yhzid: "", // 养护站id
};
const form = reactive({ ...INIT_FORM }); // 表单

// 根据养护站rid获取物资列表
const getMaterialList = async (wzmc) => {
  try {
    const yhzid = yhzDetail.value.id;
    if (!yhzid) {
      return;
    }
    const data = {
      yhzid,
      wzmc,
      paageNum: 1,
      paageSize: 9999,
    };
    const res = await request({
      url: "/snow-ops-platform/yjwz/list",
      method: "GET",
      params: data,
    });
    if (res.code && res.code === "00000") {
      materialList.value = res.data.records;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({
      type: "error",
      message: error.message || "获取物资列表失败",
    });
  }
};

// 组件挂载时获取数据
onMounted(() => {
  yhzDetail.value = JSON.parse(decodeURIComponent(route.params.data));
  console.log("yhzDetail", toRaw(yhzDetail.value));
  getMaterialList();
});

// 购置日期
const showTimePicker = ref(false);
const currentDate = ref([
  new Date().getFullYear(),
  new Date().getMonth() + 1,
  new Date().getDate(),
]);
const onDateConfirm = ({ selectedValues }) => {
  form.rkrq = selectedValues.join("-");
  showTimePicker.value = false;
};

const handleSubmit = async () => {
  try {
    showLoadingToast({
      message: "正在保存",
      forbidClick: true,
      loadingType: "spinner",
    });
    form.yhzid = yhzDetail.value.id;
    form.qxmc = yhzDetail.value.qxmc;
    console.log("form", toRaw(form));
    const res = await request({
      url: "/snow-ops-platform/yjwz/add",
      method: "post",
      data: toRaw(form),
    });
    if (res.code && res.code === "00000") {
      showToast({
        type: "success",
        message: "新增成功",
      });
      onPopupClose();
      Object.assign(form, { ...INIT_FORM });
      getMaterialList(searchValue.value);
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    console.log(error);
    showToast({
      type: "error",
      message: error.message || "新增失败",
    });
  }
};

watch(
  () => searchValue.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      getMaterialList(newVal);
    }
  }
);

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

const handleAdd = () => {
  showPopup.value = true;
};

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

.content {
  padding: 16px 16px 80px 16px;
}

.content .van-cell-group .van-cell {
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.add-btn {
  position: fixed;
  bottom: 20px;
  left: 16px;
  right: 16px;
  width: calc(100% - 32px);
  margin: 0 auto;
  border-radius: 24px;
  font-size: 16px;
  height: 44px;
  z-index: 999;
}

.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;
}

.materialAddForm {
  padding: 16px 16px 80px 16px;
}
</style>
    