<template>
  <div class="u-detail">
    <el-form v-if="detailInfo.id" ref="ruleForm" label-width="120px" label-suffix=":">
      <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="area" class="form-area">
            <div class="u-detail__text" v-translate="{ code: 'DM_AREA_CODE' }">{{ detailInfo.area }}</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="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="policeCategory">
            <div class="u-detail__text" v-translate="{ code: 'T_MD_POLICE_TYPE' }">
              {{ detailInfo.policeCategory }}
            </div>
          </el-form-item>

          <el-form-item label="人员类型" prop="manType">
            <div class="u-detail__text" v-translate="{ code: 'DM_MAN_TYPE' }">{{ detailInfo.manType }}</div>
          </el-form-item>
          <el-form-item label="警衔" prop="rank">
            <div class="u-detail__text" v-translate="{ code: 'DM_POLICE_RANK' }">{{ detailInfo.rank }}</div>
          </el-form-item>
          <el-form-item label="手机号码(1)" 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>
        </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">
            <div class="u-detail__text" v-translate="{ code: 'DM_NATION_CODE' }">
              {{ detailInfo.nation }}
            </div>
          </el-form-item>
          <el-form-item label="职级" prop="title">
            <div class="u-detail__text" v-translate="{ code: 'DM_CERT_DUTY_LEVEL' }">
              {{ detailInfo.title }}
            </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="手机号码(2)" prop="mobilePrivate">
            <div class="u-detail__text">{{ detailInfo.mobilePrivate }}</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>
        </dg-col>
      </dg-row>
      <dg-row>
        <el-form-item label="业务域标签">
          <div class="u-detail__text">{{ transferBusinessTag(detailInfo.policeBusiness) }}</div>
        </el-form-item>
      </dg-row>
      <dg-row>
        <dg-col :span="24">
          <dg-table :data="detailInfo.postInfos" :pagination="false" stripe border style="width: 100%">
            <dg-table-column prop="orgName" label="单位名称" align="center">
              <template slot-scope="scope">
                <span v-show="scope.row.type == '1'">
                  <label for="">编制单位：{{ scope.row.orgName }}</label>
                </span>
                <span v-show="scope.row.type == '0' || scope.row.type == null || scope.row.type == ''">
                  <label for="">工作单位：{{ scope.row.orgName }}</label>
                </span>
              </template>
            </dg-table-column>
            <dg-table-column prop="postType" label="职务" align="center"> </dg-table-column>
            <dg-table-column prop="jobType" label="在职类型" align="center">
              <template slot-scope="{ row }">
                <div class="u-detail__text" v-translate="{ code: 'DM_JOB_TYPE' }">
                  {{ row.jobType }}
                </div>
              </template>
            </dg-table-column>
          </dg-table>
        </dg-col>
      </dg-row>
    </el-form>
    <div class="dg-layer-demo" v-footer>
      <dg-button @click="handleClose">关闭</dg-button>
    </div>
  </div>
</template>

<script>
import { detail } from '@/api/police-manage';
import transferBusinessTag from '@/mixins/transfer-business-tag';

export default {
  name: 'policeDetail',
  props: {
    sizeForm: {
      type: Object,
      required: true
    }
  },
  mixins: [transferBusinessTag],
  data() {
    return {
      detailInfo: {}
    };
  },
  methods: {
    handleClose() {
      this.$emit('close');
    }
  },
  created() {
    detail(this.sizeForm.id).then((res) => {
      this.detailInfo = res;
    });
  }
};
</script>

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