<template>
  <div class="container">
    <div class="topBox">
      <div class="olderVersion">
        <div class="titleBox">
          被征收人信息查询
        </div>
        <div @click="toOlderMode()" class="mode">进入老年模式</div>
      </div>
      <div class="baseInfo">
        <img src="@/assets/img/renyuanliebiao.png" />
        <span>被征收人姓名：{{ data.userName }}</span>
      </div>
      <div class="baseInfo">
        <img src="@/assets/img/credentials_icon.png" />
        <span>身份证号码：{{ setIdCard(data.idCard) }}</span>
      </div>
      <!-- 三张背景图 -->
      <div class="gridBg ">
        <div style="background:#1897FB;">
          <img src="@/assets/img/scan.png" />
          <span>扫一扫</span>
        </div>
        <div @click="gotoProject('pg')" style="background:#F1AE4B;">
          <img src="@/assets/img/evaluation.png" />
          <span>查评估结果</span>
        </div>
        <div @click="gotoProject('xy')" style="background:#16D7ED;">
          <img src="@/assets/img/compensation.png" />
          <span>查补偿协议</span>
        </div>
      </div>
    </div>
    <!-- 大背景图 -->
    <div class="bigImage">
      <img src="@/assets/img/government.png" />
    </div>
    <!-- 项目内容 -->
    <div :key="item.prjId" v-for="item in data.prjList">
      <div class="project">
        <!-- window图标 -->
        <div>
          <div class="projectIcon">
            <img
              src="@/assets/img/project.png"
              style="width: 25px;height: 25px;"
            />
          </div>
          <span class="projectTitle">{{ item.name }}</span>
        </div>
        <!-- 补偿协议图标 -->
        <div class="projectRight">
          <div>
            <img src="@/assets/img/menu_yhxy.png" />
          </div>
          <span>{{ item.currentState }}</span>
        </div>
      </div>
      <div class="projectCenter">
        <!-- 项目内容 -->
        <div class="projectCenterBox">
          <div>
            <div>
              <img src="@/assets/img/project_area.png" />
              <span>项目所在区域：</span>
            </div>
            <div>{{ item.area }}</div>
          </div>
          <div>
            <div>
              <img src="@/assets/img/project_dep.png" />
              <span>征收部门：</span>
            </div>
            <div>{{ item.zsbm }}</div>
          </div>
          <div>
            <div>
              <img src="@/assets/img/project_year.png" />
              <span>所属年份：</span>
            </div>
            <div>{{ item.year }}</div>
          </div>
          <div>
            <div>
              <img src="@/assets/img/project_no.png" />
              <span>征收决定号：</span>
            </div>

            <div class="blue">{{ item.zsjdh }}</div>
          </div>
        </div>
        <!-- 分户评估结果部分 -->
        <div class="assess">
          <van-image :src="require('@/assets/img/assess_1.png')" />
          <span>分户评估结果</span>
        </div>
        <div
          :key="assess.id"
          @click="toEvaluate(assess.id, assess.type)"
          class="assessCenter1"
          v-for="assess in item.fhpgList"
        >
          <div>
            <span>评估报告编号：</span>
            <span>{{ assess.assessmentNo }}</span>
          </div>
          <div>
            <span>被征收房屋地址：</span>
            <span>
              {{ assess.houseAddress }}
            </span>
          </div>
          <div>
            <span>评估总金额：</span>
            <span class="projectTitle" style="color: red"
              >¥{{ assess.countValue }}</span
            >
          </div>
        </div>
        <!-- 补偿协议部分 -->
        <div class="assess2">
          <van-image :src="require('@/assets/img/assess_2.png')" />
          <span>补偿结果</span>
        </div>
        <div
          :key="protocol.id"
          @click="toAgreement(protocol.id)"
          class="assessCenter2"
          v-for="protocol in item.bcxyList"
        >
          <div>
            <span>协议编号：</span>
            <span>{{ protocol.xyNo }}</span>
          </div>
          <div>
            <span>被征收房屋地址：</span>
            <span>
              {{ protocol.houseAddress }}
            </span>
          </div>
          <div>
            <span>补偿方式：</span>
            <span>
              {{ protocol.switchProductionWay }}
            </span>
          </div>
          <div>
            <span>合计补偿资金：</span>
            <span class="projectTitle" style="color: red"
              >¥{{ protocol.summationShouldCompensateMoney }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 征收政策背景图 -->
    <div>
      <van-image :src="require('@/assets/img/expropriationPolicy.png')" />
    </div>
    <!-- 征收政策部分 -->
    <div class=" zszc">
      <span>征收政策</span>
      <span>共{{ data.policiesRegulationsLists.totalCount }}条</span>
    </div>
    <div class=" protocolBox">
      <div
        :key="item.id"
        @click="pageJump(item.id)"
        class="protocolList"
        v-for="(item, i) in data.policiesRegulationsLists.list"
      >
        <!-- 非最后一行有边框 -->
        <div
          style="border-bottom: 1px dashed #E8E9EC"
          v-if="i != data.policiesRegulationsLists.list.length - 1"
        >
          <div>{{ item.title }}</div>
          <div>
            <span>发布时间：{{ item.publicTime }}</span>
            <span>区域：{{ item.area }}</span>
          </div>
        </div>
        <!-- 最后一行无边框 -->
        <div style="padding-bottom: 10px" v-else>
          <div>{{ item.title }}</div>
          <div>
            <span>发布时间：{{ item.publicTime }}</span>
            <span>区域：{{ item.area }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apis } from "@/common/apis";
import { mgop } from "@aligov/jssdk-mgop";
import { SetTicket } from "@/common/util//tools";
import { changeStyle } from "@/olderMode/1.js";
import $ from "jquery";
export default {
  name: "home",
  data() {
    return {
      data: {
        idCard: "加载中...",
        userName: "加载中...",
        policiesRegulationsLists: {
          totalCount: 0,
          list: [
            { title: "无数据", publicTime: "无数据", area: "无数据" },
            { title: "无数据", publicTime: "无数据", area: "无数据" },
            { title: "无数据", publicTime: "无数据", area: "无数据" }
          ]
        },
        prjList: [
          {
            name: "请求出错暂时没有可用数据",
            currentState: "无数据",
            area: "宁波市房屋建设管理办公室九号楼",
            zsbm: "无数据",
            year: "无数据",
            zsjdh: "无数据",
            fhpgList: [
              {
                assessmentNo: "宁波市房屋建设和建筑管理局办公室",
                houseAddress: "宁波市房屋建设和建筑管理局办公室",
                countValue: "无数据"
              },
              {
                assessmentNo: "宁波市房屋建设和建筑管理局办公室",
                houseAddress: "宁波市房屋建设和建筑管理局办公室",
                countValue: "无数据"
              }
            ],
            bcxyList: [
              {
                xyNo: "无数据",
                houseAddress: "宁波市房屋建设和建筑管理局办公室",
                switchProductionWay: "无数据",
                summationShouldCompensateMoney: "无数据"
              },
              {
                xyNo: "无数据",
                houseAddress: "宁波市房屋建设和建筑管理局办公室",
                switchProductionWay: "无数据",
                summationShouldCompensateMoney: "无数据"
              }
            ]
          },
          {
            name: "请求出错",
            currentState: "无数据",
            area: "无数据",
            zsbm: "无数据",
            year: "无数据",
            zsjdh: "无数据",
            fhpgList: [
              {
                assessmentNo: "无数据",
                houseAddress: "无数据",
                countValue: "无数据"
              }
            ],
            bcxyList: [
              {
                xyNo: "无数据",
                houseAddress: "无数据",
                switchProductionWay: "无数据",
                summationShouldCompensateMoney: "无数据"
              }
            ]
          }
        ]
      }
    };
  },
  created() {
    this.onInit();
    console.log("this", this);
    this.setLocationAplus();
    SetTicket(this.$route.query.ticket);
    $(".logout").css("display", "none");
    if (sessionStorage.getItem("mode") == "older") {
      changeStyle();
    }
  },
  mounted() {
    if (sessionStorage.getItem("mode") == "older") {
      $(".container").addClass("old_container");
    }
  },
  methods: {
    // 获取数据
    onInit() {
      mgop({
        api: "mgop.kykj.houseexpropriat.getprjlist",
        host: "https://mapi.zjzwfw.gov.cn/",
        dataType: "JSON",
        type: "POST",
        data: {
          ticket: this.$route.query.ticket
        },
        appKey: "es4b8zmz+2001833218+dehllx",
        onSuccess: data => {
          console.log("首页数据", data);

          window.sessionStorage.setItem("homeData", JSON.stringify(data));
          if (data.data.success) {
            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) {
              this.$message({
                message: "登录超时，请重新登录",
                duration: 3000,
                type: "info",
                center: true
              });
              setTimeout(() => {
                window.location.replace(
                  "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=fwzs"
                );
              }, 3000);
            } else {
              this.$message({
                message: "请求出错",
                duration: 3000,
                type: "error",
                center: true
              });
            }
          }
        },
        onFail: err => {
          this.$notify({
            title: "错误",
            message: "请求失败",
            duration: 3000,
            type: "error"
          });
        }
      });
    },
    toOlderMode() {
      if (sessionStorage.getItem("mode") == "older") {
        sessionStorage.setItem("mode", "normal");
        $(".mode").text("进入老年模式");
        $(".container").removeClass("old_container");
        $(".bottomContent").removeClass("old_bottomContent");
        $("#app").removeClass("old_app");
      } else {
        sessionStorage.setItem("mode", "older");
        changeStyle();
        $(".mode").text("退出老年模式");
        $(".container").addClass("old_container");
      }
    },
    setIdCard(id) {
      return id == "加载中..."
        ? id
        : id.substr(0, 6) + "********" + id.substr(14, 4);
    },
    // 跳转选择项目
    gotoProject(type) {
      $(".logout").css("display", "block");
      this.$router.push({
        name: "projectSelect",
        params: {
          type: type
        }
      });
    },
    // 直接跳转分户评估结果页面
    toEvaluate(id, type) {
      $(".bottomContent").removeClass("display");
      $("#app").removeClass("padding");
      $(".logout").css("display", "block");
      this.$router.push({
        name: "evaluatePage",
        params: {
          fhpgId: id,
          type
        }
      });
    },
    // 直接跳转协议结果pdf
    toAgreement(id) {
      $(".bottomContent").removeClass("display");
      $("#app").removeClass("padding");
      $(".logout").css("display", "block");
      this.$router.push({
        name: "showPdf",
        params: {
          id
        }
      });
    },
    // 加载项目数统计信息
    onLoadStatistic() {
      apis.projectStatistics().then(({ result }) => {
        this.statistics = result;
      });
    },
    // 政策信息页面跳转
    pageJump(id) {
      $(".bottomContent").removeClass("display");
      $("#app").removeClass("padding");
      $(".logout").css("display", "block");
      this.$router.push({
        name: "policyInfo",
        params: { 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>

<style lang="less" scoped>
.container {
  border-radius: 6px;
  background: #f6f7f8;
  padding-bottom: 20px;
  > div:nth-child(n + 2) {
    margin: 10px 12px 0 10px;
  }
}
// 最上面盒子
.topBox {
  background: url(../assets/img/bg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  .olderVersion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    :nth-child(2) {
      background: #f82b36;
      width: 124px;
      height: 33px;
      text-align: center;
      vertical-align: middle;
      line-height: 33px;
      border-radius: 2px;
      font-size: 18px;
      font-weight: 600;
      color: #ffffff;
    }
  }
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 173px;
    height: 36px;

    border-radius: 0 22px 22px 0;
    background: rgba(6, 63, 142, 0.66);
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
  }
  .baseInfo {
    display: flex;
    margin: 5px 0;
    align-items: center;
    img {
      height: 21px;
      padding-right: 10px;
      padding-left: 31px;
    }
    span {
      color: #fff;
    }
  }
  .gridBg {
    display: flex;

    align-items: center;
    justify-content: space-around;
    margin: 10px 12px 0 10px;

    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
    > div {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 90px;
      height: 80px;
      margin: 20px 0 10px;
      border-radius: 10px;
      img {
        height: 35px;
      }
      span {
        padding-top: 5px;
        font-weight: 500;
        color: #fff;
      }
    }
  }
}
// 大背景图
.bigImage {
  img {
    width: 100%;
  }
}
// 项目部分
.project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 41px;
  padding: unset 0;
  background: url(../assets/img/project_bg.png) no-repeat;
  background-position: 0 -2px;
  background-size: 100% 120%;
  > div:nth-child(1) {
    display: flex;
    align-items: center;
    width: 50%;
    height: 100%;
    .projectIcon {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      height: 100%;
      margin-right: 10px;
      border-radius: 5px 0 0;
      background: #3284cd;
    }
    span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .projectRight {
    display: flex;
    align-items: center;
    height: 27px;
    opacity: 0.82;

    // background: #24bca3;
    > div {
      background: #24bca3;
      height: 27px;
      display: flex;
      align-items: center;
      border-radius: 13px 0 0 17px;
    }
    img {
      width: 17px;
      height: 17px;
      margin-right: 3px;
      margin-left: 8px;
    }
    span {
      font-size: 12px;
      font-weight: 600;
      padding-right: 10px;
      color: #fff;
      background: #24bca3;
      height: 27px;
      line-height: 27px;
    }
  }
}
.projectTitle {
  font-family: PingFangSC-Semibold, PingFang SC;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.projectCenter {
  padding-bottom: 25px;
  background: #fff;
  box-shadow: 0 2px 6px 1px rgba(212, 212, 212, 0.5);
  .projectCenterBox {
    > div {
      display: flex;
      align-items: flex-start;
      padding-top: 15px;
      > :nth-child(1) {
        display: flex;
        align-items: center;
        img {
          height: 22px;
          padding: 0 10px;
        }
        :nth-child(2) {
          font-weight: 400;
          color: #b3b5b9;

          width: 106px;
        }
      }

      > :last-child {
        color: #363a44;
        width: 55%;
      }

      .blue {
        color: #3883f1;
      }
    }
  }
  .assess {
    display: flex;
    align-items: center;
    height: 25px;
    padding: 25px 10px 0px;
    .van-image {
      width: 24px;
      height: 24px;
      margin-right: 10px;
      background: #2468f2;
    }
    span {
      font-family: PingFangSC-Regular, PingFang SC;
      font-size: 16px;
      font-weight: 400;
      color: #2468f2;
    }
  }
  .assessCenter1 {
    margin: 25px 22px 22px;
    border-left: 2px solid #24bca3;
    font-weight: 400;
    > div {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding-left: 12px;
      :nth-child(1) {
        white-space: nowrap;
        color: #b3b5b9;
      }
      :nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
        color: #363a44;
      }
    }
    > :nth-child(2) {
      margin: 15px 0;
    }
  }
  .assess2 {
    display: flex;
    align-items: center;
    height: 25px;
    padding: 0px 10px 0px;
    .van-image {
      width: 24px;
      height: 24px;
      margin-right: 10px;
      background: #2468f2;
    }
    span {
      font-size: 16px;
      font-weight: 400;
      color: #2468f2;
    }
  }
  .assessCenter2 {
    margin: 25px 22px 22px;
    border-left: 2px solid #ff5959;
    font-weight: 400;
    > div {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding-left: 12px;
      :nth-child(1) {
        white-space: nowrap;
        color: #b3b5b9;
      }
      :nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
        color: #363a44;
      }
    }
    > div:nth-child(n + 2) {
      margin: 15px 0;
    }
  }
}

// 征收政策部分
.zszc {
  span {
    font-size: 16px;
    font-weight: 800;
    color: #202020;
    display: block;
  }
  > span:nth-child(2) {
    margin: 10px 0;
    color: #2c2b2b;
    font-size: 12px;
  }
}

.protocolBox {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 5px 0 rgba(168, 168, 168, 0.5);
  .protocolList {
    padding: 0 20px;
    > div {
      > div:nth-child(1) {
        font-size: 14px;
        font-weight: 400;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 294px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #202020;
        padding-top: 20px;
      }
      > div:nth-child(2) {
        padding: unset 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        span {
          font-size: 12px;
          color: #9da2a3;
          font-weight: 400;
          line-height: 11px;
          height: 11px;
        }
      }
    }
  }
}
// 老年化
.old_container {
  .titleBox {
    font-size: 24px;
    width: 228px;
    height: 41px;
  }
  .baseInfo {
    font-size: 22px;
    img {
      height: 30px;
    }
  }
  .gridBg {
    font-size: 20px;
    > div {
      width: 110px;
      height: 100px;
      img {
        height: 55px;
      }
    }
  }
  .project {
    display: unset;
    .projectTitle {
      font-size: 24px;
    }
    > div:nth-child(1) {
      display: flex;
      align-items: center;
      height: 41px;
      padding: unset 0;
      width: 100%;
      background: url(../assets/img/project_bg.png);

      background-position: 0 -2px;
      background-size: 100% 120%;
    }
    > div:nth-child(2) {
      margin-top: 10px;
      > :nth-child(1) {
        border-radius: unset !important;
      }
      > span {
        font-size: 20px;
        border-radius: 0px 13px 13px 0px;
      }
    }
  }
  .projectCenterBox {
    font-size: 20px;
    > div {
      > :nth-child(1) {
        :nth-child(2) {
          width: unset !important;
          white-space: nowrap;
        }
      }
      > :last-child {
        width: unset;
      }
    }
  }
  .assess {
    span {
      font-size: 22px;
    }
  }
  .assessCenter1 {
    font-size: 20px;
    .projectTitle {
      font-size: 20px;
    }
  }
  .assess2 {
    span {
      font-size: 22px;
    }
  }
  .assessCenter2 {
    font-size: 20px;
    .projectTitle {
      font-size: 20px;
    }
  }
  .zszc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > :nth-child(1) {
      font-size: 20px;
    }
    > :nth-child(2) {
      font-size: 18px;
    }
  }
  .protocolList {
    > div {
      > :nth-child(1) {
        font-size: 20px !important;
      }
      > :nth-child(2) {
        display: block !important;
        padding-top: 10px !important;
        span {
          font-size: 18px !important;
          display: block;
          height: unset !important;
          line-height: 25px !important;
        }
      }
    }
  }
}
</style>
