<template>
  <div>
    <div class="page">
      <div class="topBox">
        <div class="titleBox">
          <div class="font">被征收人信息查询</div>
        </div>
        <div>
          <div class="baseInfo">
            <van-image
              :src="require('@/assets/img/renyuanliebiao.png')"
              class="baseImg"
            />
            <span class="baseFont">被征收人姓名：</span>
            <span class="baseFont">{{ user.name }}</span>
          </div>
          <div class="baseInfo">
            <van-image
              :src="require('@/assets/img/credentials_icon.png')"
              class="baseImg"
            />
            <span class="baseFont">身份证号码：</span>
            <span class="baseFont">{{ user.identityId }}</span>
          </div>
        </div>
        <div>
          <div class="gridBg centerMagin">
            <van-image :src="require('@/assets/img/scan.png')" class="gridImg" />
            <van-image
              :src="require('@/assets/img/evaluation .png')"
              @click="gotoProject('pg')"
              class="gridImg"
            />
            <van-image
              :src="require('@/assets/img/compensation.png')"
              @click="gotoProject('xy')"
              class="gridImg"
            />
          </div>
        </div>
      </div>
      <div class="centerMagin">
        <van-image
          :src="require('@/assets/img/government.png')"
          class="bigImg"
        />
      </div>
      <div class="centerMagin">
        <div class="project">
          <div>
            <van-image
              :src="require('@/assets/img/project.png')"
              class="projectIcon"
            />
            <span class="projectTitle">{{ project.name }}</span>
          </div>
          <div class="projectRight">
            <van-image
              :src="require('@/assets/img/menu_yhxy.png')"
              class="projectRightIcon"
            />
            <span class="projectRightFont">协议签订阶段</span>
          </div>
        </div>
      </div>
      <div class="projectCenter centerMagin">
        <div class="projectCenterInfo">
          <div class="projectCenterInfo">
            <van-image
              :src="require('@/assets/img/project_area.png')"
              class="projectCenterImg"
            />
            <span class="projectCenterFont">项目所在区域：</span>
            <span class="projectCenterFont">{{ project.area }}</span>
          </div>
        </div>
        <div class="projectCenterInfo">
          <div class="projectCenterInfo">
            <van-image
              :src="require('@/assets/img/project_dep.png')"
              class="projectCenterImg"
            />
            <span class="projectCenterFont">征收部门：</span>
            <span class="projectCenterFont">{{ project.department }}</span>
          </div>
        </div>
        <div class="projectCenterInfo">
          <div class="projectCenterInfo">
            <van-image
              :src="require('@/assets/img/project_year.png')"
              class="projectCenterImg"
            />
            <span class="projectCenterFont">所属年份：</span>
            <span class="projectCenterFont">{{ project.year }}</span>
          </div>
        </div>
        <div class="projectCenterInfo">
          <div class="projectCenterInfo">
            <van-image
              :src="require('@/assets/img/project_no.png')"
              class="projectCenterImg"
            />
            <span class="projectCenterFont">征收决定号：</span>
            <span class="projectCenterFont" style="color: #3883f1">{{
              project.num
            }}</span>
          </div>
        </div>
        <div class="centerMagin">
          <div class="assess">
            <div>
              <van-image
                :src="require('@/assets/img/assess_1.png')"
                class="assessIcon"
              />
              <span class="assessTitle">分户评估结果</span>
            </div>
            <!-- <div>
              <van-image :src="require('@/assets/img/skip.png')" class="assessRightIcon" round />
            </div>-->
          </div>
          <div class="assessCenter1">
            <div class="assessBox">
              <span class="projectCenterFont">评估报告编号：</span>
              <span class="projectCenterFont">{{ assess.num }}</span>
            </div>
            <div class="assessBox">
              <span class="projectCenterFont" style="width: 40%"
                >被征收房屋地址：</span
              >
              <span class="projectCenterFont protocolTitle">{{
                assess.address
              }}</span>
            </div>
            <div class="assessBox">
              <span class="projectCenterFont">评估总金额：</span>
              <span class="projectTitle" style="color: red"
                >¥{{ assess.amount }}</span
              >
            </div>
          </div>
          <div class="assess">
            <div>
              <van-image
                :src="require('@/assets/img/assess_2.png')"
                class="assessIcon"
              />
              <span class="assessTitle">补偿协议</span>
            </div>
            <!-- <div>
              <van-image :src="require('@/assets/img/skip.png')" class="assessRightIcon" round />
            </div>-->
          </div>
          <div class="assessCenter2">
            <div class="assessBox">
              <span class="projectCenterFont">协议编号：</span>
              <span class="projectCenterFont">{{ retrievalProtocol.num }}</span>
            </div>
            <div class="assessBox">
              <span class="projectCenterFont" style="width: 40%"
                >被征收房屋地址：</span
              >
              <span class="projectCenterFont protocolTitle">{{
                retrievalProtocol.address
              }}</span>
            </div>
            <div class="assessBox">
              <span class="projectCenterFont">补偿方式：</span>
              <span class="projectCenterFont">{{
                retrievalProtocol.compensation
              }}</span>
            </div>
            <div class="assessBox">
              <span class="projectCenterFont">合计补偿资金：</span>
              <span class="projectTitle" style="color: red"
                >¥{{ retrievalProtocol.amount }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="centerMagin">
        <van-image
          :src="require('@/assets/img/expropriationPolicy.png')"
          class="bigImg"
        />
      </div>
      <div class="centerMagin">
        <span class="projectTitle" style="color:#202020">征收政策</span>
        <div class="assessBox" style="padding-left: 5px;padding-right: 5px;">
          <span class="font11" style="color:#2c2b2b">共{{total}}条</span>
          <!-- <div>
            <span class="font11">查看全部</span>
            <van-icon color="#1989fa" name="arrow" />
          </div>-->
        </div>
      </div>
      <div class="centerMagin" style="padding-bottom: 20px">
        <div class="protocolBox">
          <van-list :finished="finished" @load="onLoad" v-model="loading">
            <div :key="item.id" class="protocolList" v-for="(item, i) in list">
              <div class="protocolLine" v-if="i != list.length - 1">
                <div class="font14 protocolTitle">{{ item.title }}</div>
                <div
                  class="assessBox"
                  style="padding-left: 5px; padding-right: 5px"
                >
                  <div>
                    <span class="font11">发布时间：</span>
                    <span class="font11">{{ item.publish_date }}</span>
                  </div>
                  <div>
                    <span class="font11">区域：</span>
                    <span class="font11">{{ item.area }}</span>
                  </div>
                </div>
              </div>
              <div style="padding-bottom: 10px" v-else>
                <div class="font14 protocolTitle">{{ item.title }}</div>
                <div
                  class="assessBox"
                  style="padding-left: 5px; padding-right: 5px"
                >
                  <div>
                    <span class="font11">发布时间：</span>
                    <span class="font11">{{ item.publish_date }}</span>
                  </div>
                  <div>
                    <span class="font11">区域：</span>
                    <span class="font11">{{ item.area }}</span>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "./home.css";
import { apis } from "@/common/apis";
import { token } from "@/common/token";
import request from "@/common/util";
export default {
  name: "home",
  data() {
    return {
      user: {
        name: "胡伯钧",
        identityId: "3302041982893743782",
      },
      project: {
        name: "曙光一村地块",
        area: "海曙区",
        department: "宁海县房屋征收管理中心",
        year: "2019",
        num: "海政发【2021】28号",
      },
      assess: {
        num: "044",
        address: "宁波市江北区泗洲街16号404",
        amount: "180234",
      },
      retrievalProtocol: {
        num: "044",
        address: "宁波市江北区泗洲街16号404",
        compensation: "产权调换",
        amount: "180234",
      },
      total: "8",
      list: [
        {
          id: 11,
          area: "全大市",
          title: "宁波市住房和城乡建设委员会开展关于住房的政策",
          publish_date: "2021年09月05日",
        },
        {
          id: 22,
          area: "全大市",
          title: "宁波市住房和城乡建设委员会开展关于住房的政策",
          publish_date: "2021年09月05日",
        },
        {
          id: 33,
          area: "全大市",
          title: "宁波市住房和城乡建设委员会开展关于住房的政策",
          publish_date: "2021年09月05日",
        },
      ],
      loading: false,
      finished: true,
      // user: {
      //   avatar: '',
      //   name: '',
      //   role: '',
      //   account: '',
      //   mobile: '',
      //   deptName: '',
      // },

      // statistics: {
      //   new: 0, // 新建项目总数
      //   signing: 0, // 正在签约项目总数
      //   signed: 0, // 已签约项目总数
      // },
    };
  },
  created() {
    this.onInit();
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 3; i++) {
      //     this.list.push(this.list.length + 1);
      //   }
      //   // 加载状态结束
      //   this.loading = false;
      //   // 数据全部加载完成
      //   if (this.list.length >= 3) {
      //     this.finished = true;
      //   }
      // }, 1000);
    },
    onInit() {
      // this.onLogin();
      //获取当前数据
      var prjdata = apis.getprjdata({ ticket: this.$route.query.ticket });
      console.log(prjdata);
    },
    gotoProject(type) {
      this.$router.push({ name: 'projectSelect', params: { type: type } });
    },
    onLogin() {
      // this.loading = true;
      let form = { account: "zgbqc", password: "111qqqqq" };
      apis
        .login(form)
        .finally(() => {
          debugger;
          // this.loading = false;
        })
        .then(({ result }) => {
          token.value = result.token;
          // this.$root.replace('/');
          debugger;
          this.onLoadUserInfo();
          this.onLoadStatistic();
        })
        .catch((err) => {
          debugger;
          // this.$toast(err);
        });
    },
    onLoadUserInfo() {
      apis.account().then(({ result }) => {
        for (let key in result) {
          if (this.user.hasOwnProperty(key)) {
            this.user[key] = result[key];
          }
        }
      });
    },
    onLoadStatistic() {
      apis.projectStatistics().then(({ result }) => {
        this.statistics = result;
      });
    },
    padStart(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;
    },
  },
};
</script>


