<template>
  <div class="ai-sider-form-wrap">
    <Form class="ai-sider-form" label-position="top">
      <FormItem>
        <template #label>
          <strong>推荐:</strong>
        </template>
        <Row :gutter="12">
          <Col
              class="ai-sider-image-item"
              :class="{'current': item.label === state.active}"
              :span="6"
              v-for="item in state.tagList"
              :key="item.image"
              @click="handleSelectTag(item)"
          >
            <Image :src="item.image"></Image>
            <div class="ivu-mt-6 ivu-text-center" v-line-clamp="1">{{ item.label }}</div>
          </Col>
        </Row>
      </FormItem>
      <FormItem>
        <template #label>
          <strong>提示词:</strong>
        </template>
        <Input type="textarea" :rows="4" v-model="state.prompt" placeholder="请输入提示词,回车键开始绘画..." />
      </FormItem>
      <FormItem>
        <template #label>
          <strong>反向提示词:</strong>
        </template>
        <Input type="textarea" :rows="4" v-model="state.negative_prompt" placeholder="请输入反向提示词,回车键开始绘画..." />
      </FormItem>
    </Form>
    <div class="ai-sider-form-footer">
      <Button size="large" long :loading="state.loading" type="primary" class="ai-sider-form-button" @click="handleSubmit">生成图片</Button>
    </div>
  </div>
</template>
<script>
    import { defineComponent, onMounted, reactive } from 'vue';
    export default defineComponent({
        name: 'aiSider',
        emits: ['submit', 'error'],
        props: {
            loadingData: {
                type: Function,
                default: ()=> {}
            }
        },
        setup (props, context) {
            const state = reactive({
                loading: false,
                description: '',
                active: '重置',
                prompt: '',
                negative_prompt: '',
                tagList : [
                    {
                        'label':'重置',
                        'prompt':'',
                        'negative_prompt':'',
                        'image': '/img/00.png',
                    },
                    {
                        'label':'二次元少女',
                        'prompt':'(masterpiece, top quality, best quality, official art, beautiful and aesthetic:1.2), (1girl:1.3),extremely detailed,(fractal art:1.1),(colorful:1.1)(flowers:1.3),highest detailed,(zentangle:1.2), (dynamic pose), (abstract background:1.3), (many colors:1.4), ,(earrings),  (feathers:1.5)',
                        'negative_prompt':'nfsw,(worst quality, low quality:2),monochrome, zombie,overexposure, watermark,text,bad anatomy,bad hand,extra hands,extra fingers,too many fingers,fused fingers,bad arm,distorted arm,extra arms,fused arms,extra legs,missing leg,disembodied leg,extra nipples, detached arm, liquid hand,inverted hand,disembodied limb, oversized head,extra body,extra navel,easynegative,(hair between eyes),sketch, duplicate, ugly, huge eyes, text, logo, worst face, (bad and mutated hands:1.3),  (blurry:2.0), horror, geometry, bad_prompt, (bad hands), (missing fingers), multiple limbs, bad anatomy, (interlocked fingers:1.2), Ugly Fingers, (extra digit and hands and fingers and legs and arms:1.4), (deformed fingers:1.2), (long fingers:1.2),(bad-artist-anime), bad-artist, bad hand, extra legs ,(ng_deepnegative_v1_75t)',
                        'image': '/img/01.png',
                        'seed':-1,
                        "sampler_name": "DPM++ SDE Karras",
                        'sd_model_checkpoint':'ghostmix_v11'
                    },
                    {
                        'label':'格温蜘蛛侠',
                        'prompt':'(masterpiece, top quality, best quality, official art, beautiful and aesthetic:1.2),highly detailed face,1girl,gwen_stacy, (portrait:1.3),<lora:gwen_1.5:0.6>, spider-gwen suit , bodysuit , superhero,(extremely detailed,highres, highest detailed,8k,absurdres,CG),cyberpunk city, <lora:add_detail:1>, happy',
                        'negative_prompt':'(worst quality, low quality,2D:2), monochrome, zombie,overexposure, watermark,text,bad anatomy,bad hand,extra hands,extra fingers,too many fingers,fused fingers,bad arm,distorted arm,extra arms,fused arms,extra legs,missing leg,disembodied leg,extra nipples, detached arm, liquid hand,inverted hand,disembodied limb, small breasts, loli, oversized head,extra body, extra navel,easynegative,sketch, duplicate, ugly, huge eyes, text, logo, worst face, (bad and mutated hands:1.3),  (blurry:2.0), horror, geometry, bad_prompt, (bad hands), (missing fingers), multiple limbs, bad anatomy, (interlocked fingers:1.2), Ugly Fingers, (extra digit and hands and fingers and legs and arms:1.4), ((2girl)), (deformed fingers:1.2), (long fingers:1.2),(bad-artist-anime), bad-artist, bad hand, extra legs ,(ng_deepnegative_v1_75t)',
                        'image': '/img/02.png',
                        'seed':-1,
                        'sampler_name': 'DPM++ SDE Karras',
                        'sd_model_checkpoint':'ghostmix_v11',
                        'height':768
                    },
                    {
                      'label':'国风少女',
                      'prompt':'(8k, RAW photo:1.2),best quality, ultra high res,dramatic angle,(fluttered detailed color splashs), (illustration),(((1 girl))),(long hair),(rain:0.9),(hair ornament:1.4),there is an ancient palace beside the girl,chinese clothes,(focus on), color Ink wash painting,(color splashing),colorful splashing,(((colorful))),(sketch:0.8), Masterpiece,best quality, beautifully painted,highly detailed,(denoising:0.6),[splash ink],((ink refraction)), (beautiful detailed sky),moon,highly,detaild,(masterpiece, best quality, extremely detailed CG unity 8k wallpaper,masterpiece, best quality, ultra-detailed),(Lycoris radiata), <lora:koreanDollLikeness_v10:0.3>',
                      'negative_prompt':'nfsw,(missing fingers),(bad hands),(bad feets),(ugly),paintings, sketches, (worst quality:2), (low quality:2), (normal quality:2), lowres, normal quality, ((monochrome)), ((grayscale)), skin spots, acnes, skin blemishes, age spot, glans,(((simple background))),monochrome ,lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry, lowres, bad anatomy, bad hands, text, error, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry, ugly,pregnant,vore,duplicate,morbid,mut ilated,tran nsexual, hermaphrodite,long neck,mutated hands,poorly drawn hands,poorly drawn face,mutation,deformed,blurry,bad anatomy,bad proportions,malformed limbs,extra limbs,cloned face,disfigured,gross proportions, (((missing arms))),(((missing legs))), (((extra arms))),(((extra legs))),pubic hair, plump,bad legs,error legs,username,blurry,bad feet',
                      'image': '/img/03.png',
                      'seed':-1,
                      'sampler_name': 'DPM++ SDE Karras',
                      'sd_model_checkpoint':'chilloutmix_NiPrunedFp32Fix',
                      'height':512
                    },
                    {
                      'label':'樱花女孩',
                      'prompt':'1girl, (ulzzang-6500:0.7), kpop idol, yae miko,pink hair, long hair,best quality, (painting:1.5), (hair ornament:1.35), jewelry, purple eyes, cherry blossoms, lantern light, depth of field, detailed face, face focus, ribbon_trim, (looking at viewer:1.25), nontraditional miko, shiny skin, long sleeves, smile, thick lips, game cg,  (blurry background:1.2), sitting, upper body <lora:YaeMiko_Test:0.45>,<lora:mix4:0.5>',
                      'negative_prompt':'nfsw, bright lantern, brightness, (nipples:1.2), pussy, EasyNegative, (worst quality:2), (low quality:2), (normal quality:2), lowres, normal quality, ((monochrome)), ((grayscale)), skin spots, acnes, skin blemishes, age spot, glans,extra fingers, fewer fingers, strange fingers, bad hand, bare thighs,hand,bad finger',
                      'image': '/img/04.png',
                      'seed':-1,
                      'sampler_name': 'DPM++ SDE Karras',
                      'sd_model_checkpoint':'chilloutmix_NiPrunedFp32Fix',
                      'height':512
                    },
                    {
                      'label':'网红少女',
                      'prompt':'(RAW photo, best quality), (realistic, photo-realistic:1.3), masterpiece, an extremely delicate and beautiful, extremely detailed, CG, unity , 2k wallpaper, Amazing, finely detail, light smile, extremely detailed CG unity 8k wallpaper, huge filesize, ultra-detailed, highres, absurdres, soft light, (((medium hair:1.3), short bang, pink hair, floating hair novafrogstyle)), beautiful detailed girl, detailed fingers, extremely detailed eyes and face, beautiful detailed nose, beautiful detailed eyes, long eyelashes, light on face, looking at viewer, (closed mouth:1.2), 1girl, cute, young, mature face, (full body:1.3), ((small breasts)), realistic face, realistic body, beautiful detailed thigh, (ulzzang-6500-v1.1:0.8), <lora:koreanDollLikeness_v20:0.4>, business suit, cross-laced clothes, collared shirt,clothes, in office, detailed office, open cardigan, shirt,,(Black trousers:1.2)',
                      'negative_prompt':'nfsw,paintings, sketches, (worst quality:2), (low quality:2), (normal quality:2), lowres, ((monochrome)), ((grayscale)), skin spots, acnes, skin blemishes, age spot, glans, extra fingers, fewer fingers, ((watermark:2)), (white letters:1), (multi nipples), bad anatomy, bad hands, text, error, missing fingers, missing arms, missing legs, extra digit, fewer digits, cropped, worst quality, jpeg artifacts, signature, watermark, username, bad feet, {Multiple people}, blurry, poorly drawn hands, poorly drawn face, mutation, deformed, extra limbs, extra arms, extra legs, malformed limbs, fused fingers, too many fingers, long neck, cross-eyed, mutated hands, polar lowres, bad body, bad proportions, gross proportions, wrong feet bottom render, abdominal stretch, briefs, knickers, kecks, thong, {{fused fingers}}, {{bad body}}, bad-picture-chill-75v, ng_deepnegative_v1_75t, EasyNegative, bad proportion body to legs, wrong toes, extra toes, missing toes, weird toes, 2 body, 2 pussy, 2 upper, 2 lower, 2 head, 3 hand, 3 feet, extra long leg, super long leg, mirrored image, mirrored noise, (bad_prompt_version2:0.8), aged up, old,',
                      'image': '/img/05.png',
                      'seed':-1,
                      'sampler_name': 'DPM++ SDE Karras',
                      'sd_model_checkpoint':'chilloutmix_NiPrunedFp32Fix',
                      'height':512
                    },
                  {
                    'label':'机甲战士',
                    'prompt':'Metal armor, metallic texture, solo, 1boy, science fiction, male focus, power armor, humanoid robot, robot, blurry, blurry background, city, helmet<lora:XL金属质感:0.8>',
                    'negative_prompt':'FastNegativeV2,(bad-artist:1),(worst quality, low quality:1.4),(bad_prompt_version2:0.8),bad-hands-5,lowres,bad anatomy,bad hands,((text)),(watermark),error,missing fingers,extra digit,fewer digits,cropped,worst quality,low quality,normal quality,((username)),blurry,(extra limbs),bad-artist-anime,badhandv4,EasyNegative,ng_deepnegative_v1_75t,verybadimagenegative_v1.3,BadDream,(three hands:1.6),(three legs:1.2),(more than two hands:1.4),(more than two legs,:1.2),1abel,',
                    'image': '/img/06.png',
                    'seed':-1,
                    'sampler_name': 'DPM++ SDE Karras',
                    'sd_model_checkpoint':'chilloutmix_NiPrunedFp32Fix',
                    'height':512
                  }
                ]
            })
            const handleSelectTag = (item, isInit)=> {
                const { label, prompt, negative_prompt,seed,sampler_name,sd_model_checkpoint,height } = item;
                Object.assign(state, {
                    active: label,
                    prompt,
                    negative_prompt,
                    seed,
                    sampler_name,
                    sd_model_checkpoint,
                    height
                })
            }
            const handleSubmit = async ()=> {
                const { prompt, active, negative_prompt,seed,sampler_name,sd_model_checkpoint,height } = state;
                if (state.loading) return;
                state.loading = true;
                try {
                    const params = { prompt, label: active, negative_prompt,seed,sampler_name,sd_model_checkpoint,height };
                    await props.loadingData(params)
                    context.emit('submit', params);
                    state.loading = false;
                } catch (error) {
                    context.emit('error', { error });
                    state.loading = false;
                }
            }
            onMounted(()=> {
                handleSelectTag(state.tagList[0], true);
            })
            return {
                state,
                handleSelectTag,
                handleSubmit
            }
        }
    })
</script>
<style lang="less">
.ai-sider-form-wrap {
  height: 100%;
  overflow: hidden;
}
.ai-sider-form {
  padding: 16px;
  overflow-y: scroll;
  height: calc(100% - 60px);
  position: relative;
}
.ai-sider-image-item {
  margin-bottom: 12px;
  font-size: 12px;
  cursor: pointer;
  position: relative;
  &:hover,&.current {
    .ivu-text-center {
      color: #2d8cf0;
    }
  }
  &-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }
}
.ai-sider-form-footer {
  background: #FFF;
  padding: 10px 16px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
  position: relative;
  z-index: 1;
}

</style>
