<!--
 * @Description: create
 * @Version: 1.0
 * @Autor: XuTongZhang
 * @Date: 2020-07-30 10:32:00
 * @LastEditors: XuTongZhang
 * @LastEditTime: 2020-08-17 09:50:29
-->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogFormVisible"
      :width="'1400px'"
      :before-close="close"
      :close-on-click-modal="false"
    >
      <div class="flex">
        <div class="left">
          <div class="top">
            <div class="title">{{info.delivererName}}的面试视频：</div>
            <div class="video">
              <video
                width="100%"
                controls
                :src="info.answerVideoList && info.answerVideoList.length ? $img + info.answerVideoList[active].answerVideoPath : ''"
              ></video>
            </div>
            <div class="list" v-if="info.answerVideoList && info.answerVideoList.length">
              <div
                v-for="(item, index) in info.answerVideoList"
                :key="item.id"
                class="active"
                @click="active = index"
                :class="active === index ? 'is-active' : ''"
              >第{{index + 1}}段</div>
            </div>
            <div v-else class="prompt">暂无视频</div>
          </div>
          <div class="center">
            <div class="title">简历备注：</div>
            <el-input type="textarea" :rows="4" resize="none" placeholder="请输入内容" v-model="remark"></el-input>
          </div>
          <div class="footer">
            <el-button type="primary" @click="submit">提交备注</el-button>
            <el-button type="danger" @click="through(2)">标记为未通过</el-button>
            <el-button type="success" @click="through(1)">标记为通过</el-button>
          </div>
        </div>
        <div class="right">
          <el-form label-width="140px" label-position="right" v-if="info.resumeFrom===3">
            <el-form-item v-for="item in formConfig" :key="item.id" :label="item.configName">
                <!-- {{item.type === 2 ? ['女', '男'][info[item.fieldName]] : item.type === 8 ? ['女', '男'][info[item.fieldName]] : info[item.fieldName]}} -->
                <div v-if="item.type === 2">{{['女', '男'][form[item.fieldName]]}}</div>
                <el-link type="primary" v-else-if="item.type === 8" @click="openNewPage($img + form[item.fieldName])" >{{item.configName + '文件'}}</el-link>
                <div v-else-if="item.type === 1" v-html="form[item.fieldName] ? form[item.fieldName].replace(/\n/g,'<br/>') : ''"></div>
                <div v-else>{{form[item.fieldName]}}</div>
            </el-form-item>
            <el-form-item label="意向职位">
                <!-- {{['女', '男'][info.delivererSex]}} -->
                {{form.desiredPositionName}}
                <!-- <el-link type="primary" @click="openNewPage($img + info.filePath)">简历文件</el-link> -->
            </el-form-item>
            <el-form-item label="简历">
                <!-- {{['女', '男'][info.delivererSex]}} -->
                <el-link type="primary" @click="openNewPage($img + info.filePath)">简历文件</el-link>
            </el-form-item>
          </el-form>
          <iframe v-else width="100%" height="100%" :src="$img + info.filePath"></iframe>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      remark: '',
      active: 0,
      formConfig: [],
      form: {}
    }
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    close: {
      type: Function,
      default: () => {}
    },
    info: {
      type: Object,
      default: () => {}
    },
    searchForm: {
      type: Object,
      default: () => {}
    },
    queryData: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    through (val) {
      let resumeInfoStatusList = this.info.isPass ? [this.info.id].map((item) => ({ id: item, interviewResult: val })) : [this.info.id].map((item) => ({ id: item, isPass: val }))
      let url = this.info.isPass ? '/resumeInfo/changeInterviewResult' : '/resumeInfo/changeReadType'
      this.$api
        .post(url, {
          reqdata: {
            resumeInfoStatusList
          }
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.close()
          this.queryData(this.searchForm)
        })
    },
    submit () {
      this.$api
        .post('/resumeInfo/addRemakes', {
          reqdata: {
            id: this.info.id,
            remark: this.remark
          }
        })
        .then((res) => {
          // this.close()
          // this.queryData(this.searchForm)
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        })
    },
    details (id) {
      this.$api
        .post('/resumeInfo/queryResumeInfoDetail', {
          reqdata: {
            id
          }
        })
        .then((res) => {
          this.formConfig = JSON.parse(res.object.formConfig)
          this.form = res.object
        })
    },
    openNewPage (url) {
      window.open(url)
    }
  },
  watch: {
    info () {
      this.remark = this.info.remark
      if (this.info.resumeFrom === 3) {
        this.details(this.info.id)
      }
    },
    dialogFormVisible (val) {
      val || (this.active = 0)
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  .left {
    flex: 1;
    margin-right: 20px;
    .top {
      .title {
        font-size: 28px;
        margin-bottom: 10px;
      }
      .list {
        margin-top: 10px;
        font-size: 14px;
        display: flex;
        color: rgb(42, 117, 216);
        > div {
          cursor: pointer;
          margin: 10px;
        }
        .is-active {
          color: #000;
          font-size: 16px;
          margin-top: 7px;
        }
      }
    }
    .center {
      margin-top: 10px;
      .title {
        font-size: 22px;
        margin-bottom: 10px;
      }
    }
    .footer {
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }
  }
  .right {
    overflow: scroll;
    width: 770px;
    max-height: 770px;
    iframe {
      border: none;
      html {
        width: 100%;
      }
    }
  }
}
.prompt {
  text-align: center;
  height: 30px;
  line-height: 40px;
  font-size: 20px;
  color: #888;
}
</style>
