<template>
  <div class="user-bank-form-edit">
    <el-dialog
      :title="$t('pages.userSalaryDiamond.dialog.createAccountTitle')"
      :visible="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="550px"
      top="20px"
    >
      <div class="form-edit">
        <el-form ref="form" :model="form" :rules="formRules" label-width="110px" style="margin-right:50px;">
          <el-form-item :label="$t('pages.userSalaryDiamond.form.system')" prop="sysOrigin">
            {{ sysOrigin }}
          </el-form-item>
          <el-form-item :label="$t('pages.userSalaryDiamond.form.userId')" prop="userId">

            <account-input v-model="form.userId" :sys-origin="sysOrigin" :placeholder="$t('pages.userSalaryDiamond.filter.userId')" />
          </el-form-item>
          <el-form-item :label="$t('pages.userSalaryDiamond.form.amount')" prop="quantity">
            <el-input v-model.trim="form.quantity" :placeholder="$t('pages.userSalaryDiamond.placeholder.sendSalaryDiamond')" class="input-with-select" maxlength="10" />
          </el-form-item>
          <el-form-item :label="$t('pages.userSalaryDiamond.form.innerRemark')" prop="remark">
            <el-input v-model.trim="form.remark" :placeholder="$t('pages.userSalaryDiamond.placeholder.innerRemark')" class="input-with-select" maxlength="10" />
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer">
        <el-button @click="handleClose()">{{ $t('pages.userSalaryDiamond.action.cancel') }}</el-button>
        <el-button type="primary" :loading="submitLoading" :disabled="searchDisabled" @click="submitForm()">{{ $t('pages.userSalaryDiamond.action.save') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { createSalaryDiamondBalance } from '@/api/app-user-salary-diamond-balance'
import { deepClone } from '@/utils'
import { mapGetters } from 'vuex'
export default {
  props: {
    row: {
      type: Object,
      require: false,
      default: () => {}
    },
    sysOrigin: {
      type: String,
      require: false,
      default: ''
    }
  },
  data() {
    const commonRules = [
      { required: true, message: this.$t('pages.userSalaryDiamond.validation.required'), trigger: 'blur' }
    ]

    return {
      searchDisabled: false,
      userInfo: {},
      submitLoading: false,
      form: {
        userId: '',
        quantity: '',
        remark: ''
      },
      formRules: {
        userId: commonRules,
        // earnPoints: { required: true, message: '必填字段，且必须大于0', validator: (rule, value, callback) => {
        //   if (!value || value <= 0) {
        //     callback(new Error())
        //     return
        //   }
        //   callback()
        // }, trigger: 'blur' },
        quantity: { required: true, message: this.$t('pages.userSalaryDiamond.validation.requiredNotEmpty'), trigger: 'blur' }
      }
    }
  },
  computed: {
    textOptTitle() {
      return this.row && this.row.id ? this.$t('pages.userSalaryDiamond.action.edit') : this.$t('pages.userSalaryDiamond.action.add')
    },
    isUpdate() {
      return this.row && this.row.id
    },
    ...mapGetters(['permissionsSysOriginPlatforms'])
  },
  watch: {
    row: {
      handler(newVal) {
        if (!newVal) {
          return
        }
        const newForm = deepClone(newVal)
        this.form = newForm
      },
      immediate: true
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    submitForm() {
      const that = this
      if(that.form.quantity <= 0) {
        that.$message.error(this.$t('pages.userSalaryDiamond.message.amountGreaterThanZero'))
        return
      }
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return
        }
        that.submitLoading = true
        createSalaryDiamondBalance(that.form).then(res => {
          that.$opsMessage.success()
          that.submitLoading = false
          that.$emit('success')
        }).catch(er => {
          that.submitLoading = false
          that.$emit('fail')
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
.props-activity-reward-config-edit {
  .form-edit {
    max-height: 600px;
    overflow: auto;
    .dr-content {
      padding: 5px 0px 5px 20px;
    }
    .sort {
      border-radius: 50%;
      width: 30px;
      height: 30px;
      background: #f7f6f5;
      margin: auto;
      text-align: center;
      line-height: 29px;
      font-weight: bold;
    }
    .del {
      font-size: 30px;
      color: #F56C6C;
      cursor: pointer;
    }
    .save {
      font-size: 30px;
      color: #FF9326;
      cursor: pointer;
    }
  }
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
