<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" placeholder="请输入姓名" :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" placeholder="请输入性别" :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" placeholder="请输入年龄" :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" placeholder="请输入联系方式" :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" placeholder="请输入籍贯" :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" placeholder="请输入民族" :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" placeholder="请输入身份证号码" :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" placeholder="请输入家庭住址" :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" placeholder="请输入现地址" :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" placeholder="请输入岗位" :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" v-if="items.postName == '1' || items.postName == '特殊工种'">
        <el-col :span="11">
          <el-form-item label-width="120px" label="特殊工种种类" prop="specialJobType">
            <el-input v-model="items.specialJobType" placeholder="请输入特殊工种种类" :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="approachDate">
            <el-input v-model="items.specialJobType" placeholder="请输入进场日期" :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="departureDate">
            <el-input v-model="items.departureDate" placeholder="请输入离场日期" :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" placeholder="请输入当前状态" :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="人脸照片" :style="{width:'100%'}">
          </el-form-item>
          <img v-if="items.facePhoto.length === 0" src="@/assets/file/no_file.png" alt="暂无数据"
               style="width: 100px;height: 100px"
          />
          <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="特殊工种文件">
          </el-form-item>
          <img v-if="items.specialJobFile.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.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 slot="footer" class="dialog-footer" style="position: absolute;top: 95%;left: 90%">-->
<!--      <el-button type="primary" @click="completeMark">完成批阅</el-button>-->
<!--    </div>-->
  </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: 20
    }
  },
  methods: {
    completeMark() {
      this.$emit('completeMark')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
