<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">
          <img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" v-if="!registerIndex" />
          <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 != 2">继续</el-button>
        <el-button type="primary" @click="stepsIndex++" v-else>确认提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
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: '第一步：点击“我”，进入个人主页'
    }
  },
  methods: {
    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: '第四步:点击”数据中心“' }
      }
      if (this.dataIndex < 4) this.dataIndex++
      const getStyle = styles[this.dataIndex]
      const getDom = this.$refs.dataBtn.style
      this.setStyle(getStyle, getDom)
    },
    registerNext() {
      const styles = {
        0: { w: '60px', t: '600px', l: '300px', text: '第一步:打开抖音APP，点击底部“我”' },
        1: { w: '310px', t: '380px', l: '30px', text: '第二步:点击其他手机号登录' },
        2: { w: '310px', t: '280px', l: '30px', text: '第三步:输入手机号点击获取手机验证码' },
        3: { w: '310px', t: '340px', l: '30px', text: '第四步:点击登录' }
      }
      // if (this.registerIndex < 3) {
      //   this.registerIndex++
      // } else {
      //   this.registerIndex = 0
      // }
      this.registerIndex < 3 ? this.registerIndex++ : this.registerIndex = 0
      const getStyle = styles[this.registerIndex]
      const getDom = this.$refs.registerBtn.style
      this.setStyle(getStyle, getDom)
      // getDom.width = getStyle.w
      // getDom.top = getStyle.t
      // getDom.left = getStyle.l
      // this.registerText = getStyle.text
    },
    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;
  }
}
.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;
  .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%);
    }
  }
}
.content-box {
  padding-top: 30px;
}
.mian-btn {
  padding: 30px;
  display: flex;
  justify-content: right;
}
</style>
