<template>
  <div class="user-freight-form-edit">
    <el-dialog
      :title="textOptTitle"
      :visible="true"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="550px"
      top="20px"
    >
      <div class="form-edit">
        <el-alert
          style="margin-bottom: 10px;"
          :title="$t('pages.userFreight.formEdit.alert')"
          type="warning"
          :closable="false"
        />
        <el-form ref="form" :model="form" :rules="formRules" label-width="110px" style="margin-right:50px;">
          <el-form-item :label="$t('pages.userFreight.formEdit.system')" prop="sysOrigin">
            {{ sysOrigin }}
          </el-form-item>
          <el-form-item :label="$t('pages.userFreight.formEdit.userId')" prop="userId">

            <account-input v-model="form.userId" :sys-origin="sysOrigin" :placeholder="$t('pages.userFreight.formEdit.userIdPlaceholder')" />
          </el-form-item>
          <el-form-item :label="$t('pages.userFreight.formEdit.gold')" prop="earnPoints">
            <el-input v-model.trim="form.earnPoints" v-number :placeholder="$t('pages.userFreight.formEdit.goldPlaceholder')" class="input-with-select" maxlength="10" />
          </el-form-item>
          <el-form-item :label="$t('pages.userFreight.formEdit.amount')" prop="amount">
            <el-input
              v-model.trim="form.amount"
              :placeholder="$t('pages.userFreight.formEdit.amountPlaceholder')"
            />
          </el-form-item>
          <el-form-item :label="$t('pages.userFreight.formEdit.rechargeType')" prop="rechargeType">
            <el-select
              v-model.trim="form.rechargeType"
              :placeholder="$t('pages.userFreight.formEdit.rechargeTypePlaceholder')"
              clearable
              style="width:100%;"
              class="filter-item"
            >
              <el-option :label="$t('pages.userFreight.rechargeType.clipsPayPurchase')" :value="'CLIPSPAY-进货'" />
              <el-option :label="$t('pages.userFreight.rechargeType.payoneerPurchase')" :value="'Payoneer-进货'" />
              <el-option :label="$t('pages.userFreight.rechargeType.paypalPurchase')" :value="'Paypal-进货'" />
              <el-option :label="$t('pages.userFreight.rechargeType.salaryPurchase')" :value="'工资-进货'" />
              <el-option :label="$t('pages.userFreight.rechargeType.bankCardExchange')" :value="'银行卡兑换'" />
              <el-option :label="$t('pages.userFreight.rechargeType.usdtPurchase')" :value="'USDT-进货'" />
              <el-option :label="$t('pages.userFreight.rechargeType.goldCompensation')" :value="'金币补偿'" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('pages.userFreight.formEdit.remark')" prop="remark">
            <el-input v-model.trim="form.remark" :placeholder="$t('pages.userFreight.formEdit.remarkPlaceholder')" class="input-with-select" maxlength="400" />
          </el-form-item>
        </el-form>
      </div>

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

  </div>
</template>
<script>
import { shipFreight } from '@/api/app-user'
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.userFreight.validation.required'), trigger: 'blur' }
    ]

    return {
      searchDisabled: false,
      userInfo: {},
      submitLoading: false,
      form: {
        id: '',
        userId: '',
        earnPoints: '',
        amount: '',
        rechargeType: '',
        sysOrigin: ''
      },
      formRules: {
        name: commonRules,
        userId: commonRules,
        amount: commonRules,
        rechargeType: commonRules,
        // earnPoints: { required: true, message: this.$t('pages.userFreight.validation.requiredAndGreaterThanZero'), validator: (rule, value, callback) => {
        //   if (!value || value <= 0) {
        //     callback(new Error())
        //     return
        //   }
        //   callback()
        // }, trigger: 'blur' },
        earnPoints: { required: true, message: this.$t('pages.userFreight.validation.requiredNotEmpty'), trigger: 'blur' }
      },
      sourceTypeList: [],
      selectType: {},
      isLoadSourceTypeList: false,
      listTypeLoading: false,
      badgeRestaurants: [{ 'value': '0', 'label': '永久' }]
    }
  },
  computed: {
    textOptTitle() {
      return this.row && this.row.id ? this.$t('pages.userFreight.dialog.edit') : this.$t('pages.userFreight.action.add')
    },
    isUpdate() {
      return this.row && this.row.id
    },
    ...mapGetters(['permissionsSysOriginPlatforms'])
  },
  watch: {
    row: {
      handler(newVal) {
        if (!newVal) {
          return
        }
        const newForm = deepClone(newVal)
        newForm.tmpConfigList = []
        this.form = newForm
      },
      immediate: true
    }
  },
  methods: {
    submitItem(index) {
      const that = this
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return
        }
        const item = that.form.tmpConfigList[0]
        const itemExt = item.ext
        that.form.rewardConfigList.push({
          type: item.type,
          content: item.content,
          detailType: item.clickType,
          quantity: item.quantity,
          cover: itemExt.selectVal.cover,
          sourceUrl: itemExt.selectVal.sourceUrl
        })
        that.form.tmpConfigList.splice(index, 1)
      })
    },
    handleClose() {
      this.$emit('close')
    },
    submitForm() {
      const that = this
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return
        }
        that.submitLoading = true
        if (!that.form.sysOrigin) {
          that.form.sysOrigin = that.sysOrigin
        }
        shipFreight(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>
