<template>
    <div v-loading="loading">
      <div class="white-box">
        <el-tabs v-model="tabActiveName">
          <el-tab-pane :label="$t('financial.manuallyAdd')" name="first" v-if="permission.hasPermission(`finance/change-balance`)"><!--手动添加-->
            <el-form ref="form" :model="form" label-width="250px" class="bkele-form-page">
              <el-form-item :label="$t('financial.memberCode')"><!--会员编号-->
                <el-input v-model="form.userName" @change="handleChange"></el-input>
              </el-form-item>
              <el-form-item :label="$t('financial.memberName')" v-show="userInfo.REAL_NAME!==null"><!--会员姓名-->
                <el-input :value="userInfo.REAL_NAME" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('financial.memberLevel')" v-show="userInfo.REAL_NAME!==null"><!--会员级别-->
                <el-input :value="userInfo.LEVEL_NAME" :disabled="true"></el-input>
              </el-form-item>
              <!--<el-form-item label="报单中心级别" v-show="userInfo.DEC_ROLE_NAME!=='无'">-->
                <!--<el-input :value="userInfo.DEC_ROLE_NAME" :disabled="true"></el-input>-->
              <!--</el-form-item>-->
  
              <el-form-item :label="item.label" v-show="userInfo.REAL_NAME!==null" v-for="(item,key) in type" :key="key">
                <el-input :value="userInfo[item.name.toUpperCase()]" :disabled="true"></el-input>
              </el-form-item>
              
              <el-form-item :label="$t('financial.accountType')"><!--账户类型-->
                <el-select v-model="form.type" :placeholder="$t('financial.pleaseSelectAccountType')"><!--请选择账户类型-->
                  <el-option v-for="(item,key) in type" :label="item.label" :value="key" :key="key"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('financial.adjustAmount')"><!--调整金额-->
                <el-input v-model="form.amount"></el-input>
              </el-form-item>
              <el-form-item :label="$t('financial.transactionType')"><!--交易类型-->
                <el-select v-model="form.dealType" :placeholder="$t('financial.pleaseSelectTranserType')"><!--请选择交易类型-->
                  <el-option v-for="(item,key) in dealTypes" :label="item.TYPE_NAME" :value="item.ID"
                             :key="item.ID"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('common.note')"><!--备注-->
                <el-input v-model="form.remark"></el-input>
              </el-form-item>
              <el-form-item :label="$t('financial.forgeDisplayRemark')"><!--备注前台显示-->
                <el-switch v-model="form.isShow" active-value="1" inactive-value="0">
                </el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :loading="submitButtonStat" :disabled="getCodeStat" @click="onSubmit">{{ $t('common.confirm') }}<!-- 提交 --></el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!--<el-tab-pane label="批量导入" name="second"-->
                       <!--v-if="permission.hasPermission(`finance/import-change-balance-to-excel-table`)&&permission.hasPermission(`finance/import-change-balance`)">-->
            <!--<el-form ref="form" :model="form" label-width="250px" class="form-page">-->
              <!--<el-form-item label="Excel文件总行数">-->
                <!--<el-input v-model="excelForm.rowCount"></el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="">-->
                <!--<el-tag type="info">表格中账户类型要求英文：bonus(会员账户余额)、reconsume_points(复消积分)</el-tag>-->
              <!--</el-form-item>-->
              <!--<el-form-item>-->
                <!--<leo-excel-uploader-->
                    <!--:request-upload-route="`file/upload-excel`"-->
                    <!--:request-import-to-excel-table-route="`finance/import-change-balance-to-excel-table`"-->
                    <!--:request-import-excel-table-to-data-route="`finance/import-change-balance`"-->
                    <!--:import-row-count="excelForm.rowCount"-->
                    <!--excel-option="changeBalance"-->
                    <!--upload-btn-title="Excel导入"-->
                    <!--style="float: left;"-->
                <!--&gt;</leo-excel-uploader>-->
                <!--<el-button type="primary" @click="handleExcel" style="float: left; margin-left: 10px;">下载模板</el-button>-->
              <!--</el-form-item>-->
            <!--</el-form>-->
          <!--</el-tab-pane>-->
        </el-tabs>
      </div>
    </div>
  </template>
  
  <script>
    import tool from '@/utils/tool'
    import baseInfo from '@/utils/baseInfo'
    import { getChangeBalanceType, multPoint, changeBalance, userFullInfo } from '@/api/finance'
    // import {CDN_BASE_URL} from '@/utils/config'
    import permission from '@/utils/permission'
  
    export default {
      name: 'finance_change-balance-opt',
      mounted() {
        getChangeBalanceType().then(response => {
          this.type = response.data.type
          this.dealTypes = response.data.dealTypes
          this.loading = false
          if (permission.hasPermission(`finance/import-change-balance-to-excel-table`) && permission.hasPermission(`finance/import-change-balance`)) {
            this.tabActiveName = 'second'
          }
          if (permission.hasPermission(`finance/change-balance`)) {
            this.tabActiveName = 'first'
          }
        }).catch(err => {
            console.log(err)
            this.loading = false
        })
        multPoint({opType: 1}).then(response => {
            this.form.balanceCode = response.data.balanceCode
            this.getCodeStat = false
        })
      },
      data() {
        return {
          form: {
            userName: null,
            type: null,
            amount: 0,
            remark: '',
            isShow: '1',
            dealType: null,
            balanceCode: '',
          },
          userInfo: {
            REAL_NAME: null,
            DEC_ROLE_NAME: '',
            BONUS: 0,
            BONUS_FREEZE: 0,
            DEC_LV: 0,
            DEC_DEC_LV: 0,
          },
          baseDecLevels: baseInfo.decLevels(),
          type: null,
          dealTypes: null,
          loading: true,
          submitButtonStat: false,
          getCodeStat: true,
          tool: tool,
          tabActiveName: 'first',
          excelForm: {
            rowCount: 0,
          },
          permission: permission,
        }
      },
      methods: {
        handleChange() {
          this.loading = true
          userFullInfo({userName: this.form.userName}).then(response => {
            this.userInfo = response.data
            this.loading = false
          }).catch(err => {
            this.loading = false
            this.$message({
              message: err,
              type: 'error'
            })
          })
        },
        onSubmit() {
              if (this.form.type === 'bonus') {
                if ((Number.parseFloat(this.userInfo['BONUS']) + Number.parseFloat(this.form.amount)) < 0) {
                  this.$confirm(this.$t('financial.ecoinInsufficientNotice'), this.$t('common.hint'), {// 会员账户余额不足，是否继续提交
                    confirmButtonText: this.$t('common.confirm'), // 确定
                    cancelButtonText: this.$t('common.cancel'), // 取消
                    type: 'warning'
                  }).then(() => {
                    this._handleSubmit()
                  }).catch(() => {
                    this.submitButtonStat = false
                    return false
                  })
                } else {
                  this._handleSubmit()
                }
              } else {
                this._handleSubmit()
              }
        },
        _handleSubmit() {
          this.submitButtonStat = true
          changeBalance(this.form).then(response => {
            this.submitButtonStat = false
            this.$message({
              message: response.data,
              type: 'success'
            })
            this.$router.go(-1)
          }).catch(err => {
            this.submitButtonStat = false
            this.$message({
              message: err,
              type: 'error'
            })
          })
        },
        handleExcel() {
        //   window.open(CDN_BASE_URL + `/files/bonus_change_balance.xlsx`)
        },
      }
    }
  </script>
  
  <style scoped>
  @media (min-width: 761px) {
    /deep/ .el-input__inner {
      width: 500px;
    }
  }
  @media (max-width:760px) {
    /deep/ .white-box {
    padding: 0px 0px;
    }
    /deep/ .el-form-item__content {
      margin-left:150px !important;
    }
    /deep/ .el-form-item__label {
      width:150px !important;
    }
    /deep/ .el-input__inner { 
      width: 150px;
    }
    /* .el-input {
      width: 90%;
    } */

  }

  </style>
  