<template>
    <a-modal title="名单导入" :visible="childShow"  @cancel="uploadCancel"
    :width=700 >
    <a-steps :current="current">
      <a-step v-for="item in steps" :key="item.title" :title="item.title" />
    </a-steps>
    <template v-if="current == 0">
        <a-row  style="margin-top: 20px;">
            <a-col :span="12" style="text-align: left;">
                <a-upload
                    :fileList="files"
                    :headers ="headers"
                    list-type="text"
                    :beforeUpload = "beforeUpload"
                    :remove = "remove"
                    :multiple = "false"
                    :customRequest="customRequest">
                    <a-button> <a-icon type="upload" />选择文件</a-button>
                </a-upload>
            </a-col>
            <a-col :span="4" style="text-align: left;">
                <a href="http://admin.milicode.cn/jeecgboot/excel/customerInfos.xlsx" >下载导入模板</a>
            </a-col>
            <a-col :span="8"></a-col>
        </a-row>
        <a-divider  dashed />
        <a-row v-if="channelShow">
            <j-dict-select-tag style="width: 195px" type="list" v-model="channel" dictCode="customer_channel" placeholder="请选择渠道" />
        </a-row>
        <a-divider v-if="channelShow" dashed />
        <a-row>
            <a-col style="color:#999;">名单导入须知：</a-col>
        </a-row>
        <a-row>
            <a-col style="color:#999;">1、系统内已存在相同手机号的名单允许去重导入；</a-col>
        </a-row>
        <a-row>
            <a-col style="color:#999;">2、表格内存在相同手机号的名单不允许导入</a-col>
        </a-row>
        <a-row>
            <a-col style="color:#999;">3、一次最多能导入1000条数据；</a-col>
        </a-row>
    </template>
    <template v-if="current == 1">
        <a-row >
        <a-col :span="24">
            <textarea rows="15" style="width: 100%; margin-top:10px" :disabled="true">{{ result }}</textarea>
        </a-col>
    </a-row>
    </template>    
    <template slot="footer">
        <a-button v-if="current == 0" type="primary" @click="excelImport">上传</a-button>
        <a-button v-if="current == 0" @click="uploadCancel" >取消</a-button>
        <a-button v-if="current == 1 && errorStatus == false" type="primary" @click="reIpmort">重新上传</a-button>
        <a-button v-if="current == 1 && errorStatus == true" type="primary" @click="sucessIpmort">上传成功</a-button>
        <a-button v-if="current == 2" type="primary" @click="fileDone">完成</a-button>
      </template>
    </a-modal>
  </template>
  <script>
  
  import { postAction } from '@/api/manage'
  import { axios } from '@/utils/request'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import Vue from 'vue'
  export default {
    name: 'Upload',
    data () {
      return {
        current: 0,
        uplaodUrl: window._CONFIG['domianURL']+"/sys/common/uploadExcel",
        files: [],
        deleteFileList: undefined,
        headers: undefined,
        channel: undefined,
        errorStatus: false,
        pass: false,
        result: undefined,
        channelShow: false,
        steps: [
            {
            title: '选取文件',
            content: 'First-content',
            },
            {
            title: '数据校验',
            content: 'Second-content',
            },
            {
            title: '导入成功',
            content: 'Last-content',
            },
        ]
      }
    },
    props: ['childShow','dataPara','addStatus'],
    watch: {
      immediate: true,
      childShow: {
        handler() {
            const token = Vue.ls.get(ACCESS_TOKEN);
            this.headers = {"X-Access-Token":token}
            this.files = [];
            this.deleteFileList = undefined;
            this.channelShow = false;
            this.current = 0;
            this.result = undefined;
            this.errorStatus = false;
        },
      }
    },
    methods: {
        uploadCancel() {
            // 如果有文件 删除
            this.remove();
            this.$emit('childReturn', false);
        },
        excelImport() {
            //先保存文件，然后获取文件名，上传插入数据 
            if(this.files.length === 0) {
                this.$message.warning('请上传文件');
                return false
            }
            if(this.channel === undefined || this.channel === '') {
                this.$message.warning('请选择渠道');
                return false
            }
            let para = {
                name: this.files[0].name,
                channel: this.channel
            }
            postAction("/customer/customerBusiness/importExcel", para).then((res) => {
                if(res.success) {
                    this.result = "导入成功";
                    this.errorStatus = true;
                     //请求 把结果给 current2
                    this.current = this.current + 1
                } else {
                    this.result = res.message;
                    this.errorStatus = false;
                     //请求 把结果给 current2
                     this.current = this.current + 1
                }
            });
        },
        reIpmort() {
            this.current = this.current - 1
        },
        sucessIpmort() {
            this.current = this.current + 1
        },
        fileDone() {
            this.$emit('childReturn', false);
        },
        beforeUpload(file) { //验证扩展名和大小
            var nameTemp = file.name.split(".");
            var fileType = nameTemp[1];
            if(fileType.indexOf('xls')<0 && fileType.indexOf('xlsx')<0 && fileType.indexOf('XLS')<0 && fileType.indexOf('XLSX')<0 ){
                this.$message.warning('请上excle文件');
                this.files = [];
                return false;
            }
            if (file.size > 10000000 ) {
                this.$message.warning('文件太大');
                this.files = [];
                return false;
            }
            //删除原有文件
            if(this.deleteFileList !== undefined && this.deleteFileList !== "") {
                this.remove();
                this.files = [];
                this.files.push(file)
            } else {
                this.files.push(file)
            }
            this.channelShow = true;
        },
        customRequest(info) { // 使用axios 请求
            const formData = new FormData()
            let names = info.file.name.split(".");
            Object.defineProperty(info.file,'name',{
                writable:true,//设置属性为可写
            })
            let fileName = names[0]+ new Date().getTime() + "." + names[names.length-1];
            info.file.name = fileName
            formData.append('file', info.file)
            formData.append('filename', fileName)
            this.deleteFileList = fileName;
            axios({
                url: this.uplaodUrl,
                method: "POST",
                data: this.paramJson,
                headers: this.headers,
                data: formData,
                processData: false,
            })
        },
        remove() {
            let para = {
                name: this.deleteFileList
            }
            postAction("/sys/common/delExcel", para).then((res) => {
                
            });
            this.files = [];
            this.channelShow = false;
        }
    }
  }
  </script>
  