<template>
  <van-tabs color="#EB4E3F" title-active-color="#EB4E3F" title-inactive-color="#666666">
    <van-tab title="救助申请">
      <van-pull-refresh
        class="list"
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="init"
      >
        <no-data v-if="nodata" text="暂无数据~"></no-data>
        <div style="height: 20px"></div>
        <div
          v-for="(item, index) in list"
          :key="index"
          class="card"
          @click="jumpDetail(item)"
        >
          <div class="title">{{ item.createTime }}</div>
          <div class="info">
            <div class="left">
              <img src="@/assets/common/submit_icon.png" alt="" />
              <p>{{ item.name }}</p>
            </div>
            <div v-if="item.civilVerify === 0 && item.identifier === 2" class="right">
              发起
            </div>
            <div v-if="item.civilVerify === 0 && item.identifier !== 2" class="right">
              授权核查
            </div>
            <div v-if="item.civilVerify === 1" class="right disabled">已提交</div>
          </div>
          <div v-if="item.tips" class="tips">
            <img src="@/assets/common/tips_icon.png" alt="" />
            <p>{{ item.tips }}</p>
          </div>
        </div>
      </van-pull-refresh>
      <van-button icon="add-o" color="#EB4E3F" block type="primary" @click="report"
        >新申请</van-button
      >
    </van-tab>
    <van-tab title="救助政策">
      <no-data text="暂无数据~"></no-data>
    </van-tab>
  </van-tabs>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, Button, PullRefresh } from "vant";
import NoData from "@/components/NoData";
import { decryptByDES } from "@/utils/utils";
import { getList } from "@/api/guarantee";

Vue.use(Tab).use(Tabs).use(Button).use(PullRefresh);

export default {
  components: { NoData },
  data() {
    return {
      isLoading: false,
      list: [],
      userInfo: {},
      nodata: false,
    };
  },
  methods: {
    init() {
      let idCard = decryptByDES(this.userInfo.idCardNo, "MnuYbhGv").toUpperCase();
      // let idCard = "321101198210054052"; // 孙辉
      // let idCard = "321102198302210418"; // 彭
      // let idCard = "22052319920518301X";
      // let idCard = "320911199507198612"; // 卞辰
      getList({ idCard }).then((res) => {
        this.isLoading = false;
        if (res.length === 0) {
          this.list = [];
          this.nodata = true;
        } else {
          this.nodata = false;
          this.list = res.map((item) => {
            if (item.civilVerify === 0) {
              // 待发起状态
              item.tips =
                "您或您的家庭成员在民政部门享受的救助待遇正在定期复核，需要您配合进行人脸识别认证，请按提示操作。";
            }
            return item;
          });
        }
      });
    },
    report() {
      // 新增申请时先将store中的code置空
      this.$store.commit("guarantee/SET_CODE", "");
      this.$router.push({
        name: "GuaranteeSituation",
        query: { identifier: 2 },
      });
    },
    jumpDetail(item) {
      // 查看详情时先给store中的code赋值
      this.$store.commit("guarantee/SET_CODE", item.code);
      this.$router.push({
        name: "GuaranteeSituation",
        query: { identifier: item.identifier },
      });
    },
    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: "BBFey2nsSrLoJEXkNHdlJs+Id93zXuPt",
          // 321102198302210418 彭
          // 321101198210054052 孙
        };
        this.verify(JSON.stringify(userInfo));
      }
    },
    getUserInfo(res) {
      this.verify(res);
    },
    verify(res) {
      let userInfo = JSON.parse(res);
      if (!userInfo.idCardNo) {
        this.$dialog
          .confirm({
            message: "请进入“我的”完成实名认证！",
            showCancelButton: false,
          })
          .then(() => {
            this.back();
          });
        return;
      }
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = userInfo;
      this.init();
    },
    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");
    this.userInfo = JSON.parse(res) || {};
    if (!this.userInfo.idCardNo) {
      this.JSBgetUserInfo();
    } else {
      this.init();
    }
  },
};
</script>

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

  .card {
    margin 0 20px 20px;
    padding 0 20px 20px 20px;
    background #ffffff
    border-radius: 4px;

    .title {
      padding 20px 0;
      border-bottom 1px solid #eee;
      font-size: 24px;
      color: #666666;
    }
    .info {
      margin-top 40px;
      display flex;
      align-items center
      justify-content space-between

      .left {
        display flex;
        align-items center;

        img {
          width 40px;
          height 40px;
        }
        p {
          margin-left 20px;
          font-size: 32px;
          font-weight: 600;
          color: #333333;
        }
      }

      .right {
        width 140px;
        height 40px;
        border: 2px solid #EB4E3F;
        border-radius: 4px;
        line-height 44px;
        text-align center;
        font-size: 24px;
        font-weight: 500;
        color: #EB4E3F;
      }

      .disabled {
        border: 2px solid #BBBBBB;
        font-size: 24px;
        font-weight: 500;
        color: #999999;
      }
    }
    .tips {
      margin-top 20px;
      padding 20px;
      display flex;
      align-items center;
      background: #F3F6F9;

      img {
        width 30px;
        height 30px;
        margin-right 20px;
      }
      p {
        width cacl(100% - 90px)
        line-height: 33px;
        font-size: 24px;
        color: #394F79;
      }
    }
  }
}
</style>
