<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">

      <a-form-item
        label="户一快手后台数据上传"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <upload-to-ali v-model="accountOneKsDataUrl"
                       :customDomain="customDomain"
                       preview
                       :region="region"
                       :bucket="bucket"
                       :accept="acceptcsv"
                       :size="102400"
                       :accessKeyId="accessKeyId"
                       :accessKeySecret="accessKeySecret"></upload-to-ali>
      </a-form-item>

      <a-form-item
        label="户四快手后台数据上传"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <upload-to-ali v-model="accountFourKsDataUrl"
                       :customDomain="customDomain"
                       preview
                       :region="region"
                       :bucket="bucket"
                       :accept="acceptcsv"
                       :size="102400"
                       :accessKeyId="accessKeyId"
                       :accessKeySecret="accessKeySecret"></upload-to-ali>
      </a-form-item>

      <a-form-item
        label="借条后台数据上传"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <upload-to-ali v-model="debitDataUrl"
                       :customDomain="customDomain"
                       preview
                       :region="region"
                       :bucket="bucket"
                       :accept="acceptcsv"
                       :size="102400"
                       :accessKeyId="accessKeyId"
                       :accessKeySecret="accessKeySecret"></upload-to-ali>
      </a-form-item>
      <a-form-item
        label="文件下载"
        v-if="showDownLoad"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a style="margin-left: 8px" :href="downloadUrl" target="_blank">点击下载</a>
      </a-form-item>

      <a-form-item
        :wrapperCol="{ span: 24 }"
        style="text-align: center"
      >
        <a-button htmlType="submit" type="primary">提交</a-button>
        <a-button style="margin-left: 8px">保存</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import UploadToAli from '@femessage/upload-to-ali';
  import {postAction, getAction} from '@/api/manage';
  import moment from 'moment';
  import AFormItem from "ant-design-vue/es/form/FormItem";

  export default {
    name: 'BaseForm',
    data() {
      return {
        previewVisible: false,
        previewImage: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        showDownLoad:false,
        filepath:'',
        downloadUrl:'',
        debitDataUrl:'',
        accountFourKsDataUrl:'',
        accountOneKsDataUrl:'',
        fileList:[],
        accessKeyId:'LTAIbNbqWzSOklQV',
        accessKeySecret:'1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
        bucket:'ctop-media',
        region:'oss-cn-beijing',
        acceptcsv:'application/vnd.ms-excel,text/csv',
        customDomain:'',
        options:[],
        loading: false,
        form: this.$form.createForm(this),
        url: {
          uploadUrl:'/report/debitAuto',
          downloadUrl:'/report/download/file'
        }
      }
    },
    components:{
      AFormItem,
      UploadToAli
    },
    methods: {
      moment,
      handleSubmit(e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);

            let params = {};
            params.accountOneKsDataUrl = this.accountOneKsDataUrl;
            params.accountFourKsDataUrl = this.accountFourKsDataUrl;
            params.debitDataUrl = this.debitDataUrl;
            console.log(params)
            postAction(this.url.uploadUrl,params).then((res)=>{
              console.log(res)
              if(res.success){
                this.filepath = res.path;
                this.downloadUrl = "http://api.tjyourong.com.cn/jeecg-boot/"+this.url.downloadUrl+"?path="+this.filepath;
                this.showDownLoad = true;
              }else{
                alert(res.message);
                this.showDownLoad = false;
              }
            });

          }
        })
      },
      onChange(value) {
        console.log(value)
      }
    },
    created: function () {
    }
  }
</script>