<template>
  <el-dialog title="从业人员详情" :visible.sync="detailOpen" width="900px" append-to-body>
    <el-form ref="form" :model="form" label-width="120px">
      <el-row>
        <el-col :span="16">
          <el-row>
            <el-col :span="12">
              <el-form-item label="储配站">
                <span>{{ form.stationName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工号">
                <span>{{ form.practitionerNum }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名">
                <span>{{ form.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <span v-if="form.sex == '0'">男</span>
                <span v-if="form.sex == '1'">女</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="出生日期">
                <span>{{ form.birthDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话">
                <span>{{ form.telNum }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="岗位">
                <span>{{ form.postName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="从业资格编号">
                <span>{{ form.certificateNum }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证书文件" prop="licenseFile">
                <span class="dbtn" @click="checkFile(form.licenseFile)" v-if="form.licenseFile != ''">
                  <i class="el-icon el-icon-view"></i>查看/下载
                </span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资格证有效时间">
                <span>{{ form.certificateEffectiveDate }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="配送区域">
            <span>{{ form.deliveryArea }}</span>
          </el-form-item>

        </el-col>

        <el-col :span="8">
          <el-form-item label="人员照片" prop="personPhoto">
            <el-image :src="form.personPhoto" style="width: 160px;height: 180px"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        detailOpen: false,
        form: {}
      }
    },
    methods: {
      checkFile(url) {
        window.open(url,'_blank');
      },
    }
  }
</script>

<style scoped lang="scss">
  .dbtn {
    display: inline-block;
    line-height: normal;
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
    border-radius: 3px;
    border-style: solid;
    border-width: 0;
    color: rgb(48, 180, 107);
  }
  .dbtn:hover {
    border-width: 1px;
    border-color: rgb(48, 180, 107);
  }
</style>
