<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">
            <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="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">完成</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getReport, submitReport } 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: '第一步：点击“我”，进入个人主页'
    }
  },
  mounted() {
    this.getReport()
  },
  methods: {
    registerNextBtn() {
      if (this.registerIndex === 4) {
        this.stepsIndex++
      } else {
        this.$message({ message: '请完成当前步骤', type: 'warning' })
      }
    },
    formNextBtn() {
      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
      }
      console.log(this.dataIndex, '123')
      if (this.dataIndex !== 4) {
        this.$message({ message: '请完成当前步骤', type: 'warning' })
        return false
      }
      const params = [{ type: 1, commit_report: this.form }]
      submitReport({ reports: JSON.stringify(params) }).then(res => {
        this.$message({
          message: '保存成功！你可以在作品展示中查看/编辑报告，查看成绩',
          type: 'success'
        })
        setTimeout(() => {
          this.$router.push({ path: '/works-show' })
        }, 3000)
      }).catch(err => {
        this.$message.error(err.message || '稍后再试')
      })
    },
    // 获取报告
    getReport() {
      getReport().then(res => {
        this.form = res.data.reports[0].answer.commit_report
      })
    },
    // 查看营销数据教程
    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) {
      console.log(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>
