<template>
  <div>
    <div class="search">
      <div class="cell">
        <label for="label" class="label">公积金账号</label>
        <input
          id="account"
          v-model="spcode"
          type="number"
          placeholder="请输入公积金账号"
          class="date"
        />
      </div>
      <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="date"
          :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="date"
          :max-date="maxDate"
          :min-date="minDate"
          @confirm="onEndConfirm"
          @cancel="showEnd = false"
        />
      </van-popup>
      <van-button class="button" type="primary" block size="small" @click="init"
        >查询</van-button
      >
    </div>
    <div class="list">
      <div class="card" v-for="(item, index) in list" :key="index">
        <div class="cell">
          <p class="label">汇缴年月</p>
          <p class="text">{{ item.hjny }}</p>
        </div>
        <div class="cell">
          <p class="label">收入</p>
          <p class="text">{{ item.sr }}</p>
        </div>
        <div class="cell">
          <p class="label">支出</p>
          <p class="text">{{ item.zc }}</p>
        </div>
        <div class="cell">
          <p class="label">缴纳日期</p>
          <p class="text">{{ item.qrrq }}</p>
        </div>
        <div class="cell">
          <p class="label">业务类型</p>
          <p class="text">{{ item.cllx }}</p>
        </div>
      </div>
      <no-data v-if="nodata" text="您当前还没有公积金缴纳信息"></no-data>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DatetimePicker, Popup, Button } from "vant";
import { getAccount, fundDet } from "@/api/fund";
import NoData from "@/components/NoData";
import { encryptByDES } from "@/utils/utils";

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

export default {
  components: { NoData },
  data() {
    return {
      spcode: null, // 公积金账号
      beginDate: "",
      endDate: "",
      showBegin: false,
      showEnd: false,
      maxDate: new Date(),
      minDate: new Date(1990, 0, 1),
      nodata: false,
      list: [],
    };
  },
  methods: {
    initAccount(idCard) {
      console.log(idCard);
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      getAccount({ idCard }).then((res) => {
        console.log("公积金缴纳明细---", res);
        this.$toast.clear();
        this.spcode = res.spcode;
      });
    },
    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;
        let date = value.getDate();
        date = date > 10 ? date : "0" + date;
        return year + "" + month + date;
      } else {
        return "";
      }
    },
    init() {
      if (!this.spcode) {
        this.$toast("请输入公积金账号!");
        return;
      }
      if (this.beginDate && this.endDate) {
        if (this.beginDate > this.endDate) {
          this.$toast("开始时间不可大于结束时间!");
          return;
        }
      }
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      const spcode = encryptByDES(this.spcode, "MnuYbhGv");
      fundDet({
        spcode: spcode,
        beginTime: this.formatter(this.beginDate),
        endTime: this.formatter(this.endDate),
      })
        .then((res) => {
          this.$toast.clear();
          if (res.data.total > 0) {
            this.list = res.data.list.acc_info.reverse();
            console.log(this.list);
          } else {
            this.list = [];
            this.nodata = true;
          }
        })
        .catch(() => {
          this.nodata = true;
        });
    },
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    let idCard = JSON.parse(res).idCardNo;
    if (idCard) {
      this.initAccount(idCard.toUpperCase());
    }
  },
};
</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
  }
}
.list {
  height calc(100vh - 380px)
  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>
