<template>
  <div class="app-container">
    <div v-loading="loading" class="compensate-order">
      <el-alert
        :title="$t('pages.compensateOrder.section.order')"
        type="info"
        :closable="false"
        style="margin-bottom: 20px;"
      />
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item prop="userId" :label="$t('pages.compensateOrder.form.userId')">
          <el-input v-model="form.userId" v-number />
        </el-form-item>
        <el-form-item prop="orderId" :label="$t('pages.compensateOrder.form.orderId')">
          <el-input v-model.trim="form.orderId" />
        </el-form-item>
        <el-form-item :label="$t('pages.compensateOrder.form.system')" prop="sysOrigin">
          <el-select v-model="form.sysOrigin" :placeholder="$t('pages.compensateOrder.placeholder.selectSystem')">
            <el-option
              v-for="item in permissionsSysOriginPlatforms"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('pages.compensateOrder.form.paymentPlatform')" prop="platform">
          <el-select v-model="form.platform" :placeholder="$t('pages.compensateOrder.placeholder.selectPaymentPlatform')">
            <el-option
              v-for="item in payPlatforms"
              :key="item.value"
              :label="item.name"
              :value="item.value"
              :disabled="!(item.value === 'APPLE' || item.value === 'GOOGLE')"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('pages.compensateOrder.form.productCode')" prop="productCode">
          <el-input v-model="form.productCode" />
        </el-form-item>
        <el-form-item :label="$t('pages.compensateOrder.form.expireTime')" prop="vipExpireTime">
          <el-date-picker
            v-model="form.vipExpireTime"
            value-format="timestamp"
            type="date"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ $t('pages.compensateOrder.action.submit') }}</el-button>
        </el-form-item>
      </el-form>

      <el-alert
        :title="$t('pages.compensateOrder.section.candy')"
        type="info"
        :closable="false"
        style="margin-bottom: 20px;"
      />
      <el-form ref="form_candy" :model="formCandy" :rules="rulesCnady" label-width="100px">
        <el-form-item prop="userId" :label="$t('pages.compensateOrder.form.userId')">
          <el-input v-model="formCandy.userId" v-number />
        </el-form-item>
        <el-form-item prop="candy" :label="$t('pages.compensateOrder.form.candy')">
          <el-input v-model="formCandy.candy" v-number />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitCandy">{{ $t('pages.compensateOrder.action.submit') }}</el-button>
        </el-form-item>
      </el-form>

    </div>

  </div>
</template>
<script>
import { payPlatforms } from '@/constant/origin'
import { orderPurchaseHistoryCompensate, compensateCandy } from '@/api/purchase'
import { mapGetters } from 'vuex'
function newFrom() {
  return Object.assign({}, {
    userId: '',
    orderId: '',
    platform: '',
    productCode: '',
    vipExpireTime: '',
    sysOrigin: ''
  })
}
function newFormCandy() {
  return Object.assign({}, {
    userId: '',
    candy: ''
  })
}
export default {
  name: 'CompensateOrder',
  data() {
    return {
      loading: false,
      payPlatforms,
      form: newFrom(),
      formCandy: newFormCandy(),
      inputFixedNumber: 0
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatforms']),
    rules() {
      const commonValid = [{ required: true, message: this.$t('pages.compensateOrder.validation.requiredField'), trigger: 'blur' }]
      return {
        userId: commonValid,
        orderId: commonValid,
        platform: commonValid,
        productCode: commonValid,
        sysOrigin: commonValid
      }
    },
    rulesCnady() {
      const commonValid = [{ required: true, message: this.$t('pages.compensateOrder.validation.requiredField'), trigger: 'blur' }]
      return {
        userId: commonValid,
        candy: commonValid
      }
    }
  },
  methods: {
    onSubmit() {
      const that = this
      that.$refs.form.validate((valid) => {
        if (!valid) {
          console.error('error submit!!')
          return false
        }
        that.$confirm(that.$t('pages.compensateOrder.confirm.submit'), that.$t('pages.compensateOrder.confirm.title'), {
          confirmButtonText: that.$t('pages.compensateOrder.confirm.confirm'),
          cancelButtonText: that.$t('pages.compensateOrder.confirm.cancel'),
          type: 'warning'
        }).then(() => {
          that.loading = true
          orderPurchaseHistoryCompensate(that.form).then(res => {
            that.loading = false
            that.$opsMessage.success()
            that.form = newFrom()
          }).catch(er => {
            that.loading = false
            console.error(er)
          })
        }).catch(() => { })
      })
    },
    onSubmitCandy() {
      const that = this
      that.$refs['form_candy'].validate((valid) => {
        if (!valid) {
          console.error('error submit!!')
          return false
        }
        that.$confirm(that.$t('pages.compensateOrder.confirm.submit'), that.$t('pages.compensateOrder.confirm.title'), {
          confirmButtonText: that.$t('pages.compensateOrder.confirm.confirm'),
          cancelButtonText: that.$t('pages.compensateOrder.confirm.cancel'),
          type: 'warning'
        }).then(() => {
          that.loading = true
          compensateCandy(that.formCandy).then(res => {
            that.loading = false
            that.$opsMessage.success()
            that.formCandy = newFormCandy()
          }).catch(er => {
            that.loading = false
            console.error(er)
          })
        }).catch(() => { })
      })
    }
  }
}
</script>
