<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="handleSwitch(index)"
                :class="active === index ? 'is-active' : ''"
              >{{ item.questionName }}</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 v-if="!type" 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="resune">
          <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 class="score" v-if="type">
          <div class="resume-score">
            <el-card class="box-card">
              <el-table
                :data="resumeScore"
                style="width: 100%">
                <el-table-column
                  prop="label"
                  label="简历打分"
                  align="center">
                </el-table-column>
                <el-table-column
                  align="right">
                  <template slot="header" slot-scope>
                    <div class="header-color-grounp">
                      <div class="success"></div>
                      <div class="warning"></div>
                      <div class="danger"></div>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div class="content-color-grounp">
                      <div :class="scope.row.value === 1 && 'success'" @click="changeScore(scope.$index, 1, 'resumeScore')"></div>
                      <div :class="scope.row.value === 2 && 'warning'" @click="changeScore(scope.$index, 2, 'resumeScore')"></div>
                      <div :class="scope.row.value === 3 && 'danger'" @click="changeScore(scope.$index, 3, 'resumeScore')"></div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>
          <div class="interview-score">
            <el-card class="box-card">
              <el-table
                :data="interviewScore"
                style="width: 100%">
                <el-table-column
                  prop="label"
                  label="面试打分"
                  align="center">
                </el-table-column>
                <el-table-column
                  align="center">
                  <template slot="header" slot-scope>
                    <div class="header-color-grounp">
                      <div class="success"></div>
                      <div class="warning"></div>
                      <div class="danger"></div>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div class="content-color-grounp">
                      <div :class="scope.row.value === 1 && 'success'" @click="changeScore(scope.$index, 1, 'interviewScore')"></div>
                      <div :class="scope.row.value === 2 && 'warning'" @click="changeScore(scope.$index, 2, 'interviewScore')"></div>
                      <div :class="scope.row.value === 3 && 'danger'" @click="changeScore(scope.$index, 3, 'interviewScore')"></div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>
          <el-card>
            <div class="header-color-grounp" style="justify-content: start;">
              <div class="success"></div>表示通过
            </div>
            <div class="header-color-grounp" style="justify-content: start;">
              <div class="warning"></div>表示建议修改
            </div>
            <div class="header-color-grounp" style="justify-content: start;">
              <div class="danger"></div>表示没有体现这个部分或需要重新修改
            </div>
          </el-card>
          <el-card>
            <div class="comprehensive">
              <div class="rate-grounp">
                综合评分：<el-rate v-model="score.totalScore" />
              </div>
            </div>
          </el-card>
          <el-card>
            <div class="flex-ju-al-start">
              <div class="flex" style="padding-right:10px;"><el-rate :value="1" disabled />很差</div>
              <div class="flex" style="padding-right:10px;"><el-rate :value="2" disabled />差</div>
              <div class="flex" style="padding-right:10px;"><el-rate :value="3" disabled />一般</div>
              <div class="flex" style="padding-right:10px;"><el-rate :value="4" disabled />好</div>
              <div class="flex" style="padding-right:10px;"><el-rate :value="5" disabled />很好</div>
            </div>
          </el-card>
          <el-card>
          <div class="score-form">
            <el-form :model="score" ref="scoreForm" label-position="top" label-width="80px">
              <el-form-item label="简历修改建议">
                <el-input
                  type="textarea"
                  resize="none"
                  placeholder="请输入简历修改建议"
                  v-model="score.resumePropose" />
              </el-form-item>
              <el-form-item label="面试修改建议">
                <el-input
                  type="textarea"
                  resize="none"
                  placeholder="请输入面试修改建议"
                  v-model="score.interviewPropose" />
              </el-form-item>
            </el-form>
          </div>
          </el-card>
          <el-card>
          <div class="score-footer">
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="submitForm" style="background: #00a0e9;border-color:#00a0e9">确定</el-button>
          </div>
          </el-card>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      remark: '',
      active: 0,
      formConfig: [],
      form: {},
      score: {},
      scoreId: null,
      resumeScore:
      [
        {
          label: '基本背景',
          value: 0
        },
        {
          label: '教育背景',
          value: 0
        },
        {
          label: '工作&实习经历',
          value: 0
        },
        {
          label: '求职意向',
          value: 0
        },
        {
          label: '技能',
          value: 0
        },
        {
          label: '自我评价',
          value: 0
        },
        {
          label: '其他',
          value: 0
        }
      ],
      interviewScore: []
    }
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    type: {
      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
        })
    },
    getScore (id) {
      this.$api
        .post('/resumeScore/queryResumeScore', {
          reqdata: {
            resumeId: id
          }
        })
        .then((res) => {
          const { object } = res
          const { id, resumePropose, interviewPropose, totalScore, resumeScore, interviewScore } = object || {}
          this.score = { resumePropose, interviewPropose, totalScore }
          this.scoreId = id
          this.resumeScore = resumeScore
            ? JSON.parse(resumeScore)
            : this.resumeScore.map(item => {
              item.value = 0
              return item
            })
          // console.log(this.resumeScore)
          // const list = [
          //   {
          //     label: '个人介绍',
          //     value: 0
          //   },
          //   {
          //     label: '自我评价',
          //     value: 0
          //   },
          //   // {
          //   //   label: '问题',
          //   //   value: 0
          //   // },
          //   {
          //     label: '其他',
          //     value: 0
          //   }
          // ]
          this.interviewScore = interviewScore ? JSON.parse(interviewScore) : this.interviewScore
          // ? JSON.parse(interviewScore)
          // : (() => {
          //   const num = this.info.answerVideoList ? this.info.answerVideoList.length : 0
          //   let arr = []
          //   for (let index = 0; index < num; index++) {
          //     arr.push(
          //       {
          //         label: '问题' + (index + 1),
          //         value: 0
          //       }
          //     )
          //   }
          //   list.splice(2, 0, ...arr)
          //   console.log(list)
          //   return list.map(item => {
          //     item.value = 0
          //     return item
          //   })
          // })()
        })
    },
    openNewPage (url) {
      window.open(url)
    },
    resetForm () {
      this.score = {}
      this.resumeScore.forEach(item => (item.value = 0))
      this.interviewScore.forEach(item => (item.value = 0))
    },
    submitForm () {
      const { score: { resumePropose, interviewPropose, totalScore }, resumeScore, interviewScore, scoreId } = this
      let isScore = true
      resumeScore.forEach(item => {
        item.value || (isScore = false)
      })
      interviewScore.forEach(item => {
        item.value || (isScore = false)
      })
      if (!isScore) {
        return this.$message({
          type: 'warning',
          message: '请为候选人评分!'
        })
      }
      const url = scoreId ? '/resumeScore/updateResumeScore' : '/resumeScore/createResumeScore'
      this.$api
        .post(url, {
          reqdata: {
            id: scoreId,
            // ...score,
            totalScore,
            interviewPropose: interviewPropose ? interviewPropose.replace(/\n/g, '<br />') : '',
            resumePropose: resumePropose ? resumePropose.replace(/\n/g, '<br />') : '',
            resumeId: this.info.id,
            interviewScore: JSON.stringify(interviewScore),
            resumeScore: JSON.stringify(resumeScore)
          }
        })
        .then((res) => {
          this.close()
          this.queryData(this.searchForm)
          this.$message({
            type: 'success',
            message: '评分成功!'
          })
        })
    },
    changeScore (index, val, arr) {
      // console.log(index, val)
      this.$set(this[arr][index], 'value', val)
    },
    handleSwitch (param) {
      this.active = param
      this.$api.post('/question/addUsedVideo')
    }
  },
  watch: {
    info () {
      this.remark = this.info.remark
      if (this.info.resumeFrom === 3) {
        this.details(this.info.id)
      }
      this.interviewScore = [
        ...this.info.answerVideoList.map((item, index) => ({
          label: '问题' + (index + 1),
          value: 0
        })),
        {
          label: '其他',
          value: 0
        }
      ]
    },
    dialogFormVisible (val) {
      this.resetForm()
      val || (this.active = 0)
      this.type && this.getScore(this.info.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-ju-al-start{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.flex {
  display: flex;
  justify-content: space-between;
  .left {
    flex: 3;
    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;
    }
  }
  .resune {
    overflow: auto;
    flex: 3;
    max-height: 770px;
    iframe {
      border: none;
      html {
        width: 100%;
      }
    }
    // &::-webkit-scrollbar {
    //   width: 0!important;
    // }
  }
  .score {
    flex: 2;
    .header-color-grounp {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > div {
        width: 13px;
        margin: 0 6px;
        height: 13px;
        border-radius: 20px;
      }
    }
    .content-color-grounp {
      display: flex;
      justify-content: space-between;
      > div {
        cursor: pointer;
        width: 25px;
        height: 13px;
        border-radius: 4px;
        background: rgba(144, 147, 153, .5);
      }
    }
    .success {
      background: #67c23a!important;
    }
    .warning {
      background: #e6a23c!important;
    }
    .danger {
      background: #f56c6c!important;
    }
    .score-footer {
      margin-top: 12px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
.prompt {
  text-align: center;
  height: 30px;
  line-height: 40px;
  font-size: 20px;
  color: #888;
}
.rate-grounp {
  display: flex;
  padding: 10px;
}
::v-deep .el-table th,::v-deep  .el-table td {
  padding: 5px 0 !important;
  font-size: 12px;
}
::v-deep .el-card__body {
  padding: 10px;
}
::v-deep .el-card {
  margin: 5px 0;
}
::v-deep .el-form-item {
  margin: 0;
}
::v-deep .el-form-item__label {
  padding: 0;
}
</style>
