<template>
  <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      width="900px"
      :visible.sync="visible"
      @opened="handleDialogOpened"
  >
    <div v-loading="loading" element-loading-text="拼命加载中......请稍等">
      <el-form label-width="180px">
        <el-form-item>
          <el-radio-group
              v-model="interactType"
              @change="handleInteractTypeChange"
          >
            <el-radio label="1">交付邮箱</el-radio>
            <el-radio label="2">交付短信</el-radio>
            <el-radio label="3">发票下载</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="this.interactType !== '3'" label="电子发票交付方式：">
          <el-input
              style="width: 400px"
              placeholder
              type="email"
              v-model="interactTypeDetailEmail"
              v-if="interactType === '1'"
          >
            <template slot="prepend">交付邮箱</template>
          </el-input>
          <el-popover
              width="400"
              placement="top-start"
              trigger="manual"
              content="您的短信余量不足，请点击右侧短信充值，或切换为交付邮箱。"
              v-if="interactType === '2'"
              v-model="popoverSMS"
          >
            <div slot="reference">
              <el-input
                  style="width: 400px"
                  placeholder
                  maxlength="11"
                  type="tel"
                  oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                  v-model="interactTypeDetailTel"
                  @blur="handleTelChange"
              >
                <template slot="prepend">移动电话</template>
              </el-input>
              <span style="margin-left: 20px">
                                短信余量：{{ numberSMS }}
                            </span>
              <!-- <el-button
                  type="text"
                  style="margin-left: 10px"
                  >短信充值
              </el-button> -->
            </div>
          </el-popover>
        </el-form-item>
        <br/>
        <el-form-item>
          <el-button
              type="primary"
              icon="el-icon-check"
              @click="handleSubmit"
              :disabled="submitDisabled"
          >确定交付
          </el-button
          >
          <el-button @click="visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import MarketingService from '@/api/marketing'

export default {
  name: 'InvoiceDeliveryDialog',
  data() {
    return {
      visible: false,
      loading: false,
      interactType: '1', // 交付类型
      interactTypeDetailEmail: '', // 交付输入邮箱信息
      interactTypeDetailTel: '', // 交付输入电话信息
      popoverSMS: false, // 短信不足提示开关
      numberSMS: 0, // 短信数量
      initStatusSMS: false, // 是否初始化过短信信息
      pdfUrl: ''
    }
  },
  computed: {
    submitDisabled() {
      return !this.getInteractTypeDetail()
    },
  },
  created() {
    console.log('12321321321')
  },
  mounted() {
    console.log('shuhjska')
    console.log(this)
  },
  methods: {
    handleDialogOpened() {
      // 打开弹窗 初始化数据
      this.loading = false
      this.interactType = '1'
      this.interactTypeDetailEmail = ''
      this.interactTypeDetailTel = ''
      this.popoverSMS = false
      this.numberSMS = 0
      this.initStatusSMS = false
    },
    // 交付类型变更后
    handleInteractTypeChange() {
      // 短信交付 短信服务信息获取
      let _this = this
      if (this.interactType === '2' && !this.initStatusSMS) {
        _this.loading = true
        MarketingService.findEntFeaturesBySMS()
            .then((val) => {
              console.log('短信信息')
              console.log(val)
              if (val) {
                _this.initStatusSMS = true
                _this.numberSMS = parseFloat(val.surplus)
                _this.popoverSMS = _this.numberSMS < 1
              }
            })
            .catch((err) => {
              _this.$message.error(err)
            })
            .finally(() => {
              _this.loading = false
            })
      }
      if (this.interactType === '3') {
         this.pdfUrl = this.url + '.pdf'
      }
    },
    // 监控交付手机号码只能输入数字
    handleTelChange(e) {
      this.deliverData = e.target.value
    },
    handleSubmit() {
      let interactTypeDetailTemp = ''
      if (this.interactType === '1') {
        interactTypeDetailTemp = this.interactTypeDetailEmail
      } else if (this.interactType === '2') {
        interactTypeDetailTemp = this.interactTypeDetailTel
      } else if (this.interactType === '3') {
        console.log(this.pdfUrl)
        window.open(this.pdfUrl)
      }
      if (this.interactType !== '3') {
        this.$emit('submit', this.interactType, interactTypeDetailTemp)
      }
    },
    // 获取交付类型对应的输入信息
    getInteractTypeDetail() {
      let result = ''
      if (this.interactType === '1') {
        result = this.interactTypeDetailEmail
      } else if (this.interactType === '2') {
        result = this.interactTypeDetailTel
      } else if (this.interactType === '3') {
        result = true
      }
      return result
    },
  }
}
</script>
