<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="detailData.mc" />
    </van-cell-group>
    <van-notice-bar mode="link" v-if="pendingConfirmList.length" @click="handleConfirm">{{ pendingConfirmList.length
      }}个设备待确认</van-notice-bar>

    <div class="content">
      <van-cell-group>
        <van-cell v-for="(item, index) in equipmentList" :key="index" :title="item.sbmc" is-link
          :label="`设备类型: ` + item.sblx" :to="{
            name: 'EquipDetail',
            params: {
              data: encodeURIComponent(
                JSON.stringify({
                  equipmentInfo: item,
                  yhzInfo: detailData,
                  isConfirm: false,
                })
              ),
            },
          }">
          <template #value>
            <span :class="[
              'status-tag',
              `status-` +
              (item.sbzt === '完好'
                ? 'good'
                : item.sbzt === '损坏'
                  ? 'warning'
                  : 'danger'),
            ]">{{ item.sbzt }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <van-button type="primary" class="add-btn" icon="plus" @click="handleAddDevice">
      添加设备
    </van-button>

    <!-- 添加设备弹窗 -->
    <van-popup :show="showPopup" position="bottom" closeable close-on-click-overlay :style="{ height: '80%' }"
      @close="onPopupClose">
      <!-- 表单部分 -->
      <van-form class="device-form" label-align="left" colon>
        <h3>设备信息</h3>

        <!-- 设备名称 -->
        <van-field v-model="form.equipment.sbmc" label="设备名称" placeholder="请输入设备名称"
          :rules="[{ required: true, message: '请填写设备名称' }]" maxlength="20" show-word-limit>
        </van-field>

        <!-- 设备大类 -->
        <van-field v-model="form.equipment.sbdl" is-link arrow-direction="down" label="设备大类" placeholder="请选择设备大类"
          @click="showCategoryPicker = true" ref="categoryField" />

        <!-- 设备类型 -->
        <van-field v-model="form.equipment.sblx" is-link arrow-direction="down" label="设备类型" placeholder="请选择设备类型"
          @click="showTypePicker = true" ref="typeField" />

        <!-- 设备编号 -->
        <van-field v-model="form.equipment.sbbh" label="设备编号" placeholder="请输入设备编号"
          :rules="[{ required: true, message: '请填写设备编号' }]" />

        <!-- 设备型号 -->
        <van-field v-model="form.equipment.sbxh" label="设备型号" placeholder="请输入设备型号"
          :rules="[{ required: true, message: '请填写设备型号' }]" />

        <!-- 设备经度 -->
        <van-field v-model="form.equipment.jd" label="设备经度" placeholder="请输入设备经度" />

        <!-- 设备纬度 -->
        <van-field v-model="form.equipment.wd" label="设备纬度" placeholder="请输入设备纬度" />

        <!-- 设备管理员 -->
        <van-field v-model="form.equipment.glry" is-link arrow-direction="down" readonly label="管理人员"
          placeholder="请选择设备管理人员" @click="showAdminPicker = true" />

        <!-- 操作员 -->
        <van-field v-model="form.equipment.czy" is-link arrow-direction="down" readonly label="操作员" placeholder="请选择操作员"
          @click="showOperatorPicker = true" />

        <!-- 购买费用 -->
        <van-field v-model="form.equipment.gmfy" type="number" label="购买费用(万元)" placeholder="请输入购买费用" />

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

        <!-- 设备状态 -->
        <van-field v-model="form.equipment.sbzt" is-link arrow-direction="down" readonly label="设备状态"
          placeholder="请选择设备状态" @click="showStatusPicker = true" />

        <!-- 生产厂家 -->
        <van-field v-model="form.equipment.sccj" label="生产厂家" placeholder="请输入生产厂家" />

        <!-- 是否应急设备 -->
        <van-field v-model="form.equipment.sfyjsb" is-link arrow-direction="down" readonly label="是否应急设备"
          placeholder="请选择" @click="showEmergencyPicker = true" />

        <!-- 是否纳入市级补助范围 -->
        <van-field v-model="form.equipment.sfnrsjbz" is-link arrow-direction="down" readonly label="是否纳入市级补助范围"
          placeholder="请选择" @click="showSubsidyPicker = true" />

        <!-- 辐射范围 -->
        <van-field v-model="form.equipment.fsfw" label="辐射范围" placeholder="请输入辐射范围" />

        <!-- 备注 -->
        <van-field v-model="form.equipment.remark" label="备注" placeholder="请输入备注" type="textarea" />

        <van-field label="设备照片" center>
          <template #input>
            <van-uploader v-model="fileList" @delete="handleDelete" name="photos" :file-list="fileList"
              :file-type="['image/jpeg', 'image/png']" :after-read="afterRead" multiple :max-count="6" />
          </template>
        </van-field>

        <!-- 选择器弹窗 -->
        <!-- 设备大类弹窗 -->
        <van-popup :show="showCategoryPicker" round position="bottom" close-on-click-overlay
          @close="showCategoryPicker = false">
          <van-picker title="选择设备大类" :columns="categoryOptions" @confirm="onCategoryConfirm"
            @cancel="showCategoryPicker = false" />
        </van-popup>

        <!-- 设备类型弹窗 -->
        <van-popup :show="showTypePicker" round position="bottom" close-on-click-overlay
          @close="showTypePicker = false">
          <van-picker title="选择设备类型" :columns="typeOptions" @confirm="onTypeConfirm" @cancel="showTypePicker = false" />
        </van-popup>

        <!-- 设备管理员弹窗 -->
        <van-popup :show="showAdminPicker" round position="bottom" close-on-click-overlay
          @close="showAdminPicker = false">
          <van-picker title="选择设备管理员" :columns="adminOptions" @confirm="onAdminConfirm"
            @cancel="showAdminPicker = false" />
        </van-popup>

        <!-- 操作员弹窗 -->
        <van-popup :show="showOperatorPicker" round position="bottom" close-on-click-overlay
          @close="showOperatorPicker = false">
          <van-picker title="选择操作员" :columns="operatorOptions" @confirm="operatorConfirm"
            @cancel="showOperatorPicker = false" />
        </van-popup>

        <!-- 购置日期弹窗 -->
        <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-popup :show="showStatusPicker" round position="bottom" close-on-click-overlay
          @close="showStatusPicker = false">
          <van-picker title="选择设备状态" :columns="statusOptions" @confirm="onStatusConfirm"
            @cancel="showStatusPicker = false" />
        </van-popup>

        <!-- 是否应急设备弹窗 -->
        <van-popup :show="showEmergencyPicker" round position="bottom" close-on-click-overlay
          @close="showEmergencyPicker = false">
          <van-picker title="是否应急设备" :columns="emergencyOptions" @confirm="onEmergencyConfirm"
            @cancel="showEmergencyPicker = false" />
        </van-popup>
        <!-- 是否纳入市级补助范围弹窗 -->
        <van-popup :show="showSubsidyPicker" round position="bottom" close-on-click-overlay
          @close="showSubsidyPicker = false">
          <van-picker title="是否纳入市级补助" :columns="subsidyOptions" @confirm="onSubsidyConfirm"
            @cancel="showSubsidyPicker = 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 { 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 detailData = ref({}); // 养护站详情数据
const searchValue = ref(""); // 搜索框输入值
const equipmentList = ref([]);
const pendingConfirmList = ref([]); // 待确认的设备列表

const INIT_FORM = {
  equipment: {
    qxmc: "",
    sbbh: "",
    sbdl: "",
    sbmc: "",
    sblx: "",
    sbxh: "",
    sbwz: "",
    jd: "",
    wd: "",
    glry: "",
    glryid: "",
    czy: "",
    czyid: "",
    gzrq: "",
    gmfy: "",
    sbzt: "",
    sccj: "",
    sfyjsb: "",
    sfnrsjbz: "",
    fsfw: "",
    yhzid: "",
  },
  photos: [],
}; // 表单初始值
const form = reactive({ ...INIT_FORM }); // 表单

// 获取养护站详情数据
onMounted(() => {
  detailData.value = JSON.parse(decodeURIComponent(route.params.data));
  console.log("detailData", toRaw(detailData.value));
  getEquipmentList();
  getPendingConfirmList();
});

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

// 获取待确认的设备
const getPendingConfirmList = async (sbmc) => {
  try {
    const data = {
      yhzid: detailData.value.id,
      sbmc,
      pageNum: 1,
      pageSize: 9999,
    };
    const res = await request({
      url: "/snow-ops-platform/yjsb/pendingConfirmList",
      method: "get",
      params: data,
    });
    if (res.code === "00000") {
      pendingConfirmList.value = res.data.records;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({
      type: "fail",
      message: error.message,
    });
    console.log("error", error);
  }
};

// 跳转到待确认设备页
const handleConfirm = () => {
  if (detailData.value.isManager) {
    router.push({
      name: "EquipConfirm",
      params: {
        data: encodeURIComponent(JSON.stringify(detailData.value)),
      },
    });
  } else{
    handleMessage();
  }
};

// 弹出提示
const handleMessage = () => {
  showToast({
    type: "fail",
    message: "您不是站长,无法确认设备",
  });
};

// 获取养护站设备列表
const getEquipmentList = async (sbmc) => {
  try {
    const yhzid = detailData.value.id;
    if (!yhzid) {
      return;
    }
    const data = {
      yhzid: detailData.value.id,
      sbmc: sbmc,
      pageNum: 1,
      pageSize: 9999,
      requestSource: 'app', // web: Web端请求，app：移动端请求
    };
    const res = await request({
      url: "/snow-ops-platform/yjsb/list",
      method: "get",
      params: data,
    });
    if (res.code && res.code === "00000") {
      equipmentList.value = res.data.records;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    console.log(error);
    showToast({
      type: "error",
      message: error.message || "获取设备列表失败",
    });
  }
};

const showPopup = ref(false); // 控制弹出层显示隐藏

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

// 获取养护站人员列表
const getPersonList = async () => {
  try {
    const data = {
      pageNum: 1,
      pageSize: 9999,
      yhzid: detailData.value.id,
    };
    const res = await request({
      url: "/snow-ops-platform/yhzry/list",
      method: "get",
      params: data,
    });
    if (res.code === "00000") {
      adminOptions.value = res.data.records.map((item) => ({
        text: item.xm,
        value: item.userId,
      }));
      operatorOptions.value = res.data.records.map((item) => ({
        text: item.xm,
        value: item.userId,
      }));
    } else {
      throw new Error("人员信息获取失败");
    }
  } catch (error) {
    console.log(error);
    showToast({
      type: "fail",
      message: error.message,
    });
  }
};

const handleAddDevice = async () => {
  await getPersonList();
  form.equipment.sfnrsjbz = "否";
  form.equipment.sfyjsb = "否";
  showPopup.value = true;
};

const onPopupClose = () => {
  showPopup.value = false;
};

const showCategoryPicker = ref(false);
const showTypePicker = ref(false);

const categoryField = ref(null);
const typeField = ref(null);

const categoryOptions = [
  { text: "自定义", value: "自定义" },
  { text: "大中修工程设备", value: "大中修工程设备" },
  { text: "小修保养设备", value: "小修保养设备" },
  { text: "交通工具", value: "交通工具" },
];
const typeOptions = [
  { text: "自定义", value: "自定义" },
  { text: "装载机", value: "装载机" },
  { text: "路面修补设备", value: "路面修补设备" },
  { text: "清扫车", value: "清扫车" },
  { text: "压路机", value: "压路机" },
  { text: "洒水车", value: "洒水车" },
  { text: "挖掘机", value: "挖掘机" },
  { text: "运输货车", value: "运输货车" },
  { text: "灌缝设备", value: "灌缝设备" },
  { text: "应急抢险车", value: "应急抢险车" },
  { text: "应急巡查车", value: "应急巡查车" },
  { text: "高空作业车", value: "高空作业车" },
  { text: "除雪设备", value: "除雪设备" },
  { text: "照明设备", value: "照明设备" },
  { text: "护栏维修设备", value: "护栏维修设备" },
  { text: "标线设备", value: "标线设备" },
  { text: "绿化修剪设备", value: "绿化修剪设备" },
  { text: "桥梁维护设备", value: "桥梁维护设备" },
  { text: "发电机", value: "发电机" },
  { text: "沥青洒布车", value: "沥青洒布车" },
  { text: "拖车", value: "拖车" },
  { text: "摊铺机", value: "摊铺机" },
  { text: "抽水设备", value: "抽水设备" },
  { text: "沥青拌和站", value: "沥青拌和站" },
  { text: "水泥拌和机", value: "水泥拌和机" },
  { text: "平地机", value: "平地机" },
  { text: "除雾设备", value: "除雾设备" },
  { text: "无人机", value: "无人机" },
  { text: "推土机", value: "推土机" },
  { text: "稀浆封层设备", value: "稀浆封层设备" },
];

const onCategoryConfirm = (value) => {
  if (value.selectedValues[0] === "自定义") {
    showCategoryPicker.value = false;
    categoryField.value.focus();
  } else {
    form.equipment.sbdl = value.selectedValues[0];
    showCategoryPicker.value = false;
  }
};
const onTypeConfirm = (value) => {
  if (value.selectedValues[0] === "自定义") {
    showTypePicker.value = false;
    typeField.value.focus();
  } else {
    form.equipment.sblx = value.selectedValues[0];
    showTypePicker.value = false;
  }
};

// 设备管理员
const showAdminPicker = ref(false);
const adminOptions = ref([]);
const onAdminConfirm = (value) => {
  const selectedOption = adminOptions.value.find(
    (opt) => opt.value === value.selectedValues[0]
  );
  if (selectedOption) {
    form.equipment.glry = selectedOption.text;
    form.equipment.glryid = selectedOption.value;
  }
  showAdminPicker.value = false;
};

// 操作员
const showOperatorPicker = ref(false);
const operatorOptions = ref([]);
const operatorConfirm = (value) => {
  const selectedOption = operatorOptions.value.find(
    (opt) => opt.value === value.selectedValues[0]
  );
  if (selectedOption) {
    form.equipment.czy = selectedOption.text;
    form.equipment.czyid = selectedOption.value;
  }
  showOperatorPicker.value = false;
};

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

// 设备状态相关
const showStatusPicker = ref(false);
const statusOptions = [
  { text: "完好", value: "完好" },
  { text: "损坏", value: "损坏" },
  { text: "报废", value: "报废" },
];
const onStatusConfirm = (value) => {
  form.equipment.sbzt = value.selectedValues[0];
  showStatusPicker.value = false;
};

// 是否应急设备相关
const showEmergencyPicker = ref(false);
const emergencyOptions = [
  { text: "是", value: "是" },
  { text: "否", value: "否" },
];
const onEmergencyConfirm = (value) => {
  form.equipment.sfyjsb = value.selectedValues[0];
  showEmergencyPicker.value = false;
};

// 是否纳入市级补助相关
const showSubsidyPicker = ref(false);
const subsidyOptions = [
  { text: "是", value: "是" },
  { text: "否", value: "否" },
];
const onSubsidyConfirm = (value) => {
  form.equipment.sfnrsjbz = value.selectedValues[0];
  showSubsidyPicker.value = false;
};

// 上传附件相关
const fileList = ref([]);
// 文件删除
const handleDelete = (file) => {
  if (file.serverUrl) {
    const index = form.photos.findIndex((p) => p.photoUrl === file.serverUrl);
    if (index !== -1) {
      form.photos.splice(index, 1);
    }
  }
};

// 文件上传
const afterRead = async (file) => {
  try {
    const toast = showLoadingToast({
      message: "上传中...",
      forbidClick: true,
      duration: 0, // 设置为0表示不会自动关闭
    });
    const formData = new FormData();
    formData.append("file", file.file);
    const res = await request({
      url: "/snow-ops-platform/file/upload",
      method: "post",
      data: formData,
    });
    toast.close();
    if (res.code === "00000") {
      form.photos.push({ photoUrl: res.data });
      const index = fileList.value.findIndex((f) => f.file === file.file);
      if (index !== -1) {
        fileList.value[index].serverUrl = res.data;
      }

      console.log("form.photos", toRaw(form.photos));
      console.log("fileList.value", fileList.value);
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    toast.close();
    showToast({
      type: "fail",
      message: error.message,
    });
  }
};

const handleSubmit = async () => {
  try {
    showLoadingToast({
      message: "正在保存",
      forbidClick: true,
      loadingType: "spinner",
    });
    form.equipment.yhzid = detailData.value.id;
    form.equipment.qxmc = detailData.value.qxmc;
    // console.log('detailData', toRaw(detailData.value))
    console.log("form", toRaw(form));
    const res = await request({
      url: "/snow-ops-platform/yjsb/add",
      method: "post",
      data: toRaw(form),
    });
    if (res.code && res.code === "00000") {
      showToast({
        type: "success",
        message: "新增成功",
      });
      // 保留需要的数据
      const keepData = {
        yhzid: form.yhzid,
        qxmc: form.qxmc,
      };
      // 重置表单数据
      Object.keys(INIT_FORM).forEach((key) => {
        if (!["yhzid", "qxmc"].includes(key)) {
          form[key] = INIT_FORM[key];
        }
      });
      // 恢复保留的数据
      Object.assign(form, keepData);

      onPopupClose();
      getEquipmentList(searchValue.value);
      getPendingConfirmList();
    } else {
      console.log("res", res);
      throw new Error(res.message);
    }
  } catch (error) {
    console.log(error);
    showToast({
      type: "error",
      message: error.message || "新增失败",
    });
  }
};
</script>

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

.content {
  padding: 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;
}

.device-form {
  padding: 16px 16px 80px 16px;
}
</style>
