<template>
    <div id="wfrwInfo">
        <h1 v-text="people.name"></h1>
        <div class="firstModel">
            <div class="left-firstModel">
                <div><span>基本信息：</span><span>更新时间：<span class="left-firstModel-update" v-text="people.firstModel.updataTime"></span></span></div>
                <table>
                    <tr>
                        <td>中文名</td>
                        <td v-text="people.firstModel.table.zwm"></td>
                        <td>外文名</td>
                        <td v-text="people.firstModel.table.wwm"></td>
                        <td rowspan="7"><img :src="people.firstModel.table.img" alt="" /></td>
                    </tr>
                    <tr>
                        <td>所在机构</td>
                        <td v-text="people.firstModel.szjg" rowspan="3"></td>
                    </tr>
                    <tr>
                        <td>职务</td>
                        <td v-text="people.firstModel.table.zw"></td>
                        <td>国家</td>
                        <td v-text="people.firstModel.table.gj"></td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td v-text="people.firstModel.table.xb"></td>
                        <td>出生日期</td>
                        <td v-text="people.firstModel.table.csrq"></td>
                    </tr>
                    <tr>
                        <td>出生地</td>
                        <td v-text="people.firstModel.table.csd"></td>
                        <td>服役时间</td>
                        <td v-text="people.firstModel.table.fysj"></td>
                    </tr>
                    <tr>
                        <td>军衔</td>
                        <td v-text="people.firstModel.table.jx"></td>
                        <td>军衔时间</td>
                        <td v-text="people.firstModel.table.jxsj"></td>
                    </tr>
                    <tr>
                        <td>军种/部门</td>
                        <td v-text="people.firstModel.table.jz"></td>
                        <td>现职时间</td>
                        <td v-text="people.firstModel.table.xzsj"></td>
                    </tr>
                    <tr>
                        <td>人员类别</td>
                        <td v-text="people.firstModel.table.rylb"></td>
                        <td>学历学位</td>
                        <td v-text="people.firstModel.table.xlxw"></td>
                    </tr>
                    <tr>
                        <td>专长领域</td>
                        <td colspan="4" v-text="people.firstModel.table.zcly"></td>
                    </tr>
                    <tr>
                        <td>家庭住址</td>
                        <td v-text="people.firstModel.table.jtzz" colspan="2"></td>
                        <td>联系电话</td>
                        <td v-text="people.firstModel.table.lxdh"></td>
                    </tr>
                    <tr>
                        <td>社交账号</td>
                        <td colspan="4" v-text="people.firstModel.table.sjzh"></td>
                    </tr>
                    <tr>
                        <td>岗位编号</td>
                        <td colspan="2" v-text="people.firstModel.table.gwbh"></td>
                        <td>人物编号</td>
                        <td v-text="people.firstModel.table.rwbh"></td>
                    </tr>
                </table>
            </div>
            <div class="right-firstModel">
                <ul class="right-firstModel-firstList">
                    <li>相关人物</li>
                    <li v-for="item in people.firstModel.firstList" v-text="item"></li>
                </ul>
                <ul class="right-firstModel-firstList">
                    <li>账号动态</li>
                    <li v-for="item in people.firstModel.secondList" >
                        <span>时间：<span v-text="item.sj"></span></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style lang="scss" >
#wfrwInfo {
    width: 100%;
    padding: 20px 100px;
    box-sizing: border-box;
    .left-firstModel {
        width: 70%;
        padding: 10px;
        box-sizing: border-box;
    }
    .right-firstModel {
        width: 30%;
        padding: 10px;
        box-sizing: border-box;
    }
}
</style>

<script>
import defaultImage from '../../assets/img/dfzy/zwtp.png';
export default {
    name: 'wfrwInfo',
    data() {
        return {
            people: {
                name: '马克•A•米莱',
                firstModel: {
                    updataTime: "2021.03.31",
                    table: {
                        zwm: '马克•A•米莱',
                        wwm: 'Mark A. Milley',
                        img: defaultImage,
                        szjg: '美国参谋长联席会议',
                        zw: '主席',
                        gj: '美国',
                        xb: '男',
                        csrq: '1958.06.18',
                        cds: '俄亥俄州',
                        fysj: '1976.09.01',
                        jx: '上将',
                        jxsj: '2014.12',
                        jz: '陆军',
                        xzsj: '2020.01',
                        rylb: '现役',
                        xlxw: '硕士',
                        zcly: '陆域;联合能力',
                        jtzz: '',
                        lxdh: '',
                        sjzh: '',
                        gwbh: '',
                        rwbh: ''
                    },
                    firstList: ["美国总统拜登", "美国国防部长奥斯汀", "菲利普", "戴威尔", "美国总统拜登", "美国国防部长奥斯汀", "菲利普", "戴威尔"],
                    secondList: [
                        {
                            sj: '2021.06.28.10：22：56',
                            ly: '推特账号@Mark A. Milley',
                            nr: '中国军队对台湾地区的军事压迫是美国所不能接受的，美国有义务维护自由开放印太......'
                        },
                        {
                            sj: '2021.06.28.10：22：56',
                            ly: '脸谱账号@Mark A. Milley',
                            nr: '中国军队对台湾地区的军事压迫是美国所不能接受的，美国有义务维护自由开放印太......'
                        }
                    ],
                }
            }
        }
    },
    methods: {},
    activated() {

    }
}
</script>