<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?subjectObj.date:'开课待定'}}</div>
              <div>课程体系：{{subjectObj.leibie}}</div>
            </div>
            <div>
              <lx-header icon="" :text="type=='checkshow' || type=='check'?'报名信息':'个人信息'" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
              </lx-header>
              <div>
                <el-descriptions class="margin-top" :column="2" border>
                  <el-descriptions-item v-for="item in selectFormList" :span="item.span?item.span:1">
                    <template slot="label">
                      {{item.name}}
                    </template>
                    {{student_info[item.field]?student_info[item.field]:''}}
                  </el-descriptions-item>
                  <el-descriptions-item  :span="2" v-if="type==='check' || type==='checkshow' || type==='setPosition'">
                    <template slot="label">
                      本班职务
                    </template>
                    {{sign_result.position?sign_result.position:''}}
                  </el-descriptions-item>
                  <!-- 报名信息 -->
                  <template v-if="sign_info.length>0">
                    <!-- <lx-header v-if="type==='check' || type==='checkshow' || type==='setPosition'" icon="" text="报名信息"
                      style="margin-bottom: 10px; border: 0px; margin-top: 15px">
                    </lx-header> -->
                    <template v-if="type==='check' || type==='checkshow' || type==='setPosition'">
                      <!-- <el-descriptions class="margin-top" :column="2" border> -->
                        <template v-for="item in sign_info">
                          <el-descriptions-item :span="2" v-if="item.submit_files && item.submit_files.length>0">
                            <template slot="label">
                              {{item.name}}
                            </template>
                            <div>
                              <template v-for="file in item.submit_files">
                                <img style="width:100px;margin:10px" :src="host+file"></img>
                              </template>
                            </div>
                          </el-descriptions-item>
                          <el-descriptions-item v-else  :span="2">
                            <template slot="label">
                              {{item.name}}
                            </template>
                            {{item.value}}
                          </el-descriptions-item>
                        </template>


                      <!-- </el-descriptions> -->
                    </template>
                  </template>
                </el-descriptions>

              </div>


              <!-- 审核查看 -->
              <lx-header v-if="type=='checkshow' || type=='check'" 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 v-if="sign_result.status===5">
                    <span>放弃原因：</span>
                    <span>{{sign_result.giveup_reason}}</span>
                  </div>
                  <div style="display: flex;" v-if="sign_result.status===1">
                    <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?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="请选择">
              <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:giveup_reason v-if="type=='check'&& form.status===5">
        <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.giveup_reason" placeholder="请输入放弃原因"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:file_ids v-if="type=='check' && form.status===1">
        <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" accept=".pdf" :limit="1" :on-success="uploadSuccess" :on-remove="uploadRemove">
              <el-button size="small" type="primary">点击上传</el-button>
              <div class="el-upload__tip" slot="tip">只能上传pdf文件</div>
            </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:position v-if="type=='setPosition'">
        <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="text" v-model="form.position" 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' || type=='setPosition'"
          @click="submit">确认</el-button>
        <el-button type="primary" plain style='margin-left:5px;margin-bottom:5px;'
          v-else-if="type=='check'|| type=='setPosition'" @click="isShow=false">取消</el-button>
        <el-button type="primary" plain style='margin-left:5px;margin-bottom:5px;'
          v-else-if="type=='show'||type=='checkshow'" @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";
  import formMixin from "@/mixin/formMixin.js";
  export default {
    mixins: [myMixins, formMixin],
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'show',
        typeName: '查看个人明细',
        id: '',
        action: `${process.env.VUE_APP_UPLOAD_API}`,
        host: `${process.env.VUE_APP_BASE_API}`,
        subjectObj: {},
        student_info: {},
        row: {},
        sign_info: [],
        sign_result: {},
        fileList: [],
        form: {
          show: '',
          status: 0,
          score: '',
          giveup_reason: '',
          file_ids: [],
          reason: '',
          position: ''
        },
      }
    },
    created() {},
    methods: {
      uploadSuccess(response, file, fileList) {
        this.fileList = fileList
      },
      uploadRemove(file, fileList) {
        this.fileList = fileList
      },
      // beforeUpload(file) {
      //   const isImage = file.type.includes('image');
      //   if (!isImage) {
      //     this.$message.error('请上传正确的图片格式文件');
      //   }
      //   return isImage && isLt2M;
      // },
      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,
          giveup_reason: this.form.giveup_reason,
          file_ids: this.form.file_ids,
          position: this.form.position
        }).then(res => {
          this.$message({
            type: 'success',
            message: this.type === 'check' ? '审核成功' : '设置成功'
          })
          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.form.position = res.position ? res.position : ''
          let _arr = []
          if (res.data && Array.isArray(res.data)) {
            res.data.map(item => {
              if(item.edit_input==='files'){
                if (!this.base.isNull(item.value) && item.value.indexOf("/storage/files/") !== -1) {
                  item.submit_files = item.value.split(",")
                }
              }
              // 处理自定义字段中是否 是个人用户信息
              if (!this.student_info.hasOwnProperty(item.field)) {
                console.log("item.field")
                _arr.push(item)
              }
            })
            this.sign_info = _arr
          } else {
            this.sign_info = []
          }
          this.form.status = res.status ? res.status : 0
          this.form.score = res.score ? res.score : ''
          this.form.reason = res.reason ? res.reason : ''
          this.form.giveup_reason = res.giveup_reason?res.giveup_reason:''
          this.fileList = res.files ? res.files : []

          console.log("this.sign_info", this.sign_info)
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'show') {
            this.typeName = "查看个人明细"
            this.getDetail()
          } else if (this.type === 'check' || this.type === 'checkshow' || this.type === 'setPosition') {
            this.getSignDetail()
            if (this.type === 'check') {
              this.typeName = '审核'
            } else if (this.type === 'setPosition') {
              this.typeName = '设置班委'
            } else {
              this.typeName = '查看'
            }

          }
        } 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,
  ::v-deep .giveup_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>
