<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">
            <div class="gridImg" style="background:#1897FB;">
              <van-image
                :src="require('@/assets/img/scan.png')"
                class="gridImgBg"
              />
              <span class="baseFont" style="padding-top: 5px;">扫一扫</span>
            </div>
            <div
              @click="gotoProject('pg')"
              class="gridImg"
              style="background:#F1AE4B;"
            >
              <van-image
                :src="require('@/assets/img/evaluation.png')"
                class="gridImgBg"
              />
              <span class="baseFont" style="padding-top: 5px;">查评估结果</span>
            </div>
            <div
              @click="gotoProject('xy')"
              class="gridImg"
              style="background:#16D7ED;"
            >
              <van-image
                :src="require('@/assets/img/compensation.png')"
                class="gridImgBg"
              />
              <span class="baseFont" style="padding-top: 5px;">查补偿协议</span>
            </div>
          </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">
              <!-- window图标 -->
              <div style="display: flex;align-items: center;">
                <div class="projectIcon">
                  <van-image
                    :src="require('@/assets/img/project.png')"
                    style="width: 25px;height: 25px;"
                  />
                </div>
                <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-list>
                <div
                  :key="assess.id"
                  @click="gotoProject('pg', item.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.id"
                  @click="gotoProject('xy', item.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.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"
            >共{{ data.policiesRegulationsLists.totalCount }}条</span
          >
        </div>
      </div>
      <div class="centerMagin" style="padding-bottom: 20px">
        <div class="protocolBox">
          <!-- 遍历内容 -->
          <van-list>
            <div
              :key="item.id"
              @click="pageJump(item.id)"
              class="protocolList"
              v-for="(item, i) in data.policiesRegulationsLists.list"
            >
              <!-- 非最后一行 -->
              <div
                class="protocolLine"
                v-if="i != data.policiesRegulationsLists.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.publicTime }}</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.publicTime }}</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 { mgop } from "@aligov/jssdk-mgop";
import { SetTicket } from "@/common/util//tools";
export default {
  name: "home",
  data() {
    return {
      data: {
        idCard: "加载中...",
        userName: "加载中...",
        policiesRegulationsLists: {
          totalCount: 0
        }
      },
      ticket: "8a1188527bda7a4d017c0bf804381ed5-ticket"
    };
  },
  async created() {
    this.onInit();
    console.log("this", this);
    this.setLocationAplus();
    SetTicket(this.$route.query.ticket || this.ticket);
  },
  methods: {
    // 获取数据
    onInit() {
      mgop({
        api: "mgop.kykj.houseexpropriat.getprjlist",
        host: "https://mapi.zjzwfw.gov.cn/",
        dataType: "JSON",
        type: "POST",
        data: {
          ticket: this.$route.query.ticket || this.ticket
        },
        appKey: "es4b8zmz+2001833218+dehllx",
        onSuccess: data => {
          console.log("首页数据", data);
          if (data.data && data.data.success == true) {
            this.data = data.data.data;
            // 埋点
            this.setZwUserAplus(this.data.idCard, this.data.userName);
          } else {
            var errorCodes = [6001, 6501];
            // 跳转到政务系统;
            if (errorCodes.indexOf(data.data.bizCode) > -1) {
              window.location.replace(
                "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=fwzs"
              );
            } else console.log("用户无数据，不展示");
          }
        },
        onFail: err => {
          console.log("用户无数据，不展示");
        }
      });
    },
    // 跳转项目详情
    gotoProject(type, id) {
      this.$router.push({
        name: "projectSelect",
        params: {
          type: type,
          ticket: this.$route.query.ticket || this.ticket,
          prjId: id || ""
        }
      });
    },
    // 加载项目数统计信息
    onLoadStatistic() {
      apis.projectStatistics().then(({ result }) => {
        this.statistics = result;
      });
    },
    // 政策信息页面跳转
    pageJump(id) {
      this.$router.push({
        name: "policyInfo",
        params: { ticket: this.ticket, id: id }
      });
    },
    setZwUserAplus(Userid, userName) {
      // 设置用户信息埋点
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["_hold", "BLOCK"]
      });
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["_user_nick", userName] // this.userInfoData.username],
      });
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["_user_id", Userid]
      });
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["_hold", "START"]
      });
    },
    setLocationAplus() {
      ZWJSBridge.onReady(() => {
        console.log("初始化完成后，执行bridge方法");
        ZWJSBridge.getUserType()
          .then(result1 => {
            console.log("getUserType():" + JSON.stringify(result1));
            console.log("result1.userType:" + result1.userType);
            //经纬度
            ZWJSBridge.getLocation()
              .then(result2 => {
                console.log("getLocation():" + JSON.stringify(result2));
                console.log("result2.longitude:" + result2.longitude);
                console.log("result2.latitude:" + result2.latitude);
                aplus_queue.push({
                  action: "aplus.sendPV",
                  arguments: [
                    {
                      is_auto: false
                    },
                    {
                      isMini: true,
                      miniAppId: "2001833218", //'应用开发管理平台-应用 ID
                      miniAppName: "房屋征收",
                      long: result2.longitude,
                      lati: result2.latitude,
                      userType: result1.userType
                    }
                  ]
                });
              })
              .catch(error => {
                console.log(error);
              });
          })
          .catch(error => {
            console.log(error);
          });
      });
    }
  }
};
</script>
