<template>
  <div class="weixin-config-page">
    <a-form
      class="form-wrap"
      :form="form"
      @submit="handleSubmit"
    >
      <a-spin :spinning="loadingData">
        <a-card title="微信配置">
          <a-row :gutter="24">
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item
                label="项目名"
              >
                <a-input
                  v-model="wxData.wx_name"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item label="appid">
                <a-input
                  v-model="wxData.wx_appid"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item
                label="app_secret"
              >
                <a-input
                  v-model="wxData.wx_app_secret"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item
                label="mchid"
              >
                <a-input
                  v-model="wxData.wx_mchid"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item label="mch_key">
                <a-input
                  v-model="wxData.wx_mch_key"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item label="mch_cert_p12">
                <!-- :file-list="fileList" -->
                <a-upload
                  :before-upload="beforeUpload"
                  name="file"
                >
                  <a-button>
                    <a-icon type="upload" /> 读取文件
                  </a-button>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="支付宝配置">
          <a-row :gutter="24">
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item
                label="appid"
              >
                <a-input
                  v-model="aliData.ali_appid"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item label="key_pem">
                <a-input
                  v-model="aliData.ali_key_pem"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item label="public_pem">
                <a-input
                  v-model="aliData.ali_public_pem"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="银联配置">
          <a-row :gutter="24">
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item
                label="instMid"
              >
                <a-input
                  v-model="umsData.ums_instMid"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item label="md5key">
                <a-input
                  v-model="umsData.ums_md5key"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item label="mid">
                <a-input
                  v-model="umsData.ums_mid"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item label="msgSrc">
                <a-input
                  v-model="umsData.ums_msgSrc"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item label="msgSrcId">
                <a-input
                  v-model="umsData.ums_msgSrcId"
                />
              </a-form-item>
            </a-col>
            <a-col
              :xl="8"
              :lg="8"
              :md="12"
            >
              <a-form-item label="tid">
                <a-input
                  v-model="umsData.ums_tid"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-spin>

      <div class="btns-wrap">
        <a-button
          type="primary"
          html-type="submit"
        >
          <a-icon type="save" /> 保存
        </a-button>
      </div>
    </a-form>
  </div>
</template>

<script>
import {
  getWeixinConfig, setWeixinConfig,
  getAliConfig, setAliConfig,
  getUmsConfig, setUmsConfig
} from '@/api/saleChannel/weixin'

export default {
  data () {
    return {
      form: this.$form.createForm(this),
      loadingData: true,
      wxData: {
        wx_name: null,
        wx_appid: null,
        wx_app_secret: null,
        wx_mchid: null,
        wx_mch_key: null,
        wx_mch_cert_p12: null
      },
      aliData: {
        ali_appid: null,
        ali_key_pem: null,
        ali_public_pem: null
      },
      umsData: {
        ums_instMid: null,
        ums_md5key: null,
        ums_mid: null,
        ums_msgSrc: null,
        ums_msgSrcId: null,
        ums_tid: null
      },
      fileList: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      this.loadingData = true
      await getWeixinConfig().then(res => {
        this.wxData = Object.assign({}, this.wxData, res.extraInfo)
      })
      await getAliConfig().then(res => {
        this.aliData = Object.assign({}, this.aliData, res.extraInfo)
      })
      await getUmsConfig().then(res => {
        this.umsData = Object.assign({}, this.umsData, res.extraInfo)
      })
      this.loadingData = false
    },
    beforeUpload (file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        const base64Str = e.target.result.split(',')[1]
        console.log(base64Str)
        this.wxData.wx_mch_cert_p12 = base64Str
        console.log(this.fileList)
      }
      return false
    },
    handleSubmit (e) {
      e.preventDefault()
      this.loadingData = true
      Object.keys(this.wxData).forEach(key => {
        this.wxData[key] = this.wxData[key] || null
      })
      Object.keys(this.aliData).forEach(key => {
        this.aliData[key] = this.aliData[key] || null
      })
      Object.keys(this.umsData).forEach(key => {
        this.umsData[key] = this.umsData[key] || null
      })
      Promise.all(
        [ setWeixinConfig(this.wxData), setAliConfig(this.aliData), setUmsConfig(this.umsData) ]
      ).then(res => {
        this.$message.success('保存成功')
        this.loadingData = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.weixin-config-page {
  // padding-top: 60px;
}
.btns-wrap{
  text-align: center;
}
</style>

<style lang="scss">
.weixin-config-page {
  .ant-form-item-label label{
    width: 120px; display: inline-block;
  }
}
</style>
