<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">{{ data.userName }}</span>
          </div>
          <div class="baseInfo">
            <van-image
              :src="require('@/assets/img/credentials_icon.png')"
              class="baseImg"
            />
            <span class="baseFont">身份证号码：</span>
            <span class="baseFont">{{ data.idCard }}</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>
      <van-list>
        <div :key="item.prjId" v-for="(item) in data.prjList">
          <div class="centerMagin">
            <div class="project">
              <div>
                <van-image
                  :src="require('@/assets/img/project.png')"
                  class="projectIcon"
                />
                <span class="projectTitle">一块地？？？</span>
              </div>
              <div class="projectRight">
                <van-image
                  :src="require('@/assets/img/menu_yhxy.png')"
                  class="projectRightIcon"
                />
                <span class="projectRightFont">{{ item.currentState }}</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">{{ item.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">{{ item.zsbm }}</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">{{ item.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">
                  {{ item.zsjdh }}
                </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>
              <van-list>
                <div :key="assess.prjId" class="assessCenter1" v-for="(assess) in item.fhpgList">
                  <div class="assessBox">
                    <span class="projectCenterFont">评估报告编号：</span>
                    <span class="projectCenterFont">{{
                      assess.assessmentNo
                    }}</span>
                  </div>
                  <div class="assessBox">
                    <span class="projectCenterFont" style="width: 40%"
                      >被征收房屋地址：</span
                    >
                    <span class="projectCenterFont protocolTitle">
                      {{ assess.houseAddress }}
                    </span>
                  </div>
                  <div class="assessBox">
                    <span class="projectCenterFont">评估总金额：</span>
                    <span class="projectTitle" style="color: red"
                      >¥{{ assess.countValue }}</span
                    >
                  </div>
                </div>
              </van-list>
              <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>
              <van-list>
                <div
                  :key="protocol.prjId"
                  class="assessCenter2"
                  v-for="(protocol) in item.bcxyList"
                >
                  <div class="assessBox">
                    <span class="projectCenterFont">协议编号：</span>
                    <span class="projectCenterFont">{{ protocol.xyNo }}</span>
                  </div>
                  <div class="assessBox">
                    <span class="projectCenterFont" style="width: 40%"
                      >被征收房屋地址：</span
                    >
                    <span class="projectCenterFont protocolTitle">
                      {{ protocol.houseAddress }}
                    </span>
                  </div>
                  <div class="assessBox">
                    <span class="projectCenterFont">补偿方式：</span>
                    <span class="projectCenterFont">
                      {{ protocol.compensation }}
                    </span>
                  </div>
                  <div class="assessBox">
                    <span class="projectCenterFont">合计补偿资金：</span>
                    <span class="projectTitle" style="color: red"
                      >¥{{ protocol.summationShouldCompensateMoney }}</span
                    >
                  </div>
                </div>
              </van-list>
            </div>
          </div>
        </div>
      </van-list>
      <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 {
      // apidata: {
      //   success: true,
      //   code: 200,
      //   message: '请求成功',
      //   data: {
      //     prjList: [
      //       {
      //         prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
      //         area: '海曙区',
      //         zsbm: '宁波市海曙区房屋征收管理服务中心',
      //         year: 2021.0,
      //         zsjdh: '海政发[2021]513号',
      //         currentState: '项目报结',
      //         fhpgList: [
      //           {
      //             prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
      //             assessmentNo: '0513',
      //             houseAddress: '高桥镇',
      //             countValue: '137654.00',
      //           },
      //         ],
      //         bcxyList: [
      //           {
      //             prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
      //             xyNo: '海政发2021513-0513-1',
      //             houseAddress: '高桥镇',
      //             summationShouldCompensateMoney: '137654.00',
      //           },
      //         ],
      //       },
      //     ],
      //     idCard: '330203199904044544身份证号码',
      //     userName: '姓名',
      //   },
      //   extras: null,
      //   timestamp: 1631256680049,
      // },
      // user: {
      //   name: "加载中...",
      //   identityId: "加载中...",
      // },
      // project: {
      //   name: "加载中...",
      //   area: "加载中...",
      //   department: "加载中...",
      //   year: "加载中...",
      //   num: "加载中...",
      // },
      // assess: {
      //   num: "",
      //   address: "加载中...",
      //   amount: "加载中...",
      // },
      // retrievalProtocol: {
      //   num: "",
      //   address: "加载中...",
      //   compensation: "加载中...",
      //   amount: "0",
      // },
      data: {},
      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,
    };
  },
  created() {
    this.onInit();
  },
  methods: {
    onLoad() {},
    onInit() {
      let apidata = {
        success: true,
        code: 200,
        message: "请求成功",
        data: {
          userName: "张三丰",
          idCard: "341203199206303411",
          prjList: [
            {
              prjId: "936d98a8-2c8f-410f-b126-68a7568f60c4",
              name: "项目名称",
              area: "海曙区",
              zsbm: "宁波市海曙区房屋征收管理服务中心",
              year: 2021.0,
              zsjdh: "海政发[2021]513号",
              currentState: "项目报结",
              fhpgList: [
                {
                  prjId: "936d98a8-2c8f-410f-b126-68a7568f60c4",
                  id: "a400583e-ae93-444f-8a20-4c4731b0cc13",
                  assessmentNo: "0513",
                  houseAddress: "高桥镇",
                  countValue: "137654.00",
                },
              ],
              bcxyList: [
                {
                  prjId: "936d98a8-2c8f-410f-b126-68a7568f60c4",
                  id: "bf21b302-8059-462d-985f-ce7452c4d5b4",
                  xyNo: "海政发2021513-0513-1",
                  houseAddress: "高桥镇",
                  switchProductionWay: "货币补偿",
                  summationShouldCompensateMoney: "137654.00",
                },
              ],
            },
          ],
        },
        extras: null,
        timestamp: 1631261808797,
      };
      if (apidata.code == 200) {
        this.data = apidata.data;
      }
      // this.onLogin();
      //获取当前数据
      // apis.getprjdata({ ticket: this.$route.query.ticket }).then((prjdata) => {
      //   debugger;
      //   console.log(prjdata);
      //   this.user.name = prjdata.data.UserName;
      //   this.user.identityId = prjdata.data.IdCard;
      // });
    },
    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>


