<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" style="padding: 10px">
    <el-tab-pane label="人员信息" name="first">
      <div class="app-container">
        <el-form ref="elForm" size="medium" label-width="100px">
          <el-row type="flex" justify="start" align="top" :gutter="gutterValue" v-show="items.auditType === '出场'">
            <el-col :span="11">
              <el-form-item label-width="120px" label="出场原因" prop="">
                <el-input
                  type="textarea"
                  v-model="items.data.reason"
                  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="name">
                <el-input
                  v-model="items.data.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.data.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.data.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.data.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.data.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.data.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.data.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.data.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.data.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.data.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.data.postName == '1' || items.data.postName == '特殊工种'"
          >
            <el-col :span="11">
              <el-form-item label-width="120px" label="特殊工种种类" prop="specialJobType">
                <el-input
                  v-model="items.data.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="24">
              <el-form-item label-width="120px" label="人脸照片" :style="{ width: '100%' }"></el-form-item>
              <img
                v-if="items.data.facePhoto.length === 0"
                src="@/assets/file/no_file.png"
                alt="暂无数据"
                style="width: 100px; height: 100px"
              />
              <bns-file-list-tabs
                v-else
                :items="items.data.facePhoto"
                :style="{ marginLeft: '45px' }"
                :isShowOptions="items.isExamine"
                :opinionValueOther="opinionValueOther"
                @onCloseFileDialog="onCloseFileDialog"
              ></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.data.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.data.physicalExaminationFile"
                :style="{ marginLeft: '45px' }"
                :isShowOptions="items.isExamine"
                :opinionValueOther="opinionValueOther"
                @onCloseFileDialog="onCloseFileDialog"
              ></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.data.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.data.insuranceFile"
                :style="{ marginLeft: '45px' }"
                :isShowOptions="items.isExamine"
                :opinionValueOther="opinionValueOther"
                @onCloseFileDialog="onCloseFileDialog"
              ></bns-file-list-tabs>
            </el-col>
          </el-row>
          <el-row
            type="flex"
            justify="start"
            align="top"
            :gutter="gutterValue"
            v-if="items.data.postName == '1' || items.data.postName == '特殊工种'"
          >
            <el-col :span="24">
              <el-form-item label-width="120px" label="特殊工种文件"></el-form-item>
              <img
                v-if="items.data.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.data.specialJobFile"
                :style="{ marginLeft: '45px' }"
                :isShowOptions="items.isExamine"
                :opinionValueOther="opinionValueOther"
                @onCloseFileDialog="onCloseFileDialog"
              ></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.data.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.data.otherFile"
                :style="{ marginLeft: '45px' }"
                :isShowOptions="items.isExamine"
                :opinionValueOther="opinionValueOther"
                @onCloseFileDialog="onCloseFileDialog"
              ></bns-file-list-tabs>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="审批信息" name="second">
      <bns-timeline-tabs
        :items="items.approvalInfo"
        :show-type="items.showType"
        :is-examine="items.isExamine"
        :btn-show="items.btnShow"
        :final-check="items.finalCheck"
        v-on:pass="approval"
        v-on:finalInstance="finalInstance"
        v-on:turnDown="turnDown"
        :opinionValueOther="opinionValueOther"
      ></bns-timeline-tabs>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import bnsFileListTabs from '@/components/pro-tabs/bns-file-list-tabs.vue'
import BnsTimelineTabs from '@/components/pro-tabs/bns-timeline-tabs.vue'

export default {
  components: { BnsTimelineTabs, bnsFileListTabs },
  props: {
    items: {
      type: Object,
      auditType: String,
      approvalInfo: Array,

      default: () => {
        return {
          auditType: '入场',
        }
      },
    },
  },
  data() {
    return {
      activeName: 'first',
      gutterValue: parseInt('21', 10),
      // 阅读文件时的意见
      opinionValueOther: '',
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    approval(e) {
      console.log('e:' + JSON.stringify(e))
      this.$emit('pass', e)
    },
    turnDown(e) {
      console.log('dianijhuitui')
      this.$emit('turnDown', e)
    },

    finalInstance(e) {
      this.$emit('finalInstance', e)
    },
    // 自定义事件接收意见
    onCloseFileDialog(val) {
      this.opinionValueOther = val
    },
  },
}
</script>
