<template>
  <div>
    <van-nav-bar
      title="养护计划"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >

    </van-nav-bar>
    <div class="body">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>

      <div class="listcontent" :style="`height:${bodyheight}px`">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div
              style="padding: 10px 10px; padding-bottom: 0"
              v-for="item in maintainlist"
              @click="gotodetail(item)"
            >
              <div class="item">
                <div>
                  <div class="header">
                    <div>
                      计划名称:{{
                        alldevices.filter((i) => i.id === item.facilitiesId)[0]
                          ?.ext1.tz_ss_name  ?? "-"
                      }}养护计划
                    </div>
                    <div class="time">{{ item.maintainTime }}</div>
                  </div>
                  <div class="body">
                    <div class="status">
                      {{
                        maintain_status.filter(
                          (i) =>
                            i.value.toString() ===
                            (item.status ?? "").toString()
                        )[0]?.label ?? "-"
                      }}
                    </div>

                    <van-row>
                      <van-col span="24"
                        ><div>
                          计划类型:{{
                            maintain_type.filter(
                              (i) =>
                                i.value.toString() ===
                                item.maintainType.toString()
                            )[0]?.label ?? "-"
                          }}
                        </div></van-col
                      >
                      <van-col span="12">
                        <div>计划开始:{{ item.ext1.task.datestart }}</div></van-col
                      >
                      <van-col span="12"
                        ><div>计划结束:{{ item.ext1.task.dateend }}</div></van-col
                      >
                      <van-col span="24"
                        ><div>养护单位: {{ item.maintainUnit }}</div></van-col
                      >
                    </van-row>
                    <van-row v-if="item.status == 2">
                        <van-col span="24">
                         <div style="text-align:right">
                            <van-button type="primary" size="small" @click.stop="gotoxcfk(item)">现场反馈</van-button>
                          </div>

                        </van-col>

                    </van-row>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, ref, onMounted, watch, computed } from "vue";
import { useDict } from "@/utils/dict";
import router from "../../../router";
import { listFacilities } from "@/api/system/facilities";
import {
  listMaintain,
  getMaintain,
  delMaintain,
  addMaintain,
  updateMaintain,
} from "@/api/system/maintain";

const maintainlist = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const { maintain_status, maintain_type } = useDict(
  "maintain_status",
  "maintain_type"
);
const store = useStore();
const getters = computed(() => store.getters);


const bodyheight = ref(0);
bodyheight.value = document.body.clientHeight - 48 - 46;
const value1 = ref(0);
const value2 = ref("0");
const option1 = [
  { text: "我的", value: 0 },
  { text: "全部", value: 1 },
];
const option2 = computed(() => {
  return [{ text: "全部", value: "0" }].concat(
    maintain_status.value.map((i) => {
      return { text: i.label, value: i.value };
    })
  );
});
const alldevices = ref([]);
listFacilities({ pageSize: 2300 }).then((res) => {
  alldevices.value = res.rows.map((i) => {
      i.ext1 = JSON.parse(i.ext1);
      return i;
    });
});

const pagec = ref(1);
const onLoad = () => {
  if (refreshing.value) {
    maintainlist.value = [];
    refreshing.value = false;
    pagec.value = 1;
  }
  var p = { pageSize: 10, pageNum: pagec.value++ };
  if (value2.value !== "0") {
    p["status"] = parseInt(value2.value);
  }
  if(value1.value == '0'){
    p["params"] = {};
    p.params['userId'] = getters.value.userId;
  }
  listMaintain(p).then((res) => {
    // finished.value = true;
    loading.value = false;
    maintainlist.value = maintainlist.value.concat(res.rows.map((i) => {
      i.ext1 = JSON.parse(i.ext1);
      return i;
    }));
    if (res.total <= maintainlist.value.length) {
      finished.value = true;
    }
  });
  console.log("----");
};

watch(
  () => value2.value,
  () => {
    refreshing.value = true;
    onLoad();
  }
);
watch(
  () => value1.value,
  () => {
    refreshing.value = true;
    onLoad();
  }
);

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  loading.value = true;
  refreshing.value = true;
  onLoad();
};
const gotoxcfk = (item) => {
  router.push(`/mb/maintain/feedback/${item.id}`)
}

const onClickLeft = () => {
  router.back();
};
const onClickRight = () => {
  alert("add");
};
const gotodetail = (item) => {
  // router.push(`/mb/maintain/detail/${item.id}`);
};
</script>

<style lang="scss">
body {
  position: fixed;
  width: 100%;
  top: -1px;
}

.listcontent {
  overflow-y: auto;

  .item {
    background: #fff;
    border: 1px solid rgba(209, 217, 221, 0.4);
    padding: 10px 15px;
    font-size: 10px;
    border-radius: 5px;
    .header {
      color: #3d6dc5;
      font-weight: bold;
      position: relative;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(209, 217, 221, 0.4);
      .time {
        position: absolute;
        right: 0;
        top: 0;
        color: #283247;
        opacity: 0.7;
        font-weight: 400;
      }
    }
    .body {
      padding-top: 10px;
      padding-bottom: 10px;
      position: relative;
      color: #283247;
      opacity: 0.8;
      .status {
        position: absolute;
        top: 10px;
        color: #dc2828;
        right: 0px;
        font-weight: bold;
      }
      .van-col {
        margin: 3px 0;
      }
    }
  }
}
</style>
