<template>
  <div class="about">
    <h1>详情页</h1>
    <p>
        <router-link to="/">回到主页</router-link>
        <router-link :to="'/detail?id=' + (+id + 1)">相似项目</router-link>
    </p>
    <div class="">
        <button type="button" @click="item.projectName = '修改过的title'">change title</button>
    </div>
    <div>
        <p v-for="(value, key) in item">
            {{ key }} : {{ value }}
        </p>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            item: {},
            id: this.$route.query.id || 0
        };
    },
    params: ['v'],
    api(){
        let list;
        this.$api({
            url: '/data/list-tab-b.json',
            params: {
                tab: "finance",
                page: 0,
                limit: 20
            }
        }).then(res => {
            list = res.data.data.ups.filter(item => item.type !== "count");
        });
        return new Promise((res ,rej) => {
            setTimeout(function(){
                this.item = list[0];
                this.item.cityName = Math.random();
                res();
            }.bind(this), 1500);
        });
    },
    watch: {
        '$route': function(){
            this.$options.api.apply(this);
        }
    }
}
</script>

<style scoped>
.about {
    width: 460px;
    margin: auto;
}
</style>
