<template>
  <div>
    <div style="height: 240px;">
      <div class="proTopBox">
        <div :class="type == 'pg' ? 'proTopBoxpg': 'proTopBoxxy' "></div>
        <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;">{{user.name}}</span>
              </div>
              <div>
                <span class="proCenterFont">身份证号：</span>
                <span class="proCenterFont" style="color:#626262;">{{user.identityId}}</span>
              </div>
            </div>
          </div>
          <div class="proCenterFlex">
            <div class="proCenterFlexFont">请选择您的征收项目</div>
            <van-image
              :src="require('@/assets/img/expropriated_select.png')"
              class="proCenterFlexImg"
            />
          </div>
        </div>
      </div>
    </div>
    <div>
      <van-list>
        <div
          :key="item.id"
          @click="gotoDetail(item.id)"
          class="proListBox shadow"
          v-for="(item) in list"
        >
          <div class="proAreaBox">
            <div class="proArea">{{item.area}}</div>
            <div class="proCenterFont" v-if="item.state_cd == 1">· {{item.state}}</div>
            <div
              class="proCenterFont"
              style="color:#179D5C"
              v-else-if="item.state_cd == 2"
            >· {{item.state}}</div>
          </div>
          <div class="proAreaBox">
            <div class="proTitleBox">{{item.title}}</div>
          </div>
          <van-divider style="margin:8px 0;" />
          <div class="proDateBox">
            <div>{{item.date}}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import './project.css';
import { apis } from '@/common/apis';

export default {
  data() {
    return {
      loading: true,
      type: '',
      data: new Object(),
      user: {
        name: '胡伯钧',
        identityId: '3302041982893743782',
      },
      list: [
        {
          id: 11,
          area: '镇海区',
          title: '郁金花园北块地',
          date: '2021-09-08',
          state_cd: '1',
          state: '协议签订阶段',
        },
        {
          id: 22,
          area: '象山县',
          title: '象山县人民广场周边区块改造项目',
          date: '2021-09-08',
          state_cd: '2',
          state: '项目已报结',
        },
        // {
        //   id: 33,
        //   area: '全大市',
        //   title: '宁波市住房和城乡建设委员会开展关于住房的政策',
        //   date: '2021年09月05日',
        //   state_cd: '0',
        //   state: '测试',
        // },
      ],
      loading: false,
      finished: true,
    };
  },
  created() {
    this.onInit();
  },
  methods: {
    onInit() {
      this.onLoadData();
    },
    onLoadData() {
      // apis.mailDetail({ id: this.$route.query.id }).then(({ result }) => {
      //   this.loading = false;
      //   this.data = result;
      // });
      this.type = this.$route.params.type;
    },
    gotoDetail(id) {
      if (this.type == 'pg') {
        // 评估结果页面
        this.$router.push({ name: 'reportCompensate', params: { projectid: id, type: this.type } });
      } else if (this.type == 'xy') {
        // 协议结果页面
        this.$router.push({ name: 'reportAgreement', params: { projectid: id, type: this.type } });
      }
    },
  },
};
</script>

<style>
</style>