<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" disabled>
          <!-- <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="姓名">
                <el-input v-model="items.data.name" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label-width="120px" label="性别">
                <el-input v-model="items.data.sex" clearable :style="{ width: '100%' }" />
              </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="年龄">
                <el-input v-model="items.data.age" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label-width="120px" label="身份证号码" prop="idCard">
                <el-input v-model="items.data.idCard" clearable :style="{ width: '100%' }" />
              </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="联系方式">
                <el-input v-model="items.data.phone" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label-width="120px" label="岗位">
                <el-input v-model="items.data.postName" clearable :style="{ width: '100%' }" />
              </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; margin-left: 45px"
              />
              <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">
            <el-col :span="24">
              <el-form-item label-width="120px" label="其他文件"></el-form-item>
              <img
                v-if="items.data.otherFileList.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.otherFileList"
                :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>
