<template>
  <div class="app-container">
    <el-form ref="elForm" size="medium" label-width="100px">
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
        <el-col :span="11">
          <el-form-item label-width="120px" label="姓名" prop="name">
            <el-input v-model="items.name" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label-width="120px" label="性别" prop="sex">
            <el-input v-model="items.sex" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
        <el-col :span="11">
          <el-form-item label-width="120px" label="年龄" prop="age">
            <el-input v-model="items.age" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label-width="120px" label="联系方式" prop="phone">
            <el-input v-model="items.phone" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
        <el-col :span="11">
          <el-form-item label-width="120px" label="籍贯" prop="nativePlace">
            <el-input v-model="items.nativePlace" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label-width="120px" label="民族" prop="nation">
            <el-input v-model="items.nation" :disabled='true' clearable
                      :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
        <el-col :span="11">
          <el-form-item label-width="120px" label="身份证号码" prop="idCard">
            <el-input v-model="items.idCard" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label-width="120px" label="家庭住址" prop="homeAddress">
            <el-input v-model="items.homeAddress" :disabled='true' clearable
                      :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
        <el-col :span="11">
          <el-form-item label-width="120px" label="现住址" prop="currentAddress">
            <el-input v-model="items.currentAddress" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label-width="120px" label="岗位" prop="postName">
            <el-input v-model="items.postName" :disabled='true' clearable
                      :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue" >
        <el-col :span="11">
          <el-form-item label-width="120px" label="进场日期" prop="admissionDate">
            <el-input v-model="items.admissionDate" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label-width="120px" label="离场日期" prop="departureDate">
            <el-input v-model="items.departureDate" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
        <el-col :span="11" v-if="items.postName == '1' || items.postName == '特殊工种'">
          <el-form-item label-width="120px" label="特殊工种种类" prop="workType">
            <el-input v-model="items.workType" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label-width="120px" label="当前状态" prop="status">
            <el-input v-model="items.status" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
        <el-col :span="24">
          <el-form-item label-width="120px" label="人脸照片">
          </el-form-item>
          <img v-if="items.facePhoto.length === 0" src="@/assets/file/no_file.png" alt="暂无数据"
               style="width: 100px;height: 100px;margin-left: 45px;"/>
          <bns-file-list-tabs
            v-else
            :items="items.facePhoto"
            :style="{marginLeft:'45px'}"></bns-file-list-tabs>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
        <el-col :span="24">
          <el-form-item label-width="120px" label="体检文件">
          </el-form-item>
          <img v-if="items.physicalExaminationFile.length === 0" src="@/assets/file/no_file.png" alt="暂无数据"
               style="width: 100px;height: 100px;margin-left: 45px;"/>
          <bns-file-list-tabs
            v-else
            :items="items.physicalExaminationFile"
            :style="{marginLeft:'45px'}"></bns-file-list-tabs>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
        <el-col :span="24">
          <el-form-item label-width="120px" label="保险文件">
          </el-form-item>
          <img v-if="items.insuranceFile.length === 0" src="@/assets/file/no_file.png" alt="暂无数据"
               style="width: 100px;height: 100px;margin-left: 45px;"/>
          <bns-file-list-tabs
            v-else
            :items="items.insuranceFile"
            :style="{marginLeft:'45px'}"></bns-file-list-tabs>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue" v-if="items.postName == '1' || items.postName == '特殊工种'">
        <el-col :span="24">
          <el-form-item label-width="120px" label="特殊工种文件" :style="{width:'100%'}">
          </el-form-item>
          <img v-if="items.specialJobFile.length === 0" src="@/assets/file/no_file.png" alt="暂无数据"
               style="width: 100px;height: 100px"/>
          <bns-file-list-tabs
            v-else
            :items="items.specialJobFile"
            :style="{marginLeft:'45px'}"></bns-file-list-tabs>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
        <el-col :span="24">
          <el-form-item label-width="120px" label="其他文件">
          </el-form-item>
          <img v-if="items.otherFile.length === 0" src="@/assets/file/no_file.png" alt="暂无数据"
               style="width: 100px;height: 100px;margin-left: 45px;"/>
          <bns-file-list-tabs
            v-else
            :items="items.otherFile"
            :style="{marginLeft:'45px'}"></bns-file-list-tabs>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import bnsFileListTabs from '@/components/pro-tabs/bns-file-list-tabs.vue'

export default {
  components: { bnsFileListTabs },
  props: {
    items: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
      gutterValue: parseInt("21", 10),
    }
  },
}
</script>
