<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,
} 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() {
      // 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 },
                });
              });
            }
          }
        }
      );
    },
    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;
      sessionStorage.setItem("token", this.userInfo.token);
      this.init();
    },
  },
  created() {
    window.getUserInfo = this.getUserInfo;
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res) || {};
    if (!this.userInfo.idCardNo) {
      this.JSBgetUserInfo();
    } else {
      this.verify(res);
    }
  },
  mounted() {},
};
</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>
