<template>
  <div class="app-container">
    <div v-loading="loading" class="fortune-config">
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-alert
          :title="$t('pages.luckyBoxFortuneConfig.alert.singleDraw')"
          type="info"
          :closable="false"
          style="margin-bottom: 20px;"
        />
        <el-form-item prop="oneDot" :label="$t('pages.luckyBoxFortuneConfig.label.oneDot')">
          <el-input v-model="form.oneDot" v-number />
        </el-form-item>
        <el-form-item prop="twoDot" :label="$t('pages.luckyBoxFortuneConfig.label.twoDot')">
          <el-input v-model.trim="form.twoDot" v-number />
        </el-form-item>
        <el-form-item :label="$t('pages.luckyBoxFortuneConfig.label.threeDot')" prop="threeDot">
          <el-input v-model="form.threeDot" v-number />
        </el-form-item>
        <el-alert
          :title="$t('pages.luckyBoxFortuneConfig.alert.tenDraws')"
          type="info"
          :closable="false"
          style="margin-bottom: 20px;"
        />
        <el-form-item prop="aroundElevenDot" :label="$t('pages.luckyBoxFortuneConfig.label.aroundElevenDot')">
          <el-input v-model="form.aroundElevenDot" v-number />
        </el-form-item>
        <el-form-item prop="aroundSixteenDot" :label="$t('pages.luckyBoxFortuneConfig.label.aroundSixteenDot')">
          <el-input v-model.trim="form.aroundSixteenDot" v-number />
        </el-form-item>
        <el-form-item :label="$t('pages.luckyBoxFortuneConfig.label.aroundTwentyOneDot')" prop="aroundTwentyOneDot">
          <el-input v-model="form.aroundTwentyOneDot" v-number />
        </el-form-item>
        <el-form-item :label="$t('pages.luckyBoxFortuneConfig.label.aroundTwentySixDot')" prop="aroundTwentySixDot">
          <el-input v-model="form.aroundTwentySixDot" v-number />
        </el-form-item>
        <el-alert
          :title="$t('pages.luckyBoxFortuneConfig.alert.fiftyDraws')"
          type="info"
          :closable="false"
          style="margin-bottom: 20px;"
        />
        <el-form-item prop="aroundFiftyOneDot" :label="$t('pages.luckyBoxFortuneConfig.label.aroundFiftyOneDot')">
          <el-input v-model="form.aroundFiftyOneDot" v-number />
        </el-form-item>
        <el-form-item prop="aroundOneHundredDot" :label="$t('pages.luckyBoxFortuneConfig.label.aroundOneHundredDot')">
          <el-input v-model.trim="form.aroundOneHundredDot" v-number />
        </el-form-item>
        <el-alert
          :title="$t('pages.luckyBoxFortuneConfig.alert.luckyMoment')"
          type="info"
          :closable="false"
          style="margin-bottom: 20px;"
        />
        <el-form-item :label="$t('pages.luckyBoxFortuneConfig.label.luckyTimeOne')" prop="luckyTimeOne">
          <el-input v-model="form.luckyTimeOne" v-number />
        </el-form-item>
        <el-form-item :label="$t('pages.luckyBoxFortuneConfig.label.luckyTimeTwo')" prop="luckyTimeTwo">
          <el-input v-model="form.luckyTimeTwo" v-number />
        </el-form-item>
        <el-form-item :label="$t('pages.luckyBoxFortuneConfig.label.luckyTimeDuration')" prop="luckyTimeDuration">
          <el-input v-model="form.luckyTimeDuration" v-number />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ $t('pages.luckyBoxFortuneConfig.action.submit') }}</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
import { getLuckyBoxFortuneConfig, addLuckyBoxFortuneConfig } from '@/api/game-lucky-box-config'
import { mapGetters } from 'vuex'
export default {
  name: 'FortuneConfig',
  data() {
    return {
      loading: false,
      form: {
        id: '',
        oneDot: '',
        twoDot: '',
        threeDot: '',
        aroundElevenDot: '',
        aroundSixteenDot: '',
        aroundTwentyOneDot: '',
        aroundTwentySixDot: '',
        aroundFiftyOneDot: '',
        aroundOneHundredDot: '',
        luckyTimeOne: '',
        luckyTimeTwo: '',
        luckyTimeDuration: '',
        sysOrigin: 'HALAR'
      },
      fortuneConfigQuery: {
        sysOrigin: 'HALAR'
      }
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatforms']),
    rules() {
      const commonValid = [{ required: true, message: this.$t('pages.luckyBoxFortuneConfig.validation.requiredField'), trigger: 'blur' }]
      return {
        oneDot: commonValid,
        twoDot: commonValid,
        threeDot: commonValid,
        aroundElevenDot: commonValid,
        aroundSixteenDot: commonValid,
        aroundTwentyOneDot: commonValid,
        aroundTwentySixDot: commonValid,
        aroundFiftyOneDot: commonValid,
        aroundOneHundredDot: commonValid,
        luckyTimeOne: commonValid,
        luckyTimeTwo: commonValid,
        luckyTimeDuration: commonValid,
        sysOrigin: commonValid
      }
    }
  },
  created() {
    const that = this
    const querySystem = this.permissionsSysOriginPlatforms[0]
    if (!querySystem) {
      return
    }
    that.fortuneConfigQuery.sysOrigin = querySystem.value
    that.fortuneConfig()
  },
  methods: {
    fortuneConfig() {
      const that = this
      that.submitLoading = true
      getLuckyBoxFortuneConfig(that.fortuneConfigQuery).then(res => {
        const { body } = res
        that.form = body
        that.submitLoading = false
      }).catch(er => {
        that.submitLoading = false
        console.error(er)
        that.$emit('fial', { error: er })
      })
    },
    onSubmit() {
      const that = this
      var probability_1 = parseInt(that.form.oneDot) + parseInt(that.form.twoDot) + parseInt(that.form.threeDot)
      var probability_2 = parseInt(that.form.aroundElevenDot) + parseInt(that.form.aroundSixteenDot) + parseInt(that.form.aroundTwentyOneDot) + parseInt(that.form.aroundTwentySixDot)
      var probability_3 = parseInt(that.form.aroundFiftyOneDot) + parseInt(that.form.aroundOneHundredDot)

      if (parseInt(that.form.oneDot) === 0 || parseInt(that.form.twoDot) === 0 || parseInt(that.form.threeDot) === 0 ||
        parseInt(that.form.aroundElevenDot) === 0 || parseInt(that.form.aroundSixteenDot) === 0 ||
        parseInt(that.form.aroundTwentyOneDot) === 0 || parseInt(that.form.aroundTwentySixDot) === 0 ||
        parseInt(that.form.aroundFiftyOneDot) === 0 || parseInt(that.form.aroundOneHundredDot) === 0) {
        that.$opsMessage.fail(that.$t('pages.luckyBoxFortuneConfig.message.probabilityGreaterThanZero'))
        return
      }

      if (probability_1 !== 100 || probability_2 !== 100 || probability_3 !== 100) {
        that.$opsMessage.fail(that.$t('pages.luckyBoxFortuneConfig.message.probabilityMustEqualHundred'))
        return
      }
      that.$refs.form.validate((valid) => {
        if (!valid) {
          console.error('error submit!!')
          return false
        }

        that.$confirm(that.$t('pages.luckyBoxFortuneConfig.confirm.submitMessage'), that.$t('pages.luckyBoxFortuneConfig.confirm.title'), {
          confirmButtonText: that.$t('pages.luckyBoxFortuneConfig.confirm.confirmButtonText'),
          cancelButtonText: that.$t('pages.luckyBoxFortuneConfig.confirm.cancelButtonText'),
          type: 'warning'
        }).then(() => {
          that.loading = true
          that.form.sysOrigin = that.fortuneConfigQuery.sysOrigin
          addLuckyBoxFortuneConfig(that.form).then(res => {
            that.loading = false
            that.$opsMessage.success()
            that.fortuneConfig()
          }).catch(er => {
            that.loading = false
            console.error(er)
          })
        }).catch(() => { })
      })
    }
  }
}
</script>
