<template>
  <div>
    <div class="search">
      <div class="cell" @click="showBegin = true">
        <label class="label">开始日期</label>
        <div class="date">{{ formatter(beginDate) }}</div>
      </div>
      <van-popup v-model="showBegin" position="bottom">
        <van-datetime-picker
          type="year-month"
          :max-date="maxDate"
          :min-date="minDate"
          @confirm="onBeginConfirm"
          @cancel="showBegin = false"
        />
      </van-popup>
      <div class="cell" @click="showEnd = true">
        <label class="label">结束日期</label>
        <div class="date">{{ formatter(endDate) }}</div>
      </div>
      <van-popup v-model="showEnd" position="bottom">
        <van-datetime-picker
          type="year-month"
          :max-date="maxDate"
          :min-date="minDate"
          @confirm="onEndConfirm"
          @cancel="showEnd = false"
        />
      </van-popup>
      <van-button
        class="button"
        type="primary"
        block
        size="small"
        @click="onRefresh"
        >查询</van-button
      >
    </div>
    <van-pull-refresh v-model="refreshing" class="content" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :finished-text="nodata ? '' : '没有更多了'"
      >
        <div class="card" v-for="item in list" :key="item.aae003">
          <div class="cell">
            <p class="label">收支年月</p>
            <p class="text">{{ item.aae207 }}</p>
          </div>
          <div class="cell">
            <p class="label">所属期</p>
            <p class="text">{{ item.aae003 }}</p>
          </div>
          <div class="cell">
            <p class="label">收支类型</p>
            <p class="text">{{ item.aaa097 }}</p>
          </div>
          <div class="cell">
            <p class="label">金额</p>
            <p class="text">{{ item.aae019 }}</p>
          </div>
          <div class="cell">
            <p class="label">缴费基数</p>
            <p class="text">{{ item.aae180 }}</p>
          </div>
        </div>
        <no-data v-if="nodata" text="您当前还没有养老收支记录"></no-data>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from "vue";
import { PullRefresh, List, DatetimePicker, Popup, Button } from "vant";
import NoData from "@/components/NoData";
import { social } from "@/api/insurance";

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

export default {
  components: { NoData },
  data() {
    return {
      userInfo: {},
      beginDate: "",
      endDate: "",
      showBegin: false,
      showEnd: false,
      maxDate: new Date(),
      minDate: new Date(2000, 0, 1),
      refreshing: false,
      loading: false,
      finished: true,
      nodata: false,
      cpage: 1,
      list: [],
    };
  },
  methods: {
    onBeginConfirm(value) {
      this.beginDate = value;
      this.showBegin = false;
    },
    onEndConfirm(value) {
      this.endDate = value;
      this.showEnd = false;
    },
    formatter(value) {
      if (value) {
        let year = value.getFullYear();
        let month = value.getMonth() + 1;
        month = month > 10 ? month : "0" + month;
        return year + "" + month;
      } else {
        return "";
      }
    },
    onRefresh() {
      this.init(1, "refresh");
    },
    onLoad() {
      this.init(this.cpage, "loading");
    },
    init(cpage, type) {
      if (this.beginDate && this.endDate) {
        if (this.beginDate > this.endDate) {
          this.$toast("开始时间不可大于结束时间!");
          return;
        }
      }
      let params = {
        aae135: this.userInfo.idCardNo,
        busCode: "WS-B0013",
        cpage: type === "refresh" ? cpage : parseInt(cpage) + 1,
        rows: 8,
        aae036s: this.formatter(this.beginDate),
        aae036e: this.formatter(this.endDate),
      };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      social(params).then((res) => {
        this.$toast.clear();
        this.loading = false;
        this.refreshing = false;
        if (res.data.head.rst.busiCode !== "0000") {
          this.$toast("未查询到相关养老收支信息");
          this.nodata = true;
          return;
        }
        const current = parseInt(res.data.data.dataSet.pageNum);
        const totalPage = parseInt(res.data.data.dataSet.pageCount);
        const records = res.data.data.dataSet.rowSet.row;
        if (current === 1 && !records.length) {
          this.cpage = 1;
          this.list = [];
          this.nodata = this.finished = true;
        } else {
          this.cpage = current;
          this.finished = current >= totalPage;
          if (type === "refresh") this.list = records;
          else this.list = this.list.concat(records);
          this.nodata = false;
        }
      });
    },
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo();
        this.verify(res);
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        this.$toast("请先登录镇合意app");
        // let userInfo = {
        //   mobileNo: 17372670270,
        //   userId: 37393,
        //   userName: "孙辉",
        //   realName: "孙涵",
        //   idCardNo: "K6btm7WPGZj8eLFjTy1a1+P7Z0zFoM/r",
        // };
        // this.verify(JSON.stringify(userInfo));
      }
    },
    getUserInfo(res) {
      this.verify(res);
    },
    verify(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      let userInfo = JSON.parse(res);
      if (!userInfo.idCardNo) {
        this.$dialog
          .confirm({
            message: "请进入“我的”完成实名认证！",
            showCancelButton: false,
          })
          .then(() => {
            this.back();
          });
        return;
      }
      this.userInfo = userInfo;
    },
    back() {
      if (window.android !== undefined) {
        window.android.backHome();
      } else {
        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
      }
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    let userInfo = JSON.parse(res);
    if (userInfo) {
      if (!userInfo.idCardNo) {
        this.$dialog
          .confirm({
            message: "请进入“我的”完成实名认证！",
            showCancelButton: false,
          })
          .then(() => {
            this.back();
          });
        return;
      }
      this.userInfo = userInfo;
    } else {
      this.JSBgetUserInfo();
    }
  },
};
</script>

<style lang="stylus" scoped>
.search {
  padding-bottom 20px;
  background #ffffff

  .cell {
    height 70px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;

    .label {
      width: 200px;
      font-size: 24px;
    }

    .date {
      flex: 1;
      font-size: 26px;
    }
  }
  .button {
    width 90%;
    margin 20px auto 0
  }
}
.content {
  height calc(100vh - 290px)
  overflow-y auto

  .card {
    margin: 20px 10px;
    background #fff
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19);

    .cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      margin: 0 20px;
      border-bottom: 1px solid #eee;
      .label {
        width: 35%;
        font-size: 24px;
        color: #333333;
      }
      .text {
        width: 62%;
        font-size: 24px;
        color: #333333;
      }
    }
    .cell:last-child {
      border-bottom: 0;
    }
  }
}
</style>
