<style scoped lang="scss">
::v-deep.ant-form-item {
    margin-bottom: 10px !important;
}
.flex-main {
    display: flex;
    margin-bottom: 10px;
    p {
        color: black;
        font-weight: 600;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
    }
}
.config-check {
    width: 100%;
    display: flex;
    .config-check-one {
        width: 250px;
        height: 125px;
        border: 1px solid #f2f2f2;
        padding: 20px;
        display: flex;
        margin-right: 15px;
        border-radius: 10px;
        cursor: pointer;

        .config-check-one-left {
            width: 70%;
            height: 100%;
        }
        .config-check-one-right {
            width: 30%;
            height: 100%;
            position: relative;
        }
    }
    .config-check-active {
        border-color: rgb(38, 122, 251) !important;
    }
}
::v-deep .check-else .vue-treeselect__control {
    line-height: 20px !important;
}
::v-deep .check-else .ant-form-item-control {
    height: auto !important;
    line-height: 20px !important;
}
</style>
<template>
    <div ref="questionnaireBox" class="new-batch config-new-batch">
        <div class="chartBox">
            <a-row :gutter="20">
                <a-col :sm="24" style="margin-bottom: 20px; z-index: 10" id="container">
                    <a-card class="search-box step-jump">
                        <a-form layout="horizontal" v-bind="formItemLayout" :form="formProject">
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="项目名称">
                                        <span v-if="createTypeData.projectName">{{ createTypeData.projectName }}</span>
                                        <span v-else>-</span>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item v-bind="tailFormItemLayout">
                                        <a-button type="primary" @click="handleOkDownLoad" :loading="downLoading">导出渠道号模板</a-button>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="操作系统">
                                        <a-radio-group
                                            button-style="solid"
                                            v-decorator="[
                                                'plam_os',
                                                {
                                                    rules: [{ required: true, message: '是否关联单品必选' }],
                                                    initialValue: 1
                                                }
                                            ]"
                                        >
                                            <a-radio-button :value="1">安卓</a-radio-button>
                                            <a-radio-button :value="0" disabled>IOS</a-radio-button>
                                        </a-radio-group>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="上传图标">
                                        <uploadFile
                                            :value.sync="fileUrl"
                                            :multiple="false"
                                            :fileCount="1"
                                            uploadType="image"
                                            @overUpload="overUpload"
                                            :size="100"
                                        ></uploadFile>
                                        <p class="upload-txt-rules">
                                            文件格式：支持上传png/jpg/jpeg图片,尺寸450*450,小于100KB
                                        </p>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="上传文件" class="require-class fileUpload" id="fileUpload">
                                        <a-upload
                                            name="file"
                                            :multiple="false"
                                            :headers="tokenHeader"
                                            :file-list="fileList"
                                            :showUploadList="false"
                                            :beforeUpload="beforeUpload"
                                            @change="handleChange"
                                            style="margin-right: 20px"
                                        >
                                            <a-button :disabled="fileUrl == ''">
                                                <a-icon type="upload" />
                                                {{ loadDisabled ? '上传中,请稍后' : '文件上传' }}
                                            </a-button>
                                        </a-upload>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-card>
                </a-col>
            </a-row>
        </div>
        <div style="width:100%;display:flex;    justify-content: flex-end;">
            <a-button type="default" style="margin-right: 15px" @click="goBack">取消</a-button>
            <a-button type="primary" style="margin-right: 15px" @click="saveHandler" :loading="saveLoading"
                >确定</a-button
            >
        </div>
    </div>
</template>

<script>
// import EditableCell from './editablCell'
// import lookPreviewVue from './lookPreview.vue'
import Treeselect from '../../components/treeSelectProject.vue'
import treeSelectAccount from '../../components/treeSelectAccount.vue'
import selectTable from '@/views/modules/material/comment/selectTable.vue'
import selectTableProject from '@/views/modules/Statistics/components/selectPagination.vue'

import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import { mapGetters } from 'vuex'
import uploadFile from '../../components/uploadFile.vue'

import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import $ from 'jquery'
const fileSuffix = ['xlsx', 'xls', 'zip']
function tqFun(qcArr1) {
    var tempArr = []
    function bbFun(qcArr) {
        for (var i = 0; i < qcArr.length; i++) {
            if (qcArr[i] instanceof Array) {
                bbFun(qcArr[i])
            } else {
                tempArr.push(qcArr[i])
            }
        }
        return tempArr
    }
    return bbFun(qcArr1)
}

export default {
    name: 'GlobalHeader',
    components: {
        Treeselect,
        treeSelectAccount,
        selectTable,
        selectTableProject,
        uploadFile
    },
    data() {
        return {
            formProject: this.$form.createForm(this), //选择项目表单
            saveLoading: false,
            mode: 1,
            productId: '',
            projectId: '',
            downLoading:false,
            formItemLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 16 }
            },
            tailFormItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 16,
                        offset: 6
                    }
                }
            },
            createTypeData: { createType: '1', projectId: null, projectName: null },
            loadDisabled: false,
            fileUrl: '',
            tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
            fileList: [],
            dataFile: null
        }
    },
    computed: {},
    watch: {},
    mounted() {
        this.$nextTick(() => {
            this.createTypeData = JSON.parse(localStorage.getItem('channelInfo'))
        })
    },
    filters: {},
    methods: {
        ...mapGetters(['userInfo']),
        saveHandler() {
            if (!!this.fileUrl) {
                this.saveLoading = true
                if (this.dataFile) {
                    let formData = new FormData()
                    formData.append('file', this.dataFile)
                    formData.append('imageUrl', this.fileUrl)

                    postAction('/channel/importChannelExcel', formData).then(res => {
                        this.saveLoading = false
                        if (res.code === 200) {
                            this.$message.success(res.message)
                            localStorage.removeItem('channelInfo')
                            this.$router.replace('/autoLaunch/channelAdmin')
                            this.$bus.$emit('remove', '/autoLaunch/createChannelIndex')
                            this.$bus.$emit(
                                'remove',
                                '/autoLaunch/createChannelIndex?accountId=' + this.$route.query.accountId
                            )
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    this.saveLoading = false
                    this.$message.error('请上传文件')
                }

                return
            }else{
                this.$message.error('请上传文件')
            }
        },
        goBack() {
            localStorage.removeItem('channelInfo')
            this.$router.replace('/autoLaunch/channelAdmin')
            this.$bus.$emit('remove', '/autoLaunch/createChannelIndex')
            this.$bus.$emit('remove', '/autoLaunch/createChannelIndex?accountId=' + this.$route.query.accountId)
        },
        //获取表单的某一个属性值
        getFormData(className) {
            return this.formProject.getFieldValue(className)
        },
        handleOkDownLoad() {
            this.downLoading = true
            let params = {}
            params.productId = this.createTypeData.productId
            params.projectId = this.createTypeData.projectId
            params.userId = this.userInfo().id
            downFile('/channel/exportChannelTemplate', params).then(res => {
                let blob = new Blob([res], {
                    type: 'application/vnd.openxmlformats-officedocument.spre1adsheetml.sheet'
                })
                let downloadElement = document.createElement('a')
                let href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download = '渠道号模板.xlsx' //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
                this.downLoading = false
            })
        },
        overUpload(file) {},
        handleChange() {
            this.loadDisabled = false
            this.$message.success('文件导入成功')
        },
        beforeUpload(file) {
            this.dataFile = $('.fileUpload')
                .eq(0)
                .find('input')[0].files[0]
            this.loadDisabled = true
            const size = (Number(file.size) / (1024 * 1024)).toFixed(2)
            const fileName = file.name
            const fileStrArr = fileName.split('.')
            const suffix = fileStrArr[fileStrArr.length - 1]

            let result = fileSuffix.some(item => {
                return item === suffix
            })

            if (!result) {
                this.$message.error('不支持该文件类型')
                this.loadDisabled = false
                return Promise.reject()
            }
        }
    }
}
</script>
