<template>
  <div class="app-lottery">
    <el-row v-loading="formLoading" style="height: 100%;">
      <el-col class="lottery-body flex-c" :md="14" :xs="24">
        <LuckyWheel
          :key="luckyWheelIndex"
          ref="luckyWheel"
          class="luck-conf"
          :width="form.diameter"
          :height="form.diameter"
          :blocks="form.blocks"
          :prizes="form.prizes"
          :buttons="form.buttons"
          :default-config="form.defaultConfig"
          :default-style="form.defaultStyle"
          @start="startCallBack"
          @end="endCallBack"
        />
      </el-col>
      <el-col class="lottery-body flex-c" :md="4" :xs="24">
        <div class="in-stock">
          <div v-for="(item,index) in form.prizes" :key="index" class="flex-l">
            <img :src="item.imgs[0].src" width="40" height="40">
            <div style="width: 40%;padding: 0px 5px;" class="font-info">
              {{ $t('pages.lotteryConfig.stock.stock') }}: {{ item.unlimited ? $t('pages.lotteryConfig.word.unlimited') : item.inStock }}
            </div>
            <div style="width: 40%;padding: 0px 5px;" class="font-danger">
              {{ $t('pages.lotteryConfig.stock.consume') }}:  {{ item.consumeInStock || '0' }}
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="lottery-conf" :md="6" :xs="24">
        <el-form ref="form" class="form i18n-form i18n-form--wide" :model="form" label-width="140px">
          <div class="card bottom-line">
            <div class="title">{{ $t('pages.lotteryConfig.section.attributes') }}</div>
            <div class="content">
              <el-form-item :label="$t('pages.lotteryConfig.form.system')">
                <el-select
                  v-model="listQuery.sysOrigin"
                  :placeholder="$t('pages.lotteryConfig.placeholder.system')"
                  style="width: 100%"
                  class="filter-item"
                  @change="loadLotteryConf"
                >
                  <el-option
                    v-for="item in permissionsSysOriginPlatforms"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span style="float: left;"> <sys-origin-icon :icon="item.value" :desc="item.value" /></span>
                    <span style="float: left;margin-left:10px">{{ item.label }}</span>
                  </el-option>
                </el-select>

              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.startConsume')">
                <el-input v-model="form.startConsume" v-number />
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.lotteryType')">
                <el-radio-group v-model="form.type">
                  <el-radio :label="0">{{ $t('pages.lotteryConfig.word.wheel') }}</el-radio>
                  <el-radio :label="1" :disabled="true">{{ $t('pages.lotteryConfig.word.gridNine') }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.wheelDiameter')">
                <el-input v-model="form.diameter" @change="renderLuckyWheel" />
              </el-form-item>
            </div>
          </div>
          <div class="card bottom-line">
            <div class="title">
              <el-row>
                <el-col :span="21">{{ $t('pages.lotteryConfig.section.background') }}</el-col>
                <el-col :span="3"><el-button type="text" @click="addBlocks"><i class="el-icon-circle-plus" />{{ $t('pages.lotteryConfig.action.add') }}</el-button></el-col>
              </el-row>
            </div>
            <div class="content">
              <el-tabs v-model="blocksIndex" type="border-card" closable @tab-remove="removeBlocks">
                <el-tab-pane v-for="(item, index) in form.blocks" :key="index" :name="String(index)">
                  <span slot="label">{{ index }}</span>
                  <el-form-item :label="$t('pages.lotteryConfig.form.padding')">
                    <el-input v-model="item.padding" />
                  </el-form-item>
                  <el-form-item :label="$t('pages.lotteryConfig.form.backgroundColor')">
                    <el-color-picker v-model="item.background" />
                  </el-form-item>

                  <div class="card">
                    <div class="title">
                      <el-row>
                        <el-col :span="21">{{ $t('pages.lotteryConfig.section.image') }}</el-col>
                        <el-col :span="3"><el-button type="text" @click="addBlocksImg(item)"><i class="el-icon-circle-plus" />{{ $t('pages.lotteryConfig.action.add') }}</el-button></el-col>
                      </el-row>
                    </div>
                    <div :key="attributeIndex" class="content">
                      <el-tabs v-if="item.imgs.length > 0" v-model="item.imageIndex" type="border-card" closable @tab-remove="index => removeImg(item, index)">
                        <el-tab-pane v-for="(imgItem, imgIndex) in item.imgs" :key="imgIndex" :name="String(imgIndex)">
                          <span slot="label">{{ imgIndex }}</span>
                          <el-form-item :label="$t('pages.lotteryConfig.form.imageLink')">
                            <el-input v-model="imgItem.src" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.topSpacing')">
                            <el-input v-model="imgItem.top" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.imageWidth')">
                            <el-input v-model="imgItem.width" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.imageHeight')">
                            <el-input v-model="imgItem.height" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.backgroundRotate')">
                            <el-radio-group v-model="imgItem.rotate">
                              <el-radio :label="true">{{ $t('pages.lotteryConfig.word.yes') }}</el-radio>
                              <el-radio :label="false">{{ $t('pages.lotteryConfig.word.no') }}</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <div class="card bottom-line">
            <div class="title">
              <el-row>
                <el-col :span="21">{{ $t('pages.lotteryConfig.section.prize') }}</el-col>
                <el-col :span="3"><el-button type="text" @click="addPrize"><i class="el-icon-circle-plus" />{{ $t('pages.lotteryConfig.action.add') }}</el-button></el-col>
              </el-row>
            </div>
            <div :key="attributeIndex" class="content">
              <el-tabs v-model="prizesIndex" type="border-card" closable @tab-remove="removePrize">
                <el-tab-pane v-for="(item, index) in form.prizes" :key="index" :name="String(index)">
                  <span slot="label">{{ index }}</span>
                  <el-form-item :label="$t('pages.lotteryConfig.form.prizeCode')">
                    <el-input v-model="item.code" />
                  </el-form-item>
                  <el-form-item :label="$t('pages.lotteryConfig.form.winProbability')">
                    <el-input v-model="item.probability" />
                  </el-form-item>
                  <el-form-item :label="$t('pages.lotteryConfig.form.stockQuantity')">
                    <el-col :span="4" style="text-align: center;">
                      <el-checkbox v-model="item.unlimited">{{ $t('pages.lotteryConfig.word.unlimited') }}</el-checkbox>
                    </el-col>
                    <el-col v-if="!item.unlimited" :span="10" style="text-align: center;">
                      {{ $t('pages.lotteryConfig.stock.stock') }}: {{ item.inStock }}
                      <i class="el-icon-edit cursor-pointer" style="color:#FF9326;" @click="clickInStockEdit(item)" />
                    </el-col>
                    <el-col v-if="!item.unlimited" :span="10" style="text-align: center;">
                      {{ $t('pages.lotteryConfig.stock.consume') }}: {{ item.consumeInStock }}
                      <i class="el-icon-refresh-left cursor-pointer" style="color:#FF9326;" @click="clickRestConsumeInStock(item)" />
                    </el-col>
                    <div v-if="item.inStock < item.consumeInStock" class="font-danger">
                      {{ $t('pages.lotteryConfig.message.stockLessThanConsume') }}
                    </div>
                  </el-form-item>
                  <el-form-item :label="$t('pages.lotteryConfig.form.backgroundColor')">
                    <el-color-picker v-model="item.background" @change="renderLuckyWheel()" />
                  </el-form-item>
                  <el-form-item :label="$t('pages.lotteryConfig.form.prizeRelation')">
                    <el-button type="text" @click="clickSelectPrize(item)"><i class="el-icon-circle-plus" />{{ $t('pages.lotteryConfig.action.selectPrize') }}</el-button>
                    <div v-if="item.prize.content" class="select-prize flex-l">
                      <img :src="item.prize.cover" width="100px" height="100px">
                      <div class="content" style="padding:10px;color:#999999;">
                        <div>{{ $t('pages.lotteryConfig.label.content') }}: {{ item.prize.content }}</div>
                        <div>{{ $t('pages.lotteryConfig.label.quantity') }}: {{ item.prize.quantity }} {{ item.prize.unit }}</div>
                        <div>
                          <el-popover
                            placement="bottom"
                            :title="$t('pages.lotteryConfig.popover.selectImagePosition')"
                            trigger="click"
                          >
                            <div class="content">
                              <el-button v-for="(itemImg, itemImgIndex) in item.imgs" :key="itemImgIndex" @click="clickSetPrizeCover(item, itemImg)">
                                {{ itemImgIndex }}
                              </el-button>
                            </div>
                            <el-button slot="reference" type="text">{{ $t('pages.lotteryConfig.action.setImage') }}</el-button>
                          </el-popover>

                          <el-popover
                            placement="bottom"
                            :title="$t('pages.lotteryConfig.popover.selectTextTarget')"
                            trigger="click"
                          >
                            <div class="content">
                              <el-button v-for="(itemFont, itemFontIndex) in item.fonts" :key="itemFontIndex" @click="clickSetPrizeFont(item, itemFont)">
                                {{ itemFontIndex }}
                              </el-button>
                            </div>
                            <el-button slot="reference" type="text">{{ $t('pages.lotteryConfig.action.setText') }}</el-button>
                          </el-popover>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                  <div class="card">
                    <div class="title">
                      <el-row>
                        <el-col :span="21">{{ $t('pages.lotteryConfig.section.text') }}</el-col>
                        <el-col :span="3"><el-button type="text" @click="addFont(item)"><i class="el-icon-circle-plus" />{{ $t('pages.lotteryConfig.action.add') }}</el-button></el-col>
                      </el-row>
                    </div>
                    <div class="content">
                      <el-tabs v-if="item.fonts.length > 0" v-model="item.fontIndex" type="border-card" closable @tab-remove="index => removeFont(item, index)">
                        <el-tab-pane v-for="(fontItem, fontIndex) in item.fonts" :key="fontIndex" :name="String(fontIndex)">
                          <span slot="label">{{ fontIndex }}</span>
                          <el-form-item :label="$t('pages.lotteryConfig.form.fontContent')">
                            <el-input v-model="fontItem.text" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.topSpacing')">
                            <el-input v-model="fontItem.top" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.fontColor')">
                            <el-color-picker v-model="fontItem.fontColor" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.fontSize')">
                            <el-input v-model="fontItem.fontSize" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.fontStyle')">
                            <el-input v-model="fontItem.fontStyle" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.fontWeight')">
                            <el-select v-model="fontItem.fontWeight" style="width:100%;">
                              <el-option
                                v-for="val in fontWeights"
                                :key="val"
                                :label="val"
                                :value="val"
                              />
                            </el-select>
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.lineHeight')">
                            <el-input v-model="fontItem.lineHeight" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.wordWrap')">
                            <el-radio-group v-model="fontItem.wordWrap">
                              <el-radio :label="true">{{ $t('pages.lotteryConfig.word.yes') }}</el-radio>
                              <el-radio :label="false">{{ $t('pages.lotteryConfig.word.no') }}</el-radio>
                            </el-radio-group>
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.wrapWidth')">
                            <el-input v-model="fontItem.lengthLimit" />
                          </el-form-item>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                  </div>
                  <div class="card">
                    <div class="title">
                      <el-row>
                        <el-col :span="21">{{ $t('pages.lotteryConfig.section.image') }}</el-col>
                        <el-col :span="3"><el-button type="text" @click="addImg(item)"><i class="el-icon-circle-plus" />{{ $t('pages.lotteryConfig.action.add') }}</el-button></el-col>
                      </el-row>
                    </div>
                    <div class="content">
                      <el-tabs v-if="item.imgs.length > 0" v-model="item.imageIndex" type="border-card" closable @tab-remove="index => removeImg(item, index)">
                        <el-tab-pane v-for="(imgItem, imgIndex) in item.imgs" :key="imgIndex" :name="String(imgIndex)">
                          <span slot="label">{{ imgIndex }}</span>
                          <el-form-item :label="$t('pages.lotteryConfig.form.imageLink')">
                            <el-input v-model="imgItem.src" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.topSpacing')">
                            <el-input v-model="imgItem.top" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.imageWidth')">
                            <el-input v-model="imgItem.width" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.imageHeight')">
                            <el-input v-model="imgItem.height" />
                          </el-form-item>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>

          <div class="card bottom-line">
            <div class="title">
              <el-row>
                <el-col :span="21">{{ $t('pages.lotteryConfig.section.button') }}</el-col>
                <el-col :span="3"><el-button type="text" @click="addButton"><i class="el-icon-circle-plus" />{{ $t('pages.lotteryConfig.action.add') }}</el-button></el-col>
              </el-row>
            </div>
            <div :key="attributeIndex" class="content">
              <el-tabs v-model="buttonIndex" type="border-card" closable @tab-remove="removeButton">
                <el-tab-pane v-for="(item, index) in form.buttons" :key="index" :name="String(index)">
                  <span slot="label">{{ index }}</span>
                  <el-form-item :label="$t('pages.lotteryConfig.form.buttonRadius')">
                    <el-input v-model="item.radius" />
                  </el-form-item>
                  <el-form-item :label="$t('pages.lotteryConfig.form.showPointer')">
                    <el-radio-group v-model="item.pointer">
                      <el-radio :label="true">{{ $t('pages.lotteryConfig.word.yes') }}</el-radio>
                      <el-radio :label="false">{{ $t('pages.lotteryConfig.word.no') }}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item :label="$t('pages.lotteryConfig.form.backgroundColor')">
                    <el-color-picker v-model="item.background" />
                  </el-form-item>
                  <div class="card">
                    <div class="title">
                      <el-row>
                        <el-col :span="21">{{ $t('pages.lotteryConfig.section.text') }}</el-col>
                        <el-col :span="3"><el-button type="text" @click="addFont(item)"><i class="el-icon-circle-plus" />{{ $t('pages.lotteryConfig.action.add') }}</el-button></el-col>
                      </el-row>
                    </div>
                    <div class="content">
                      <el-tabs v-if="item.fonts.length > 0" v-model="item.fontIndex" type="border-card" closable @tab-remove="index => removeFont(item, index)">
                        <el-tab-pane v-for="(fontItem, fontIndex) in item.fonts" :key="fontIndex" :name="String(fontIndex)">
                          <span slot="label">{{ fontIndex }}</span>
                          <el-form-item :label="$t('pages.lotteryConfig.form.fontContent')">
                            <el-input v-model="fontItem.text" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.topSpacing')">
                            <el-input v-model="fontItem.top" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.fontColor')">
                            <el-color-picker v-model="fontItem.fontColor" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.fontSize')">
                            <el-input v-model="fontItem.fontSize" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.fontStyle')">
                            <el-input v-model="fontItem.fontStyle" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.fontWeight')">
                            <el-select v-model="fontItem.fontWeight" style="width:100%;">
                              <el-option
                                v-for="val in fontWeights"
                                :key="val"
                                :label="val"
                                :value="val"
                              />
                            </el-select>
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.lineHeight')">
                            <el-input v-model="fontItem.lineHeight" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.wordWrap')">
                            <el-radio-group v-model="fontItem.wordWrap">
                              <el-radio :label="true">{{ $t('pages.lotteryConfig.word.yes') }}</el-radio>
                              <el-radio :label="false">{{ $t('pages.lotteryConfig.word.no') }}</el-radio>
                            </el-radio-group>
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.wrapWidth')">
                            <el-input v-model="fontItem.lengthLimit" />
                          </el-form-item>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                  </div>
                  <div class="card">
                    <div class="title">
                      <el-row>
                        <el-col :span="21">{{ $t('pages.lotteryConfig.section.image') }}</el-col>
                        <el-col :span="3"><el-button type="text" @click="addImg(item)"><i class="el-icon-circle-plus" />{{ $t('pages.lotteryConfig.action.add') }}</el-button></el-col>
                      </el-row>
                    </div>
                    <div class="content">
                      <el-tabs v-if="item.imgs.length > 0" v-model="item.imageIndex" type="border-card" closable @tab-remove="index => removeImg(item, index)">
                        <el-tab-pane v-for="(imgItem, imgIndex) in item.imgs" :key="imgIndex" :name="String(imgIndex)">
                          <span slot="label">{{ imgIndex }}</span>
                          <el-form-item :label="$t('pages.lotteryConfig.form.imageLink')">
                            <el-input v-model="imgItem.src" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.topSpacing')">
                            <el-input v-model="imgItem.top" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.imageWidth')">
                            <el-input v-model="imgItem.width" />
                          </el-form-item>
                          <el-form-item :label="$t('pages.lotteryConfig.form.imageHeight')">
                            <el-input v-model="imgItem.height" />
                          </el-form-item>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <div class="card">
            <div class="title">{{ $t('pages.lotteryConfig.section.defaultConfig') }}</div>
            <div class="content">
              <el-form-item :label="$t('pages.lotteryConfig.form.gutter')">
                <el-input-number v-model="form.defaultConfig.gutter" :min="0" style="width:100%;" />
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.stopRange')">
                <el-slider v-model="form.defaultConfig.stopRange" />
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.offsetDegree')">
                <el-input-number v-model="form.defaultConfig.offsetDegree" :min="0" style="width:100%;" />
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.speed')">
                <el-input-number v-model="form.defaultConfig.speed" :min="0" style="width:100%;" />
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.accelerationTime')">
                <el-input-number v-model="form.defaultConfig.accelerationTime" :min="0" style="width:100%;" />
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.decelerationTime')">
                <el-input-number v-model="form.defaultConfig.decelerationTime" :min="0" style="width:100%;" />
              </el-form-item>
            </div>
          </div>
          <div class="card">
            <div class="title">{{ $t('pages.lotteryConfig.section.defaultStyle') }}</div>
            <div class="content">
              <el-form-item :label="$t('pages.lotteryConfig.form.backgroundColor')">
                <el-color-picker v-model="form.defaultStyle.background" />
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.fontColor')">
                <el-input v-model="form.defaultStyle.fontColor" />
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.fontSize')">
                <el-input v-model="form.defaultStyle.fontSize" />
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.fontStyle')">
                <el-input v-model="form.defaultStyle.fontStyle" />
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.fontWeight')">
                <el-select v-model="form.defaultStyle.fontWeight" style="width:100%;">
                  <el-option
                    v-for="item in fontWeights"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.lineHeight')">
                <el-input v-model="form.defaultStyle.lineHeight" />
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.wordWrap')">
                <el-radio-group v-model="form.defaultStyle.wordWrap">
                  <el-radio :label="true">{{ $t('pages.lotteryConfig.word.yes') }}</el-radio>
                  <el-radio :label="false">{{ $t('pages.lotteryConfig.word.no') }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="$t('pages.lotteryConfig.form.wrapWidth')">
                <el-input v-model="form.defaultStyle.lengthLimit" />
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div class="operation-but">
          <el-button :loading="formLoading" @click="loadLotteryConf">{{ $t('pages.lotteryConfig.action.reset') }}</el-button>
          <el-button @click="copyForm">{{ $t('pages.lotteryConfig.action.copy') }}</el-button>
          <el-button @click="importForm">{{ $t('pages.lotteryConfig.action.import') }}</el-button>
          <el-button type="primary" :loading="formSubmitLoading" @click="clickSubmit">{{ $t('pages.lotteryConfig.action.save') }}</el-button>
        </div>
      </el-col>
    </el-row>

    <select-prize v-if="visibleSelectPrize" :sys-origin="listQuery.sysOrigin" @select="selectPrize" @close="visibleSelectPrize=false" />
  </div>
</template>

<script>
import { copyText } from '@/utils'
import { mapGetters } from 'vuex'
import SelectPrize from './select-prize.vue'
import { getLotteryConf, addLotteryConf } from '@/api/sys'
export default {
  name: 'LotteryConf',
  components: { SelectPrize },
  data() {
    return {
      visibleSelectPrize: false,
      thisClickPrizeItem: {},
      listQuery: {
        sysOrigin: ''
      },
      luckyWheelIndex: 0,
      attributeIndex: 0,
      blocksIndex: '0',
      prizesIndex: '0',
      buttonIndex: '0',
      fontWeights: [300, 400, 500, 600, 700],
      formLoading: false,
      formSubmitLoading: false,
      form: {}
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatforms'])
  },
  created() {
    const that = this
    that.form = that.getDefaultConf()
    const querySystem = this.permissionsSysOriginPlatforms[0]
    if (!querySystem) {
      return
    }
    that.listQuery.sysOrigin = querySystem.value
    that.loadLotteryConf()
  },
  methods: {
    getDefaultConf() {
      const form = {
        type: 0,
        startConsume: 3000,
        diameter: '300px',
        blocks: [
          {
            padding: '13px',
            background: '#d64737',
            imgs: [],
            // 扩展属性
            imageIndex: '0'
          }
        ],
        prizes: [],
        buttons: [
          {
            radius: '50%',
            pointer: false,
            background: '#d64737',
            fonts: [],
            imgs: []
          },
          {
            radius: '45%',
            pointer: false,
            background: '#ffffff',
            fonts: [],
            imgs: []
          },
          {
            radius: '41%',
            pointer: true,
            background: '#f6c66f',
            fonts: [],
            imgs: []
          },
          {
            radius: '35%',
            pointer: false,
            background: '#ffdea0',
            fonts: [],
            imgs: []
          }
        ],
        defaultConfig: {
          gutter: '',
          stopRange: 0,
          offsetDegree: 0,
          speed: 20,
          accelerationTime: 2500,
          decelerationTime: 2500
        },
        defaultStyle: {
          background: '',
          fontColor: '#000',
          fontSize: '14px',
          fontStyle: 'sans-serif',
          fontWeight: '400',
          lineHeight: '14px',
          wordWrap: true,
          lengthLimit: '90%'
        }
      }

      for (let index = 0; index < 6; index++) {
        const prize = this.getEmptyPrizeObj()
        prize.background = index % 2 === 0 ? '#f8d384' : '#f9e3bb'
        prize.fonts[0].text = this.$t('pages.lotteryConfig.defaultPrizeText', { index: index + 1 })
        form.prizes.push(prize)
      }
      return form
    },
    loadLotteryConf() {
      const that = this
      that.formLoading = true
      getLotteryConf(that.listQuery).then(res => {
        that.formLoading = false
        that.form = res.body || that.getDefaultConf()
        that.renderLuckyWheel()
      }).catch(er => {
        that.formLoading = false
        console.error(er)
      })
    },
    importForm() {
      const that = this
      that.$prompt(
        that.$t('pages.lotteryConfig.prompt.jsonConfig'),
        that.$t('pages.lotteryConfig.prompt.importConfig'),
        {
          confirmButtonText: that.$t('pages.lotteryConfig.action.confirm'),
          cancelButtonText: that.$t('pages.lotteryConfig.action.cancel'),
          closeOnClickModal: false
        }
      ).then(({ value }) => {
        that.form = JSON.parse(value)
        that.renderLuckyWheel()
      }).catch(() => {
      })
    },
    copyForm() {
      const that = this
      copyText(JSON.stringify(that.form)).then(() => {
        that.$opsMessage.success()
      }).catch(() => {
        that.$opsMessage.fail()
      })
    },
    clickSubmit() {
      const that = this
      that.formSubmitLoading = true
      addLotteryConf({
        sysOrigin: that.listQuery.sysOrigin,
        body: that.form
      }).then(res => {
        that.formSubmitLoading = false
        that.$opsMessage.success()
      }).catch(er => {
        that.formSubmitLoading = false
        that.$opsMessage.fail()
        console.error(er)
      })
    },
    startCallBack() {
      this.$refs.luckyWheel.play()
      setTimeout(() => {
        this.$refs.luckyWheel.stop(Math.random() * 8 >> 0)
      }, 3000)
    },
    endCallBack(prize) {
    },
    getEmptyBaseImageObj() {
      return {
        src: 'http://img.sugartimeapp.com/avatar/16D2030D-E863-4406-9DB3-68658F8F7175.png',
        top: '0',
        width: '50%',
        height: '50%'
      }
    },
    getEmptyImageObj() {
      return {
        src: 'http://img.sugartimeapp.com/avatar/16D2030D-E863-4406-9DB3-68658F8F7175.png',
        top: '0',
        width: '100%',
        height: '100%',
        rotate: false
      }
    },
    getEmptyPrizeObj() {
      return {
        background: '',
        fonts: [this.getEmptyFontObj()],
        imgs: [{ src: 'http://img.sugartimeapp.com/svga_cover/manager-3c9372f3-1d15-482d-9cb7-e58e6852dbcb.png', top: '35%', width: '30%', height: '' }],
        // 扩展属性
        fontIndex: '0',
        imageIndex: '0',
        probability: 0,
        inStock: 0,
        consumeInStock: 0,
        unlimited: false,
        prize: {
          content: '',
          cover: '',
          propsType: '',
          propsDetailType: '',
          quantity: 0
        }
      }
    },
    getEmptyFontObj() {
      return {
        text: 'New text',
        top: '18%',
        fontColor: '',
        fontSize: '14px',
        fontStyle: 'sans-serif',
        fontWeight: '',
        lineHeight: '14px',
        wordWrap: true,
        lengthLimit: ''
      }
    },
    renderLuckyWheel() {
      this.luckyWheelIndex++
    },
    renderAttributeIndex() {
      this.attributeIndex++
    },
    addBlocks() {
      if (this.form.blocks.length > 10) {
        this.$opsMessage.warn(this.$t('pages.lotteryConfig.message.tooMany'))
        return
      }
      this.form.blocks.push({
        padding: '13px',
        background: '#d64737',
        imgs: []
      })
      this.form.blocks = Object.assign([], this.form.blocks)
      this.blocksIndex = String(this.form.blocks.length - 1)
    },
    removeBlocks(index) {
      if (this.form.blocks.length === 1) {
        this.$opsMessage.warn(this.$t('pages.lotteryConfig.message.keepAtLeastOne'))
        return
      }
      this.form.blocks.splice(index, 1)
      this.blocksIndex = String(this.form.blocks.length - 1)
    },
    addPrize() {
      if (this.form.prizes.length > 10) {
        this.$opsMessage.warn(this.$t('pages.lotteryConfig.message.tooMany'))
        return
      }
      const prize = this.getEmptyPrizeObj()
      prize.background = `#${parseInt(Math.random() * 1000000)}`
      this.form.prizes.push(prize)
      this.form.prizes = Object.assign([], this.form.prizes)
      this.prizesIndex = String(this.form.prizes.length - 1)
    },
    removePrize(index) {
      if (this.form.prizes.length === 1) {
        this.$opsMessage.warn(this.$t('pages.lotteryConfig.message.keepAtLeastOne'))
        return
      }
      this.form.prizes.splice(index, 1)
      this.prizesIndex = String(this.form.prizes.length - 1)
    },
    addButton() {
      if (this.form.buttons.length > 10) {
        this.$opsMessage.warn(this.$t('pages.lotteryConfig.message.tooMany'))
        return
      }
      this.form.buttons.push(this.getEmptyPrizeObj())
      this.form.buttons = Object.assign([], this.form.buttons)
      this.buttonIndex = String(this.form.buttons.length - 1)
    },
    removeButton(index) {
      if (this.form.buttons.length === 1) {
        this.$opsMessage.warn(this.$t('pages.lotteryConfig.message.keepAtLeastOne'))
        return
      }
      this.form.buttons.splice(index, 1)
      this.buttonIndex = String(this.form.buttons.length - 1)
    },
    addBlocksImg(item) {
      if (item.imgs.length > 10) {
        this.$opsMessage.warn(this.$t('pages.lotteryConfig.message.tooMany'))
        return
      }
      item.imgs.push(this.getEmptyImageObj())
      item.imgs = Object.assign([], item.imgs)
      item.imageIndex = String(item.imgs.length > 0 ? item.imgs.length - 1 : 0)
      if (item.imgs.length === 1) {
        this.renderAttributeIndex()
      }
    },
    addImg(item) {
      if (item.imgs.length > 10) {
        this.$opsMessage.warn(this.$t('pages.lotteryConfig.message.tooMany'))
        return
      }
      item.imgs.push(this.getEmptyBaseImageObj())
      item.imgs = Object.assign([], item.imgs)
      item.imageIndex = String(item.imgs.length > 0 ? item.imgs.length - 1 : 0)
      if (item.imgs.length === 1) {
        this.renderAttributeIndex()
      }
    },
    removeImg(item, index) {
      item.imgs.splice(index, 1)
      item.imageIndex = String(item.imgs.length > 0 ? item.imgs.length - 1 : 0)
      if (item.imgs.length === 0) {
        this.renderAttributeIndex()
      }
    },
    addFont(item, index) {
      if (item.fonts.length > 10) {
        this.$opsMessage.warn(this.$t('pages.lotteryConfig.message.tooMany'))
        return
      }
      item.fonts.push(this.getEmptyFontObj())
      item.fonts = Object.assign([], item.fonts)
      item.fontIndex = String(item.fonts.length > 0 ? item.fonts.length - 1 : 0)
      if (item.fonts.length === 1) {
        this.renderAttributeIndex()
      }
    },
    removeFont(item, index) {
      item.fonts.splice(index, 1)
      item.fontIndex = String(item.fonts.length > 0 ? item.fonts.length - 1 : 0)
      if (item.fonts.length === 0) {
        this.renderAttributeIndex()
      }
    },
    selectPrize(val) {
      this.thisClickPrizeItem.prize = val
      this.visibleSelectPrize = false
    },
    clickSelectPrize(item) {
      this.thisClickPrizeItem = item
      this.visibleSelectPrize = true
    },
    clickSetPrizeCover(item, itemImg) {
      itemImg.src = item.prize.cover
    },
    clickSetPrizeFont(item, itemFont) {
      itemFont.text = `${item.prize.quantity || ''} ${item.prize.unit || ''}`
    },
    clickInStockEdit(item) {
      const that = this
      that.$prompt(
        that.$t('pages.lotteryConfig.prompt.enterStock'),
        that.$t('pages.lotteryConfig.prompt.stockEdit'),
        {
          confirmButtonText: that.$t('pages.lotteryConfig.action.confirm'),
          cancelButtonText: that.$t('pages.lotteryConfig.action.cancel'),
          inputPattern: /^\d+$/,
          inputErrorMessage: that.$t('pages.lotteryConfig.validation.positiveInteger'),
          closeOnClickModal: false
        }
      ).then(({ value }) => {
        item.inStock = value
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('pages.lotteryConfig.message.inputCancelled')
        })
      })
    },
    clickRestConsumeInStock(item) {
      const that = this
      that.$confirm(that.$t('pages.lotteryConfig.confirm.resetConsumeStock'), that.$t('pages.lotteryConfig.action.reset'), {
        confirmButtonText: that.$t('pages.lotteryConfig.action.confirm'),
        cancelButtonText: that.$t('pages.lotteryConfig.action.cancel'),
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: this.$t('pages.lotteryConfig.message.resetSuccess')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('pages.lotteryConfig.message.resetCancelled')
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-lottery {
  position: absolute;
  overflow: auto;
  left: 0;
  top: 50px;
  right: 0px;
  bottom: 0px;
  .form {
    height: 100%;
    overflow: auto;
  }
  .in-stock {
    width: 100%;
    position:absolute;
    top: 0px;
    padding: 15px;
    line-height: 30px;
  }
  .lottery-body{
    height: 100%;
    position: relative;
    background-color: rgba(231, 236, 236, 0.418);
    .luck-conf {
      margin: auto;
    }
  }
  .lottery-conf {
    position: relative;
    height: 100%;
    .bottom-line {
      border-bottom: 1px solid rgb(240, 235, 235);
    }
    .card {
      padding: 20px;
      .title {
        font-size: 22px;
        font-weight: bold;
      }
      .content {
        padding: 20px 0px;
      }
    }
  }
  .operation-but{
    background-color: rgb(245, 248, 248);
    padding: 10px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 100;
    text-align: center;
  }
}

</style>
