<template>
  <div class="design-agent-block">
    <symbol id="icon-aiyoujiantou" viewBox="0 0 1024 1024"><path d="M350.165333 97.834667a42.666667 42.666667 0 0 0-60.330666 60.330666L643.626667 512 289.834667 865.834667a42.666667 42.666667 0 0 0-2.496 57.621333l2.496 2.709333a42.666667 42.666667 0 0 0 60.330666 0l384-384a42.666667 42.666667 0 0 0 0-60.330666l-384-384z"></path></symbol>
    <div class="index-block">
      <div class="flex-grow">
        <div class="flex-grow-top">
          <div
            class="dialog-compose-mode"
            @click="gotoChat"
          >
            <div class="flex-grow-top_icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
              ><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>
            </div>
            <div class="flex-grow-top_title">对话创作模式</div>
            <div class="flex-grow-top_desc">与AI设计助手自由对话，通过自然语言描述您的创意想法， 智能体将理解并帮您实现设计愿景。</div>
            <div class="dialog-btns">
              <a
                class="dialog-btns-a"
                href="javascript:;"
              >开始对话创作</a>
            </div>
          </div>
          <div class="tool-direct-mode">
            <div class="flex-grow-top_icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
              ><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" /></svg>
            </div>
            <div class="flex-grow-top_title">工具直达模式</div>
            <div class="flex-grow-top_desc">直接选择专业设计工具，快速开始特定类型的创作任务， 适合有明确设计目标的用户。</div>
            <div class="tool-direction">↓ 选择下方工具开始创作 ↓</div>
          </div>
        </div>
        <div class="flex-grow-bottom">
          <h2 class="tool-direct__title">一站式智能工具，<span class="mod-title-highlight">效率转化</span>全提升</h2>
          <div class="feature-mod-content">
            <div class="feature-mod-content-main">
              <div class="feature-mod-content-main-item-wrapper theme-pink" @click="gotoTools('1')">
                <div class="feature-mod-content-main-item left-imgs-count-1">
                  <div class="feature-mod-content-main-item-left">
                    <div class="feature-mod-content-main-item-left-title">
                      创意生图
                      <span class="feature-mod-content-main-item-left-title-arrow">
                        <span role="img" class="anticon arrow-icon arrow-first">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                        <span role="img" class="anticon arrow-icon arrow-second">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                      </span>
                    </div>
                    <div class="feature-mod-content-main-item-left-desc">
                      随心创作想要的设计图
                    </div>
                    <div class="feature-mod-content-main-item-left-imgs">
                      <div class="feature-mod-content-main-item-left-imgs-img">
                        <div class="acss-1mnncja image-container" style="width: 100%; height: 100%;">
                          <div class="ant-image">
                            <img class="ant-image-img" src="https://img.alicdn.com/imgextra/i2/O1CN014muJba1xs8gueCksl_!!6000000006498-2-tps-868-512.png_640x640q90s150.jpg_.webp" alt="创意生图">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="feature-mod-content-main-item-right">
                    <div class="feature-mod-content-main-item-right-imgs count-2">
                      <div class="feature-mod-content-main-item-right-imgs-img">
                        <div class="acss-1mnncja image-container" style="width: 100%; height: 100%;">
                          <div class="ant-image">
                            <img class="ant-image-img" src="@/assets/image/design-text1.jpg" alt="创意生图">
                          </div>
                        </div>
                      </div>
                      <div class="feature-mod-content-main-item-right-imgs-img">
                        <div class="acss-1mnncja image-container" style="width: 100%; height: 100%;">
                          <div class="ant-image">
                            <img class="ant-image-img" src="@/assets/image/design-text2.jpg" alt="创意生图">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature-mod-content-main-item-wrapper theme-blue" @click="gotoTools('2')">
                <div class="feature-mod-content-main-item left-imgs-count-3">
                  <div class="feature-mod-content-main-item-left">
                    <div class="feature-mod-content-main-item-left-title">
                      图生图
                      <span class="feature-mod-content-main-item-left-title-arrow">
                        <span role="img" class="anticon arrow-icon arrow-first">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                        <span role="img" class="anticon arrow-icon arrow-second">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                      </span>
                    </div>
                    <div class="feature-mod-content-main-item-left-desc">
                      随心创作想要的设计图
                    </div>
                    <div class="feature-mod-content-main-item-left-imgs">
                      <div class="feature-mod-content-main-item-left-imgs-img">
                        <div class="acss-1mnncja image-container" style="width: 100%; height: 100%;">
                          <div class="ant-image">
                            <img class="ant-image-img" src="@/assets/image/design-image3.jpg" alt="图生图">
                          </div>
                        </div>
                      </div>
                      <div class="feature-mod-content-main-item-left-imgs-img">
                        <div class="acss-1mnncja image-container" style="width: 100%; height: 100%;">
                          <div class="ant-image">
                            <img class="ant-image-img" src="@/assets/image/design-image2.jpg" alt="图生图">
                          </div>
                        </div>
                      </div>
                      <div class="feature-mod-content-main-item-left-imgs-img">
                        <div class="acss-1mnncja image-container" style="width: 100%; height: 100%;">
                          <div class="ant-image">
                            <img class="ant-image-img" src="@/assets/image/design-image1.jpg" alt="图生图">
                          </div>
                        </div>
                      </div>
                    </div>
                    <img class="feature-mod-content-main-item-left-arrow" src="@/assets/image/design-arrow.png">
                  </div>
                  <div class="feature-mod-content-main-item-right">
                    <div class="feature-mod-content-main-item-right-imgs count-1">
                      <div class="feature-mod-content-main-item-right-imgs-img">
                        <div class="acss-1mnncja image-container" style="width: 100%; height: 100%;">
                          <div class="ant-image">
                            <img class="ant-image-img" src="@/assets/image/design-image-index.jpg" alt="图生图">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature-mod-content-main-item-wrapper theme-yellow" @mouseenter="playVideo($event)" @mouseleave="pauseVideo($event)" @click="gotoTools('3')">
                <div class="feature-mod-content-main-item left-imgs-count-4">
                  <div class="feature-mod-content-main-item-left">
                    <div class="feature-mod-content-main-item-left-title">
                      线稿生成
                      <span class="acss-xpsi7w feature-mod-content-main-item-left-title-arrow">
                        <span role="img" class="anticon arrow-icon arrow-first">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                        <span role="img" class="anticon arrow-icon arrow-second">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                      </span>
                    </div>
                    <div class="feature-mod-content-main-item-left-desc">
                      一键转为专业的设计线稿
                    </div>
                    <div class="feature-mod-content-main-item-left-imgs">
                      <div class="feature-mod-content-main-item-left-imgs-img">
                        <div class="acss-1mnncja image-container" style="width: 100%; height: 100%;">
                          <div class="ant-image">
                            <img class="ant-image-img" src="@/assets/image/design-line1.jpg" alt="线稿生成">
                          </div>
                        </div>
                      </div>
                      <div class="feature-mod-content-main-item-left-imgs-img">
                        <div class="acss-1mnncja image-container" style="width: 100%; height: 100%;">
                          <div class="ant-image">
                            <img class="ant-image-img" src="@/assets/image/design-line2.jpg" alt="线稿生成">
                          </div>
                        </div>
                      </div>
                      <div class="feature-mod-content-main-item-left-imgs-img">
                        <div class="acss-1mnncja image-container" style="width: 100%; height: 100%;">
                          <div class="ant-image">
                            <img class="ant-image-img" src="@/assets/image/design-line3.jpg" alt="线稿生成">
                          </div>
                        </div>
                      </div>
                      <div class="feature-mod-content-main-item-left-imgs-img">
                        <div class="acss-1mnncja image-container" style="width: 100%; height: 100%;">
                          <div class="ant-image">
                            <img class="ant-image-img" src="@/assets/image/design-line4.jpg" alt="线稿生成">
                          </div>
                        </div>
                      </div>
                    </div>
                    <img class="feature-mod-content-main-item-left-arrow" src="@/assets/image/design-arrow.png">
                  </div>
                  <div class="feature-mod-content-main-item-right">
                    <div class="acss-sxg5vc video-player loaded feature-mod-content-main-item-right-video"
                    style="width: 100%; height: 100%;">
                      <video controlslist="nodownload" loop="" style="width: 100%; height: 100%;">
                        <source src="@/assets/image/design-line-video.mp4">
                          Your browser does not support the video tag.
                      </video>
                      <div class="video-event-mask">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="feature-mod-content-sub">
              <div class="feature-mod-content-sub-item-wrapper">
                <div class="feature-mod-content-sub-item">
                  <div class="feature-mod-content-sub-item-left">
                    <div class="acss-1mnncja image-container" style="width: 92px; height: 64px;">
                      <div class="ant-image">
                        <img class="feature-mod-content-sub-item-left-img" src="//img.alicdn.com/imgextra/i2/O1CN012r1h0D1CmqAKOEwPN_!!6000000000124-2-tps-1104-768.png_640x640q90s150.jpg_.webp" alt="搭配融图" width="92" height="64"></div>
                    </div>
                  </div>
                  <div class="feature-mod-content-sub-item-right">
                    <div class="feature-mod-content-sub-item-right-title">
                      搭配融图
                      <span class="acss-xpsi7w feature-mod-content-sub-item-right-title-arrow">
                        <span role="img" class="anticon arrow-icon arrow-first">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                        <span role="img" class="anticon arrow-icon arrow-second">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                      </span>
                    </div>
                    <div class="feature-mod-content-sub-item-right-desc">
                      智能搭配得爆款套图
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature-mod-content-sub-item-wrapper">
                <div class="feature-mod-content-sub-item">
                  <div class="feature-mod-content-sub-item-left">
                    <div class="acss-1mnncja image-container" style="width: 92px; height: 64px;">
                      <div class="ant-spin ant-spin-spinning css-h46z68">
                        <div class="ant-image">
                          <img class="feature-mod-content-sub-item-left-img" src="//img.alicdn.com/imgextra/i2/O1CN01CL4n2X1wtE0qDFuwT_!!6000000006365-2-tps-1104-768.png_640x640q90s150.jpg_.webp" alt="换模特换背景" width="92" height="64">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="feature-mod-content-sub-item-right ant-flex css-h46z68 ant-flex-align-stretch ant-flex-vertical">
                    <div class="feature-mod-content-sub-item-right-title">
                      换模特换背景
                      <span class="acss-xpsi7w feature-mod-content-sub-item-right-title-arrow">
                        <span role="img" class="anticon arrow-icon arrow-first">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                        <span role="img" class="anticon arrow-icon arrow-second">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                      </span>
                    </div>
                    <div class="feature-mod-content-sub-item-right-desc">
                      模特和背景随心替换
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature-mod-content-sub-item-wrapper">
                <div class="feature-mod-content-sub-item">
                  <div class="feature-mod-content-sub-item-left">
                    <div class="acss-1mnncja image-container" style="width: 92px; height: 64px;">
                      <div class="ant-spin ant-spin-spinning css-h46z68">
                        <div class="ant-image">
                          <img class="feature-mod-content-sub-item-left-img" src="//img.alicdn.com/imgextra/i1/O1CN01y9T3yU1CJWomIrrgJ_!!6000000000060-2-tps-1104-768.png_640x640q90s150.jpg_.webp" alt="商品换背景" width="92" height="64">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="feature-mod-content-sub-item-right ant-flex css-h46z68 ant-flex-align-stretch ant-flex-vertical">
                    <div class="feature-mod-content-sub-item-right-title">
                      商品换背景
                      <span class="acss-xpsi7w feature-mod-content-sub-item-right-title-arrow">
                        <span role="img" class="anticon arrow-icon arrow-first">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                        <span role="img" class="anticon arrow-icon arrow-second">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                      </span>
                    </div>
                    <div class="feature-mod-content-sub-item-right-desc">
                      智能抠图换景，让商品适配不同营销场景
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature-mod-content-sub-item-wrapper">
                <div class="feature-mod-content-sub-item">
                  <div class="feature-mod-content-sub-item-left">
                    <div class="acss-1mnncja image-container" style="width: 92px; height: 64px;">
                      <div class="ant-spin ant-spin-spinning css-h46z68">
                        <div class="ant-image">
                          <img class="feature-mod-content-sub-item-left-img" src="//img.alicdn.com/imgextra/i2/O1CN01Dm96Cr1LZP5X2apVG_!!6000000001313-2-tps-1104-768.png_640x640q90s150.jpg_.webp" alt="定向换色" width="92" height="64">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="feature-mod-content-sub-item-right">
                    <div class="feature-mod-content-sub-item-right-title">
                      定向换色
                      <span class="acss-xpsi7w feature-mod-content-sub-item-right-title-arrow">
                        <span role="img" class="anticon arrow-icon arrow-first">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                        <span role="img" class="anticon arrow-icon arrow-second">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                      </span>
                    </div>
                    <div class="feature-mod-content-sub-item-right-desc">
                      颜色快速替换，轻松做多色设计稿
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature-mod-content-sub-item-wrapper">
                <div class="feature-mod-content-sub-item">
                  <div class="feature-mod-content-sub-item-left">
                    <div class="acss-1mnncja image-container" style="width: 92px; height: 64px;">
                      <div class="ant-spin ant-spin-spinning css-h46z68">
                        <div class="ant-image">
                          <img class="feature-mod-content-sub-item-left-img" src="//img.alicdn.com/imgextra/i2/O1CN01WTLmcM1SZaYfPgPUu_!!6000000002261-2-tps-1104-768.png_640x640q90s150.jpg_.webp" alt="面料上身" width="92" height="64">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="feature-mod-content-sub-item-right">
                    <div class="feature-mod-content-sub-item-right-title">
                      面料上身
                      <span class="acss-xpsi7w feature-mod-content-sub-item-right-title-arrow">
                        <span role="img" class="anticon arrow-icon arrow-first">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                        <span role="img" class="anticon arrow-icon arrow-second">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                      </span>
                    </div>
                    <div class="feature-mod-content-sub-item-right-desc">
                      面料随心套，预览真实上身效果
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature-mod-content-sub-item-wrapper">
                <div class="feature-mod-content-sub-item">
                  <div class="feature-mod-content-sub-item-left">
                    <div class="acss-1mnncja image-container" style="width: 92px; height: 64px;">
                      <div class="ant-spin ant-spin-spinning css-h46z68">
                        <div class="ant-image">
                          <img class="feature-mod-content-sub-item-left-img" src="//img.alicdn.com/imgextra/i3/O1CN01w4XdbW1GST0hNoYRl_!!6000000000621-2-tps-1104-768.png_640x640q90s150.jpg_.webp" alt="图案上身" width="92" height="64">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="feature-mod-content-sub-item-right">
                    <div class="feature-mod-content-sub-item-right-title">
                      图案上身
                      <span class="acss-xpsi7w feature-mod-content-sub-item-right-title-arrow">
                        <span role="img" class="anticon arrow-icon arrow-first">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                        <span role="img" class="anticon arrow-icon arrow-second">
                          <svg width="1em" height="1em" fill="currentColor"><use xlink:href="#icon-aiyoujiantou"></use></svg>
                        </span>
                      </span>
                    </div>
                    <div class="feature-mod-content-sub-item-right-desc">
                      图案快速应用到服装
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
    };
  },
  methods: {
    playVideo(e) {
      const video = e.currentTarget.querySelector("video");
      if (video) {
        video.play().catch(err => {
          console.warn("视频播放失败：", err);
        });
      }
    },
    pauseVideo(e) {
      const video = e.currentTarget.querySelector("video");
      if (video) {
        video.pause();
      }
    },
    gotoChat() {
      this.$router.push({
        name: "chatCreation"
      });
    },
    gotoTools(id) {
      this.$router.push({
        path: `/designAgent/imagetextToImage/${id}`
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "@/styles/layout.scss";
@import "./design-agent.scss";
</style>
