<template>
  <div class="content">
    <div class="p_head">
      <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/index')">
      <span>
          {{title}}
      </span>
    </div>
    <div class="policy" style="background-color: #fff">
      <img :src="img" alt="" />
      <!-- <div v-html="text"></div> -->
      <p v-html="text"></p>
    </div>
  </div>
</template>

<script>
import Http from '@/extend/Http';
import Login from '../login/login';
export default {
  name: 'policy',
  data() {
    return {
      text: '',
      type: 1,
      img: '',
      title: ''
    }
  },
  created() {
    console.log('route', this.$route);
    this.getPolicy()
  },
  watch: {
    '$route': {
      handler(newVal) {
        console.log('newVal', newVal);
        if (newVal.fullPath == '/policy?housing_policy') {
          this.type = 1
        } else if (newVal.fullPath == '/policy?car_policy') {
          this.type = 2
        } else if (newVal.fullPath == '/policy?school_policy') {
          this.type = 3
        } else if (newVal.fullPath == '/policy?pension_policy') {
          this.type = 4
        }
      },
      immediate: true
    }
  },
  methods: {
    async getPolicy() {
      let res = await Http.getInstance().getPolicy({
        type: this.type
      });
      console.log('买房', res);
      this.text = res.data.content
      this.img = res.data.imageurl
      this.title = res.data.type
      // if(res.data){
      //   this.data.sociallist = res.data
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
// 顶部导航
.p_head{
    text-align: center;
    position: relative;
    top: 1.5rem;
    font-size: 2rem;
    margin-bottom: 3.667rem;
    line-height: 1.5rem;
    .leftIcon{
      position: absolute;
      left: 1.667rem;
      top: 0.5rem;
      width: 0.667rem;
    }
    span {
      vertical-align: middle;
    }
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}
  .policy {
    width: 100%;
    padding: 0 2.917rem;
    text-align: center;
    img {
      // background-color: red;
      display: inline-block;
      width: 100%;
    }
    p {
      margin: 2rem 0;
      text-align: left;
      font-size: 1.333rem;
      // text-indent:2em;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
  }
</style>>