<template>
  <div class="deedtax">
    <div class="banner" @click="go()">
      <img
        src="https://www.smart-zj.cn:55901/image/appBanner/qishuibutieshenbao.png"
        alt=""
      />
    </div>
    <div class="flowPath">
      <div class="title">
        <div class="icon"></div>
        <div class="name">申报流程</div>
      </div>
      <div class="step">
        <van-steps
          :active="active"
          active-icon="success"
          active-color="#EB4E3F"
        >
          <van-step>申报</van-step>
          <van-step>项目初审</van-step>
          <van-step>窗口复审</van-step>
          <!-- <van-step>银行卡确认</van-step> -->
          <van-step>退税办理</van-step>
          <van-step>完成</van-step>
        </van-steps>
      </div>
    </div>
    <div class="tab">
      <van-tabs v-model="active1" @click="change(active1)">
        <van-tab title="全部"></van-tab>
        <!-- params.stste: null -->
        <van-tab title="已拒绝"></van-tab
        ><!-- 4 -->
        <van-tab title="待初审"></van-tab
        ><!-- 0 -->
        <van-tab title="待复审"></van-tab
        ><!-- 1 -->
        <!-- <van-tab title="待卡号确认"></van-tab> -->
        <!-- 2 -->
        <van-tab title="待退税办理"></van-tab
        ><!-- 3 -->
        <van-tab title="已完成"></van-tab
        ><!-- 6 -->
      </van-tabs>
      <div class="content">
        <div
          class="card"
          v-for="(item, index) in mockData"
          :key="index"
          @click="jump(item)"
        >
          <div class="tips">
            <van-tag
              type="success"
              v-if="
                item.state == 0 ||
                  item.state == 1 ||
                  item.state == 2 ||
                  item.state == 3
              "
              >办理中
            </van-tag>
            <van-tag type="danger" v-if="item.state == 4">已拒绝</van-tag>
            <van-tag v-if="item.state == 6">已完成</van-tag>
            <div
              style="max-width: 80%;"
              :class="['info', item.state == 4 ? 'info1' : 'info']"
            >
              {{
                item.state == 4
                  ? "请查看审核意见重新提交申报信息"
                  : (item.state == 2 && item.checkArea != "句容市")
                  ? ""
                  : item.state == 6
                  ? ""
                  : (item.state == 1 && item.checkArea != "句容市") || (item.state == 2 && item.checkArea == "句容市")
                  ? "请携带相关材料前往窗口完城纸质审核"
                  : ""
              }}
            </div>
          </div>
          <div class="next">
            <div class="left">
              <div class="title">
                申请时间：<span class="value">{{ item.createTime }}</span>
              </div>
              <div class="title">
                办理进度：<span class="value">{{
                  item.state == 0
                    ? "部门初审"
                    : item.state == 1
                    ? "窗口复审"
                    : item.state == 2
                    ? "退税办理"
                    : item.state == 3
                    ? "退税办理"
                    : item.state == 4
                    ? "已中止"
                    : "已完成"
                }}</span>
              </div>
              <div class="title" v-if="(item.state == 1 && item.checkArea != '句容市') || (item.state == 2 && item.checkArea == '句容市')">
                办理地址：<span class="value">{{
                  item.checkArea == "镇江新区"
                    ? "镇江新区政务服务中心(镇江新区宜候路397号)2楼税务局21号窗口"
                    : item.checkArea == "丹徒区"
                    ? "丹徒区房管局(谷阳大道278号)左边楼三楼303室"
                    : item.checkArea == "句容市"
                    ? "不动产登记中心2楼37号窗口"
                    : "镇江市政务服务中心（冠城路8号工人大厦）二楼市财政局窗口"
                }}</span>
              </div>
              <div class="title" v-if="(item.state == 1 && item.checkArea != '句容市') || (item.state == 2 && item.checkArea == '句容市')" style="color: #EB4E3F">
                办理说明：
                <span class="value" style="color: #EB4E3F"
                  >请携带您所有上传图片的"原件材料及复印件一份"前往窗口完成复审；如您需委托他人办理，请点击下载委托书，填写打印后一并携带。</span
                >
              </div>
            </div>
            <div class="right">
              <img src="./img/next_icon.png" alt="" />
            </div>
          </div>
        </div>
        <div
          class="card"
          style="font-size: 14px;text-align: center; color: #999;"
          v-if="mockData.length == 0"
        >
          暂无数据
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Step, Steps, Tab, Tabs, Tag, Dialog } from "vant";
import {
  queryListDeedTaxInfoByUserId,
  queryUserApplyForRecord,
  queryApplyingDeedTaxInfo,
  idCardVerification
} from "@/api/deedtax.js";
// import { decryptByDES } from "@/utils/utils";

Vue.use(Step)
  .use(Steps)
  .use(Tab)
  .use(Tabs)
  .use(Tag)
  .use(Dialog);
export default {
  data() {
    return {
      active: -1,
      active1: 0,
      mockData: [],
      userInfo: {},
      params: {
        code: "",
        idCard: "",
        name: "",
        pageNum: 1,
        pageSize: 20,
        state: null,
        // userId: "",
      },
    };
  },
  methods: {
    go() {
      idCardVerification({idCard: this.userInfo.idCardNo}).then((res) => {
        if (res.data) {
          // let params = {
          //   idCard: decryptByDES(this.userInfo.idCardNo, "MnuYbhGv"),
          // };
          queryUserApplyForRecord({idCard: this.userInfo.idCardNo}).then((res) => {
            // alert(JSON.stringify(res))
            if (res.code == 200) {
              if (res.data.state == 0) {
                this.$router.push({ name: "DeedtaxDeclare" });
              } else if (res.data.state == 2) {
                Dialog.confirm({
                  confirmButtonText: "申报",
                  message: res.data.msg || "您已享受契税补贴，是否再次申报?",
                }).then(() => {
                  this.$router.push({ name: "DeedtaxDeclare" });
                });
              } else if (res.data.state == 1) {
                Dialog.confirm({
                  confirmButtonText: "查看",
                  message: res.data.msg || "您的申请已提交",
                }).then(() => {
                  queryApplyingDeedTaxInfo({
                    code: "",
                    idCard: this.userInfo.idCardNo,
                    name: "",
                    pageNum: 1,
                    pageSize: 10,
                    state: 0,
                    userId: "",
                  }).then((res) => {
                    // alert(JSON.stringify(res))
                    console.log(res);
                    this.$router.push({
                      name: "DeedtaxHandling",
                      query: { code: res.data.code },
                    });
                  });
                });
              } else if (res.data.state == 11) {
                console.log(111);
                Dialog.confirm({
                  confirmButtonText: "查看",
                  message: res.data.msg || "您的申请已提交",
                }).then(() => {
                  this.$router.push({
                    name: "PolicyReportTwo",
                    query: { code: res.data.code },
                  });
                });
              }
            }
          });    
        } else {
          Dialog.confirm({
            title: '提示',
            messageAlign: 'left',
            message: "经系统查询，您已享受过相关政策补贴 ，不能再次申报契税补贴政策。如有异议请联系市财政窗口，地址：镇江市政务服务中心（冠城路8号工人大厦）二楼市财政局窗口，联系电话：0511-89881850",
          })
        }
      })
    },
    change(val) {
      console.log(val);
      if (val == 0) {
        this.params.state = null;
      } else if (val == 1) {
        this.params.state = 4;
      } else if (val == 2) {
        this.params.state = 0;
      } else if (val == 3) {
        this.params.state = 1;
      } else if (val == 4) {
        this.params.state = 2;
      } else if (val == 5) {
        // this.params.state = 3
        this.params.state = 6;
      } else if (val == 6) {
        this.params.state = 6;
      }
      this.init();
    },
    init() {
      // this.params.userId = encryptByDES(this.userInfo.userId, "MnuYbhGv");
      queryListDeedTaxInfoByUserId(this.params).then((res) => {
        console.log(res);
        this.mockData = res.data.list;
      });
    },
    jump(item) {
      console.log(item);
      this.$router.push({
        name: "DeedtaxHandling",
        query: { code: item.code },
      });
    },
    // 返回首页
    back() {
      if (window.android !== undefined) {
        window.android.backHome();
      } else {
        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
      }
    },
    // 初始化获取userInfo
    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");
      }
    },
    getUserInfo(res) {
      this.verify(res);
    },
    verify(res) {
      let userInfo = JSON.parse(res);
      if (!userInfo.userId) {
        this.$dialog
          .confirm({
            message: "请先登录！",
            showCancelButton: false,
          })
          .then(() => {
            this.back();
          });
        return;
      }
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = userInfo;
      this.init();
    },
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res) || {};
    if (!this.userInfo.idCardNo) {
      this.JSBgetUserInfo();
    } else {
      this.verify(res);
    }
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
};
</script>

<style lang="stylus" scoped>
.deedtax{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    .banner{
        width 100%;
        height 300px;
        img{
            width 100%;
            height 100%;
        }
    }
    .flowPath{
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #FFFFFF;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
        border-radius: 8px;
        margin: 20px 0;
        padding: 20px;
        box-sizing: border-box;
        .title{
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            .icon{
                width: 4px;
                height: 24px;
                background: #EB4E3F;
                box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
                border-radius: 2px;
            }
            .name{
                margin-left: 15px;
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
            }
        }
    }
    .tab{
        width 100%;
        display: flex;
        flex-direction: column;
        .content{
            width 100%;
            max-height: calc(100vh - 680px);
            overflow: scroll;
            .card{
                display: flex;
                flex-direction: column;
                background: #FFFFFF;
                box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
                border-radius: 4px;
                margin: 10px 0;
                padding: 20px;
                box-sizing: border-box;
                .tips{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .info{
                        font-size: 24px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #00A125;
                        text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
                        line-height: 2;
                    }
                    .info1{
                        color: #EB4E3F
                    }
                }
                .next{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .left{
                        display: flex;
                        flex-direction: column;
                        .title{
                            font-size: 28px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
                            line-height: 2;
                        }
                    }
                    .right{
                        width 28px;
                        min-width 28px;
                        height 28px;
                        display: flex;
                        img{
                            width 100%;
                            height 100%;
                        }
                    }
                }
            }
        }
    }
}
</style>
