<template>
  <div class="member-team-change-drawer">
    <el-drawer
      :visible="true"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="drawer-auto-layout"
    >
      <div slot="title" class="flex-l">
        <sys-origin-icon :icon="row.sysOrigin" size="18px" />&nbsp;{{ $t('pages.teamMember.dialog.resetTarget') }}
      </div>
      <div class="member-team-change">
        <div class="drawer-form">
          <el-alert
            type="info"
            :closable="false"
            style="margin:0px 0px 20px 0px;"
            :description="$t('pages.teamMember.alert.resetTarget')"
          />
          <el-form ref="form" :model="form" :rules="formRules" label-width="80px" style="margin-right: 15px;">

            <el-form-item prop="startTime" :label="$t('pages.teamMember.form.timeRange')">
              <el-date-picker
                v-model="rangeDate"
                style="width: 100%;"
                value-format="timestamp"
                type="datetimerange"
                :picker-options="pickerOptions"
                :range-separator="$t('pages.teamMember.date.rangeSeparator')"
                :start-placeholder="$t('pages.teamMember.date.start')"
                :end-placeholder="$t('pages.teamMember.date.end')"
              />
            </el-form-item>
            <el-form-item label="">
              <el-checkbox v-model="form.checkAnchor">{{ $t('pages.teamMember.form.checkAnchor') }}</el-checkbox>
            </el-form-item>
            <!-- <el-form-item label="">
              <el-checkbox v-model="luckyGift">处理幸运礼物目标问题(彭石刚专用)</el-checkbox>
            </el-form-item> -->
          </el-form>
        </div>

        <div class="drawer-footer">
          <el-button :disabled="checkLoading" @click="handleClose()">{{ $t('pages.teamMember.action.close') }}</el-button>
          <el-button v-if="!luckyGift" type="primary" :disabled="checkLoading" :loading="checkLoading" @click="clickCheckTarget">{{ $t('pages.teamMember.action.check') }}</el-button>
          <el-input v-if="luckyGift" v-model="money" :placeholder="$t('pages.teamMember.placeholder.contentRatio')" />
          <el-button v-if="luckyGift" type="primary" :disabled="checkLoading" :loading="checkLoading" @click="sumbitResetTargetTmp()">{{ $t('pages.teamMember.action.checkLuckyGiftTarget') }}</el-button>
        </div>
      </div>
    </el-drawer>

  </div>
</template>
<script>
import { checkTarget, checkTargetLuckyGift, resetUnpaidBillMemberTarget, resetUnpaidBillMemberTargetTmp } from '@/api/team'
import { pickerOptions } from '@/constant/el-const'
export default {
  name: 'TeamMemberChangeTeam',
  props: {
    row: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  data() {
    const commonRules = [
      { required: true, message: this.$t('pages.teamMember.validation.requiredField'), trigger: 'blur' }
    ]
    return {
      pickerOptions,
      rangeDate: '',
      checkLoading: false,
      luckyGift: false,
      bili: 0.00,
      money: 0,
      form: {
        acceptUserId: '',
        startTime: '',
        endTime: '',
        checkAnchor: true
      },
      formRules: {
        startTime: commonRules
      },
      targetVal: 0
    }
  },
  computed: {
  },
  watch: {
    rangeDate: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.form.startTime = newVal[0]
          this.form.endTime = newVal[1]
          return
        }
        this.form.startTime = ''
        this.form.endTime = ''
      }
    },
    row: {
      handler(newVal) {
        if (newVal) {
          this.form.acceptUserId = newVal.userProfile.id
        }
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    handleClose() {
      if (this.checkLoading) {
        this.$opsMessage.warn(this.$t('pages.teamMember.message.processing'))
        return
      }
      this.$emit('close')
    },
    submitResetTarget() {
      const that = this
      that.handleClose()
      resetUnpaidBillMemberTarget({
        resetUserId: that.row.userProfile.id,
        target: that.targetVal
      }).then(res => {
        this.$opsMessage.success()
      }).catch(er => {
        this.$opsMessage.fail()
      })
    },
    sumbitResetTargetTmp() {
      const that = this
      resetUnpaidBillMemberTargetTmp({
        resetUserId: that.row.userProfile.id,
        money: that.money
      }).then(res => {
        this.$opsMessage.success()
      }).catch(er => {
        this.$opsMessage.fail()
      })
    },
    clickCheckTarget() {
      const that = this
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return false
        }
        that.checkLoading = true
        checkTarget(that.form).then(res => {
          that.targetVal = res.body || 0
          that.checkLoading = false

          // if (that.targetVal <= 0) {
          //   that.$opsMessage.warn('没有检测到目标记录!')
          //   return
          // }

          that.$confirm(that.$t('pages.teamMember.confirm.restoreTarget', { target: that.targetVal }), that.$t('pages.teamMember.confirm.title'), {
            confirmButtonText: that.$t('pages.teamMember.confirm.confirm'),
            cancelButtonText: that.$t('pages.teamMember.confirm.cancel'),
            type: 'warning'
          }).then(() => {
            that.submitResetTarget()
          }).catch(() => {
          })
        }).catch(er => {
          that.checkLoading = false
        })
      })
    },
    clickCheckTargetLuckyGift() {
      const that = this
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return false
        }
        that.checkLoading = true
        checkTargetLuckyGift(that.form).then(res => {
          that.targetVal = res.body || 0
          that.checkLoading = false

          // if (that.targetVal <= 0) {
          //   that.$opsMessage.warn('没有检测到目标记录!')
          //   return
          // }

          that.$confirm(that.$t('pages.teamMember.confirm.restoreTarget', { target: that.targetVal }), that.$t('pages.teamMember.confirm.title'), {
            confirmButtonText: that.$t('pages.teamMember.confirm.confirm'),
            cancelButtonText: that.$t('pages.teamMember.confirm.cancel'),
            type: 'warning'
          }).then(() => {
            that.submitResetTarget()
          }).catch(() => {
          })
        }).catch(er => {
          that.checkLoading = false
        })
      })
    }
  }
}
</script>
