<template>
  <a-card :bordered="false">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="销售咨询" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入咨询电话"
            v-decorator="['basicInfoTel', {rules: [{required: true, message: '请输入咨询电话'}]}]"
          />
        </a-form-item>

        <a-form-item label="公司地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入公司地址"
            v-decorator="['basicInfoAddress', {rules: [{required: true, message: '请输入公司地址'}]}]"
          />
        </a-form-item>
        <a-form-item label="企业邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入企业邮箱"
            v-decorator="['basicInfoEmail', {rules: [{type: 'email', message: '请输入正确的企业邮箱'}, {required: true, message: '请输入企业邮箱'}]}]"
          />
        </a-form-item>
        <a-form-item label="备案信息" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入备案信息"
            v-decorator="['basicInfoRecord', {rules: [{required: true, message: '请输入备案信息'}]}]"
          />
        </a-form-item>
        <a-form-item label="上传二维码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback :required="true">
          <div>
            <upload-component
              ref="upLoadRef"
              :remarkTxt="remarkTxt"
              @uploadSuccess="uploadSuccess"
              v-decorator="[
                'basicInfoQrcode',
                {
                  trigger: 'change',
                  rules: [{ validator: checkimageUrl }]
                },
              ]"
            ></upload-component>
          </div>
        </a-form-item>

        <div style="text-align:center;">
          <a-button type="primary" @click="handleSubmit">编辑</a-button>
        </div>
      </a-form>
    </a-spin>
  </a-card>
</template>

<script>
import { addBasicInfo, findBasicInfo } from '@/api/modular/system/contentControlApi'
import uploadComponent from '@/components/upLoad'

export default {
  components: { uploadComponent },
  data () {
    return {
      loading: false,
      imageUrl: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      remarkTxt: '请上传200x200规格图像'
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    // 初始化方法
    initData () {
      findBasicInfo().then(res => {
        if (res.status === 200) {
          var record = res.data[0]
          if (record) {
            this.form.setFieldsValue(
              {
                basicInfoAddress: record.basicInfoAddress,
                basicInfoEmail: record.basicInfoEmail,
                basicInfoQrcode: record.basicInfoQrcode,
                basicInfoRecord: record.basicInfoRecord,
                basicInfoTel: record.basicInfoTel
              }
            )
            this.$nextTick(() => {
              this.$refs.upLoadRef.initData([record.basicInfoQrcode])
            })
          } else {
            this.$nextTick(() => {
              this.$refs.upLoadRef.initData([])
            })
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    handleSubmit () {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          addBasicInfo(values)
            .then(res => {
              if (res.status === 200) {
                this.$message.success('编辑成功')
                this.confirmLoading = false
              } else {
                this.$message.error('编辑失败：' + res.msg)
              }
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    uploadSuccess (avg) {
      if (avg.fileList[0]) {
        this.form.resetFields('basicInfoQrcode')
        this.form.setFieldsValue({ 'basicInfoQrcode': avg.fileList[0].uri })
      }
    },
    checkimageUrl (rule, value, callback) {
      if (value && value.length > 0) {
        callback()
        return
      }
      var text = '请上传二维码'
      callback(text)
    }
  }
}
</script>
