<template>
	<!-- 创建活动 -->
	<el-form ref="form" :model="formData" :rules="rules" label-width="120px" style="max-width:600px;">
		<el-form-item :label="txt()+'编号：'" prop="ActivityNo">
			<el-input v-model.lazy="formData.ActivityNo" maxlength=10 :disabled="noDisabled" @change="checkActivityNo()" style="width:200px;"></el-input>
            <p class="yellow" v-show="showNo">{{errTxt}}</p>
		</el-form-item>
		<el-form-item :label="txt()+'名称：'" prop="ActivityName">
			<el-input v-model="formData.ActivityName" style="width:200px;"></el-input>
		</el-form-item>
		<el-form-item label="关联对象：">
				<el-radio-group v-model="formData.ObjectType" @change="switchradio">
                    <el-radio label="1">商品</el-radio>
                    <el-radio label="2">标签</el-radio>
					<el-radio label="3">生产批次</el-radio>
					<el-radio label="4">生码批次</el-radio>
					<el-radio label="5">码段批次</el-radio>
				</el-radio-group>
                <!-- <el-select v-model="formData.ObjectValue" multiple filterable placeholder="请选择" style="width:100%" @change="getPackingUnit">
					<el-option label="全部" value="0" :disabled="formData.ObjectValue.length!=0 && !formData.ObjectValue.includes('0')"></el-option>
					<el-option :label="b.Value" :value="b.Key" v-for="b in batchList.Objects" :key="b.Key" :disabled="formData.ObjectValue.includes('0')"></el-option>
				</el-select> -->
				<!-- <div>{{formData.ObjectValue}}</div> -->
				<div class="qs-select" style="width:500px;">
					<div class="list-div cl" @click="showSelectBox()">
						<div class="list-box">
							<div class="mn-placeholder" v-show="selectList.length==0">请选择</div>
							<div class="list-item" v-for="(s,index) in selectList" :key="s.Key">
								<span class="list-info">{{s.Value}}</span>
								<span class="list-x" @click.stop="delSelectList(index)">×</span>
							</div>
						</div>
						<div class="icon-div">
							<i :class="{'el-icon-arrow-down':!selectBox,'el-icon-arrow-up':selectBox}"></i>
						</div>
					</div>
					
					<div class="select-box" v-show="selectBox">
						<div class="select-search cl">
							<input type="text" v-model="selectSearch" placeholder="搜索查找" v-on:keyup.enter="switchradio(-1)">
							<span @click="switchradio(-1)">搜索</span>
						</div>
						<ul>
							<li @click="addSelectList(-1)" v-show="batchList.Objects.length>0">全部</li>
							<!-- <li :class="{notcursor:formData.ObjectValue.length!=0 && !formData.ObjectValue.includes('0')}">全部</li> -->
							<li v-for="(b,index) in batchList.Objects" :key="b.Key"  @click="addSelectList(index)" :class="{notcursor:selectAll}">{{b.Value}}</li>
							<li style="text-align: center;line-height:200px;" v-show="batchList.Objects.length==0">无匹配数据</li>
						</ul>
					</div>
				</div>
		</el-form-item>
		<el-form-item label="包装层级：" v-show="formData.ObjectType==1">
            <el-radio-group v-model="formData.PackageUnit">
                <el-radio :label="p" v-for="p in packingUnit" :key="p">{{p}}级</el-radio>
            </el-radio-group>
		</el-form-item>
        <el-form-item label="码类型：">
            <el-radio-group v-model="formData.DigitType">
                <el-radio label="1">防伪码</el-radio>
                <el-radio label="2">溯源码</el-radio>
            </el-radio-group>
		</el-form-item>
		<el-form-item label="GPS位置获取：">
			<el-switch v-model="formData.IsGPS" 
            active-value="1"
            inactive-value="0"
            active-text="开"
            inactive-text="关"
			@change="switchGps"></el-switch>
		</el-form-item>
        <el-form-item label="微信授权方式：">
            <el-radio-group v-model="formData.WeChatAuthorized">
                <el-radio label="1">显式授权</el-radio>
                <el-radio label="0">隐式授权</el-radio>
                <el-radio label="2">不授权</el-radio>
            </el-radio-group>
		</el-form-item>
		<el-form-item label="备注：">
			<el-input type="textarea" v-model="formData.Remark" maxlength=200></el-input>
		</el-form-item>
        <!-- <p v-for="b in batchList" :key="b.Key">{{b.Value}}--{{b.Key}}</p> -->
	</el-form>
</template>

<script>
import apiHelper from "@/assets/js/apiHelper.js";
import ut from "@/assets/js/utils.js";
import eventBus from "@/assets/js/eventBus.js";
import { setTimeout } from 'timers';
export default {
    name: "synthetical1",
    props: ["activityType"],
    data() {
		return {
			selectBox:false,
			selectList:[],
			selectSearch:"",
			selectAll:false,
			firstLoad:true,
            BasicActivityInfo:{},
            //ActivityType  '活动类型：1:品牌保护(防伪),2:智慧追溯(溯源),3:营销活动(营销),4:综合通用(综合),5:其他 对应字典typid
            //  `BUSINESS_TYPE`   '业务类型：0全部、1防伪、2追溯、3营销、4综合、5其它、6积分商城'
			formData: {
                ActivityId: '',
				ActivityNo: '',
				ActivityName: '',
				ObjectType:"1",
                ObjectValue:[],
				IsGPS:"1",
                Remark: '',
                OperateType:"add",
                TemplateId:this.sup8.urlparams.id,
                TemplateType:this.sup8.urlparams.templatetype,
                ActivityType:this.activityType,
                BusinessType:this.activityType,
                WeChatAuthorized:"1",
				DigitType:"1",
				PackageUnit:"1"//包装层级
			},
			rules: {
				ActivityNo: [
					{ required: true, message: '请输入编号', trigger: 'change' },
					{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'change' }
				],
				ActivityName: [
					{ required: true, message: '请输入名称', trigger: 'change' },
					{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'change' }
				]
				// ObjectValue: [
				// 	{ type:'array', required: true, message: '请选择关联对象', trigger: 'change' }
				// ]
            },
            batchList:{
                "IsAllSelected":false,
                "IsPartSelected":false,
                "Objects":[]
            },//下拉数据
            productCodeBatch:{
                "IsAllSelected":false,
                "IsPartSelected":false,
                "Objects":[]
            },//生码批次
            codeSegment:{
                "IsAllSelected":false,
                "IsPartSelected":false,
                "Objects":[]
            },//码段
            productionBatch:{
                "IsAllSelected":false,
                "IsPartSelected":false,
                "Objects":[]
            },//生产批次
            labelList:{
                "IsAllSelected":false,
                "IsPartSelected":false,
                "Objects":[]
            },//标签
            productList:{
                "IsAllSelected":false,
                "IsPartSelected":false,
                "Objects":[]
            },//商品
            showNo:false,
            noDisabled:false,
			errTxt:"编号为字母加数字",
			packingUnit:[]
		};
    },
    watch: {
		formData:{
			deep: true,
            handler: function (newVal,oldVal){
                if(this.showNo){
                    return;
                }
                if(newVal.ActivityNo!="" && !/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{2,10}$/.test(newVal.ActivityNo)){
                    this.showNo = true;
                    return;
                }else{
                    this.showNo = false;
				}
				if(newVal.ActivityName.length>30){
                    return;
                }
                this.BasicActivityInfo = newVal;
                if(this.formData.ObjectValue.length == 0){
                    return;
                }
                ut.sss("BasicActivityInfo",this.BasicActivityInfo);
				ut.sss("selectList",this.selectList);
                // todo:发送事件
                eventBus.publish("updatetab",0);
            }
        }
    },
    created: function () {
        // this.getProductCodeBatch();
        // this.getCodeSegment();
        // this.getProductionBatch();
        // this.getProductsList();
        // this.getLabelList();
        
    },
    mounted: function () {
        console.log(new Date().getTime());
        // option=2是编辑
        if(ut.parseUrl().option==2){
            this.noDisabled = true;
            if(ut.ssg('BasicActivityInfo')){
                this.formData = ut.ssg('BasicActivityInfo');
				this.selectList = ut.ssg('selectList');
				this.switchradio(-1);
            }else{
                this.getActivity();
            }
        }else{
            this.noDisabled = false;
            if(ut.ssg('BasicActivityInfo')){
                this.formData = ut.ssg('BasicActivityInfo');
				this.selectList = ut.ssg('selectList');
            }
			this.switchradio(-1);
        }
        
    },
    methods: {
		switchGps(value){
			if(value=="0"){
				this.$confirm('关闭GPS定位，将影响企业商品窜货分析，是否确认关闭？')
				.then(_ => {
					// this.formData.IsGPS = "1";
				}).catch(_ => {
					this.formData.IsGPS = "1";
				});
			}
		},
		showSelectBox(){
			this.selectBox = !this.selectBox;
		},
		delSelectList(index){
			if(this.selectList[index].Key=="0"){
				this.selectAll = false;
			}
			this.selectList.splice(index,1);
			this.formData.ObjectValue.splice(index,1);
			if(this.formData.ObjectType==1){
				this.getPackingUnit();
			}
		},
		addSelectList(index){
			let flag = false;
			let sIndex = 0;
			if(index==-1){
				for(let i=0;i<this.selectList.length;i++){
					if(this.selectList[i].Key=="0"){
						flag = true;
						sIndex = i;
					}
				}
				if(flag){
					this.selectList.splice(sIndex,1);
					this.formData.ObjectValue.splice(sIndex,1);
					this.selectAll = false;
				}else{
					this.selectList = [];
					this.selectList.push({Value:"全部",Key:"0"});
					this.formData.ObjectValue = ["0"];
					this.selectAll = true;
				}
			}else{
				if(this.selectAll){
					return;
				}
				for(let i=0;i<this.selectList.length;i++){
					if(this.selectList[i].Key == this.batchList.Objects[index].Key){
						flag = true;
						sIndex = i;
					}
				}
				if(flag){
					this.selectList.splice(sIndex,1);
					this.formData.ObjectValue.splice(sIndex,1);
				}else{
					this.selectList.push(this.batchList.Objects[index]);
					this.formData.ObjectValue.push(this.batchList.Objects[index].Key);
				}
			}
			if(this.formData.ObjectType==1){
				this.getPackingUnit();
			}
		},
        // 检验活动，溯源防伪，综合，商城编号的唯一性
        checkActivityNo(){
            let that = this;
			if(that.formData.ActivityNo==""){return}
            apiHelper.checkActivityNo(that.formData.ActivityNo,this.activityType,that.sup8.urlparams.eid, function(res) {
                if (!res.flag) {
                    that.showNo=true;
                    that.errTxt=res.msg|| "编号已存在";
                }else{
                    that.showNo=false;
                    that.errTxt="";
                }
            });
        },
        txt(){
            switch (this.activityType) {
                case 1:
                    return "防伪"
                    break;
                case 2:
                    return "溯源"
                    break;
                case 4:
                    return "综合"
                    break;
            
                default:
                    break;
            }
        },
        // 获取生码批次
        getProductCodeBatch(){
            let that = this;
            let eno = that.sup8.urlparams.eid;
            apiHelper.getProductCodeBatch(eno,that.sup8.urlparams.activityid, that.selectSearch,function(res) {
                if (res.flag) {
                    that.batchList = res.data;
                } else {
                    that.batchList = {
                        "IsAllSelected":false,
                        "IsPartSelected":false,
                        "Objects":[]
                    };
                }
            });
        },
        // 生产批次
        getProductionBatch(){
            let that = this;
            let eno = that.sup8.urlparams.eid;
            apiHelper.getProductionBatch(eno, that.sup8.urlparams.activityid,that.selectSearch,function(res) {
                if (res.flag) {
                    that.batchList = res.data;
                } else {
                    that.batchList = {
                        "IsAllSelected":false,
                        "IsPartSelected":false,
                        "Objects":[]
                    };
                }
            });
        },
        // 获取码段
        getCodeSegment(){
            let that = this;
            let eno = that.sup8.urlparams.eid;
            apiHelper.getCodeSegment(eno,that.sup8.urlparams.activityid, that.selectSearch,function(res) {
                if (res.flag) {
                    that.batchList = res.data;
                } else {
                    that.batchList = {
                        "IsAllSelected":false,
                        "IsPartSelected":false,
                        "Objects":[]
                    };
                }
            });
        },
        // 获取标签列表
        getLabelList(){
            let that = this;
            let eno = that.sup8.urlparams.eid;
            apiHelper.getLabelList(eno,that.sup8.urlparams.activityid,that.selectSearch, function(res) {
                if (res.flag) {
                    that.batchList = res.data;
                } else {
                    that.batchList = {
                        "IsAllSelected":false,
                        "IsPartSelected":false,
                        "Objects":[]
                    };
                }
            });
        },
        // 获取商品列表
        getProductsList(){
            let that = this;
            let eno = that.sup8.urlparams.eid;
            apiHelper.getProductsList(eno,that.sup8.urlparams.activityid,that.selectSearch, function(res) {
                if (res.flag) {
                    that.batchList = res.data;
                } else {
                    that.batchList = {
                        "IsAllSelected":false,
                        "IsPartSelected":false,
                        "Objects":[]
                    };
                }
                // setTimeout(()=>{
                //     that.switchradio(false);
                //     that.$forceUpdate();
                // },1000);
            });
        },
        // productCodeBatch:[],//生码批次
        // codeSegment:[],//码段
        // productionBatch:[],//生产批次
        switchradio(flag){
            // flag=-1，回显数据调用
            if(flag!=-1){
				this.formData.ObjectValue = [];
				this.selectBox=false;
				this.selectList=[];
				this.selectAll=false;
            }
            switch (this.formData.ObjectType) {
                case "1":
					// this.batchList = _.cloneDeep(this.productList);
					this.getProductsList();
					this.getPackingUnit();
					this.selectSearch="";
                    break;
                case "2":
					// this.batchList = _.cloneDeep(this.labelList);
					this.getLabelList();
					this.selectSearch="";
                    break;
                case "3":
					// this.batchList = _.cloneDeep(this.productionBatch);
					this.getProductionBatch();
					this.selectSearch="";
                    break;
                case "4":
					// this.batchList = _.cloneDeep(this.productCodeBatch);
					this.getProductCodeBatch();
					this.selectSearch="";
                    break;
                case "5":
					// this.batchList = _.cloneDeep(this.codeSegment);
					this.getCodeSegment();
					this.selectSearch="";
                    break;
            
                default:
                    break;
            }
            this.$forceUpdate();
        },
        // 获取活动信息接口
        getActivity(){
            let that = this;
            apiHelper.getActivity(that.sup8.urlparams.eid,that.sup8.urlparams.activityid,that.activityType, function(res) {
                if (res.flag) {
                    ut.sss("activityInfo",res.data);//保存原始的活动信息
                    that.BasicActivityInfo = res.data.BasicActivityInfo;
					that.formData = that.BasicActivityInfo;
					if(that.formData.ObjectValue[0]=="0"){
						that.selectAll = true;
					}
                    if(ut.parseUrl().option==2){
						that.formData.OperateType = "edit";
                		that.selectList = that.formData.ObjectName;
						that.getPackingUnit(that.formData.ObjectValue);
                    }else{
                        that.formData.OperateType = "add";
                    }
                    that.switchradio(-1);
                }
            });
		},
		getPackingUnit(){
			let value = this.formData.ObjectValue.length>0?this.formData.ObjectValue:["0"];
            if(this.formData.ObjectType==1){
                apiHelper.getPackingUnit(value.join(),this.sup8.urlparams.eid, (res) =>{
                    if (res.flag) {
						this.packingUnit = res.data;
						this.$nextTick(()=>{
							this.formData.PackageUnit = this.formData.PackageUnit>this.packingUnit.length?"1":this.formData.PackageUnit;
						});
                    }else{
                        this.packingUnit = ["1"];
                    }
                });
            }else{
                this.formData.PackageUnit="1";
            }
        }
    }
};

</script>
<style scoped>
.text-c{text-align: center;}
.yellow{
    line-height: 16px;
    color: #e6a23c;
}
.el-select__tags{
	max-height: 150px;
	overflow-y: auto;
}
.qs-select{
	box-sizing: border-box;
	position: relative;
}
.qs-select .list-div{
	border: 1px solid #ccc;
	margin-bottom: 3px;
	border-radius: 4px;
}
.qs-select .list-box{
	position: relative;
	float: left;
	box-sizing: border-box;
	padding: 5px;
	width: calc(100% - 30px);
	min-height: 40px;
	max-height: 100px;
	overflow-y: auto;
	line-height: 16px;
	border-radius: 4px;
}
.qs-select .mn-placeholder{
	position: absolute;
	top: 0;
    left: 0;
	width: 100%;
	padding-left: 10px;
	line-height: 40px;
	color: #ccc;
}
.qs-select .icon-div{
	float: left;
	width: 30px;
	height: 100%;
	text-align: center;
	color: #999;
	cursor: pointer;
}
.qs-select .list-item{
	display: inline-block;
	border:1px solid #e9e9eb;
	margin-left: 5px;
	margin-bottom: 5px;
	padding: 4px;
	border-radius: 4px;
	background-color: #f4f4f5;
    border-color: #e9e9eb;
    color: #909399;
}
.qs-select .list-x{
	margin-left: 3px;
	display: inline-block;
	width: 14px;
	height: 14px;
	line-height: 14px;
	text-align: center;
	font-size: 14px;
	border-radius: 50%;
	background: #C0C4CC;
	color: #666;
	cursor: pointer;
}
.qs-select .select-box{
	position: absolute;
    bottom: -245px;
    background: rgb(255, 255, 255);
    z-index: 100;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #ddd;
	padding: 5px;
	border-radius: 4px;
}
.qs-select .select-search input{
	box-sizing: border-box;
	float: left;
	width: calc(100% - 65px);
	height: 30px;
	border: 1px solid #ccc;
	padding: 0 5px;
	border-radius: 4px;
}
.qs-select .select-search span{
	box-sizing: border-box;
	float: right;
	width: 60px;
	height: 30px;
	line-height: 30px;
	background: #fff;
	border: 1px solid #ccc;
	cursor: pointer;
	text-align: center;
	border-radius: 4px;
	color: #666;
}
.qs-select .select-search span:hover{
	color: #409EFF;
	border: 1px solid #409EFF;
}
.qs-select ul{ 
	padding:0;
	margin:0;
	list-style:none;
	height: 200px;
	overflow-y: auto;
}
.qs-select ul li{
	padding: 3px 5px;
	height: 30px;
	line-height: 30px;
	background: #fff;
	border-radius: 4px;
	transition: all .2s;
}
.qs-select ul li:hover{
	background: #f3f3f3;
}
.notcursor{
	cursor: not-allowed;
	color: #dcdbdb;
};
</style>