<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">{{ item.name }}</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="projectCenterBox">
              <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>
            <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.id"
                  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.id"
                  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.switchProductionWay
                    }}</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" @click="pageJump()">
          <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";
import { mgop } from "@aligov/jssdk-mgop";

export default {
  name: "home",
  data() {
    return {
      // 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',
      //         },
      //       ],
      //     },
      //   ],
      // },
      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,
      userInfoData: {} // 用户个人信息
    };
  },
  created() {
    this.onInit();
  },
  mounted() {
    this.setZwaplus(); // 埋点
  },
  methods: {
    onLoad() {},
    onInit() {
      mgop({
        api: "mgop.kykj.houseexpropriat.getprjlist", // 必须
        host: "https://mapi.zjzwfw.gov.cn/",
        dataType: "JSON",
        type: "GET",
        data: {
          ticket: "1234567"
        },
        appKey: "es4b8zmz+2001833218+dehllx", // 必须
        onSuccess: data => {
          console.log("data", data);
          if (data.data && data.data.success == true) {
            // this.data = data.data;
          } else {
            console.log("用户无数据，不展示");
          }
        },
        onFail: err => {
          console.log(err, "err");
        },
        onFail: err => {
          console.log(err, "err");
        }
      });
      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;
    },
    // 页面跳转
    pageJump() {
      this.$router.push("/policyInfo");
    },
    setZwUserAplus(Userid) {
      // 设置用户信息埋点
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["_hold", "BLOCK"]
      });
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["_user_nick", this.userInfoData.username]
      });
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["_user_id", Userid]
      });
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["_hold", "START"]
      });
    },
    // 基础信息埋点配置
    setZwaplus() {
      (function(w, d, s, q, i) {
        w[q] = w[q] || [];
        var f = d.getElementsByTagName(s)[0];
        var j = d.createElement(s);
        j.async = true;
        j.id = "beacon-aplus";
        j.src = "https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085";
        f.parentNode.insertBefore(j, f);
      })(window, document, "script", "aplus_queue");
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["aplus-rhost-v", "alog.zjzwfw.gov.cn"]
      });
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["aplus-rhost-g", "alog.zjzwfw.gov.cn"]
      });
      // 这个会落到 app_key 字段上
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["appId", "60506758"]
      });
      // 单页应用 或 “单个页面”需异步补充 PV 日志参数还需进行如下埋点：
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["aplus-waiting", "MAN"]
      });
      // 单页应用路由切换后 或 在异步获取到 pv 日志所需的参数后再执行 sendPV：
      aplus_queue.push({
        action: "aplus.sendPV",
        arguments: [
          {
            is_auto: false
          },
          {
            miniAppId: "2001833218", //'应用开发管理平台-应用 ID
            miniAppName: "房屋征收"
          }
        ]
      });
    }
  }
};
</script>
