<template>
  <div class="container">
    <!-- 顶部 -->
    <div class="top">
      <div></div>
      <div>
        <i class="el-icon-user-solid"></i>
        <span>被征收人姓名：胡伯钧</span>
      </div>
      <div>
        <i class="el-icon-postcard"></i>
        <span>身份证号码：330901197603064256</span>
      </div>
    </div>
    <!-- 图片跳转 -->
    <div class="middle">
      <div @click="QRcode()"></div>
      <div @click="evaluate()"></div>
      <div @click="compensate()"></div>
    </div>
    <!-- 背景图 -->
    <div class="background" @click="handle()">
      <img src="../assets/image/background.png" alt="" />
    </div>
    <!-- 标题 -->
    <el-card>
      <div class="content">
        <!-- 曙光一村 -->
        <div>
          <div>
            <img src="../assets/image/window.png" alt="" />
          </div>
          <span>曙光一村地块</span>
          <div>
            <img src="../assets/image/xieyi.png" alt="" />
          </div>
        </div>
        <!-- 征收信息 -->
        <div>
          <div class="flex">
            <img src="../assets/image/01zhushuju_hangzhengquyu@3x.png" alt="" />
            <span>项目所在区域：{{ this.source.region }}</span>
          </div>
          <div class="flex">
            <img src="../assets/image/bumenguanli-3@3x.png" alt="" />
            <span>征收部门：{{ this.source.section }}</span>
          </div>
          <div class="flex">
            <img src="../assets/image/yanchurili@3x.png" alt="" />
            <span>所属年份：{{ this.source.date }}</span>
          </div>
          <div class="flex">
            <img src="../assets/image/918caidan_wenjian@3x.png" alt="" />
            <span
              >征收决定号：<span style="color:blue">{{
                this.source.number
              }}</span></span
            >
          </div>
        </div>
        <!-- 分户评估结果 -->
        <div>
          <div>
            <div>
              <img src="../assets/image/pingu.png" alt="" />
            </div>
            <span>分户评估结果</span>
            <div @click="evaluate()">
              <img src="../assets/image/jiantou.png" alt="" />
            </div>
          </div>
          <div>
            <div></div>
            <div>
              <div class="flex">
                <span> 评估报告编号：</span>
                <span>{{ this.source.bianhao }}</span>
              </div>
              <div class="flex">
                <span>被征收房屋地址：</span>
                <span>{{ this.source.address }}</span>
              </div>
              <div class="flex">
                <span> 评估总金额：</span>
                <span style="color:red">{{ this.source.totalMoney }} </span>
              </div>
            </div>
          </div>
        </div>
        <!-- 补偿协议 -->
        <div>
          <div>
            <div>
              <img src="../assets/image/xy.png" alt="" />
            </div>
            <span>补偿协议</span>
            <div @click="compensate()">
              <img src="../assets/image/jiantou.png" alt="" />
            </div>
          </div>
          <div>
            <div></div>
            <div>
              <div class="flex">
                <span>协议编号：</span>
                <span>{{ this.source.bianhao }}</span>
              </div>
              <div class="flex">
                <span>被征收房屋地址：</span>
                <span>{{ this.source.address }}</span>
              </div>
              <div class="flex">
                <span>补偿方式：</span>
                <span>{{ this.source.style }}</span>
              </div>
              <div class="flex">
                <span>合计补偿资金：</span>
                <span style="color:red">{{ this.source.money }} </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 图片跳转 -->
    <div>
      <img src="../assets/image/zhengshou.png" alt="" />
    </div>
    <!-- 征收政策 -->
    <div>
      <span>征收政策</span>
      <div>
        <div>共8条</div>
        <div>查看全部</div>
      </div>
      <el-card>
        <div>宁波市住房和城乡建设委员会关于开展</div>
        <div class="flex">
          <div>
            <span>发布时间：</span>
            <span>2021-9-1</span>
          </div>
          <div>
            <span>区域：</span>
            <span>全大市</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import request from '@/util'
export default {
  data() {
    return {
      source: {
        region: '海曙区',
        section: '宁海县房屋征收管理中心',
        date: 2019,
        number: '海政发[2021]',
        bianhao: '044',
        address: '宁波市江北区泗洲街16号404',
        totalMoney: '180234元',
        style: '产权调换',
        money: '180257元',
      },
    }
  },
  created() {
    const servicecode = 'fwzs'
    const date = new Date()
    const fwzspwd = 'fwzspwd'
    const ticket = this.$route.query.ticket
    const dd = date
      .getMonth()
      .toString()
      .padStart(2, '0')
    console.log(13, dd)
    const time =
      date.getFullYear() +
      '' +
      this.pad(date.getMonth() + 1, 2) +
      this.pad(date.getDate(), 2) +
      this.pad(date.getHours(), 2) +
      this.pad(date.getMinutes(), 2) +
      this.pad(date.getSeconds(), 2)
    const sign = this.$md5(servicecode + fwzspwd + time)
    var url = `https://appapi.zjzwfw.gov.cn/sso/servlet/simpleauth?method=ticketValidation&servicecode=${servicecode}&time=${time}&sign=${sign}&st=${ticket}&datatype=datatype`
    // 第一次请求
    const data = request({
      url: url,
    })
    console.log(1, data)
    // 第二次请求
    const datatype = {
      result: '0',
      token: '1231231231232asdasd',
    }
    const token = 'token'
    const url2 = `https://appapi.zjzwfw.gov.cn/sso/servlet/simpleauth?method=getUserInfo&servicecode=${servicecode}&time=${time}&sign=${sign}&token=${token}&datatype=${datatype}`
    const data2 = request({
      url: url2,
    })
    console.log(2, data2)
  },
  methods: {
    handle() {
      console.log('评估页面跳转')
    },
    pad(num, n) {
      var tbl = []
      var len = n - num.toString().length
      if (len <= 0) return num
      if (!tbl[len]) tbl[len] = new Array(len + 1).join('0')
      return tbl[len] + num
    },
    QRcode() {
      console.log('跳转二维码页面')
    },
    // 跳转评估页面
    evaluate() {
      this.$router.push('/evaluate')
    },
    // 跳转协议页面
    compensate() {
      this.$router.push('/compensate')
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  background-color: #f0f9fb;
  background: url('../assets/image/3.png') no-repeat;
  background-size: 100%;
  .top {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100px;
    > :nth-child(1) {
      height: 30px;
      background-size: auto 100%;
      background-image: url('../assets/image/person.png');
      z-index: 99;
      background-repeat: no-repeat;
    }
  }
  .middle {
    margin: 0 10px;
    background-color: #ffffff;
    background: rgba(0, 0, 0, 0.1);
    padding: 10px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    > div {
      height: 100%;
      width: 32%;
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
    > :nth-child(1) {
      background: url('../assets/image/middle1.png') no-repeat;
      background-size: auto 100%;
    }
    > :nth-child(2) {
      background: url('../assets/image/middle2.png') no-repeat;
      background-size: auto 100%;
    }
    > :nth-child(3) {
      background: url('../assets/image/middle3.png') no-repeat;
      background-size: auto 100%;
    }
  }
  .background {
    margin: 0 10px;
    img {
      width: 100%;
    }
  }
  > .el-card {
    margin: 10px;
    padding: 0;
    ::v-deep.el-card__body {
      padding: 0;
    }
    .content {
      background-color: #ffffff;
      > :nth-child(1) {
        background: url('../assets/image/3.png') no-repeat;
        background-size: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
        > :nth-child(1) {
          width: 20%;
          text-align: left;
          img {
            width: 80%;
          }
        }
        > span {
          width: 50%;
        }
        > :nth-child(3) {
          text-align: right;
          img {
            width: 50%;
          }
        }
      }
      // 征收信息
      > :nth-child(2) {
        > div {
          margin-bottom: 10px;
        }
        img {
          width: 5%;
        }
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // height: 100px;
        padding-left: 10px;
        .flex {
          > :nth-child(2) {
            width: 90%;
          }
        }
      }
      // 分户评估结果
      > :nth-child(3) {
        padding: 10px;
        > :nth-child(1) {
          display: flex;
          justify-content: space-between;
          padding: 15px 0;
          align-items: center;
          > :nth-child(1) {
            width: 13%;
            text-align: left;
            img {
              width: 80%;
            }
          }
          > span {
            width: 65%;
            color: blue;
          }
          > :nth-child(3) {
            text-align: right;
            img {
              width: 50%;
            }
          }
        }
        > :nth-child(2) {
          display: flex;
          // padding: 10px;
          > :nth-child(1) {
            width: 10%;
            background: url('../assets/image/shuxian0.png') no-repeat;
            background-size: auto 100%;
            background-position: center;
          }
          > :nth-child(2) {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 90%;
            > div {
              margin: 10px 0;
            }
          }
        }
      }
      // 补偿协议
      > :nth-child(4) {
        padding: 10px;
        > :nth-child(1) {
          display: flex;
          justify-content: space-between;
          padding: 15px 0;
          align-items: center;
          > :nth-child(1) {
            width: 13%;
            text-align: left;
            img {
              width: 80%;
            }
          }
          > span {
            width: 65%;
            color: blue;
          }
          > :nth-child(3) {
            text-align: right;
            img {
              width: 50%;
            }
          }
        }
        > :nth-child(2) {
          display: flex;
          > :nth-child(1) {
            width: 10%;
            background: url('../assets/image/shuxian.png') no-repeat;
            background-size: auto 100%;
            background-position: center;
          }
          > :nth-child(2) {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 90%;
            > div {
              margin: 10px 0;
            }
          }
        }
      }
    }
  }
  // 图片跳转
  > :nth-child(5) {
    margin: 10px;
    img {
      width: 100%;
    }
  }
  // 征收政策
  > :nth-child(6) {
    margin: 10px;
    > :nth-child(2) {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
    }
    > .el-card {
      padding: 10px;
      ::v-deep.el-card__body {
        padding: 0;
      }
      .flex {
        > div {
          margin: 10px 0;
        }
      }
    }
  }
}
</style>
