<style scoped lang="scss">
.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="选择渠道号的创建方式">
                                        <div class="config-check">
                                            <div
                                                class="config-check-one "
                                                :class="{ 'config-check-active': mode == 1 }"
                                                @click="checkMode(1)"
                                            >
                                                <div class="config-check-one-left">
                                                    <h3 style="font-weight: bold;">系统生成</h3>
                                                    <p style="line-height: 20px;border:0px;padding:0">适用于渠道号比较固定的客户和产品</p>
                                                </div>
                                                <div class="config-check-one-right">
                                                    <img
                                                        src="./images/system.png"
                                                        style="width:100%;height:auto;position:absolute;top:20%"
                                                        alt=""
                                                    />
                                                </div>
                                            </div>
                                            <div
                                                class="config-check-one"
                                                :class="{ 'config-check-active': mode == 2 }"
                                                @click="checkMode(2)"
                                            >
                                                <div class="config-check-one-left">
                                                    <h3 style="font-weight: bold;">文件上传</h3>
                                                    <p style="line-height: 20px;border:0px;padding:0">适用于渠道号无明显规律的产品</p>
                                                </div>
                                                <div class="config-check-one-right">
                                                    <img
                                                        src="./images/upload.png"
                                                        style="width:100%;height:auto;position:absolute;top:20%"
                                                        alt=""
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div v-if="mode == 1">
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="使用范围">
                                            <a-radio-group
                                                button-style="solid"
                                                v-decorator="[
                                                    'usageRange',
                                                    {
                                                        rules: [{ required: true, message: '使用范围必选' }],
                                                        initialValue: 2
                                                    }
                                                ]"
                                            >
                                                <a-radio-button :value="2">项目</a-radio-button>
                                                <a-radio-button :value="1">账户</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row
                                    :gutter="16"
                                    v-if="getFormData('usageRange') == 2 || getFormData('usageRange') == undefined"
                                    class="check-else"
                                >
                                    <a-col :span="16">
                                        <a-form-item label="选择项目">
                                            <Treeselect
                                                style="width:600px"
                                                v-decorator="[
                                                    'projectId',
                                                    {
                                                        rules: [{ required: true, message: '请选择项目' }]
                                                    }
                                                ]"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16" v-else class="check-else">
                                    <a-col :span="16">
                                        <a-form-item label="选择账户">
                                            <treeSelectAccount
                                                style="width:600px"
                                                :appId="getFormData('accountId')"
                                                v-decorator="[
                                                    'accountId',
                                                    {
                                                        rules: [{ required: true, message: '请选择账户' }]
                                                    }
                                                ]"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </div>
                            <!-- <selectTable :projectId.sync="productIdDownLoad" ref="selectTableDownLoad"></selectTable>
            <selectTableProject
                :projectId.sync="projectIdDownLoad"
                :productId="productIdDownLoad"
                ref="selectTableProjectDownLoad"
            ></selectTableProject> -->
                            <div v-else-if="mode == 2">
                                <a-row :gutter="16" class="check-else">
                                    <a-col :span="16">
                                        <!-- <a-form-item label="选择项目">
                                            <Treeselect
                                                style="width:600px"
                                                v-decorator="[
                                                    'projectId',
                                                    {
                                                        rules: [{ required: true, message: '项目必选' }]
                                                    }
                                                ]"
                                            />
                                        </a-form-item> -->
                                        <selectTable
                                            requireCheck
                                            :projectId.sync="productId"
                                            ref="selectTableDownLoad"
                                            :labelCol="formItemLayout.labelCol"
                                        ></selectTable>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16" class="check-else">
                                    <a-col :span="16">
                                        <selectTableProject
                                            requireCheck
                                            :projectId.sync="projectId"
                                            :productId="productId"
                                            ref="selectTableProjectDownLoad"
                                            :labelCol="formItemLayout.labelCol"
                                        ></selectTableProject>
                                    </a-col>
                                </a-row>
                            </div>
                        </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'
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
    },
    data() {
        return {
            formProject: this.$form.createForm(this), //选择项目表单
            saveLoading: false,
            mode: 1,
            productId: '',
            projectId: '',
            formItemLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 16 }
            },
            tailFormItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 18,
                        offset: 6
                    }
                }
            }
        }
    },
    computed: {},
    watch: {
        productId: function(n, o) {
            if (n != '') {
                this.$refs.selectTableProjectDownLoad.keyValue = ''
                this.$refs.selectTableProjectDownLoad.getData(n)
            }
        }
    },
    mounted() {
        if (this.$route) {
            let editRecordId = this.$route.query.accountId
            if (editRecordId) {
                this.$nextTick(() => {
                    this.formProject.setFieldsValue({ usageRange: 1 })
                    setTimeout(() => {
                        this.formProject.setFieldsValue({ accountId: Number(editRecordId) })
                        this.accountId = Number(editRecordId)
                    }, 100)
                })
            }
        }
    },
    filters: {},
    methods: {
        saveHandler() {
            let params = {}

            if (this.mode == 1) {
                this.formProject.validateFields((err, values) => {
                    if (!err) {
                        params.usageRange = values.usageRange
                        if (values.usageRange == 2) {
                            params.projectId = values.projectId
                        } else if (values.usageRange == 1) {
                            params.accountId = values.accountId
                        }
                        params.createType = '1'
                        localStorage.setItem('channelInfo', JSON.stringify(params))
                        this.$emit('nextStep')
                    } else {
                        return
                    }
                })
            } else if (this.mode == 2) {
                if (!!this.productId && !!this.projectId) {
                    params.projectId = this.projectId
                    params.productId = this.productId
                    params.projectName = this.$refs.selectTableProjectDownLoad.keyValue
                    params.createType = '2'
                    localStorage.setItem('channelInfo', JSON.stringify(params))
                    this.$emit('nextStep')
                } else {
                    this.$message.error('创建方式为文件上传，请选择产品名称和项目名称')
                    return
                }
            }
        },
        goBack() {
            this.$router.replace('/autoLaunch/channelAdmin')
            
            this.$bus.$emit('remove', '/autoLaunch/createChannelIndex')
            this.$bus.$emit('remove', '/autoLaunch/createChannelIndex?accountId='+this.$route.query.accountId)
        },
        checkMode(key) {
            this.mode = key
            this.productId = ''
            this.projectId = ''
        },
        //获取表单的某一个属性值
        getFormData(className) {
            return this.formProject.getFieldValue(className)
        }
    }
}
</script>
