<template>
  <div class="activation-box">
    <cy-dialog ref="dialog" title="账户激活操作指引" width="800px">
      <div style="font-size: 18px; color: #292929;font-weight: 600;">请在<span style="color: #FE7D0B"> {{ payTime }} </span>前</div>
      <div style="color: #292929; margin-top: 5px;">使用绑定账户中的 银行账户（<span style="color: #FE7D0B">{{ `${bindCardName}:${bindCardNumber}` }}</span>）汇款至下述账户：</div>
      <el-form
        ref="ruleFormRef"
        :key="ruleFormKey"
        :model="ruleForm"
        :rules="rules"
        label-position="left"
        label-width="90px"
        style="margin-top: 20px;"
      >
        <el-form-item label="汇款金额：" style="width: 100%;">
          <cy-amount-input
            v-model="ruleForm.actvtAmt"
            placeholder="请输入汇款金额"
            disabled
          />
        </el-form-item>
        <el-form-item label="收款卡号：" style="width: 100%;">
          <el-input
            v-model="ruleForm.accountNumber"
            placeholder="请输入收款卡号"
            disabled
          >
            <template #append>
              <div style="margin-left: 10px;">
                <el-button v-clipboard:copy="ruleForm.accountNumber" v-clipboard:success="copySuccess" type="text" icon="iconfont icon-a-Group779" />
              </div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="收款户名：" style="width: 100%;">
          <el-input
            v-model="ruleForm.accountName"
            placeholder="请输入收款户名"
            disabled
          />
        </el-form-item>
        <el-form-item label="说明信息：" style="width: 100%;">
          <el-input
            v-model="ruleForm.remark"
            placeholder="请输入说明信息"
            disabled
          />
        </el-form-item>
      </el-form>
      <div class="btn" @click="openDialog(false)">
        <div>我知道了</div>
        <div v-if="showCountDown" class="count-down">
          （
          <div><span>倒计时:</span></div>
          <div>
            <count-down
              :current-time="countDownStart"
              :start-time="countDownStart"
              :end-time="countDownEnd"
              :tip-text="'距离开始文字1'"
              :tip-text-end="'距离结束文字1'"
              :end-text="'结束自定义文字2'"
              :day-txt="'天'"
              :hour-txt="'小时'"
              :minutes-txt="'分钟'"
              :seconds-txt="'秒'"
              @start_callback="startCall"
              @end_callback="endCall"
            />
          </div>
          ）
        </div>
      </div>
      <div class="contact-us">
        账户激活过程中，如有任何问题请联系您的业务经理或联系客服： <br />
        服务邮箱：citp@changan-inkasso.com <br />
        服务电话：029-86689192
      </div>
    </cy-dialog>
  </div>
</template>

<script>
// 到计时文档 https://github.com/Gala-1024/vue2-countdown?tab=readme-ov-file
import CountDown from 'vue2-countdown'
export default {
  components: {
    CountDown
  },
  props: {
    activeInfo: {
      type: Object,
      default: () => {}
    },
    accountName: {
      type: String,
      default: ''
    },
    accountNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {
        actvtAmt: '',
        accountName: '',
        accountNumber: '',
        remark: '激活账户入金验证'
      },
      payTime: '',
      bindCardName: '',
      bindCardNumber: '',
      timeReduce: 48 * 60 * 60 * 1000,
      rules: {},
      ruleFormKey: 0,
      countDownNow: new Date().getTime(),
      countDownStart: 0,
      countDownEnd: 0,
      showCountDown: true
    }
  },
  watch: {
    accountName: {
      handler(val) {
        if (val) {
          this.ruleForm.accountName = val
        }
      },
      immediate: true
    },
    accountNumber: {
      handler(val) {
        if (val) {
          this.ruleForm.accountNumber = val
        }
      },
      immediate: true
    },
    activeInfo: {
      handler(val) {
        console.log('activeInfo-----', val)
        if (val && Object.keys(val).length) {
          this.payTime = this.calcTimes(val.moneyConfirmStartTime)
          this.countDownEnd = new Date(this.payTime).getTime() || 0
          this.countDownStart = new Date().getTime()
          this.bindCardName = val.bindAcctNoAcctNme
          this.bindCardNumber = val.bindAcctNo
          this.ruleForm.actvtAmt = val.actvtAmt
        }
      }
    }
  },
  methods: {
    openDialog(status) {
      this.$refs.dialog.show = status
      this.ruleFormKey += 1

      if (status && this.activeInfo && this.activeInfo.moneyConfirmStartTime) {
        this.payTime = this.calcTimes(this.activeInfo.moneyConfirmStartTime)
        this.countDownEnd = new Date(this.payTime).getTime() || 0
        this.countDownStart = new Date().getTime()
      }

      if (status && this.activeInfo && this.activeInfo.actvtAmt) {
        this.ruleForm.actvtAmt = this.activeInfo.actvtAmt
      }
    },
    // 默认+48小时
    calcTimes(time) {
      if (!time) return ''
      const givenTime = new Date(time.replace(/-/g, '/'))
      const newTime = new Date(givenTime.getTime() + this.timeReduce)
      const formattedTime = newTime.getFullYear() + '-' +
      String(newTime.getMonth() + 1).padStart(2, '0') + '-' +
      String(newTime.getDate()).padStart(2, '0') + ' ' +
      String(newTime.getHours()).padStart(2, '0') + ':' +
      String(newTime.getMinutes()).padStart(2, '0') + ':' +
      String(newTime.getSeconds()).padStart(2, '0')

      return formattedTime || ''
    },
    startCall() {
      this.showCountDown = true
    },
    endCall(status) {
      console.log('end call_____________', status)
      this.showCountDown = false
    },
    copySuccess() {
      this.$message.success('复制成功')
    }
  }
}
</script>

<style lang="scss">
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FE7D0B;
  min-height: 30px;
  border-radius: 5px;
  padding: 6px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  max-width: 360px;
  height: 46px;
  margin: 0 auto;
  margin-top: 50px;
  cursor: pointer;
  .count-down {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.activation-box {
  .btn {
    .count-down {
      p {
        span {
          margin-right: 4px;
        }
        i {
          margin-right: 4px;
          font-style: normal;
        }
      }
    }
  }
}

.contact-us {
  width: 100%;
  color: #A3A8AC;
  font-size: 14px;
  line-height: 20px;
  margin-top: 30px;
}
</style>
