<template>
  <div class="setColor">
    <div v-if="isShowIco"
         @click="clickSetColor"
         id="setIco" class="setIco">
      <img src="https://ooszy.cco.vin/img/ico/secai.svg" alt="">
    </div>

    <div class="welcome-parent" id="welcome-parent">
      <div @click="clickSet" :class="customClass" :style="getColorStyle" class="m-4 p-4 f4 color-shadow-small bg-gray-800-mktg rounded-2 signup-content-container welcome" id="welcome">
        <span @click="clickSetColor" class="cancel" :style="setCancelIco" id="cancel"></span>
        <h1 class="common-style" id="sr-only-h2">Welcome to my blog! <br>Let's begin the adventure</h1>
        <div class="custom-top custom-common">
          <!--<div  class="custom-top-span custom-common-span">
            <span @click="setFont" :style="setBackgroundImg(1)"></span>
          </div>-->
          <!--<div  class="custom-top-span custom-common-span">
            <span @click="setColor" :style="setBackgroundImg(2)"></span>
          </div>-->
          <div class="custom-top-span custom-common-span">
            <span @click="setImg" :style="setBackgroundImg(1)"></span>
          </div>
          <div class="custom-top-span custom-common-span">
            <span @click="setIsFitter" :style="setBackgroundImg(2)"></span>
          </div>
        </div>

        <div class="custom-bottom custom-common">
          <div style="flex: 1" class="custom-bottom-span custom-common-span">
            <!--fontColor-->
            <li class="custom-li" v-for="(item,index) in fontColorArr">
              <span :style="setColorBack(item)" :data-color="item" @click="setColor($event,item)"></span>
            </li>
          </div>
        </div>

        <div class="custom-bottom custom-common">
          <div style="flex: 1" class="custom-bottom-span custom-common-span">
            <!--fontColor-->
            <li class="custom-li" v-for="(item,index) in fontFamilyArr">
              <span :style="setFamilyBack(item)" :data-color="item" @click="setFont($event,item)">{{getShowFont}}</span>
            </li>
          </div>
        </div>

        <div class="custom-bottom custom-common">
          <div class="custom-bottom-span custom-common-span">
            圆角
          </div>
          <div style="flex: 3" class="custom-bottom-span custom-common-span">
            <div class="input-range">
              <div class="input-left">
                <input min="1" max="40" v-model="borderRadius" step="1" type="range">
              </div>
              <div class="input-right">
                {{borderRadius}}
              </div>
            </div>
          </div>
        </div>
        <div class="custom-bottom custom-common">
          <div class="custom-bottom-span custom-common-span">
            模糊度
          </div>
          <div style="flex: 3" class="custom-bottom-span custom-common-span">
            <div class="input-range">
              <div class="input-left">

                <input min="0" max="70" v-model="blur" step="0.1" type="range">
              </div>
              <div class="input-right">
                {{blur}}
              </div>
            </div>
          </div>
        </div>
        <div class="custom-bottom custom-common">
          <div class="custom-bottom-span custom-common-span">
            透明度
          </div>
          <div style="flex: 3" class="custom-bottom-span custom-common-span">
            <div class="input-range">
              <div class="input-left">
                <input min="0" max="1" v-model="opacity" step="0.01" type="range">
              </div>
              <div class="input-right">
                {{opacity}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  name: "HomeWelcome",
  data() {
    return {
      isActive: false,
      setColorStyle: "display: none;",
      fontArr: [],
      colorArr: [],
      fontIndex: 0,
      colorIndex: 0,
      isFitter: false,
      opacity: 0.4,
      blur: 5,
      borderRadius: 30,
      maxFontColorArr: 7,
      fontColorArr: [],
      fontFamilyArr: [],
      currentColor: '',
      currentFont: '',

    }
  },
  created() {
    this.maxFontColorArr = this.themeProperty.maxFontColorArr
    this.fontArr = this.themeProperty.fontFamily
    this.colorArr = this.themeProperty.fontColor
    this.isFitter = this.themeProperty.isFitter

    if (this.colorArr.length < this.maxFontColorArr) {
      this.fontColorArr = this.colorArr
    }else {
      this.fontColorArr = this.colorArr.slice(0,this.maxFontColorArr)
    }

    if (this.fontArr.length < this.maxFontColorArr) {
      this.fontFamilyArr = this.fontArr
    }else {
      this.fontFamilyArr = this.fontArr.slice(0,this.maxFontColorArr)
    }


    this.$store.commit('setVarFilterBlur',{
      varFilterBlur: this.blur
    })
    this.$store.commit('setVarBorderRadius',{
      varBorderRadius: this.borderRadius
    })
    this.$store.commit('setVarOpacity',{
      varOpacity: this.opacity
    })
  },
  computed: {
    getShowFont() {
      //console.log(this.themeProperty.showFont)
      return this.themeProperty.showFont
    },
    getColorStyle() {
      return this.setColorStyle
    },
    setColorBack() {
      return (item) => {
        return "background-color: " + item + ";";
      }
    },
    setFamilyBack() {
      return (item) => {
        return "font-family: " + item + ";";
      }
    },
    setBackgroundImg() {
      return (item) => {
        let colorArr = this.themeProperty.ico.homeWelcome
        let url = ''
        switch  (item){
          case  1:
            url = colorArr[0];
            break
          case  2:
            url = colorArr[1];
            break
          case  3:
            url = colorArr[2];
            break
          case 4:
            url = colorArr[3]
        }
        return 'background-image: url("'+url+'");'
      }
    },
    setCancelIco() {
      let cancelIcoHref = this.themeProperty.cancelIcoHref
      if (cancelIcoHref === undefined || cancelIcoHref === null) {
        cancelIcoHref = "https://ooszy.cco.vin/img/ico/quxiao.svg"
      }
      return "background-image: url(" + cancelIcoHref + ");"
    }
  },
  methods: {
    clickSetColor() {
      $("#welcome").slideToggle(350)
      let time = +new Date()
      this.$store.commit("setWelcomeOpenTime",{
        time: time
      })

      setInterval(() => {
        let intervalTime = +new Date()
        let lastTime = intervalTime - this.$store.state.welcomeOpenTime
        if ($("#welcome").css("display") === 'block') {
          if (lastTime > this.themeProperty.slideTime) {
            $("#welcome").slideUp(350)
          }
        }

      },1500)
    },
    clickSet() {
      let time = +new Date()
      this.$store.commit("setWelcomeOpenTime",{
        time: time
      })
    },
    setColor(e,color) {
      this.currentColor = color
      this.$store.commit('setFontColorStyle',{
        fontFamily: this.currentFont,
        color: this.currentColor
      })
      this.$emit('setBodyStyle')
    },
    setFont(e,font) {
      this.currentFont = font
      this.$store.commit('setFontFamilyStyle',{
        fontFamily: this.currentFont,
        color: this.currentColor
      })
      this.$emit('setBodyStyle')
    },
    setImg() {
      //url(https://api.iro.tw/webp_pc.php)
      //if ()
      let url = ''
      let width = document.body.clientWidth
      if (width < 500) {
        url = this.themeProperty.randomWallpaperMb
      }else {
        url = this.themeProperty.randomWallpaper
      }
      let style = "url(" + url+"?time="+(+new Date()) + ")"
      this.$emit('setBodyWallpaper',style)
    },
    setIsFitter() {
      //isFitter
      //设置是否要毛玻璃特性，通过类名控制
      this.$emit('setIsFitter',!this.isFitter)
      this.isFitter = !this.isFitter
      this.$store.commit('setIsFitter',{
        isFitter: this.isFitter
      })
    },
    setBlur() {

    }
  },
  props: {
    isShowIco: {
      type: Boolean,
      default() {
        return true
      }
    },
    themeProperty: null,
    customClass: {
      type: String,
      default() {
        return "";
      }
    }
  },
  watch: {
    blur(newBlur,oldBlur) {
      this.$store.commit('setVarFilterBlur',{
        varFilterBlur: newBlur
      })
      this.blur = this.$store.state.varFilterBlur
      let time = +new Date()
      this.$store.commit("setWelcomeOpenTime",{
        time: time
      })
    },
    opacity(newOpacity,oldOpacity) {
      this.$store.commit('setVarOpacity',{
        varOpacity: newOpacity
      })
      this.opacity = this.$store.state.varOpacity
      let time = +new Date()
      this.$store.commit("setWelcomeOpenTime",{
        time: time
      })
    },
    borderRadius(newBorderRadius,oldBorderRadius) {
      this.$store.commit('setVarBorderRadius',{
        varBorderRadius: newBorderRadius
      })
      this.borderRadius = this.$store.state.varBorderRadius
      let time = +new Date()
      this.$store.commit("setWelcomeOpenTime",{
        time: time
      })
    }
  }
}
</script>
