<template>
  <div class="edit-bounty">
    <el-dialog
      :title="title"
      :visible="true"
      width="550px"
      top="50px"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div style="height: 500px;overflow: auto;">
        <el-form
          ref="dataForm"
          :rules="formRules"
          :model="formData"
          style="width: 400px; margin-left:50px;"
        >
          <el-form-item :label="$t('pages.luckyBoxBountyConfig.form.system')" prop="sysOrigin">
            <el-select
              v-model="formData.sysOrigin"
              :placeholder="$t('pages.luckyBoxBountyConfig.placeholder.selectSystem')"
              style="width:100%;"
              class="filter-item"
            >
              <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.luckyBoxBountyConfig.form.type')" prop="type">
            <el-select
              v-model="formData.type"
              :placeholder="$t('pages.luckyBoxBountyConfig.placeholder.type')"
              clearable
              style="width:100%;"
              class="filter-item"
            >
              <el-option :label="$t('pages.luckyBoxBountyConfig.type.DAILY')" :value="'DAILY'" />
              <el-option :label="$t('pages.luckyBoxBountyConfig.type.WEEKLY')" :value="'WEEKLY'" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('pages.luckyBoxBountyConfig.form.giftType')">
            <el-select
              v-model="formData.giftType"
              :placeholder="$t('pages.luckyBoxBountyConfig.placeholder.giftType')"
              style="width:100%;"
              class="filter-item"
              @change="getGiftListInfo()"
            >
              <el-option v-for="(item) in localizedGiftConfigTabs" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="giftId" :label="$t('pages.luckyBoxBountyConfig.form.resource')">
            <el-select v-model="formData.giftId" v-loading="giftLoading" :placeholder="$t('pages.luckyBoxBountyConfig.placeholder.select')" style="width:100%;" @change="showPhoto">
              <el-option
                v-for="(item, index) in gifts"
                :key="index"
                :label="item.id"
                :value="item.id"
                :style="'height:65px'"
              >
                <div style="float: left;">
                  <img :src="item.giftPhoto" width="65px" height="65px">
                </div>
              </el-option>
            </el-select>
            <div style="float: left;">
              <img class="img" :src="photoUrl" width="65px" height="65px">
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">
          {{ $t('common.cancel') }}
        </el-button>
        <el-button
          :loading="submitLoading"
          type="primary"
          @click="handleSubmit"
        >
          {{ $t('common.submit') }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { addOrUpdateBountyConfig } from '@/api/game-lucky-box-config'
import { mapGetters } from 'vuex'
import { giftConfigTabs } from '@/constant/type'
import { listByTabV2 } from '@/api/gift'
export default {
  name: 'StandardConfigEdit',
  props: {
    updateData: {
      type: Object,
      default: null
    },
    sysOrigin: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      giftConfigTabs,
      gifts: [],
      photoUrl: '',
      giftPhoto: '',
      giftLoading: false,
      formData: {
        id: '',
        sysOrigin: 'HALAR',
        giftType: '',
        giftId: '',
        type: ''
      },
      gift: {
        id: '',
        giftPhoto: ''

      },
      submitLoading: false
    }
  },
  computed: {
    isAdd() {
      return this.updateData === null
    },
    localizedGiftConfigTabs() {
      return this.giftConfigTabs.map(item => ({
        ...item,
        name: this.$t(`pages.luckyBoxBountyConfig.giftType.${item.value}`)
      }))
    },
    title() {
      const system = this.isAdd ? this.sysOrigin : this.updateData.sysOrigin
      const action = this.isAdd
        ? this.$t('pages.luckyBoxBountyConfig.action.add')
        : this.$t('pages.luckyBoxBountyConfig.action.edit')
      return this.$t('pages.luckyBoxBountyConfig.dialog.formTitle', { action, system })
    },
    formRules() {
      const requiredMessage = this.$t('pages.luckyBoxBountyConfig.validation.requiredField')
      return {
        sysOrigin: [{ required: true, message: requiredMessage, trigger: 'blur' }],
        giftType: [{ required: true, message: requiredMessage, trigger: 'blur' }],
        giftId: [{ required: true, message: requiredMessage, trigger: 'blur' }],
        type: [{ required: true, message: requiredMessage, trigger: 'blur' }]
      }
    },
    ...mapGetters(['permissionsSysOriginPlatforms'])
  },
  watch: {
    updateData: {
      immediate: true,
      deep: true,
      handler(newVal) {
        Object.assign(this.formData, newVal)
        this.getGiftList()
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleSubmit() {
      const that = this
      that.$refs.dataForm.validate(valid => {
        if (valid) {
          that.submitLoading = true
          that.formData.sysOrigin = that.sysOrigin
          addOrUpdateBountyConfig(that.formData).then(res => {
            that.submitLoading = false
            this.$emit('success', 'create')
          }).catch(er => {
            that.submitLoading = false
            console.error(er)
            this.$emit('fail')
          })
        } else {
          console.error('error submit!!')
          return false
        }
      })
    },
    getGiftListInfo() {
      const that = this
      that.formData.giftId = ''
      that.photoUrl = ''
      that.getGiftList()
    },
    getGiftList() {
      const that = this
      that.giftLoading = true
      listByTabV2({ 'sysOrigin': that.formData.sysOrigin, 'giftTab': that.formData.giftType }).then(res => {
        that.gifts = res.body || []
        that.giftLoading = false
        this.showPhoto()
      }).catch(er => {
        that.giftLoading = false
        console.error(er)
      })
    },
    showPhoto() {
      const that = this
      const item = this.gifts.find(item1 => item1.id === that.formData.giftId) || that.gift
      that.photoUrl = item.giftPhoto
    }
  }
}
</script>
<style scoped>
.col-margin {
  margin-bottom: 20px;
}
img[src=""],img:not([src]){
            opacity: 0;
        }
</style>
