<template>
  <div class="props-activity-reward-config-edit">
    <el-drawer
      :title="textOptTitle"
      :visible="true"
      :before-close="handlePropsClose"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="drawer-auto-layout"
    >
      <div class="form-edit">
        <el-form ref="form" :model="form" :rules="formRules" label-width="110px" style="margin-right:50px;">
          <div class="dr-content">
            <div ref="rewardContent">
              <el-row v-for="(item, index) in form.rewardConfigList" :key="index" style="cursor:pointer;line-height:30px;">
                <el-col :span="3">
                  <div class="sort">{{ index + 1 }}</div>
                </el-col>
                <el-col :span="3" style="text-align:center;">
                  <div v-if="item.type === 'GOLD'">
                    <img src="@/assets/gold_icon.png" style="width:30px;height:30px;cursor: pointer;">
                  </div>
                  <div v-else-if="item.type === 'DIAMOND'">
                    <img src="@/assets/diamond_icon.png" style="width:30px;height:30px;cursor: pointer;">
                  </div>
                  <div v-else-if="item.type === 'SPECIAL_ID'">
                    <img src="@/assets/special_id.png" style="width:30px;height:30px;cursor: pointer;">
                  </div>
                  <div v-else-if="isGameCoupon(item.type)">
                    <img src="@/assets/game_coupon.png" style="width:30px;height:30px;cursor: pointer;">
                  </div>
                  <div v-else class="preview-img" style="width: 36px; height: 36px">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item.cover"
                      :preview-src-list="[item.cover]"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline" />
                      </div>
                    </el-image>
                    <div class="preview-svga">
                      <svgaplayer
                        type="popover"
                        :url="item.sourceUrl"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :span="15">
                  <span style="font-weight:bold;"> {{ getTypeName(item) }}</span>
                  <span v-if="item.type === 'SPECIAL_ID'">{{ $t('pages.propsSourceGroupForm.summary.typeQuantity', { content: item.content, quantity: item.quantity }) }}</span>
                  <span v-else-if="item.type === 'GOLD' || item.type === 'DIAMOND' || isGameCoupon(item.type)">{{ $t('pages.propsSourceGroupForm.summary.quantityValue', { value: item.content }) }}</span>
                  <span v-else-if="item.type === 'BADGE'">{{ $t('pages.propsSourceGroupForm.summary.badgeDays', { name: item.badgeName, quantity: item.quantity }) }}</span>
                  <span v-else-if="item.type === 'CUSTOMIZE'">{{ $t('pages.propsSourceGroupForm.summary.descriptionValue', { value: item.remark }) }}</span>
                  <span v-else>
                    <span v-if="item.type === 'GIFT' || item.type === 'FRAGMENTS'">{{ $t('pages.propsSourceGroupForm.summary.quantityLabel') }}</span>
                    <span v-else>{{ $t('pages.propsSourceGroupForm.summary.daysLabel') }}</span>
                    {{ item.quantity }}</span>
                </el-col>
                <el-col v-if="isAllowEdit" :span="3" style="text-align: right;">
                  <i class="del el-icon-delete-solid" @click="deleteUpdateItem(index)" />
                </el-col>
              </el-row>
            </div>
          </div>
          <el-form-item v-if="isAllowEdit" :label="$t('pages.propsSourceGroupForm.form.addConfig')">
            <div class="content-list">
              <el-row v-for="(item, index) in form.tmpConfigList" :key="index">
                <div class="content-box">
                  <div class="content-box-label">
                    <span>{{ item.ext.title }}</span>
                  </div>
                  <el-row v-if="item.clickType === 'SPECIAL_ID'" :gutter="10">
                    <el-col :span="13">
                      <el-form-item
                        :prop="'tmpConfigList.' + index + '.content'"
                        :rules="getRequiredRule()"
                      >
                        <el-input
                          v-model="item.content"
                          :placeholder="$t('pages.propsSourceGroupForm.placeholder.select')"
                          style="width:100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        :prop="'tmpConfigList.' + index + '.quantity'"
                        :rules="getNotEmptyRule()"
                      >
                        <span><el-input v-model="item.quantity" v-number style="width: 100%;" :placeholder="$t('pages.propsSourceGroupForm.placeholder.quantity')" /></span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
                      <i class="save el-icon-success" @click="submitItem(index)" />
                    </el-col>
                  </el-row>
                  <el-row v-else-if="isCurrency(item.clickType)" :gutter="10">
                    <el-col :span="19">
                      <el-form-item
                        :prop="'tmpConfigList.' + index + '.content'"
                        :rules="getRequiredRule()"
                      >
                        <el-input v-model.trim="item.content" v-number type="text" :placeholder="$t('pages.propsSourceGroupForm.placeholder.inputContent')" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
                      <i class="save el-icon-success" @click="submitItem(index)" />
                    </el-col>
                  </el-row>
                  <el-row v-else-if="isGameCoupon(item.clickType)" :gutter="10">
                    <el-col :span="19">
                      <el-form-item
                        :prop="'tmpConfigList.' + index + '.content'"
                        :rules="getRequiredRule()"
                      >
                        <el-input v-model.trim="item.content" v-number type="text" :placeholder="$t('pages.propsSourceGroupForm.placeholder.inputContent')" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
                      <i class="save el-icon-success" @click="submitItem(index)" />
                    </el-col>
                  </el-row>
                  <el-row v-else-if="isBadge(item.clickType)" :gutter="10">
                    <el-col :span="13">
                      <el-form-item
                        :prop="'tmpConfigList.' + index + '.content'"
                        :rules="getRequiredRule()"
                      >
                        <el-select
                          v-model="item.content"
                          :placeholder="$t('pages.propsSourceGroupForm.placeholder.select')"
                          style="width:100%"
                          filterable
                          @change="(val)=> changeContent(item, val)"
                        >
                          <el-option v-for="(pItem, pIndex) in propsTypeData[item.clickType].list" :key="pIndex" :label="pItem.name" :value="pItem.id">
                            <div style="float: left;">
                              <img :src="pItem.cover" width="40px" height="40px">
                            </div>
                            <div style="float: left;margin-left:10px">
                              {{ pItem.name }}
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        :prop="'tmpConfigList.' + index + '.quantity'"
                        :rules="getNotEmptyRule()"
                      >
                        <!-- <span><el-input v-model="item.quantity" v-number style="width: 100%;" placeholder="天数" /></span> -->

                        <el-autocomplete
                          v-model="item.quantity"
                          v-number
                          popper-class="my-autocomplete"
                          :fetch-suggestions="querySearchBadgeRestaurants"
                          :placeholder="$t('pages.propsSourceGroupForm.placeholder.days')"
                        >
                          <template slot-scope="scope">
                            <div class="name">{{ scope.value }}</div>
                            <span class="addr">{{ scope.label }}</span>
                          </template>
                        </el-autocomplete>

                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
                      <i class="save el-icon-success" @click="submitItem(index)" />
                    </el-col>
                  </el-row>
                  <el-row v-else-if="isCustomize(item.clickType)" :gutter="10">
                    <el-col :span="3">
                      <div class="preview-img" style="width: 36px; height: 36px">
                        <el-image
                          style="width: 100%; height: 100%"
                          :src="item.ext.selectVal.cover"
                          :preview-src-list="[item.ext.selectVal.cover]"
                        >
                          <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline" />
                          </div>
                        </el-image>
                        <div class="preview-svga">
                          <svgaplayer
                            type="popover"
                            :url="item.ext.selectVal.sourceUrl"
                          />
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item
                        :prop="'tmpConfigList.' + index + '.content'"
                        :rules="getRequiredRule()"
                      >
                        <el-select
                          v-model="item.content"
                          :placeholder="$t('pages.propsSourceGroupForm.placeholder.select')"
                          style="width:100%"
                          filterable
                          @change="(val)=> changeContent(item, val)"
                        >
                          <el-option v-for="(pItem, pIndex) in propsTypeData[item.clickType].list" :key="pIndex" :label="pItem.name" :value="pItem.id">
                            <div style="float: left;">
                              <img :src="pItem.cover" width="40px" height="40px">
                            </div>
                            <div style="float: left;margin-left:10px">
                              {{ pItem.name }}
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        :prop="'tmpConfigList.' + index + '.remark'"
                        :rules="getNotEmptyRule()"
                      >
                        <div><el-input v-model="item.remark" style="width: 100%;" :placeholder="$t('pages.propsSourceGroupForm.placeholder.description')" /></div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
                      <i class="save el-icon-success" @click="submitItem(index)" />
                    </el-col>
                  </el-row>
                  <el-row v-else :gutter="10">
                    <el-col :span="3">
                      <div class="preview-img" style="width: 36px; height: 36px">
                        <el-image
                          style="width: 100%; height: 100%"
                          :src="item.ext.selectVal.cover"
                          :preview-src-list="[item.ext.selectVal.cover]"
                        >
                          <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline" />
                          </div>
                        </el-image>
                        <div class="preview-svga">
                          <svgaplayer
                            type="popover"
                            :url="item.ext.selectVal.sourceUrl"
                          />
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item
                        :prop="'tmpConfigList.' + index + '.content'"
                        :rules="getRequiredRule()"
                      >
                        <el-select
                          v-model="item.content"
                          :placeholder="$t('pages.propsSourceGroupForm.placeholder.select')"
                          style="width:100%"
                          filterable
                          @change="(val)=> changeContent(item, val)"
                        >
                          <el-option v-for="(pItem, pIndex) in propsTypeData[item.clickType].list" :key="pIndex" :label="pItem.name" :value="pItem.id">
                            <div style="float: left;">
                              <img :src="pItem.cover" width="40px" height="40px">
                            </div>
                            <div style="float: left;margin-left:10px">
                              {{ pItem.name }}
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        :prop="'tmpConfigList.' + index + '.quantity'"
                        :rules="getNotEmptyRule()"
                      >
                        <div><el-input v-model="item.quantity" v-number style="width: 100%;" :placeholder="$t('pages.propsSourceGroupForm.placeholder.quantityOrDays')" /></div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
                      <i class="save el-icon-success" @click="submitItem(index)" />
                    </el-col>
                  </el-row>
                </div>
              </el-row>

            </div>
            <div>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['AVATAR_FRAME'].loading" @click="addContent('AVATAR_FRAME')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.avatarFrame') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['RIDE'].loading" @click="addContent('RIDE')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.ride') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['NOBLE_VIP'].loading" @click="addContent('NOBLE_VIP')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.nobleVip') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['THEME'].loading" @click="addContent('THEME')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.theme') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['GIFT'].loading" @click="addContent('GIFT')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.gift') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" @click="addContent('SPECIAL_ID')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.specialId') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" @click="addContent('GOLD')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.gold') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" @click="addContent('DIAMOND')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.diamond') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" @click="addContent('GAME_COUPON')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.gameCoupon') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['BADGE'].loading" @click="addContent('BADGE')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.userBadge') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['ROOM_BADGE'].loading" @click="addContent('ROOM_BADGE')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.roomBadge') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['EMOJI'].loading" @click="addContent('EMOJI')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.emoji') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['CHAT_BUBBLE'].loading" @click="addContent('CHAT_BUBBLE')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.chatBubble') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['FLOAT_PICTURE'].loading" @click="addContent('FLOAT_PICTURE')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.floatPicture') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['CUSTOMIZE'].loading" @click="addContent('CUSTOMIZE')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.customizeReadonly') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['FRAGMENTS'].loading" @click="addContent('FRAGMENTS')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.fragments') }}</el-button>
              <el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['DATA_CARD'].loading" @click="addContent('DATA_CARD')"><i class="el-icon-circle-plus" />{{ $t('pages.propsSourceGroupForm.resourceType.dataCard') }}</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="isAllowEdit" class="drawer-footer">
        <el-button @click="handlePropsClose()">{{ $t('pages.propsSourceGroupForm.action.cancel') }}</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitForm()">{{ $t('pages.propsSourceGroupForm.action.save') }}</el-button>
      </div>
    </el-drawer>

  </div>
</template>
<script>

import { listGiftBySysOrigin } from '@/api/gift'
import { listBadgePictureBySysOrigin } from '@/api/badge'
import { listSysOriginTypeList, listNotFamilyBySysOriginType } from '@/api/props'
import { propsTypes, propsCurrencyType, propsValidDays, specialIdTypes } from '@/constant/type'
import { deepClone } from '@/utils'
import Sortable from 'sortablejs'
import { listGroupBySysOrigin } from '@/api/sys-emoji'
export default {
  props: {
    row: {
      type: Object,
      require: false,
      default: () => {}
    },
    sysOrigin: {
      type: String,
      return: true,
      default: ''
    },
    allowEdit: {
      type: Boolean,
      return: true,
      default: false
    }
  },
  data() {
    const commonRules = [
      { required: true, message: '必填字段不可为空', trigger: 'blur' }
    ]
    return {
      specialIdTypes,
      disableAddContent: false,
      propsTypeData: {
        'AVATAR_FRAME': {
          loading: false,
          loadData: false,
          list: []
        },
        'DATA_CARD': {
          loading: false,
          loadData: false,
          list: []
        },
        'CHAT_BUBBLE': {
          loading: false,
          loadData: false,
          list: []
        },
        'RIDE': {
          loading: false,
          loadData: false,
          list: []
        },
        'NOBLE_VIP': {
          loading: false,
          loadData: false,
          list: []
        },
        'THEME': {
          loading: false,
          loadData: false,
          list: []
        },
        'GIFT': {
          loading: false,
          loadData: false,
          list: []
        },
        'BADGE': {
          loading: false,
          loadData: false,
          list: []
        },
        'ROOM_BADGE': {
          loading: false,
          loadData: false,
          list: []
        },
        'EMOJI': {
          loading: false,
          loadData: false,
          list: []
        },
        'CUSTOMIZE': {
          loading: false,
          loadData: false,
          list: []
        },
        'FRAGMENTS': {
          loading: false,
          loadData: false,
          list: []
        },
        'FLOAT_PICTURE': {
          loading: false,
          loadData: false,
          list: []
        }
      },
      propsTypeMap: {
        'EMOJI': {
          value: 'EMOJI',
          name: '用户-表情包'
        },
        'BADGE': {
          value: 'BADGE',
          name: '用户-徽章'
        },
        'ROOM_BADGE': {
          value: 'BADGE',
          name: '房间-徽章'
        },
        'AVATAR_FRAME': {
          value: 'PROPS',
          name: '头像框'
        },
        'DATA_CARD': {
          value: 'PROPS',
          name: '资料卡'
        },
        'CHAT_BUBBLE': {
          value: 'PROPS',
          name: '聊天气泡'
        },
        'RIDE': {
          value: 'PROPS',
          name: '座驾'
        },
        'NOBLE_VIP': {
          value: 'PROPS',
          name: '贵族'
        },
        'GIFT': {
          value: 'GIFT',
          name: '礼物'
        },
        'GOLD': {
          value: 'GOLD',
          name: '金币'
        },
        'DIAMOND': {
          value: 'DIAMOND',
          name: '钻石'
        },
        'SPECIAL_ID': {
          value: 'SPECIAL_ID',
          name: '靓号'
        },
        'THEME': {
          value: 'PROPS',
          name: '房间背景主题'
        },
        'GAME_COUPON': {
          value: 'GAME_COUPON',
          name: '游戏券'
        },
        'CUSTOMIZE': {
          value: 'CUSTOMIZE',
          name: '自定义(只读)'
        },
        'FRAGMENTS': {
          value: 'FRAGMENTS',
          name: '碎片'
        },
        'FLOAT_PICTURE': {
          value: 'PROPS',
          name: '飘窗'
        }
      },
      isAllowEdit: false,
      isChangeSource: false,
      propsValidDays,
      propsCurrencyType,
      svgaplayerVisable: false,
      coverUploadLoading: false,
      coverFileList: [],
      sourceUploadLoading: false,
      sourceUrlFileList: [],
      propsTypes,
      submitLoading: false,
      form: {
        tmpConfigList: [],
        rewardConfigList: [],
        sysOrigin: '',
        remark: ''
      },
      formRules: {
        sysOrigin: commonRules
      },
      sourceTypeList: [],
      selectType: {},
      isLoadSourceTypeList: false,
      listTypeLoading: false,
      badgeRestaurants: [{ value: '0', labelKey: 'permanent' }]
    }
  },
  computed: {
    textOptTitle() {
      const action = this.isAllowEdit
        ? this.$t('pages.propsSourceGroupForm.action.edit')
        : this.$t('pages.teamDiamondPolicy.action.propsDetail')
      return `${action}(${this.sysOrigin})`
    }
  },
  watch: {
    row: {
      handler(newVal) {
        if (!newVal) {
          return
        }
        const newForm = deepClone(newVal)
        if (!newForm || !newForm.propsRewards || newForm.propsRewards.length <= 0) {
          this.form.rewardConfigList = []
          this.form.sysOrigin = this.sysOrigin
        } else {
          this.form.sysOrigin = this.sysOrigin
          this.form.rewardConfigList = newForm.propsRewards
        }
      },
      immediate: true
    },
    sysOrigin: {
      handler(newVal) {
        if (!newVal) {
          return
        }
        this.form.sysOrigin = newVal
      },
      immediate: true
    },
    allowEdit: {
      handler(newVal) {
        if (!newVal) {
          return
        }
        this.isAllowEdit = newVal
      },
      immediate: true
    }
  },
  mounted() {
    const that = this
    that.$nextTick(() => {
      Sortable.create(that.$refs.rewardContent, {
        onEnd: function(evt) {
          const oldIndex = evt.oldIndex
          const newIndex = evt.newIndex
          if (newIndex === oldIndex) {
            return
          }

          that.form.rewardConfigList.splice(newIndex, 0, that.form.rewardConfigList.splice(oldIndex, 1)[0])
          const newList = that.form.rewardConfigList.splice(0)
          that.form.rewardConfigList = []
          that.$nextTick(() => {
            that.form.rewardConfigList = newList
          })
        }
      })
    })
  },
  methods: {
    getRequiredRule() {
      return {
        required: true,
        message: this.$t('pages.propsSourceGroupForm.validation.requiredField'),
        trigger: 'blur'
      }
    },
    getNotEmptyRule() {
      return {
        required: true,
        message: this.$t('pages.propsSourceGroupForm.validation.notEmpty'),
        trigger: 'blur'
      }
    },
    getPropsTypeName(type) {
      const typeNameKeyMap = {
        AVATAR_FRAME: 'avatarFrame',
        RIDE: 'ride',
        NOBLE_VIP: 'nobleVip',
        THEME: 'theme',
        GIFT: 'gift',
        SPECIAL_ID: 'specialId',
        GOLD: 'gold',
        DIAMOND: 'diamond',
        GAME_COUPON: 'gameCoupon',
        BADGE: 'userBadge',
        ROOM_BADGE: 'roomBadge',
        EMOJI: 'emoji',
        CHAT_BUBBLE: 'chatBubble',
        FLOAT_PICTURE: 'floatPicture',
        CUSTOMIZE: 'customizeReadonly',
        FRAGMENTS: 'fragments',
        DATA_CARD: 'dataCard'
      }
      const key = typeNameKeyMap[type]
      if (!key) {
        const typeData = this.propsTypeMap[type]
        return typeData ? typeData.name : ''
      }
      return this.$t(`pages.propsSourceGroupForm.resourceType.${key}`)
    },
    querySearchBadgeRestaurants(queryString, cb) {
      var badgeRestaurants = this.badgeRestaurants.map(item => ({
        value: item.value,
        label: this.$t(`pages.propsSourceGroupForm.word.${item.labelKey}`)
      }))
      var results = queryString ? badgeRestaurants.filter(restaurant => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }) : badgeRestaurants
      cb(results)
    },
    changeContent(item, val) {
      const that = this
      const typeData = that.propsTypeData[item.clickType]
      if (!typeData) {
        return
      }

      const list = typeData.list

      if (!list && list.length < 1) {
        return
      }

      const data = typeData.list.find(typeItem => typeItem.id === val)
      item.ext.selectVal.id = data.id
      item.ext.selectVal.cover = data.cover
      item.ext.selectVal.sourceUrl = data.sourceUrl
    },
    submitItem(index) {
      const that = this
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return
        }
        const item = that.form.tmpConfigList[0]
        const itemExt = item.ext
        that.form.rewardConfigList.push({
          type: item.type,
          content: item.content,
          detailType: item.clickType,
          quantity: item.quantity,
          cover: itemExt.selectVal.cover,
          sourceUrl: itemExt.selectVal.sourceUrl,
          remark: item.remark
        })
        that.form.tmpConfigList.splice(index, 1)
      })
    },
    getTypeName(item) {
      return this.getPropsTypeName(item.detailType)
    },
    deleteUpdateItem(index) {
      this.form.rewardConfigList.splice(index, 1)
    },
    addContent(type) {
      const that = this
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return
        }
        if (that.form.tmpConfigList && that.form.tmpConfigList.length > 0) {
          that.submitItem(0)
        }
        if (that.isGoldOrDiamond(type) || type === 'SPECIAL_ID') {
          that.addContentData(type)
          return
        }
        if (that.isGameCoupon(type)) {
          that.addContentData(type)
          return
        }
        if (that.propsTypeData[type].loadData === true) {
          that.addContentData(type)
          return
        }
        that.propsTypeData[type].loading = true

        if (that.isGift(type)) {
          that.disableAddContent = true
          listGiftBySysOrigin(that.form.sysOrigin).then(res => {
            that.disableAddContent = false
            that.propsTypeData[type].loadData = true
            that.propsTypeData[type].loading = false
            const list = res.body || []
            that.propsTypeData[type].list = list.map(item => {
              return { type, id: item.id, name: item.giftName, amount: item.giftCandy, cover: item.giftPhoto, sourceUrl: item.giftSourceUrl }
            })
            that.addContentData(type)
          }).catch(er => {
            that.disableAddContent = false
            that.propsTypeData[type].loading = false
            console.error(er)
          })
          return
        }

        const badgeType = that.getBadgeType(type)
        if (badgeType) {
          that.disableAddContent = true
          listBadgePictureBySysOrigin(that.form.sysOrigin, badgeType).then(res => {
            that.disableAddContent = false
            that.propsTypeData[type].loadData = true
            that.propsTypeData[type].loading = false
            const list = res.body || []
            that.propsTypeData[type].list = list.map(item => {
              return { type, id: item.badgeConfigId, name: item.badgeName, amount: 0, cover: item.selectUrl, sourceUrl: item.animationUrl }
            })
            that.addContentData(type)
          }).catch(er => {
            that.disableAddContent = false
            that.propsTypeData[type].loading = false
            console.error(er)
          })
          return
        }

        if (type === 'NOBLE_VIP') {
          that.disableAddContent = true
          listNotFamilyBySysOriginType(that.form.sysOrigin, 'NOBLE_VIP').then(res => {
            that.disableAddContent = false
            that.propsTypeData[type].loadData = true
            that.propsTypeData[type].loading = false
            const list = res.body || []
            that.propsTypeData[type].list = list.map(item => {
              return { type, id: item.id, name: item.name, amount: item.amount, cover: item.cover, sourceUrl: item.sourceUrl }
            })
            that.addContentData(type)
          }).catch(er => {
            that.disableAddContent = false
            that.propsTypeData[type].loading = false
            console.error(er)
          })
          return
        }

        if (type === 'EMOJI') {
          listGroupBySysOrigin(that.form.sysOrigin).then(res => {
            that.disableAddContent = false
            that.propsTypeData[type].loadData = true
            that.propsTypeData[type].loading = false
            const list = res.body || []
            that.propsTypeData[type].list = list.map(item => {
              return { type, id: item.id, name: item.groupName, cover: item.cover }
            })
            that.addContentData(type)
          }).catch(er => {
            that.disableAddContent = false
            that.propsTypeData[type].loading = false
            console.error(er)
          })
          return
        }

        that.disableAddContent = true
        listSysOriginTypeList(that.sysOrigin, type).then(res => {
          that.disableAddContent = false
          that.propsTypeData[type].loadData = true
          that.propsTypeData[type].loading = false
          const list = res.body || []
          that.propsTypeData[type].list = list.map(item => {
            return { type, id: item.id, name: item.name, amount: item.amount, cover: item.cover, sourceUrl: item.sourceUrl, remark: item.remark }
          })
          that.addContentData(type)
        }).catch(er => {
          that.disableAddContent = false
          that.propsTypeData[type].loading = false
          console.error(er)
        })
      })
    },
    getBadgeType(type) {
      if (this.isUserBadge(type)) {
        return 'ACTIVITY'
      }

      if (this.isRoomBadge(type)) {
        return 'ROOM_ACHIEVEMENT'
      }
      return null
    },
    isCurrency(type) {
      return type === 'GOLD' || type === 'DIAMOND'
    },
    isGameCoupon(type) {
      return type === 'GAME_COUPON'
    },
    isBadge(type) {
      return this.isRoomBadge(type) || this.isUserBadge(type)
    },
    isUserBadge(type) {
      return type === 'BADGE'
    },
    isCustomize(type) {
      return type === 'CUSTOMIZE'
    },
    isRoomBadge(type) {
      return type === 'ROOM_BADGE'
    },
    isGift(type) {
      return type === 'GIFT'
    },
    isTheme(type) {
      return type === 'THEME'
    },
    addContentData(type) {
      const that = this
      that.form.tmpConfigList.push({
        type: that.propsTypeMap[type].value,
        clickType: type,
        content: '',
        quantity: '',
        remark: '',
        ext: {
          title: that.getPropsTypeName(type),
          selectVal: { id: '', cover: '', sourceUrl: '' }
        }
      })
    },
    isGoldOrDiamond(type) {
      return type === 'GOLD' || type === 'DIAMOND'
    },
    clickChangeSource() {
      this.isChangeSource = !this.isChangeSource
      if (this.isChangeSource === true && this.isLoadSourceTypeList === false) {
        this.loadSourceType()
      }
    },
    changeType(index) {
      this.selectType = this.sourceTypeList[index]
      this.form.sourceId = this.selectType.id
    },
    loadSourceType() {
      const that = this
      that.listTypeLoading = true
      listSysOriginTypeList(that.sysOrigin, 'RIDE').then(res => {
        that.listTypeLoading = false
        that.isLoadSourceTypeList = false
        that.sourceTypeList = res.body || []
      }).catch(er => {
        that.listTypeLoading = false
        console.error(er)
      })
    },
    handleCoverFileRemove(file, fileList) {
      this.form.cover = ''
      this.coverUploadLoading = false
    },
    sourceUpload(file) {
      const that = this
      that.sourceUploadLoading = true
      that.$simpleUploadFlie(file).then(res => {
        that.sourceUploadLoading = false
        that.form.sourceUrl = that.$getAccessImgUrl(res.name)
      }).catch(er => {
        that.sourceUploadLoading = false
      })
    },
    handleSourceFileRemove(file, fileList) {
      this.form.sourceUrl = ''
      this.sourceUploadLoading = false
    },
    handlePropsClose() {
      this.$emit('close')
    },
    submitForm() {
      const that = this
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return
        }

        if (!that.form.rewardConfigList || that.form.rewardConfigList.length < 1) {
          that.$opsMessage.fail(this.$t('pages.propsSourceGroupForm.validation.configRequired'))
          return
        }
        that.submitLoading = true
        const form = deepClone(that.form)
        form.rewardConfigList = []
        that.form.rewardConfigList.forEach((item, index) => {
          form.rewardConfigList.push({
            type: item.type,
            detailType: item.detailType,
            content: item.content,
            quantity: item.quantity,
            sort: index + 1,
            remark: item.remark,
            cover: item.cover,
            amount: item.amount
          })
        })
        that.submitLoading = false
        that.$emit('success', form.rewardConfigList)
      })
    },
    clickSvgaplayer() {
      this.svgaplayerVisable = true
    }
  }
}
</script>
<style scoped lang="scss">

.form-edit {
  overflow: auto;
  .dr-content {
    padding: 5px 0px 5px 20px;
  }
  .sort {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background: #f7f6f5;
    margin: auto;
    text-align: center;
    line-height: 29px;
    font-weight: bold;
  }
  .del {
    font-size: 30px;
    color: #F56C6C;
    cursor: pointer;
  }
  .save {
    font-size: 30px;
    color: #FF9326;
    cursor: pointer;
  }
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
