<template>
  <div>
    <div :class="type == 'pg' ? 'proTopBoxpg' : 'proTopBoxxy'">
      <div class="proCenterBox">
        <div class="proCenterInfo">
          <van-image
            :src="require('@/assets/img/expropriated_person.png')"
            class="proCenterImg"
          />
          <div>
            <div>
              <span class="proCenterFont">被征收人姓名：</span>
              <span class="proCenterFont" style="color:#626262;">{{
                info.userName
              }}</span>
            </div>
            <div>
              <span class="proCenterFont">身份证号：</span>
              <span class="proCenterFont" style="color:#626262;">{{
                info.idCard
              }}</span>
            </div>
          </div>
        </div>
        <div class="proCenterFlex" style="margin-bottom: 15px;">
          <div class="proCenterFlexFont">请选择您的征收项目</div>
          <van-icon color="#9da2a3" name="arrow-down" />
        </div>
      </div>
    </div>
    <div class="proList">
      <van-list>
        <div
          :key="item.id"
          class="proListBox shadow"
          v-for="item in info.prjList"
        >
          <div @click="gotoDetail(item.prjId)">
            <div class="proAreaBox">
              <div class="proArea">{{ item.area }}</div>
              <div class="proCenterFont" v-if="item.state_cd == 1">
                · {{ item.currentState }}
              </div>
              <div class="proCenterFont" 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.prjId }}</div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import "./project.css";
import { mgop } from "@aligov/jssdk-mgop";
export default {
  data() {
    return {
      loading: true,
      type: "",
      data: new Object(),
      loading: false,
      finished: true,
      // 初始数据
      info: {
        userName: "无数据",
        idCard: "无数据",
        prjList: [
          {
            area: "无数据",
            currentState: "无数据",
            zsbm: "无数据",
            year: "无数据"
          }
        ]
      }
    };
  },
  created() {
    this.onInit();
  },
  methods: {
    // 获取数据
    onInit() {
      this.type = this.$route.params.type;
      this.ticket = this.$route.params.ticket;
      mgop({
        api: "mgop.kykj.houseexpropriat.getprjlist",
        host: "https://mapi.zjzwfw.gov.cn/",
        dataType: "JSON",
        type: "POST",
        data: {
          ticket:
            this.$route.params.ticket || window.sessionStorage.getItem("ticket")
        },
        appKey: "es4b8zmz+2001833218+dehllx",
        onSuccess: data => {
          const { data: res } = data;
          this.info = res.data;
        },
        onFail: err => {
          console.log("用户无数据，不展示");
        }
      });
    },
    // 页面跳转
    gotoDetail(id) {
      if (this.type == "pg") {
        // 评估结果页面
        this.$router.push({
          name: "evaluteResult",
          params: {
            prjId: id,
            type: this.type,
            ticket: this.$route.params.ticket
          }
        });
      } else if (this.type == "xy") {
        // 协议结果页面
        this.$router.push({
          name: "reportAgreement",
          params: { projectid: id, type: this.type, ticket: this.ticket }
        });
      }
    }
  }
};
</script>

<style></style>
