<template>
  <div class="user-swap-user">
    <el-form ref="userSwapUser" :model="form" :rules="rules" label-width="80px">
      <el-form-item :label="$t('pages.toolsOther.userSwap.sourceId')" prop="sourceUserId">
        <el-input v-model="form.sourceUserId" v-number :placeholder="$t('pages.toolsOther.placeholder.enterSourceLongUserId')" />
      </el-form-item>
      <el-form-item :label="$t('pages.toolsOther.userSwap.targetId')" prop="targetUserId">
        <el-input v-model="form.targetUserId" v-number :placeholder="$t('pages.toolsOther.placeholder.enterTargetLongUserId')" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="checkCondtionLoading" @click="checkCondition()">{{ $t('pages.toolsOther.userSwap.checkCondition') }}</el-button>
      </el-form-item>
    </el-form>

    <div v-if="checkResults && checkResults.length>0" class="check-condition">
      <div class="check-tips">
        <div v-for="(item, index) in checkResults" :key="index" class="tips" :class="item.type">
          <i :class="{'el-icon-error': item.type === 'error','el-icon-warning': item.type === 'warn'}" />
          {{ $t(item.descKey) }} {{ checkTips }}
        </div>
      </div>
      <el-button v-if="!notAollwSubmit" type="primary" @click="submitExecute()">{{ $t('pages.toolsOther.userSwap.submitExecute') }}</el-button>
    </div>
  </div>
</template>

<script>
import { checkUserSwapUser, executeUserSwapUser } from '@/api/tools'
export default {
  name: 'UserSwapUser',
  data() {
    return {
      checkCondtionLoading: false,
      checkResults: [],
      checkTips: '',
      notAollwSubmit: true,
      form: {
        sourceUserId: '',
        targetUserId: ''
      },
      tipsMap: {
        'SOURCE_USER_IS_NULL': {
          type: 'error',
          descKey: 'pages.toolsOther.userSwap.tips.sourceUserNotFound'
        },
        'TARGET_USER_IS_NULL': {
          type: 'error',
          descKey: 'pages.toolsOther.userSwap.tips.targetUserNotFound'
        },
        'ORIGIN_NOT_EQUALS': {
          type: 'warn',
          descKey: 'pages.toolsOther.userSwap.tips.differentSystem'
        },
        'SOURCE_USER_AUTH_IS_NULL': {
          type: 'error',
          descKey: 'pages.toolsOther.userSwap.tips.sourceAuthNotFound'
        },
        'TARGET_USER_AUTH_IS_NULL': {
          type: 'error',
          descKey: 'pages.toolsOther.userSwap.tips.targetAuthNotFound'
        },
        'AUTH_OPENID_NOT_EQUALS': {
          type: 'warn',
          descKey: 'pages.toolsOther.userSwap.tips.openIdMismatch'
        }
      },
      submitExecuteLoading: false
    }
  },
  computed: {
    rules() {
      return {
        sourceUserId: [{ required: true, message: this.$t('pages.toolsOther.validation.requiredParam'), trigger: 'blur' }],
        targetUserId: [{ required: true, message: this.$t('pages.toolsOther.validation.requiredParam'), trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitExecute() {
      const that = this
      that.submitExecuteLoading = true
      executeUserSwapUser(that.form).then(res => {
        that.$opsMessage.success()
        that.checkResults = []
        that.checkTips = ''
        that.notAollwSubmit = true
      }).catch(er => {
        that.submitExecuteLoading = false
      })
    },
    checkCondition() {
      const that = this
      that.$refs.userSwapUser.validate((valid) => {
        if (!valid) {
          console.error('error submit!!')
          return
        }
        // if (that.form.sourceUserId === that.form.targetUserId) {
        //   that.$opsMessage.fail('用户id不可相同')
        //   return
        // }
        that.checkCondtionLoading = true
        checkUserSwapUser(that.form).then(res => {
          that.checkCondtionLoading = false
          const result = res.body || {}
          const list = result.key || []
          that.checkResults = list.map(item => that.tipsMap[item]).filter(item => !!item)
          that.notAollwSubmit = false
          for (let index = 0; index < that.checkResults.length; index++) {
            if (that.checkResults[index].type === 'error') {
              that.notAollwSubmit = true
            }
          }

          that.checkTips = result.value || ''
        }).catch(er => {
          that.checkCondtionLoading = false
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.check-condition {
  background: rgb(243, 240, 240);
  padding: 20px;
  .check-tips {
    font-size: 18px;
    padding-bottom: 10px;
    .tips {
      margin-bottom: 10px;
    }
    .error {
      color: rgb(201, 22, 22);
      padding: 0px 10px;
    }
    .warn {
      color: rgb(201, 159, 22);
      padding: 0px 10px;
    }
  }
}
</style>
