<template>
  <div class="props-activity-reward-config-edit">
    <el-drawer
      :title="textOptTitle"
      :visible="true"
      :before-close="handleClose"
      :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="localizedFormRules"
          class="i18n-form i18n-form--wide"
          label-width="110px"
          style="margin-right:50px;"
        >
          <!-- 类型名称 -->
          <el-form-item :label="$t('pages.propsSourceGroupForm.form.typeName')" prop="name">
            <el-input
              v-model.trim="form.name"
              type="text"
              :placeholder="$t('pages.propsSourceGroupForm.placeholder.categoryName')"
            />
          </el-form-item>

          <!-- 上下架开关 -->
          <el-form-item :label="$t('pages.propsSourceGroupForm.form.shelfStatus')" prop="shelfStatus">
            <el-radio-group v-model="form.shelfStatus">
              <el-radio :label="true">{{ $t('pages.propsSourceGroupForm.word.onShelf') }}</el-radio>
              <el-radio :label="false">{{ $t('pages.propsSourceGroupForm.word.offShelf') }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 配置列表 -->
          <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' || item.type === 'HONOR_ACTIVITY'
                    "
                    >{{ $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 :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 :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="isPROPCOUPON(item.clickType)" :gutter="10">
                    <el-col :span="13">
                      <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="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="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="{ item }">
                            <div class="name">{{ item.value }}</div>
                            <span class="addr">{{ item.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="isHONORACTIVITY(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="{ item }">
                            <div class="name">{{ item.value }}</div>
                            <span class="addr">{{ item.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" />{{ getPropsTypeName('AVATAR_FRAME') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['RIDE'].loading"
                @click="addContent('RIDE')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('RIDE') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['NOBLE_VIP'].loading"
                @click="addContent('NOBLE_VIP')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('NOBLE_VIP') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['THEME'].loading"
                @click="addContent('THEME')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('THEME') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['GIFT'].loading"
                @click="addContent('GIFT')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('GIFT') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                @click="addContent('SPECIAL_ID')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('SPECIAL_ID') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                @click="addContent('GOLD')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('GOLD') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                @click="addContent('DIAMOND')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('DIAMOND') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                @click="addContent('GAME_COUPON')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('GAME_COUPON') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['BADGE'].loading"
                @click="addContent('BADGE')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('BADGE') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['ROOM_BADGE'].loading"
                @click="addContent('ROOM_BADGE')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('ROOM_BADGE') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['EMOJI'].loading"
                @click="addContent('EMOJI')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('EMOJI') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['CHAT_BUBBLE'].loading"
                @click="addContent('CHAT_BUBBLE')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('CHAT_BUBBLE') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['FLOAT_PICTURE'].loading"
                @click="addContent('FLOAT_PICTURE')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('FLOAT_PICTURE') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['CUSTOMIZE'].loading"
                @click="addContent('CUSTOMIZE')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('CUSTOMIZE') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['FRAGMENTS'].loading"
                @click="addContent('FRAGMENTS')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('FRAGMENTS') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['DATA_CARD'].loading"
                @click="addContent('DATA_CARD')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('DATA_CARD') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['PROP_COUPON'].loading"
                @click="addContent('PROP_COUPON')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('PROP_COUPON') }}</el-button
              >
              <el-button
                type="text"
                :disabled="disableAddContent"
                :loading="propsTypeData['HONOR_ACTIVITY'].loading"
                @click="addContent('HONOR_ACTIVITY')"
                ><i class="el-icon-circle-plus" />{{ getPropsTypeName('HONOR_ACTIVITY') }}</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>

      <div class="drawer-footer">
        <el-button @click="handleClose()">{{ $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,
  saveOrUpdatePropsActivityRewardGroup,
  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: ""
    }
  },
  data() {
    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: []
        },
        PROP_COUPON: {
          loading: false,
          loadData: false,
          list: []
        },
        HONOR_ACTIVITY: {
          loading: false,
          loadData: false,
          list: []
        }
      },
      propsTypeMap: {
        AVATAR_FRAME: {
          value: "PROPS",
          name: "头像框"
        },
        RIDE: {
          value: "PROPS",
          name: "座驾"
        },
        NOBLE_VIP: {
          value: "PROPS",
          name: "贵族"
        },

        THEME: {
          value: "PROPS",
          name: "房间背景主题"
        },
        GIFT: {
          value: "GIFT",
          name: "礼物"
        },
        SPECIAL_ID: {
          value: "SPECIAL_ID",
          name: "靓号"
        },

        GOLD: {
          value: "GOLD",
          name: "金币"
        },
        DIAMOND: {
          value: "DIAMOND",
          name: "钻石"
        },
        GAME_COUPON: {
          value: "GAME_COUPON",
          name: "游戏券"
        },
        BADGE: {
          value: "BADGE",
          name: "用户-徽章"
        },

        ROOM_BADGE: {
          value: "BADGE",
          name: "房间-徽章"
        },
        EMOJI: {
          value: "EMOJI",
          name: "用户-表情包"
        },
        CHAT_BUBBLE: {
          value: "PROPS",
          name: "聊天气泡"
        },

        FLOAT_PICTURE: {
          value: "PROPS",
          name: "飘窗"
        },
        CUSTOMIZE: {
          value: "CUSTOMIZE",
          name: "自定义(只读)"
        },
        FRAGMENTS: {
          value: "FRAGMENTS",
          name: "碎片"
        },

        PROP_COUPON: {
          value: "PROP_COUPON",
          name: "道具券"
        },

        DATA_CARD: {
          value: "PROPS",
          name: "资料卡"
        },

        HONOR_ACTIVITY: {
          // value: "HONOR_ACTIVITY",
          value: "BADGE",
          name: "荣誉-活动"
        }
      },
      isChangeSource: false,
      propsValidDays,
      propsCurrencyType,
      svgaplayerVisable: false,
      coverUploadLoading: false,
      coverFileList: [],
      sourceUploadLoading: false,
      sourceUrlFileList: [],
      propsTypes,
      submitLoading: false,
      form: {
        id: "",
        name: "",
        shelfStatus: true,
        tmpConfigList: [],
        rewardConfigList: [],
        sysOrigin: "",
        remark: ""
      },
      sourceTypeList: [],
      selectType: {},
      isLoadSourceTypeList: false,
      listTypeLoading: false,
      badgeRestaurants: [{ value: "0", labelKey: "permanent" }]
    };
  },
  computed: {
    localizedFormRules() {
      const commonRules = [this.getRequiredRule()];
      return {
        name: commonRules,
        shelfStatus: commonRules,
        sysOrigin: commonRules
      };
    },
    rowCover() {
      return this.row ? this.row.propsSourceRecordDTO.cover : "";
    },
    rowSourceUrl() {
      return this.row ? this.row.propsSourceRecordDTO.sourceUrl : "";
    },
    isShowCoverUpload() {
      return !this.form.cover;
    },
    isShowSourceUpload() {
      return !this.form.sourceUrl;
    },
    textOptTitle() {
      return this.$t("pages.propsSourceGroupForm.dialog.title", {
        action: this.$t(
          this.row && this.row.id
            ? "pages.propsSourceGroupForm.action.edit"
            : "pages.propsSourceGroupForm.action.add"
        ),
        sysOrigin: this.sysOrigin
      });
    },
    isUpdate() {
      return this.row && this.row.id;
    }
  },
  watch: {
    row: {
      handler(newVal) {
        if (!newVal) {
          return;
        }
        const newForm = deepClone(newVal);
        newForm.tmpConfigList = [];
        if (!newForm.rewardConfigList || newForm.rewardConfigList.length <= 0) {
          newForm.rewardConfigList = [];
        }
        this.form = newForm;
        this.form.sysOrigin = this.sysOrigin;
      },
      immediate: true
    },
    sysOrigin: {
      handler(newVal) {
        if (!newVal) {
          return;
        }
        this.form.sysOrigin = 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",
        PROP_COUPON: "propCoupon",
        DATA_CARD: "dataCard",
        HONOR_ACTIVITY: "honorActivity"
      };
      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.isPROPCOUPON(type)) {
          that.addContentData(type);
          return;
        }

        // 荣誉活动
        // if (that.isHONORACTIVITY(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;
        }

        // VIP
        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";
      }

      if (this.isHONORACTIVITY(type)) {
        return "HONOR_ACTIVITY";
        // return "BADGE";
      }
      return null;
    },

    // 是否为金币和钻石
    isCurrency(type) {
      return type === "GOLD" || type === "DIAMOND";
    },

    // 是否为游戏券
    isGameCoupon(type) {
      return type === "GAME_COUPON";
    },

    // 是否为道具券
    isPROPCOUPON(type) {
      return type === "PROP_COUPON";
    },

    // 是否为荣誉活动
    isHONORACTIVITY(type) {
      return type === "HONOR_ACTIVITY";
    },

    // 是否为徽章
    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;
    },

    // 关闭窗口
    handleClose() {
      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
          });
        });
        saveOrUpdatePropsActivityRewardGroup(form)
          .then(res => {
            that.submitLoading = false;
            that.$emit("success", res);
          })
          .catch(er => {
            that.submitLoading = false;
            that.$emit("fail");
            console.error(er);
          });
      });
    },

    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>
