<template>
    <div class="deedtax-detail">
        <!-- <div
      :class="[detail.handlingMethod === '1' ? 'contentBu' : 'content']"
      v-html="detail.notice"
    >
      {{ detail.notice }}
    </div> -->
        <img src="https://www.smart-zj.cn:55901/image/appBanner/qishuibutie.png"
            style="width: 100%" />

        <div class="title">
            {{ detail.name }}
        </div>
        <div class="content-box">
            <list-no-active class="ml-" label="content" :list="list">
            </list-no-active>
        </div>
        <!-- <div class="bottom-clear"> -->
        <van-button class="bottom-fixed" block color="#EB4E3F" @click="report">
            政策申报/去办理
        </van-button>
        <!-- </div> -->
    </div>
</template>

<script>
import ListNoActive from "@/components/ListNoActive";
import Vue from "vue";
import { Button, Dialog } from "vant";
import {
    mattersGuideGet
} from "@/api/policy";
Vue.use(Button)
Vue.use(Dialog);
export default {
    components: { ListNoActive },
    data() {
        return {
            id: "1000158",
            detail: {
                nameL: "",
                contentList: [],
                handlingMethod: null
            },
            userInfo: {}
        }
    },
    computed: {
        list() {
            return this.detail.contentList.map(el => {
                return el;
            });
        }
    },
    methods: {
        init() {
            this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中..."
            });
            mattersGuideGet({ appId: 1234, id: this.id }).then(res => {
                console.log("详情的res---", res);
                this.$toast.clear();
                this.detail = res.data;
            });
        },
        report() {
            if (this.userInfo.idCardNo) {
                Dialog.confirm({
                    title: '提示',
                    message: '您申请的契税补贴政策为：符合条件下给予契税缴纳份额80%的一次性购房契税补贴，此项补贴与其他同类型补贴不得同时享受或重复享受。若您需申请人才“镇兴”行动购住房契税补贴，请选择人才政策服务中的住房契税补贴申请。',
                }).then(() => {
                    this.$router.push({ name: 'DeedtaxIndex' })
                })
            } else {
                this.$dialog
                    .confirm({
                        message: "请先实名认证！",
                        showCancelButton: false,
                    })
                    .then(() => {
                        this.back();
                    });
            }
        },
        // 返回首页
        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),
            // alert(sessionStorage.getItem("token"))
            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-detail:after {
  content: '';
  display: table;
  clear: both;
}

.deedtax-detail {
  background: #fff;
  height: 100vh;
  overflow: hidden;

  .title {
    width: 100%;
    height: 100px;
    font-size: 54px;
    font-weight: 400;
    color: #333333;
    text-align: center;
    line-height: 100px;
  }

  .content-box {
    padding: 10px 30px;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 500px;
  }

  .contentBu {
    height: calc(100vh - 193px);
    padding: 10px;
    overflow: auto;
  }

  .content {
    height: calc(100vh - 108px);
    padding: 10px;
    overflow: auto;
  }

  .buttonWrapper {
    display: flex;
    align-items: center;
    margin-bottom: 100px;
  }

  .bottom-fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
  }
}
</style>