<template>
  <div id="peeList" class="app">
    <van-sticky :offset-top="0">
      <van-nav-bar title="我的党支部" left-arrow @click-left="goBack" />
    </van-sticky>
    <van-sticky :offset-top="0">
      <van-row class="van-hairline--bottom head">
        <van-col span="8">时间</van-col>
        <van-col span="8">金额</van-col>
        <van-col span="8">操作</van-col>
      </van-row>
    </van-sticky>
    <van-row
      class="van-hairline--bottom"
      v-for="item in monthList"
      :key="item.id"
    >
      <van-col span="8" v-text="item.month"></van-col>
      <van-col span="8">{{ item.fee | money }}</van-col>
      <van-col span="8">
        <van-button
          type="danger"
          size="small"
          @click="() => toUrl(item)"
          v-if="!item.pay"
        >
          待缴纳
        </van-button>
        <van-button size="small" type="primary" disabled v-else>
          已缴纳
        </van-button>
      </van-col>
    </van-row>
    <van-popup round v-model="show" position="bottom">
      <div class="bot">
        <div class="title">确认支付 {{ select.fee | money }}元</div>
        <van-button type="primary" @click="toPay" round block>
          支 付
        </van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { activistList, Pay } from "@/api/account/account.js";
import {
  NavBar as vanNavBar,
  Col as vanCol,
  Row as vanRow,
  Button as vanButton,
  Popup as vanPopup,
  Sticky as vanSticky
} from "vant";
import "vant/lib/button/style";
import "vant/lib/popup/style";
import "vant/lib/col/style";
import "vant/lib/row/style";
import "vant/lib/nav-bar/style";
import "vant/lib/sticky/style";

export default {
  name: "app",
  data: function() {
    return {
      monthList: [],
      show: false,
      select: {}
    };
  },
  methods: {
    toUrl(item) {
      this.select = item;
      this.show = true;
    },
    goBack() {
      history.go(-1);
    },
    toPay() {
      Pay({
        month: this.select.month,
        fee: this.select.fee
      }).then(r => {
        console.log(r);
        activistList().then(res => {
          this.monthList = (res || []).sort((a, b) => {
            let aDate = new Date(a.month);
            let bDate = new Date(b.month);
            return bDate - aDate;
          });
          this.show = false;
        });
      });
    }
  },
  filters: {
    money(v) {
      if (isNaN(v)) return "0.00";
      return Number(v).toFixed(2);
    }
  },
  mounted() {
    activistList().then(res => {
      this.monthList = (res || []).sort((a, b) => {
        let aDate = new Date(a.month);
        let bDate = new Date(b.month);
        return bDate - aDate;
      });
    });
  },
  beforeDestroy: function() {},
  components: { vanRow, vanCol, vanButton, vanPopup, vanSticky, vanNavBar }
};
</script>
<style lang="scss">
#peeList {
  .head {
    .van-col {
      background-color: #eee;
    }
  }
  .van-col {
    text-align: center;
    padding: 0.1rem 0;
  }
  .bot {
    padding: 0 1em 2em;
    .title {
      width: 100%;
      text-align: center;
      padding: 0.2rem;
    }
  }
}
</style>
