<template>
  <el-row v-loading="dataListLoading">
    <el-col>
      <el-form :model="dataForm" :rules="formConfig.rules" label-width="120px" @keyup.enter.native="getDataList()"
               ref="dataForm">
        <el-form-item :label="formConfig.label.title" prop="title" v-show="formConfig.label.title">
          <el-input v-model="dataForm.title" :placeholder="formConfig.placeholder.title" clearable></el-input>
        </el-form-item>
        <el-form-item :label="formConfig.label.productId" prop="productId">
          <el-input v-model="dataForm.productId" :placeholder="formConfig.placeholder.productId" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="getDataList()">生成</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col>
      <div class="qr-code" ref="myQrCode"></div>
    </el-col>
  </el-row>
</template>

<script>
import QRCode from 'qrcodejs2'

export default {
  name: 'commonform',
  props: {
    formConfig: {
      type: Object,
      default: function () {
        return {
          label: {
            title: '',
            productId: ''
          },
          placeholder: {
            title: '',
            productId: ''
          },
          rules: {}
        }
      }
    },
    promoteType: {
      type: Number,
      default: 0 // 卡首屏类型(0关键词1找相似入口2洋淘秀3猜你喜欢)
    }
  },
  data () {
    return {
      dataForm: {
        title: '', // 单鞋
        productId: '' // 562665685690
      },
      dataListLoading: false,
      qrcode: null
    }
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/tb/kashouping'),
          method: 'POST',
          data: this.$http.adornData({
            'title': this.dataForm.title,
            'type': this.promoteType,
            'productId': this.dataForm.productId
          })
        }).then(({ data }) => {
          if (data.status) {
            const { url } = data.data
            this.$nextTick(() => {
              this.createQRCode(decodeURIComponent(url))
            })
          } else {
            this.$message.error(data.msg)
          }
          this.dataListLoading = false
        })
      })
    },
    createQRCode (link) {
      this.qrcode = new QRCode(this.$refs.myQrCode, {
        width: 140,
        height: 140,
        text: link,
        colorDark: '#000',
        colorLight: '#fff'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$--color-primary: #3E8EF7;
/deep/ .el-form-item {
  .el-form-item__content {
    button {
      width: 160px;
    }
  }
}

.qr-code {
  /deep/ img {
    margin: 0 auto;
  }
}
</style>
