<template>
    <div class="u-detail">
        <el-form v-if="detailInfo.id" ref="ruleForm" label-width="120px" label-suffix=":" class="rule-form">
            <dg-row :gutter="20">
                <dg-col :span="12">
                    <el-form-item label="姓名" prop="name">
                        <div class="u-detail__text">{{ detailInfo.name }}</div>
                    </el-form-item>
                    <el-form-item label="身份证" prop="idcard">
                        <div class="u-detail__text">{{ detailInfo.idcard }}</div>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <div class="u-detail__text" v-translate="{ code: 'DM_SEX' }">{{ detailInfo.sex }}</div>
                    </el-form-item>
                    <el-form-item label="出生日期" prop="birth">
                        <div class="u-detail__text">{{ detailInfo.birth }}</div>
                    </el-form-item>
                    <el-form-item label="辅警编号" prop="policeNumber">
                        <div class="u-detail__text">{{ detailInfo.policeNumber }}</div>
                    </el-form-item>
                    <el-form-item label="单位名称" prop="orgId">
                        <div class="u-detail__text">{{ detailInfo.orgName }}</div>
                    </el-form-item>
                    <el-form-item label="警种" prop="policeCategory">
                        <div class="u-detail__text" v-translate="{ code: 'T_MD_POLICE_TYPE' }">
                            {{ detailInfo.policeCategory }}
                        </div>
                    </el-form-item>

                    <el-form-item label="人员类型" prop="auxiliaryType">
                        <div class="u-detail__text" v-translate="{ code: 'DM_AUXILIARY_TYPE' }">
                            {{ detailInfo.auxiliaryType }}
                        </div>
                    </el-form-item>
                    <el-form-item label="座机" prop="phone">
                        <div class="u-detail__text">{{ detailInfo.phone }}</div>
                    </el-form-item>
                    <el-form-item label="e-mail" prop="email">
                        <div class="u-detail__text">{{ detailInfo.email }}</div>
                    </el-form-item>
                    <el-form-item label="联系地址" prop="address">
                        <div class="u-detail__text">{{ detailInfo.address }}</div>
                    </el-form-item>
                    <el-form-item label="人员状态" prop="userStatus">
                        <div class="u-detail__text" v-translate="{ code: 'DM_USER_STATUS' }">
                            {{ detailInfo.userStatus }}
                        </div>
                    </el-form-item>
                </dg-col>
                <dg-col :span="12">
                    <el-form-item label="" prop="file">
                        <dg-upload
                            v-model="detailInfo.file"
                            disabled
                            icon-zoom
                            leaflet
                            accept="image/*"
                            server-url="/dcucauth"
                            list-type="pictureList"
                        ></dg-upload>
                    </el-form-item>
                    <el-form-item label="民族" prop="nation" class="form-nation-style">
                        <div class="u-detail__text" v-translate="{ code: 'DM_NATION_CODE' }">
                            {{ detailInfo.nation }}
                        </div>
                    </el-form-item>
                    <el-form-item label="业务域标签" prop="policeBusiness">
                        <div class="u-detail__text">{{ transferBusinessTag(detailInfo.policeBusiness) }}</div>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="mobileWork">
                        <div class="u-detail__text">{{ detailInfo.mobileWork }}</div>
                    </el-form-item>

                    <el-form-item label="QQ号">
                        <div class="u-detail__text">{{ detailInfo.qqAccount }}</div>
                    </el-form-item>
                    <el-form-item label="微信号" prop="wxAccount">
                        <div class="u-detail__text">{{ detailInfo.wxAccount }}</div>
                    </el-form-item>
                    <el-form-item label="创建时间" prop="createTime">
                        <div class="u-detail__text">{{ detailInfo.createTime }}</div>
                    </el-form-item>
                </dg-col>
            </dg-row>
        </el-form>
        <div class="dg-layer-demo" v-footer>
            <dg-button @click="handleClose">取消</dg-button>
        </div>
    </div>
</template>

<script>
import * as auxiliaryApi from "@/api/auxiliary-police-manage";
import transferBusinessTag from "@/mixins/transfer-business-tag";

export default {
    name: "auxiliaryDetail",
    props: {
        sizeForm: {
            type: Object,
            required: true
        }
    },
    mixins: [transferBusinessTag],
    data() {
        return {
            detailInfo: {}
        };
    },
    methods: {
        handleClose() {
            this.$emit("close");
        }
    },
    created() {
        auxiliaryApi
            .detail(this.sizeForm.id)
            .then((res) => {
                this.detailInfo = res;
            })
            .catch((error) => {
                that.fail("详情获取失败!", error);
            });
    }
};
</script>

<style lang="scss">
.u-detail {
    .el-form-item {
        margin-bottom: 10px;
    }
}
.rule-form {
    .form-nation-style {
        margin-top: 38px;
    }
}
</style>
