<template>
  <div class="send-props">
    <el-alert :title="$t('pages.propsSendTool.title.badge')" style="margin-bottom: 10px;" :closable="false" />
    <el-form ref="form" :model="propsGiveForm" :rules="formRules" label-width="85px">
      <el-form-item :label="$t('pages.propsSendTool.form.receiver')" prop="receiverAccounts">
        <el-input v-model="propsGiveForm.receiverAccounts" :placeholder="$t('pages.propsSendTool.placeholder.receiverAccounts')" />
      </el-form-item>
      <el-form-item :label="$t('pages.propsSendTool.form.system')" prop="sysOrigin">
        <el-form-item>
          <el-select
            v-model="propsGiveForm.sysOrigin"
            :placeholder="$t('pages.propsSendTool.placeholder.system')"
            style="width:100%;"
            class="filter-item"
            @change="changeSysOrigin"
          >
            <el-option v-for="item in permissionsSysOriginPlatforms" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item v-if="propsGiveForm.sysOrigin" :label="$t('pages.propsSendTool.form.type')" prop="secondaryType">
        <el-form-item>
          <el-select
            v-model="propsGiveForm.secondaryType"
            :placeholder="$t('pages.propsSendTool.placeholder.type')"
            style="width:100%;"
            class="filter-item"
            @change="changetType"
          >
            <el-option v-for="item in badgeTypes" :key="item.value" :label="getBadgeTypeName(item)" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item :label="$t('pages.propsSendTool.form.resource')" prop="content">
        <div v-if="selectProps.selectUrl" class="payer-source">
          <div class="paler-icon">
            <svgaplayer
              type="popover"
              :url="selectProps.animationUrl || ''"
            />
          </div>
          <img :src="selectProps.selectUrl" alt="cover">
        </div>
        <props-source-select-popover
          v-if="propsGiveForm.sysOrigin && propsGiveForm.secondaryType"
          v-loading="listLoading"
          :data="list"
          :property="selectPopoverProperty"
          :visible="visiblePopover"
          @select="selectPropsSourcePopover"
        />
      </el-form-item>
      <el-form-item :label="$t('pages.propsSendTool.form.validDays')" prop="exchangeDays">
        <el-input 
          v-model="propsGiveForm.exchangeDays" 
          type="number"
          :placeholder="$t('pages.propsSendTool.placeholder.validDays')" 
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="submitLoading" @click="onGiveSubmit">{{ $t('pages.propsSendTool.action.send') }}</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>

import { sendPropsGiveUser } from '@/api/props'
import { listBadgePictureBySysOrigin } from '@/api/badge'
import { badgeTypes } from '@/constant/origin'
import PropsSourceSelectPopover from '@/components/data/PropsSourceSelectPopover'
import { mapGetters } from 'vuex'

export default {
  name: 'SendBadge',
  components: { PropsSourceSelectPopover },
  data() {
    return {
      list: [],
      listLoading: false,
      badgeTypes,
      visiblePopover: false,
      selectPopoverProperty: {
        label: 'badgeName',
        cover: 'selectUrl',
        svgaUrl: 'animationUrl',
        value: 'badgeConfigId'
      },
      selectProps: {},
      submitLoading: false,
      propsGiveForm: {
        // receiverId: '',
        receiverAccounts: '',
        type: 'BADGE',
        content: '',
        exchangeDays: '',
        secondaryType: '',
        sysOrigin: ''
      },
      userInfo: {}
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatforms']),
    formRules() {
      const commonRules = [
        { required: true, message: this.$t('pages.propsSendTool.validation.requiredField'), trigger: 'blur' }
      ]
      return {
        // receiverId: commonRules,
        receiverAccounts: commonRules,
        exchangeDays: [
          { required: true, message: this.$t('pages.propsSendTool.validation.validDaysRequired'), trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === '' || isNaN(value)) {
                callback(new Error(this.$t('pages.propsSendTool.validation.validNumber')))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        content: commonRules,
        secondaryType: commonRules,
        sysOrigin: commonRules
      }
    }
  },
  created() {
  },
  methods: {
    getLocalizedOption(group, value, fallback) {
      const key = `pages.propsSendTool.${group}.${value}`
      const text = this.$t(key)
      return text === key ? fallback : text
    },
    getBadgeTypeName(item) {
      return this.getLocalizedOption('badgeTypes', item.value, item.name)
    },
    changetType(type) {
      const that = this
      that.selectProps = {}
      that.propsGiveForm.content = ''
      that.list = []
      that.listLoading = true
      listBadgePictureBySysOrigin(that.propsGiveForm.sysOrigin, type).then(res => {
        that.listLoading = false
        that.list = res.body || []
      }).catch(er => {
        that.listLoading = false
        console.error(er)
      })
    },
    changeSysOrigin() {
      this.selectProps = {}
      this.propsGiveForm.secondaryType = ''
      this.propsGiveForm.content = ''
      this.list = []
    },
    selectPropsSourcePopover(item) {
      this.selectProps = item
      this.propsGiveForm.content = item.badgeConfigId
    },
    onGiveSubmit() {
      const that = this
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return
        }
        that.submitLoading = true
        sendPropsGiveUser(that.propsGiveForm).then(res => {
          if (res.errorCode === 0) {
            if (res.body) {
              that.$opsMessage.fail(that.$t('pages.propsSendTool.message.invalidShortAccounts', { accounts: res.body }))
              that.submitLoading = false
              return
            }
            that.$opsMessage.success()
            that.selectProps = {}
            that.propsGiveForm.content = ''
            that.submitLoading = false
            return
          }
          that.$opsMessage.fail(res.errorMsg)
          that.submitLoading = false
        }).catch(er => {
          that.submitLoading = false
          console.error(er)
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
.payer-source {
  position: relative;
  .paler-icon {
    position:absolute;
    left: 0px;
    top: -10px;
  }
  img {
    width: 100px;
    height: 100px;
  }
}
</style>
