<template>
  <div class="container">
    <div style="padding:10px">
      <div :class="this.type == 'pg' ? 'proTopBoxpg' : 'proTopBoxxy'">
        <div class="proCenterBox">
          <div class="proCenterInfo">
            <van-image
              :src="require('@/assets/img/expropriated_person.png')"
              class="proCenterImg"
            />
            <div>
              <div>
                <span>被征收人姓名：</span>
                <span style="color:#626262;">{{ info.userName }}</span>
              </div>
              <div>
                <span>身份证号：</span>
                <span style="color:#626262;">{{ setIdCard(info.idCard) }}</span>
              </div>
            </div>
          </div>
          <div class="proCenterFlex">
            <div class="proCenterFlexFont">请选择您的征收项目</div>
            <van-icon color="#9da2a3" name="arrow-down" />
          </div>
        </div>
      </div>
    </div>
    <div class="proList">
      <van-list>
        <!-- 跳转项目详情 -->
        <div
          :key="item.prjId"
          class="proListBox shadow"
          v-for="item in info.prjList"
          @click="gotoDetail(item.prjId)"
        >
          <div class="proAreaBox">
            <div class="proArea">{{ item.area }}</div>
            <div v-if="item.currentState == '补偿协议签订阶段'">
              · {{ item.currentState }}
            </div>
            <div style="color:#179D5C" v-else>· {{ item.currentState }}</div>
          </div>
          <div class="proAreaBox">
            <div class="proTitleBox">{{ item.name }}</div>
          </div>
          <van-divider style="margin:8px 0;" />
          <div class="proDateBox">
            <div>{{ item.createRecordTime }}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { changeBottomStyle } from "@/olderMode/1.js";
import $ from "jquery";
export default {
  data() {
    return {
      type: "",
      // 初始数据
      info: {
        userName: "无数据",
        idCard: "无数据",
        prjList: [
          {
            area: "无数据",
            currentState: "无数据",
            zsbm: "无数据",
            year: "无数据",
            name: "无数据",
            createRecordTime: "无数据"
          }
        ]
      }
    };
  },
  created() {
    if (sessionStorage.getItem("mode") == "older") {
      changeBottomStyle();
    }
    this.onInit();
  },
  mounted() {
    if (sessionStorage.getItem("mode") == "older") {
      $(".container").addClass("old_container");
    }
  },
  methods: {
    // 获取数据
    onInit() {
      this.type =
        this.$route.params.type || window.sessionStorage.getItem("type");
      if (this.$route.params.type) {
        window.sessionStorage.setItem("type", this.$route.params.type);
      }
      let result = JSON.parse(window.sessionStorage.getItem("homeData"));
      // console.log("啊", result);
      if (result.data.success) {
        this.info = result.data.data;

        if (result.data.data.prjList.length == 0) {
          this.$message({
            message: "无征收项目",
            duration: 3000,
            type: "info",
            center: true
          });
        }
      } else {
        let code = [6001, 6501];
        if (code.indexOf(result.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);
        }
      }
    },
    setIdCard(id) {
      return id == "无数据"
        ? id
        : id.substr(0, 6) + "********" + id.substr(14, 4);
    },
    // 页面跳转
    gotoDetail(id) {
      if (window.sessionStorage.getItem("type") == "pg") {
        // 评估结果一级页面
        this.$router.push({
          name: "evalute",
          params: {
            prjId: id
          }
        });
      } else if (window.sessionStorage.getItem("type") == "xy") {
        // 协议结果页面
        this.$router.push({
          name: "reportAgreement",
          params: {
            prjId: id
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .proTopBoxpg {
    display: flex;
    justify-content: space-around;
    background: url(../../assets/img/zspg.png);
    background-repeat: no-repeat;
    background-size: 100% 90px;
  }
  .proTopBoxxy {
    display: flex;
    justify-content: space-around;
    background: url(../../assets/img/zsxy.png);
    background-repeat: no-repeat;
    background-size: 100% 90px;
  }
  .proCenterBox {
    overflow: hidden;
    width: 95%;
    margin-top: 78px;
    border-radius: 6px;
    background: rgba(248, 253, 255, 1);
    box-shadow: 1px 1px 3px rgb(202, 201, 201);
    .proCenterInfo {
      display: flex;
      padding-top: 20px;
      // align-items: center;
      > :nth-child(2) {
        > div:nth-child(2) {
          margin-top: 10px;
          span:nth-child(2) {
            padding-top: 1px;
          }
        }
      }
      .proCenterImg {
        width: 45px;
        height: 45px;
        padding-right: 10px;
        padding-left: 15px;
      }
      span {
        font-family: PingFangSC-Regular, PingFang SC;
        font-size: 14px;
        font-weight: 500;
        color: #09a4fa;
      }
    }
    .proCenterFlex {
      display: flex;
      align-items: center;
      flex-direction: column;
      padding-top: 15px;
      margin-bottom: 15px;
      div {
        font-family: PingFangSC-Regular, PingFang SC;
        font-size: 12px;
        font-weight: 400;
        line-height: 25px;
        height: 25px;
        color: #9da2a3;
      }
    }
  }

  .proList {
    /* position: absolute; */
    /* top: 230px; */
    bottom: 0;
    overflow-y: scroll;
    width: 100%;
    .proListBox {
      margin: 15px 20px;
      border-radius: 3px;
      background-color: #fff;
      .proAreaBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        font-size: 16px;
        > :nth-child(n + 2) {
          font-size: 14px;
          font-weight: 500;
          line-height: 25px;
          height: 25px;
          color: #09a4fa;
        }
        .proArea {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          font-weight: 500;
          line-height: 25px;
          height: 25px;
          padding: 3px 17px;
          color: #fff;
          border-radius: 4px;
          background: #09a4fa;
        }
        .proTitleBox {
          font-family: PingFangSC-Regular, PingFang SC;
          font-size: 15px;
          font-weight: 600;
          line-height: 20px;
          overflow: hidden;
          height: 20px;
          margin-left: 10px;
          padding-left: 7px;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #252525;
          border-left: 3px solid #09a4fa;
        }
      }
      .proDateBox {
        display: flex;
        flex-direction: row-reverse;
        padding-right: 10px;
        font-size: 12px;
      }
    }
    .shadow {
      -webkit-box-shadow: rgb(189, 189, 189) 0 0 3px;
      -moz-box-shadow: rgb(189, 189, 189) 0 0 3px;
      box-shadow: rgb(189, 189, 189) 0 0 3px;
    }
  }
}
.old_container {
  .proCenterInfo {
    .proCenterImg {
      margin-top: 10px;
    }
    span {
      font-size: 20px !important;
    }
    > div:nth-child(2) {
      > :nth-child(2) {
        display: flex;
        span:nth-child(1) {
          white-space: nowrap;
        }
        span:nth-child(2) {
          word-break: break-all;
          line-height: 36px;
          margin-top: -3px;
        }
      }
    }
  }
  .proCenterFlexFont {
    font-size: 18px !important;
  }

  .proArea,
  .proTitleBox {
    font-size: 22px !important;
  }
  .proTitleBox {
    height: unset !important;
    line-height: unset !important;
  }
  .proAreaBox {
    > :nth-child(n + 2) {
      font-size: 18px !important;
    }
  }
  .proDateBox {
    font-size: 18px !important;
  }
}
</style>
