<template>
  <div>
    <van-pull-refresh v-model="refreshing" class="list" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :finished-text="nodata ? '' : '没有更多了'"
      >
        <div style="height: 20px"></div>
        <div class="card" v-for="item in list" :key="item.appointguid">
          <p class="createtime">{{ item.creatdate }}</p>
          <div class="cell">
            <p class="label">预约人</p>
            <p class="value">{{ userInfo.realName }}</p>
          </div>
          <div class="cell">
            <p class="label">预约中心</p>
            <p class="value">{{ item.centername }}</p>
          </div>
          <div class="cell">
            <p class="label">预约部门</p>
            <p class="value">{{ item.ouname }}</p>
          </div>
          <div class="cell">
            <p class="label">预约事项名称</p>
            <p class="value">{{ item.taskname }}</p>
          </div>
          <div class="cell">
            <p class="label">预约时间</p>
            <p class="value">{{ item.appointtime }}</p>
          </div>
          <div class="cell">
            <p class="label">预约状态</p>
            <van-button
              v-if="item.status === '0'"
              class="button"
              color="#EB4E3F"
              plain
              @click="cancel(item)"
              >取消预约</van-button
            >
            <p v-if="item.status === '1'" class="value">已取号</p>
            <p v-if="item.status === '2'" class="value">过号</p>
            <p v-if="item.status === '3'" class="value">已取消</p>
          </div>
        </div>
        <no-data v-if="nodata" text="暂无记录~"></no-data>
      </van-list>
    </van-pull-refresh>
    <div class="tips">
      温馨提示：请您在预约时间段内，持本人身份证至大厅现场取号，办理预约事项。超过预约时间段未取号的，本次预约将失效。3次预约成功未正常取号办理的将暂停。
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { PullRefresh, List, Button } from "vant";
import { getOrderList, orderCancle } from "@/api/govservice";
import NoData from "@/components/NoData";

Vue.use(PullRefresh).use(List).use(Button);

export default {
  components: { NoData },
  data() {
    return {
      refreshing: false,
      loading: false,
      finished: true,
      nodata: true,
      list: [],
      userInfo: {},
    };
  },
  methods: {
    back() {
      if (window.android !== undefined) {
        window.android.backHome();
      } else {
        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
      }
    },
    onRefresh() {
      if (!this.userInfo.idCardNo) {
        this.$dialog
          .confirm({
            message: "请进入“我的”完成实名认证！",
            showCancelButton: false,
          })
          .then(() => {
            this.back();
          });
        return;
      }
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        accountguid: this.userInfo.userId,
        currentpage: 0,
        taskname: "",
        pagesize: 20,
        type: "1",
        mobile: this.userInfo.mobileNo,
      };
      getOrderList(params).then((res) => {
        this.$toast.clear();
        this.refreshing = false;
        this.currentpage = 0;
        const records = res.custom.appointdatelist;
        if (records.length <= 0) {
          this.list = [];
          this.finished = this.nodata = true;
        } else if (records.length < 20) {
          this.list = records;
          this.finished = true;
          this.nodata = false;
        } else {
          this.list = records;
          this.finished = this.nodata = false;
        }
      });
    },
    onLoad() {
      if (!this.userInfo.userId) return;
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        accountguid: this.userInfo.userId,
        currentpage: this.currentpage + 1,
        taskname: "",
        pagesize: 20,
        type: "1",
        mobile: this.userInfo.mobileNo,
      };
      getOrderList(params).then((res) => {
        this.$toast.clear();
        this.loading = false;
        this.currentpage = this.currentpage + 1;
        const records = res.custom.appointdatelist;
        if (records.length <= 0) {
          this.finished = true;
        } else {
          this.finished = false;
          this.list = this.list.concat(records);
        }
      });
    },
    cancel(item) {
      this.$dialog
        .confirm({
          message: `${this.userInfo.realName}，您确认取消预约${item.taskname}事项吗？`,
        })
        .then(() => {
          this.$toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            message: "加载中...",
          });
          orderCancle({ appointguid: item.appointguid }).then((res) => {
            this.$toast.clear();
            if (res.status.code === 200) {
              this.$toast("取消预约成功");
              this.onRefresh();
            } else {
              this.$toast(res.status.text);
            }
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo();
        sessionStorage.setItem("ZJCD-UserInfo", res);
        this.userInfo = JSON.parse(res);
        this.onRefresh();
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        this.$toast("请先登录镇合意app");
        // this.userInfo = {
        //   mobileNo: 17372670270,
        //   userId: 37393,
        //   userName: "孙辉",
        //   realName: "孙涵",
        //   idCardNo: "K6btm7WPGZj8eLFjTy1a1+P7Z0zFoM/r",
        // };
        // sessionStorage.setItem("ZJCD-UserInfo", JSON.stringify(this.userInfo));
      }
    },
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
      this.onRefresh();
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res) || {};
    if (!this.userInfo.idCardNo) {
      this.JSBgetUserInfo();
    } else {
      this.onRefresh();
    }
  },
};
</script>

<style lang="stylus" scoped>
.list {
  height calc(100vh - 296px)
  overflow-y auto

  .card {
    margin 0 30px 20px
    padding 20px 30px
    background #fff

    .createtime {
      font-size: 28px;
      color: #666666;
      margin-bottom 40px;
    }
    .cell {
      margin-top 30px;
      display flex;
      align-items center;
      justify-content space-between;

      .label {
        width 200px;
        font-size: 28px;
        color: #666666;
      }
      .value {
        width calc(100% - 200px)
        word-break: break-all
        text-align right
        font-size: 28px;
        color: #333333;
      }
      .button {
        height: 48px;
        font-size: 26px;
      }
    }
  }
}
.tips {
  margin 0 30px 20px;
  line-height: 34px;
  font-size: 24px;
  color: #999999;
}
</style>
