<template>
  <Layout>
      <!-- <Header class="layout-header">
        <ai-header></ai-header>
      </Header> -->
      <Layout>
          <Sider class="layout-sider" hide-trigger :width="320">
            <ai-sider :loading-data="getSdData"></ai-sider>
          </Sider>
          <Content class="layout-content">
            <div class="ai-generate-image-inner">
              <img class="ai-generate-image-self" v-if="image && !loading" :src="image" />
              <div class="ai-generate-loading" v-if="loading && !image">
                <div class="ai-generate-loading-inner">
                  <Spin fix>
                    <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                    <div>生成图片中</div>
                  </Spin>
                </div>
              </div>
            </div>
          </Content>
      </Layout>
  </Layout>
</template>
<script>
import { defineComponent, ref } from 'vue';
import aiHeader from './components/ai-header.vue';
import aiSider from './components/ai-sider.vue';
import request from '@/api/sd';

export default defineComponent({
  name: 'App',
  components: {
    aiHeader,
    aiSider
  },
  setup () {
    const image = ref('/img/default.png')
    const loading = ref(false);

    const getSdData = (item)=> {
      image.value = '';
      loading.value = true;
      console.log('request gpt data ...')
        return request.gpt(item.prompt).then(res => {
          console.log('request sd data...',item)
          return request.draw(item).then(res => {
            if (res) image.value = res;
            loading.value = false;
            return res;
          })
        }).catch((err)=>{
          loading.value = false;
          alert(err);
          // console.error('gpt err:',err)
        })
    }
    return {
      getSdData,
      image,
      loading
    }
  }
})
</script>

<style lang="less">
  .ivu-layout {
    width: 100%;
    height: 100%;
    .ivu-layout-header,
    .layout-sider{
      background: #FFF;
    }
    .layout-content {
      overflow-y: scroll;
      width: 100%!important;
      padding: 16px;
    }
    .ai-generate-image-inner {
      width: 100%;
      display: flex;
      margin-top:36px;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .ai-generate-image-self {
      max-width: 100%;
      display: block;
    }
    .ai-generate-loading {
      position: relative;
      width: 200px;
      height: 100%;
      display: flex;
      align-items: center;
      &-inner {
        height: 40px;
        width: 200px;
        position: relative;
      }
      .ivu-spin {
        background: none;
      }
    }
    .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
    }
  }
</style>
