<template>
  <div class="container">
    <div class="image">
      <img alt src="@/assets/img/agreement.png" />
    </div>
    <div class="text">为您查询到{{ this.result }}条结果</div>
    <div :key="index" @click="showPdf(item.url)" v-for="(item, index) in info">
      <el-card body-style="padding:10px 10px 0">
        <div>
          <img alt src="@/assets/img/bianhao.png" />
          评估报告编号：
          <b>{{ item.number }}</b>
        </div>
        <div>
          <img alt src="@/assets/img/name.png" />
          被征收人姓名：
          <b>{{ item.name }}</b>
        </div>
        <div>
          <img alt src="@/assets/img/address.png" />
          被征收人房屋地址：
          <b>{{ item.address }}</b>
        </div>
        <div>
          <img alt src="@/assets/img/money.png" />
          评估总金额：
          <b style="color: red">{{ item.money }}</b>
        </div>
        <div>
          <img alt src="@/assets/img/money.png" />
          合计补偿金额：
          <b style="color: red">{{ item.money }}</b>
        </div>
        <div class="line">
          <img alt src="@/assets/img/hengxian.png" />
        </div>
        <div class="flex">
          <div class="flex backgroundColor">
            <img alt src="@/assets/img/shijian.png" />
            <span>签订日期：{{ item.time }}</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      result: '2',
      info: [
        {
          number: '044',
          name: '胡守钧',
          address: '宁波市江北区四洲街16号404',
          money: '180234元',
          person: '王勇',
          time: '2021-9-1',
          url: '',
        },
        {
          number: '044',
          name: '胡守钧',
          address: '宁波市江北区四洲街16号404',
          money: '180234元',
          person: '王勇',
          time: '2021-9-1',
          url: '',
        },
      ],
    };
  },
  created() {
    this.onInit();
    console.log(1234);
  },
  methods: {
    onInit() {
      this.onLoadData();
    },
    onLoadData() {
      console.log(this.$route.params);
      this.type = this.$route.params.type;
    },
    showPdf(url) {
      url = '';
      this.$router.push({ name: 'showPdf', params: { url: url } });
    },
  },
};
</script>
<style>
/* @import url(./global.css); */
</style>
<style lang="less" scoped>
.container {
  font-size: 12px;
  .image {
    margin-top: 20px;
    text-align: center;
    img {
      width: 95%;
    }
  }
  .text {
    font-weight: bolder;
    margin: 10px 0;
    text-align: center;
    color: #2d6df2;
  }
  .el-card {
    margin: 0 10px 10px;
    .el-card__body {
      padding: 0 10px;
      > div {
        margin: 14px 0;
        display: flex;
        align-items: center;
        b {
          font-size: 14px;
        }
        img {
          margin-right: 6px;
        }
      }
      .flex {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          margin-right: 10px;
        }
      }
      .line {
        opacity: 1;
        img {
          width: 100%;
        }
        img {
          height: 2px;
        }
      }
      .backgroundColor {
        background-color: #e3ebfd;
        span {
          padding-right: 10px;
        }
      }
    }
  }
}
</style>
