<template>
  <div>
    <xy-dialog ref="dialog" :width="50" :is-show.sync="isShow" :type="'form'" :title="typeName" :form="form">
      <template v-slot:show>
        <div class="xy-table-item" style="padding: 0 20px;">
          <div class="xy-table-item-label" style="font-weight: bold;width:0;padding: 0;display: none;">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>
          </div>
          <div class="xy-table-item-content" style="flex-grow: 1;">
            <div class="courseName" v-if="type=='check' || type=='checkshow' ">
              <div>课程名称：{{subjectObj.title}}</div>
              <div>开课日期：{{subjectObj.date}}</div>
              <div>类别：{{subjectObj.leibie}}</div>
            </div>
            <div>
              <lx-header icon="" text="个人信息" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
              </lx-header>
              <div>
                <el-descriptions class="margin-top" :column="3" border>
                  <el-descriptions-item>
                    <template slot="label">
                      姓名
                    </template>
                    {{student_info.username?student_info.username:''}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      性别
                    </template>
                    {{student_info.sex?student_info.sex:''}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      身份证号
                    </template>
                    {{student_info.idcard?student_info.idcard:''}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      联系方式
                    </template>
                    {{student_info.mobile?student_info.mobile:''}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      出生日期
                    </template>
                    {{student_info.birthday?student_info.birthday:''}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      邮箱
                    </template>
                    {{student_info.email?student_info.email:''}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      公司名称
                    </template>
                    {{student_info.company_name?student_info.company_name:''}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      职务
                    </template>
                    {{student_info.company_position?student_info.company_position:''}}
                  </el-descriptions-item>
                  <!-- <el-descriptions-item :span="3">
                      <template slot="label">
                        证件照
                      </template>
                    </el-descriptions-item> -->

                  <!-- <el-descriptions-item>
                      <template slot="label">
                       邮箱
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                       最高学历
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template slot="label">
                       最高学历毕业院校及专业
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template slot="label">
                       个人荣誉
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template slot="label">
                       个人简历
                      </template>
                    </el-descriptions-item> -->
                </el-descriptions>

              </div>
              <template v-if="sign_info.length>0">
                <lx-header v-if="type==='check' || type==='checkshow'" icon="" text="报名信息"
                  style="margin-bottom: 10px; border: 0px; margin-top: 15px">
                </lx-header>
                <div v-if="type==='check' || type==='checkshow'">
                  <el-descriptions class="margin-top" :column="3" border>
                    <el-descriptions-item v-for="item in sign_info">
                      <template slot="label">
                        {{item.name}}
                      </template>
                      {{item.value}}
                    </el-descriptions-item>

                  </el-descriptions>
                </div>
              </template>

              <lx-header icon="" text="审核结果" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
              </lx-header>

              <div v-if="type=='checkshow'">
                <div class="studentInfo">
                  <div>
                    <span>审核结果：</span>
                    <span v-for="item in apply_status_list">
                      <el-tag :type="item.type" v-if="sign_result.status===item.id">{{item.value}}</el-tag>
                    </span>
                  </div>
                  <div>
                    <span>评分：</span>
                    <span>{{sign_result.score}}</span>
                  </div>
                  <div style="display: flex;">
                    <span>附件：</span>
                    <div>
                      <div v-for="item in sign_result.files">
                        <a :href="item.url" target="_blank" style="color:#0077CC">{{item.original_name}}</a>
                      </div>
                    </div>

                  </div>
                  <div>
                    <span>备注：</span>
                    <span>{{sign_result.reason}}</span>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </template>


      <template v-slot:status v-if="type=='check'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>审核：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.status" placeholder="请选择" clearable>
              <el-option v-for="item in apply_status_list" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:score v-if="type=='check'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>评分：
          </div>
          <div class="xy-table-item-content">
            <el-input type="number" v-model="form.score" placeholder="请输入评分"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:file_ids v-if="type=='check'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>附件：
          </div>
          <div class="xy-table-item-content">
            <el-upload :action="action" class='upload-demo' :file-list="fileList"
              ref="pictureUpload" :auto-upload="true" :on-success="uploadSuccess" :on-remove="uploadRemove">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:reason v-if="type=='check'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>备注：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea" v-model="form.reason" placeholder="请输入备注"></el-input>
          </div>
        </div>
      </template>


      <template v-slot:footerContent>
        <el-button type="primary" style='margin-left:5px;margin-bottom:5px;' v-if="type=='check'"
          @click="submit">确认</el-button>
        <el-button type="primary" plain style='margin-left:5px;margin-bottom:5px;' v-if="type=='check'"
          @click="isShow=false">取消</el-button>
        <el-button type="primary" plain style='margin-left:5px;margin-bottom:5px;' v-if="type=='show'"
          @click="isShow=false">关闭</el-button>

      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    show
  } from '@/api/student/index.js'
  import {
    save,
    show as showSign
  } from '@/api/apply/index.js'

  import myMixins from "@/mixin/selectMixin.js";
  export default {
    mixins: [myMixins],
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'show',
        typeName: '查看个人明细',
        id: '',
        action: `${process.env.VUE_APP_UPLOAD_API}`,
        subjectObj: {},
        student_info: {},
        row: {},
        sign_info: [],
        sign_result: {},
        fileList: [],
        form: {
          show: '',
          status: '',
          score: '',
          file_ids: [],
          reason: '',
        },
      }
    },
    created() {},
    methods: {
      uploadSuccess(response, file, fileList) {
        this.fileList = fileList
      },
      uploadRemove(file, fileList) {
        this.fileList = fileList
      },
      submit() {
        if (this.id) {
          this.form.id = this.id
        }
        let _arr = []
        if (this.fileList.length > 0) {
          this.fileList.map(item => {
            if (item.response) {
              _arr.push(item.response.id)
            } else {
              _arr.push(item.id)
            }
          })
        }
        this.form.file_ids = _arr
        save({
          ...this.row,
          status: this.form.status,
          reason: this.form.reason,
          score: this.form.score,
          file_ids:this.form.file_ids
        }).then(res => {
          this.$message({
            type: 'success',
            message: '审核成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      },

      getDetail() {
        show({
          id: this.id,
        }).then(res => {
          this.student_info = res
        })
      },
      getSignDetail() {
        showSign({
          id: this.id,
          show_relation: ['user']
        }).then(res => {
          this.student_info = res.user
          this.sign_result = res
          this.sign_info = res.data
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'show') {
            this.typeName = "查看个人明细"
            this.getDetail()
            console.log("row", this.row)
          } else if (this.type === 'check' || this.type === 'checkshow') {
            this.getSignDetail()
            this.typeName = this.type === 'check' ? '审核' : '查看'
          }
        } else {
          this.id = ''
          this.type = 'show'
          this.subjectObj = {}
          this.sign_result = {}
          this.sign_info = []
          this.fileList = []
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .show,
    ::v-deep .file_ids,
  ::v-deep .reason {
    flex-basis: 100%;
  }

  ::v-deep .el-descriptions-item__label {
    width: 15%;
  }

  ::v-deep .v-header {
    margin-top: 0 !important;
  }

  .studentInfo {
    &>div {
      display: flex;

      &>div {
        width: 50%;

        span:first-child {
          display: inline-block;
          width: 160px;
          text-align: right;
        }
      }

      img {
        width: 80px;
        height: 80px;
      }
    }
  }

  .companyInfo {
    &>div {
      display: flex;

      span:first-child {
        display: inline-block;
        width: 160px;
        text-align: right;
      }
    }
  }
</style>
