<template>
  <div class="aigc">
    <div id="top">
        <Swiper :banner-array="carouselList" />
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item>
          <el-input v-model="form.name" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.name" placeholder="登陆密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input class="identify" v-model="form.name" placeholder="验证码"></el-input>
          <s-identify :identifyCode="identifyCode"></s-identify>
        </el-form-item>
        <el-form-item class="nomargin">
          <el-button type="primary" >登陆</el-button>
        </el-form-item>
        <el-form-item class="nomargin">
          <a>使用短信登陆</a>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="createai">制作数字人</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="hot">
      <div class="content">
        <div class="top">
          <div class="ai" v-for="(item, key) in ailist" :key="key">
            <img :src="item.img">
            <a> {{ item.label }}</a>
          </div>
          <div class="aitxt">
            <a class="title">{{ aitxt.title }}</a>
            <a class="content">{{ aitxt.content }}</a>
            <a :href="aitxt.link" targrt="_blank" class="atarget">
              <el-button round>制作数字人</el-button>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="gg">
      <a :href="gg1.link" target="_blank">
        <img :src="gg1.img" alt="">
      </a>
      </div>
    <div id="daliay" v-show="aigczb.length > 0">
      <div class="content">
        <div class="top">
          <div id="szr">
            <a>数字人直播</a>
          </div>
          <SwiperHor :banner-array="aigczb" />
        </div>
      </div>
      <div class="gg gg2">
        <a :href="gg2.link" target="_blank">
          <img :src="gg2.img" alt="">
        </a>
      </div>
    </div>
    <div id="daliay2" v-show="aigcsp.length > 0">
      <div class="content">
        <div class="top">
          <div id="szr">
            <a>数字人短视频</a>
          </div>
          <SwiperHor :banner-array="aigcsp" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from '@/components/swiper'
import SwiperHor from '@/components/swiperHor'
import SIdentify from '@/components/identify'
import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js'
export default {
  name: 'aigc',
  data () {
    return {
      carouselList: [],
      identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',
      identifyCode: '',
      rules: {
        verifycode: [{
          required: true,
          trigger: 'blur',
          validator: this.validateVerifycode
        }]
      },
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      ailist: [],
      aitxt: {},
      aigczb: [],
      aigcsp: [],
      gg1: {},
      gg2: {}
    }
  },
  components: {
    SIdentify,
    Swiper,
    SwiperHor
  },
  mounted () {
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
    this.getguanggao()
    this.getshuzirenremark()
    this.getshuzirenList()
    this.getshuzirenZhiBoList()
    this.getvideoList()
    this.getlunboList()
    // this.yidong()
  },
  methods: {
    async getlunboList () {
      const { data: { message, data } } = await lunboList()
      if (message === 'success') {
        this.carouselList = data.list
      }
    },
    async getguanggao () {
      const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
      const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
      if (ggm1 === 'success' && ggm2 === 'success') {
        this.gg1 = {
          img: gg1.image,
          link: gg1.link
        }
        this.gg2 = {
          img: gg2.image,
          link: gg2.link
        }
      }
    },
    async getshuzirenremark () {
      const { data: { message, data } } = await shuzirenremark()
      if (message === 'success') {
        this.aitxt.title = data.title
        this.aitxt.content = data.remark
        this.aitxt.link = data.link
      }
    },
    async getshuzirenList () {
      const { data: { message, data } } = await shuzirenList()
      if (message === 'success') {
        for (const iter of data.list) {
          this.ailist.push({
            img: iter.image,
            label: iter.title
          })
        }
      }
    },
    async getshuzirenZhiBoList () {
      const { data: { message, data } } = await shuzirenZhiBoList()
      if (message === 'success') {
        for (const iter of data.list) {
          this.aigczb.push({
            img: iter.image.split('?')[0],
            name: iter.title,
            content: iter.subTitle,
            flag: 'image'
          })
        }
      }
    },
    async getvideoList () {
      const { data: { message, data } } = await videoList()
      if (message === 'success') {
        for (const iter of data.list) {
          console.log(iter, '111111')
          this.aigcsp.push({
            video: iter.link ? iter.link : '',
            img: iter.image.split('?')[0],
            name: iter.subTitle ? iter.subTitle : '主播名',
            content: iter.title,
            flag: 'video'
          })
        }
      }
    },
    changenews (item) {
      this.informationitem = item
    },
    changedepth (item) {
      this.depthitem = item
    },
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 切换验证码
    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成随机验证码
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
        ]
      }
    },
    yidong () {
      const contentBox = document.getElementById('zbitem')
      const scrollBox = document.getElementById('zb')
      const imgWidth = 220
      this.scroll(contentBox, scrollBox, imgWidth)
    },
    scroll (contentBox, scrollBox, imgWidth) {
      setInterval(() => {
        scrollBox.scrollLeft++
        // 当一张图片恰好滚动至可视区域外
        if (scrollBox.scrollLeft % imgWidth === 0) {
          var el = contentBox.firstElementChild // 获取处于前面的图片
          contentBox.appendChild(el) // appendChild()具备剪切功能，无需手动删除旧节点
        }
      }, 2000)
    }
  }
}
</script>
<style lang="scss" scoped>
.aigc{
    background: #E3E5EA;
}
.el-carousel__container {
  height: 590px;
}
.el-carousel__item{
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  ::deep .el-carousel__container {
    background-color: #00000000 !important;
        height: 590px !important;
      }
  #txt {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    color: #FFFFFF;
    .title {
      font-size: 36px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 15px;

    }
    .subtitle {
      font-size: 16px;
      font-weight: 400;
      opacity: 0.5;
      text-align: center;
    }
  }
}
#top {
  height: 590px;
  width: 100%;
  // background-image: url('../../assets/aigctop.png');
  background-size: 100.5% 100%;
  position: relative;
  .el-form {
    position: absolute;
    top: 40%;
    left: 55%;
    z-index: 99;
    .el-form-item {
      width: 350px;
    }
    .el-form-item:nth-child(3) {
      :deep .el-form-item__content {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .el-button {
      width: 100%;
      background-color: rgba(0, 0, 0, 0.384);
      border: 0px;
    }
    .createai {
      background-color:#07CAAF
    }
    a {
      color: #FFFFFF;
    }
    .nomargin {
      margin-bottom: 0px !important;
    }
    .identify {
      width: 240px;
    }
  }
  .el-carousel__item {
          display: flex;
          align-items: center;
          flex-direction: column;
          width: 100%;
          padding: 0 40px;
          .txtcontent {
            height: 50% !important;
            width:100%;

            .title {
              height: 26px;
              font-size: 26px;
              font-weight: bold;
              color: #FFFFFF;
              width: 100%;
              display: flex;
              align-items: center;
              img {
                margin-right: 10px;
              }
            }
            p {
              text-align: left;
              width: 85%;
              font-size: 16px;
              font-weight: 400;
              line-height: 30px;
              color: #ffffff83;
            }
          }
          .btn {
            height: 20%;
            width:100%;
            position: relative;
            .more {
              position: absolute;
              left: 0px;
              background: none !important;
              border: 1px solid #00F6BD;
              opacity: 0.8;
              border-radius: 4px;
              color: #00F6BD;
            }
          }
        }
}

#hot, #daliay, #daliay2 {
  width: 100%;
  background: #E3E5EA;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding-top: 30px;
  .content {
    width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top, .bottom {
      width: 100%;
    }
    .top {
      background-color: #FFFFFF;
      display: flex;
      justify-content: space-around;
      padding: 26px 0;
      position: relative;
      .ai {
        position: relative;
        width: 240px;
        a {
          bottom: 0;
          left: 0;
          position: absolute;
          font-size: 18px;
          font-weight: bold;
          color: #1C679F;
          line-height: 48px;
          width: 100%;
          margin-bottom: 15px;
        }
      }

      .aitxt {
        width: 344px;
        height: 85%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin-right: 10px;
        .title {
          font-size: 24px;
          font-weight: bold;
          color: #00161C;
          line-height: 48px;
        }
        .content {
          width: 100%;
          text-align: left;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #00161C;
          line-height: 30px;
          margin-top: 30px;
        }
        .el-button {
          border: none;
          background-color: #07CAAF;
          font-size: 14px;
          color: #FFFFFF;
          position: absolute;
          bottom: 46px;
        }
        .atarget {
          width: 100%;
          display: flex;
          justify-content: center;
        }
      }
    }
    .bottom {
      min-height: 120px;
      background-image: url('../../assets/bottom.png');
      background-size: 100% 100%;
      margin: 30px 0;
    }
  }
}
#daliay, #daliay2 {
    padding-top: 0;
  .content {
    .top {
      background-color: #ffffff00;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      #szr {
        margin-bottom: 30px;
        a {
          font-size: 30px;
          font-weight: bold;
          color: #00161C;
          line-height: 48px;
          display: inline-block;
          position: relative;
          z-index: 9;
        }
        a::after {
          content: '';
          position: absolute;
          left: 15%;
          bottom: 10px;
          width: 70%;
          height: 6px; /* 横线高度为文字高度的一半 */
          background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
          z-index: -1;
        }
      }
      #zb {
        margin-top: 40px;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        img {
          height: 60px;
          width: 60px;
        }
        #zbitem::-webkit-scrollbar{
          display: none;
        }
        #zbitem {
          width: 100%;
          height: 100%;
          display: flex;
          overflow-x: auto;
          .imagezb {
          width: 220px;
          float: left;
          margin-right: 20px;
          position: relative;
          flex: 1;
          img {
            width: 220px;
            height: 370px;
          }
          .el-button {
            position: absolute;
            bottom: 82px;
            left: 50%;
            margin-left: -73px;
            border: none;
            background: #07CAAF;
            font-size: 18px;
            font-weight: bold;
            color: #FFFFFF;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 146px;
            height: 44px;
          }
          .textzb {
            font-size: 18px;
            font-weight: bold;
            color: #030303;
            line-height: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            margin-top: 18px;
            a {
              display: inline-block;
              text-align: left;
              width: 130px;
            }
            .contentzb{
                margin-top: 10px;
            }
          }

          }
          .videozb {
            width: 220px;
            height: 400px;
            float: left;
            margin-right: 20px;
            position: relative;
            img {
              width: 220px;
              height: 370px;
            }
            .textzb {
              margin-top: 10px;
              line-height: 16px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              height: 40px;
              width: 100%;
              a {
                width: 100%;
                display: inline-block;
                text-align: left;
              }
              .contentzb{
                  margin-top: 10px;
              }
            }
          }
          .videozb::after {
            content: '';
            z-index: 99;
            width: 55px;
            height: 55px;
            position: absolute;
            background-image: url('../../assets/play.png');
            background-size: 100%;
            left: 50%;
            margin-left: -27.5px;
            top: 40%;
            z-index: 99;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }
}

.gg {
    margin: 30px auto;
    width: 1200px;
    img {
        width: 100%;
    }
}
.gg2{
    margin-bottom: 30px;
}

#daliay2 {
  padding-bottom: 50px;
}
</style>
