<template>
    <div class="marketplacepick-all">
        <div class="marketplacepick-form" v-loading.fullscreen.lock="fullscreenLoading">
            <div class="addbox">
                <div class="addbox-title">需求收集</div>
                <div style="display: flex;align-items: center;">
                    <el-button @click="GroupOrderPreInfoDel" v-if="formid!=0" style="margin-right: 5px;" size="mini" type="danger">作废</el-button>
                    <div @click="additionsj" class="addbox-img"><img src="../assets/shoujitianjia.png" /></div>
                </div>
            </div>
            <div class="marketplacepick-form-head">
                <el-select @change="GroupOrderPreInfochange" style="width: 357px;margin-bottom: 10px;" v-model="tempId"
                    clearable placeholder="请选择">
                    <el-option v-for="item in tempDatas" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <el-autocomplete placeholder="请输入标题" style="width: 357px;margin-bottom: 10px;" popper-class="el-autocomplete-suggestion" :popper-append-to-body="false" class="inline-input"
                    size="medium" v-model.trim="formname" :fetch-suggestions="querySearch"
                    @select="formnameselect">
                </el-autocomplete>
                <el-select filterable style="width: 357px;margin-bottom: 10px;" v-model="groupId" clearable placeholder="请选择">
                    <el-option v-for="item in groupNames" :key="item.id" :label="item.groupName" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <div class="marketplacepick-form-ul">
                    <div class="marketplacepick-form-li" v-for="(item,index) in controlarr" :key="index">
                        <el-form-item :label="item.fieldName">
                            <el-input v-if="item.fieldTypeName == '文本'" v-model="item.newValue"></el-input>
                            <el-input id="marketplacepicknumber" v-if="item.fieldTypeName == '数字'"
                                :controls="false" v-model="item.newValue"></el-input>
                            <el-radio-group v-if="item.fieldTypeName == '单选按钮'" v-model="item.newValue">
                                <el-radio label="有"></el-radio>
                                <el-radio label="无"></el-radio>
                            </el-radio-group>
                            <el-select ref="multiSelect" @change="PromptChecked(item.newValue)" filterable
                                v-if="item.fieldTypeName == '搜索框' && item.fieldName == '出访国家（地、区）'"
                                v-model="item.newValue" multiple placeholder="请选择">
                                <el-option v-for="item in countryarr" :key="item.value" :label="item.value"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select ref="csmultiSelect" @change="CSPromptChecked" filterable v-if="item.fieldTypeName == '搜索框' && item.fieldName == '涉及城市'"
                                v-model="item.newValue" multiple placeholder="请选择">
                                <el-option v-for="item in cityarr" :key="item.value" :label="item.value"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <!-- <el-autocomplete v-if="item.fieldTypeName=='搜索框'&&item.fieldName=='出访国家（地、区）'" popper-class="el-autocomplete-suggestion" :popper-append-to-body="false"
                                class="inline-input" size="medium" v-model.trim="item.newValue"
                                :fetch-suggestions="querySearch" @input="InputValue(item.newValue)" @select="PromptChecked(item)"
                                >
                            </el-autocomplete> -->
                        </el-form-item>
                        <el-form-item v-if="item.isRemark">
                            <el-input v-if="item.fieldTypeName == '单选按钮'" placeholder="如果有，请输入具体需求" type="textarea" v-model="item.remark"></el-input>
                            <el-input v-else type="textarea" placeholder="备注" v-model="item.remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="text-align: right;margin-bottom: 25px;">
                    <el-button @click="GroupOrderPreInfoSave" type="primary">保 存</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            formid:'',
            formname:'',
            tempId:1404,
            controlarr:[],
            tempDatas:[],
            countryarr:[],
            cityarr:[],
            names:[],
            groupId:'',
            groupNames:[],
            userid:'',
            fullscreenLoading:false,
        }
    },
    methods:{
        //或取基础数据
        GroupOrderPreInfos(val) {
            this.fullscreenLoading=true;
            var url = "/api/Groups/GroupOrderPreInfo/"+this.userid
            var that = this
            this.$axios({
                method: 'get',
                url: url,
            }).then(function (res) {
                var basicsdata=res.data.data
                if (res.data.code==200) {
                    that.tempDatas=basicsdata.tempDatas;
                    
                    that.names = basicsdata.names.map((terminal) => {
                        return {
                            id:terminal.id,
                            value: terminal.name,
                        };
                    });
                    if (!val) {
                        that.tempId=that.tempDatas[0].id;
                        that.formid=0;
                        that.formname='';
                    }
                    // that.names=basicsdata.names;
                    that.groupNames=basicsdata.groupNames.data;

                    that.GroupOrderPreInfo();
                }else{
                    that.fullscreenLoading=false;
                    that.$message.error(res.data.msg);
                }
            })
        },
        //或取国家
        CountryInit() {
            var url = "/api/Groups/CountryInit"
            var that = this
            this.$axios({
                method: 'get',
                url: url,
            }).then(function (res) {
                var countryarr=res.data.data;
                if (res.data.code==200) {
                    that.countryarr = countryarr.map((terminal) => {
                        return {
                            value: terminal,
                        };
                    });
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //或取城市
        CityByCountry(val) {
            console.log(val);
            var url = "/api/Groups/CityByCountry/"+val
            var that = this
            this.$axios({
                method: 'get',
                url: url,
            }).then(function (res) {
                if (res.data.code==200) {
                    var cityarr=res.data.data;
                    that.cityarr = cityarr.map((terminal) => {
                        return {
                            value: terminal,
                        };
                    });
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //xj
        additionsj(){
            this.formname='',
            this.formid=0;
            this.groupId='';
            this.GroupOrderPreInfo();
        },
        querySearch(queryString, cb) {
            var restaurants = this.names;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            var queryStrings=queryString.split('、')
            return (restaurant) => {
                return restaurant.value.replace("  ", "").toLowerCase().match(queryStrings[queryStrings.length-1].toLowerCase());
            };
        },
        formnameselect(val){
            this.formid=val.id;
            this.GroupOrderPreInfo();
        },
        PromptChecked(val){
            setTimeout(()=>{
                this.$refs.multiSelect[0].blur();
            },50)
            var gjval='';
            val.map((value)=>{
                gjval+=value+','
            })
            gjval=gjval.substring(0,gjval.length-1)
            this.CityByCountry(gjval)

        },
        CSPromptChecked(){
            setTimeout(()=>{
                this.$refs.csmultiSelect[0].blur();
            },50)
        },
        InputValue(val){
            // console.log(val);
            // var countryinputarr=val.split('、')
            // var res=new Map();
            // var countryinputarrs=countryinputarr.filter((a)=>!res.has(a)&&res.set(a,1));
            // console.log(countryinputarrs);

            // this.$store.state.countrystring=countryinputarrs
            
        },
        //获取表单
        GroupOrderPreInfo() {
            this.controlarr=[];
            var url = "/api/Groups/GroupOrderPreInfo/"+this.formid+"/"+this.tempId
            var that = this
            this.$axios({
                method: 'get',
                url: url,
            }).then(function (res) {
                if (res.data.code==200) {
                    that.controlarr=res.data.data.items;
                    that.groupId=res.data.data.groupId==0?'':res.data.data.groupId;
                    for(let i=0;i<that.controlarr.length;i++){
                        if(that.controlarr[i].fieldName=='出访国家（地、区）'){
                            if (that.controlarr[i].newValue.length>0) {
                                console.log(that.controlarr[i]);
                                var gjvals = '';
                                that.controlarr[i].newValue.map((value) => {
                                    gjvals += value + ','
                                })
                                gjvals = gjvals.substring(0, gjvals.length - 1)
                                that.CityByCountry(gjvals)
                            }
                        }
                    }
                    that.fullscreenLoading=false;
                }else{
                    that.$message.error(res.data.msg);
                    that.fullscreenLoading=false;
                }
            })
        },
        //baocun
        GroupOrderPreInfoSave() {
            if(this.formname==''){
                return this.$message.error('表单名称没填！');
            }
            var url = "/api/Groups/GroupOrderPreInfoSave"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    id: that.formid,
                    name: that.formname,
                    groupId: that.groupId==''?0:that.groupId,
                    items: that.controlarr,
                    currUserId: that.userid,
                }
            }).then(function (res) {
                if (res.data.code==200) {
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    that.formid=res.data.data;
                    that.GroupOrderPreInfos(true)
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },

        //删除
        GroupOrderPreInfoDel() {
            this.$confirm('此操作将作废该数据, 是否继续?', '提示', {
                customClass:'marketplacepick-confirm',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url = "/api/Groups/GroupOrderPreInfoDel"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer '
                    },
                    data: {
                        id: that.formid,
                        currUserId: that.userid,
                    }
                }).then(function (res) {
                    if (res.data.code==200) {
                        that.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                        that.formid=0;
                        that.formname='';
                        that.GroupOrderPreInfos(true)
                    }else{
                        that.$message.error(res.data.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作已取消！'
                });
            });
            
        },
        GroupOrderPreInfochange(){
            this.controlarr=[],
            this.cityarr=[],
            this.GroupOrderPreInfo();
        }
    },
    mounted(){
        if (this.$route.query.userid!=undefined) {
            this.userid=this.$route.query.userid;
        }else{
            that.$message.error('没有用户id');
        }
        this.GroupOrderPreInfos();
        this.CountryInit();
        
        // this.GroupOrderPreInfo();
    }
}
</script>
<style>
.marketplacepick-all{
    min-width: 375px;
    display: flex;
    justify-content: center;
}
.marketplacepick-form{
    max-width: 1101px;
    min-width: 360px;
}
.marketplacepick-form-head,.marketplacepick-form .el-select{
    width: 100%;
}
.marketplacepick-form-head,.marketplacepick-form-li .el-input-number{ 
    width: 100%;
}
.marketplacepick-form-li .el-input-number .el-input__inner{
    text-align: left;
}
.marketplacepick-form-ul{
    display: flex;
    flex-wrap: wrap;
}
.marketplacepick-form-li{
    width: 345px;
    margin-bottom: 10px;
    padding: 0px 5px;
    border: 1px dashed #b0b1b3;
    border-radius: 5px;
}
.marketplacepick-form-li .el-autocomplete{
    width: 100%;
}
.addbox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 15px;
}
.marketplacepick-form-li .el-input--medium .el-input__inner{
    height: 40px;
    line-height: 40px;
}
.marketplacepick-form-head .el-select{
    width: 357px;
    margin-bottom: 10px;
}
.marketplacepick-form-li .el-form-item__label{
    float: none;
}
.marketplacepick-form-head{
    display: flex;
    flex-wrap: wrap;
}
.marketplacepick-form-head .el-input--medium .el-input__inner{
    height: 40px;
    line-height: 40px;
}
.addbox-img{
    width: 25px;
    height: 25px;
    margin-right: 5px;
}
.addbox-title{
    font-size: 17px;
    font-weight: 600;
}
.addbox-img img{
    width: 100%;
}
.el-popup-parent--hidden .el-message-box__wrapper .marketplacepick-confirm{
    width: 280px;
}
@media screen and (max-width: 749px){
    .marketplacepick-form{
        width: 360px;
    }
}
@media screen and (min-width: 750px) {
    .marketplacepick-form-li{
        margin-right: 10px;
    }
    .marketplacepick-form-head .el-select{
        margin-right: 10px;
    }
    .marketplacepick-form-head .el-autocomplete{
        margin-right: 10px;
    }
}
</style>