<template>
  <div>
    <el-steps :active="stepsIndex" align-center>
      <el-step title="创建账户"></el-step>
      <el-step title="发布视频"></el-step>
      <el-step title="查看营销数据"></el-step>
    </el-steps>
    <div class="content-box">
      <div class="step-content1" v-if="stepsIndex === 0">
        <div class="video-box">
          <div class="dy-box" v-if="!registerIndex">
            <img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
            <div class="works-title">{{ form.title }}</div>
            <div class="works-dec">{{ form.dec }}</div>
            <video :src="form.url" width="375px" class="video"></video>
          </div>
          <div class="register-step" v-else>
            <img :src="`https://webapp-pub.ezijing.com/x-training-new/register${registerIndex}.JPG`" />
          </div>
          <div class="register-btn" ref="registerBtn" @click="registerNext"></div>
        </div>
        <div class="text">{{ registerText }}</div>
      </div>
      <div class="step-content2" v-if="stepsIndex === 1">
        <div class="form-box">
          <el-form ref="form" :model="form" label-width="80px" :disabled="$route.query.type === 1 ? false : true">
            <el-form-item label="标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.dec"> </el-input>
            </el-form-item>
            <el-form-item label="视频">
              <upload-video v-model="form.url" @input="input"></upload-video>
            </el-form-item>
          </el-form>
        </div>
        <div class="dy-box">
          <img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
          <div class="works-title">{{ form.title }}</div>
          <div class="works-dec">{{ form.dec }}</div>
          <video :src="form.url" width="375px" class="video"></video>
        </div>
      </div>
      <div class="step-content1 step-content3" v-if="stepsIndex === 2">
        <div class="video-box">
          <div class="dy-box" v-if="!dataIndex">
            <img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
            <div class="works-title">{{ form.title }}</div>
            <div class="works-dec">{{ form.dec }}</div>
            <video :src="form.url" width="375px" class="video"></video>
          </div>
          <div class="register-step" v-else>
            <img :src="`https://webapp-pub.ezijing.com/x-training-new/data${dataIndex}.jpg`" />
          </div>
          <div class="register-btn" ref="dataBtn" @click="dataNext"></div>
        </div>
        <div class="text">{{ registerText }}</div>
      </div>
      <div class="mian-btn">
        <el-button type="primary" @click="cacheReport" v-if="$route.query.type != 1">保存</el-button>
        <el-button type="primary" @click="stepsIndex--" v-if="stepsIndex != 0">上一步</el-button>
        <el-button v-if="stepsIndex == 0" type="primary" @click="registerNextBtn">下一步</el-button>
        <el-button v-if="stepsIndex == 1" type="primary" @click="formNextBtn">下一步</el-button>
        <el-button type="primary" @click="submitReport" v-if="stepsIndex == 2 && $route.query.type != 1">完成</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { submitReport, cacheReport, checkRecord, getReportDetail } from '../api'
import UploadVideo from '@/components/upload/UploadVideo.vue'
export default {
  components: { UploadVideo },
  data() {
    return {
      form: {
        title: '',
        dec: '',
        url: ''
      },
      stepsIndex: 0,
      registerIndex: 0,
      registerText: '第一步:打开抖音APP，点击底部“我”',
      dataIndex: 0,
      dataText: '第一步：点击“我”，进入个人主页'
    }
  },
  computed: {
    cases() {
      return this.$store.state.case
    }
  },
  mounted() {
    this.checkRecord()
  },
  methods: {
    // 验证是否有未完成的答题记录
    checkRecord() {
      checkRecord(this.cases.id, 2)
        .then(res => {
          if (res.data.items.length) {
            this.getReportDetail(res.data.items[0].id)
          }
        })
    },
    registerNextBtn() {
      if (this.$route.query.type) {
        this.stepsIndex++
      } else {
        if (this.registerIndex === 4) {
          this.stepsIndex++
          this.registerIndex = 0
        } else {
          this.$message({ message: '请完成当前步骤', type: 'warning' })
        }
      }
    },
    formNextBtn() {
      if (this.$route.query.type) {
        this.stepsIndex++
      } else {
        const isNull = Object.values(this.form).findIndex(item => {
          return item === ''
        })
        if (isNull === -1) {
          this.stepsIndex++
        } else {
          this.$message({ message: '请在发布视频完善信息', type: 'warning' })
        }
      }
    },
    // 提交报告
    submitReport() {
      const isNull = Object.values(this.form).findIndex(item => {
        return item === ''
      })
      if (isNull !== -1) {
        this.$message({ message: '请在发布视频完善信息', type: 'warning' })
        return false
      }
      if (this.dataIndex !== 4) {
        this.$message({ message: '请完成当前步骤', type: 'warning' })
        return false
      }
      const params = {
        reports: JSON.stringify({ type: 1, commit_report: [this.form] })
      }
      const id = this.$route.query.id
      if (id) {
        params.id = id
      }
      submitReport(params)
        .then(res => {
          this.$message({
            message: '保存成功！你可以在作品展示中查看/编辑报告，查看成绩',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.push({ path: '/works-show' })
          }, 3000)
        })
        .catch(err => {
          this.$message.error(err.message || '稍后再试')
        })
    },
    // 保存报告
    cacheReport() {
      const commitReport = [
        this.form,
        { steps: this.stepsIndex, registerIndex: this.registerIndex, dataIndex: this.dataIndex }
      ]
      const param = { type: 1, commit_report: commitReport }
      cacheReport(this.cases.id, { reports: JSON.stringify(param) })
        .then(res => {
          this.$message({ type: 'success', message: '保存成功' })
        })
        .catch(err => {
          this.$message.error(err.message || '稍后再试')
        })
    },
    // 获取报告
    getReportDetail(id) {
      getReportDetail(id).then(res => {
        const cachData = res.data.detail.answer.commit_report
        if (this.$route.query.type === 1) {
          this.stepsIndex = cachData[1].steps
          this.registerIndex = cachData[1].registerIndex
          this.dataIndex = cachData[1].dataIndex
        }
        this.form.title = cachData[0].title
        this.form.dec = cachData[0].dec
        this.form.url = cachData[0].url
        // this.stepsIndex = cachData[1].steps
      })
    },
    // 查看营销数据教程
    dataNext() {
      const styles = {
        1: { w: '50px', t: '30px', l: '320px', text: '第二步:点击右上角，进入菜单' },
        2: { w: '200px', t: '300px', l: '100px', text: '第三步:点击”创作者服务中心“' },
        3: { w: '50px', t: '190px', l: '290px', text: '第四步:点击”数据中心“' },
        4: { w: '0px', t: '0px', l: '0px', text: '完成' }
      }
      if (this.dataIndex < 4) this.dataIndex++
      const getStyle = styles[this.dataIndex]
      const getDom = this.$refs.dataBtn.style
      this.setStyle(getStyle, getDom)
    },
    // 注册教程
    registerNext() {
      const styles = {
        1: { w: '310px', t: '380px', l: '30px', text: '第二步:点击其他手机号登录' },
        2: { w: '310px', t: '280px', l: '30px', text: '第三步:输入手机号点击获取手机验证码' },
        3: { w: '310px', t: '340px', l: '30px', text: '第四步:点击登录' },
        4: { w: '0px', t: '0px', l: '0px', text: '第五步:登录成功之后，在右下角点击“我”，就可以修改自己的头像和资料了' }
      }
      if (this.registerIndex < 4) this.registerIndex++
      const getStyle = styles[this.registerIndex]
      const getDom = this.$refs.registerBtn.style
      this.setStyle(getStyle, getDom)
    },
    setStyle(sty, dom) {
      dom.width = sty.w
      dom.top = sty.t
      dom.left = sty.l
      this.registerText = sty.text
    },
    input(url) {
    }
  }
}
</script>

<style lang="scss" scoped>
.step-content1 {
  display: flex;
  justify-content: center;
  .video-box {
    min-width: 375px;
    width: 375px;
    background: #000;
    position: relative;
    img {
      width: 100%;
      display: block;
    }
    .register-btn {
      position: absolute;
      top: 600px;
      left: 300px;
      width: 60px;
      height: 50px;
      cursor: pointer;
      z-index: 999;
    }
  }
  .text {
    font-size: 18px;
    color: #000;
    margin-left: 30px;
    max-width: 300px;
    min-width: 300px;
  }
  .dy-box {
    min-width: 375px;
    width: 375px;
    height: 667px;
    background: #000;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }
    .works-title {
      position: absolute;
      top: 505px;
      left: 24px;
      font-size: 12px;
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 263px;
      z-index: 999;
    }
    .works-dec {
      position: absolute;
      top: 526px;
      left: 24px;
      font-size: 12px;
      color: #ffffff;
      width: 263px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      z-index: 999;
    }
    .video {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
  }
}
.step-content2 {
  display: flex;
  .dy-box {
    min-width: 375px;
    width: 375px;
    height: 667px;
    background: #000;
    margin-left: 80px;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }
    .works-title {
      position: absolute;
      top: 505px;
      left: 24px;
      font-size: 12px;
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 263px;
      z-index: 999;
    }
    .works-dec {
      position: absolute;
      top: 526px;
      left: 24px;
      font-size: 12px;
      color: #ffffff;
      width: 263px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      z-index: 999;
    }
    .video {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
  }
  .form-box {
    flex: 1;
  }
}
.step-content3 {
  display: flex;
  justify-content: center;
}
.content-box {
  padding-top: 30px;
}
.mian-btn {
  padding: 30px;
  display: flex;
  justify-content: right;
}
</style>
