<template>
  <div>
    <div id="top">
      <div class="txt">
        <a>META</a>
        <a>AUTO</a>
      </div>
      <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>
            <el-button round>制作数字人</el-button>
          </div>
        </div>
        <div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/>
      </div>
    </div>
    <div id="daliay">
      <div class="content">
        <div class="top">
          <div id="szr">
            <a>数字人视频</a>
          </div>
          <div id="zb">
            <template v-for="(item, index) in aigczb" >
              <div v-if="item.flag === 'image'" :key="index" class="imagezb">
                <img :src="item.img">
                <el-button>进入直播间</el-button>
                <div class="textzb">
                  <a class="titlezb">主播: {{ item.name }}</a>
                  <a class="contentzb">内容: {{ item.content }}</a>
                </div>
              </div>
              <div v-else class="videozb" :key="index">
                <img :src="item.img">
                <div class="textzb">
                  <a class="titlezb">主播: {{ item.name }}</a>
                  <a class="contentzb">内容: {{ item.content }}</a>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/>
      </div>
    </div>
  </div>
</template>
<script>
import SIdentify from '@/components/identify'
import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList } from '@/api/aigc.js'
export default {
  name: 'aigc',
  data () {
    return {
      identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',
      identifyCode: '',
      rules: {
        verifycode: [{
          required: true,
          trigger: 'blur',
          validator: this.validateVerifycode
        }]
      },
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      ailist: [
        {
          img: '/ai1.png',
          label: 'XWOM 002'
        },
        {
          img: '/ai2.png',
          label: '数字人ACER'
        },
        {
          img: '/ai3.png',
          label: '车助手002'
        }
      ],
      aitxt: {
        title: 'ACER助力车企新势力',
        content: '作为国产豪华大皮卡山海炮的越野版本，山海炮性能版被称为“国产皮卡扛把子”。新车基于长城坦克平台开发，搭载国内最强的自研3.0T'
      },
      aigczb: [
        {
          img: '/aigc_img5.png',
          name: '主播名',
          content: '新车选购',
          flag: 'image'
        },
        {
          img: '/aigc_img1.png',
          name: '主播名',
          content: '新车选购',
          flag: 'image'
        },
        {
          img: '/aigc_img2.png',
          name: '主播名',
          content: '新车选购',
          flag: 'image'
        },
        {
          img: '/aigc_img3.png',
          name: '丰田锋兰达值得买吗？',
          content: '年底购车多少钱能落地价？',
          flag: 'video'
        }
      ],
      gg1: '',
      gg2: ''
    }
  },
  components: {
    SIdentify
  },
  mounted () {
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
    this.getguanggao()
    this.getshuzirenremark()
    this.getshuzirenList()
    this.getshuzirenZhiBoList()
    this.getvideoList()
  },
  methods: {
    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 = gg1.image
        this.gg2 = gg2.image
      }
    },
    async getshuzirenremark () {
      const { data: { message, data } } = await shuzirenremark()
      if (message === 'success') {
        this.aitxt.title = data.title
        this.aitxt.content = data.remark
      }
    },
    async getshuzirenList () {
      const { data: { message, data } } = await shuzirenList()
      if (message === 'success') {
        console.log(data)
      }
    },
    async getshuzirenZhiBoList () {
      const { data: { message, data } } = await shuzirenZhiBoList()
      if (message === 'success') {
        console.log(data)
      }
    },
    async getvideoList () {
      const { data: { message, data } } = await videoList()
      if (message === 'success') {
        console.log(data)
      }
    },
    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)
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
#top {
  height: 590px;
  width: 100%;
  background-image: url('../../assets/aigctop.png');
  background-size: 100.5% 100%;
  position: relative;
  .txt {
    top: 85%;
    left: 25%;
    position: absolute;
    width: 500px;
    display: flex;
    justify-content: space-between;
    a {
      line-height: 15px;
      font-size: 18px;
      font-weight: bold;
      color: #FFFFFF;
      letter-spacing: 40px;
    }
  }
  .el-form {
    position: absolute;
    top: 40%;
    left: 55%;
    .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;
    }
  }
}

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

      .aitxt {
        width: 250px;
        height: 85%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .title {
          font-size: 24px;
          font-weight: bold;
          color: #00161C;
          line-height: 48px;
        }
        .content {
          width: 100%;
          min-width: 100px;
          text-align: left;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #00161C;
          line-height: 30px;
        }
        .el-button {
          border: none;
          background-color: #07CAAF;
          font-size: 14px;
          color: #FFFFFF;
        }
      }
    }
    .bottom {
      min-height: 120px;
      background-image: url('../../assets/bottom.png');
      background-size: 100% 100%;
      margin-bottom: 30px;
    }
  }
}
#daliay {
    padding-top: 0;
  .content {
    .top {
      background-color: #ffffff00;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      #szr {
        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 {
        .imagezb {
          width: 220px;
          height: 400px;
          float: left;
          margin-right: 20px;
          position: relative;
          img {
            width: 220px;
            height: 370px;
          }
          .el-button {
            position: absolute;
            bottom: 60px;
            left: 50px;
            border: none;
            background: #07CAAF;
            font-size: 18px;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 48px;
            padding-top: 0px;
            padding-bottom: 0px;
          }
          .textzb {
            font-size: 18px;
            font-weight: bold;
            color: #030303;
            line-height: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            a {
              display: inline-block;
              text-align: left;
              width: 130px;
            }
          }

        }
        .videozb {
          width: 240px;
          height: 400px;
          float: left;
          margin-right: 60px;
          position: relative;
          img {
            width: 240px;
            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;
            }
          }
        }
        .videozb::after {
          content: '';
          z-index: 99;
          width: 67px;
          height: 67px;
          position: absolute;
          background-image: url('../../assets/play.png');
          left: 40%;
          top: 40%;
          z-index: 99;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
</style>
