<template>
	<!-- GPS -->
	<div v-loading.lock="gpsLoading">
		<div class="text-c mb-20">
            <el-cascader class="mb-30" 
            clearable
            ref="myCascader" 
            v-model="cityValue"
            :options="options" 
            :props="{ checkStrictly: true }"
            @change="cascaderChange">
            </el-cascader>
            <el-button type="primary" @click="addCity">添加</el-button>
            <div class="gps-box">
                <div class="city-label" v-for="(g,index) in GPSArr" :key="index">
                    <span class="mr-5">{{g.label}}</span>
                    <i class="el-icon-close" @click="delectGPS(index)"></i>
                </div>
            </div>
		</div>
		<div slot="footer" class="dialog-footer text-c">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="ok()">确 定</el-button>
        </div>
	</div>
</template>

<script>
import apiHelper from "@/assets/js/apiHelper.js";
export default {
    name: "WrBatch",
	data() {
		return {
            options:[],
            cityArrey:[],
            cityValue:[],
            cityLabel:[],
            GPSArr:[],
            rule:[],
            DimensionRuleConfigId:"",//基础维度id
            editIndex:-1,
			row:{},
			gpsLoading:false
		};
	},
	watch: {},
	created () {
        
    },
	mounted () {
        this.getProvincesCityArea();
    },
	methods: {
        editModel(index,row){
            this.rule=[];
            this.editIndex = index;
            this.row = row;
            if(index!=-1){
                this.rule = row.ChildValue;
                this.GPSArr = row.ChildValue[0].GPSArr;
            }else{
                this.cityValue = [];
                this.GPSArr = [];
                this.getOperatorByPriseRule();
            }
        },
        cascaderChange(){
			this.cityLabel = this.$refs.myCascader.getCheckedNodes()[0].pathLabels;
		},
        ok(){
            if(this.GPSArr.length == 0){
                return;
            }
            // 筛选转中数据下面的区域代码
            let area = [];//筛选后的区域代码集合
            let selectCode = [];//已经选择的省市代码缓存
            let areaCode = [];//已经匹配的省市代码缓存
            this.GPSArr.forEach(v => {
                selectCode.push(v.value);
                this.cityArrey.forEach(x=>{
                    if(v.value == x.c){
                        area.push(...x.value);
                        areaCode.push(v.value);
                    }
                });
            });
            if(selectCode.length != areaCode.length){
                area.push(_.without(selectCode, ...areaCode));
            }
            area = _.uniq(area);
            // console.log(JSON.stringify(area));
            // console.log(area.length);
            // return
            let obj = {};
            this.rule[0].GPSArr = this.GPSArr;
            this.rule[0].value = area.join();
            let myRule = _.cloneDeep(this.rule);
            let ParamText = [];
            myRule[0].GPSArr.forEach(v => {
                ParamText.push(v.label);
            });
            obj.Id = this.editIndex==-1?"":this.row.Id;//新增的时候是空的
            obj.DimensionRuleId = this.editIndex==-1?this.row.Id:this.row.DimensionRuleId;
            // obj.DimensionRuleConfigId = this.editIndex==-1?this.DimensionRuleConfigId:this.row.DimensionRuleConfigId;//基础维度id
            obj.ViewModel = this.row.ViewModel;
            obj.DimensionRuleName = this.row.DimensionRuleName;
            obj.ParamText = ParamText.join();
            obj.ChildValue = myRule;
            obj.OperateType = this.row.OperateType;
            if(this.editIndex !== -1){
                this.$emit('editDataRule',obj);
            }else{
                this.$emit('addDataRule',obj);
            }
        },
        cancel(){
            this.$emit('showRulesDialog');
        },
        // 添加城市
        addCity(){
            let value = this.cityValue[this.cityValue.length - 1];
            let label = this.cityLabel[this.cityLabel.length - 1];
            this.GPSArr.push({label,value});
        },
        delectGPS(index){
            this.GPSArr.splice(index, 1);
        },
        // 根据参与子规则获取运算符
        getOperatorByPriseRule(){
            let that = this;
            apiHelper.getOperatorByPriseRule(this.row.DimensionRuleNo, function(res) {
                if (res.flag) {
                    // that.DimensionRuleConfigId=res.data[0].Id;
                    for(let i=0;i<res.data.length;i++){
                        that.rule.push({
                            id:res.data[i].Id,
                            name:res.data[i].BaseDimensionName,
                            symbol:res.data[i].View,
                            GPSArr:[],
                            value:""
                        });
                    }
                }
            });
        },
        // 获取城市级联
        getProvincesCityArea(){
			this.gpsLoading = true;
            apiHelper.getProvincesCityArea( (res)=> {
				this.gpsLoading = false;
                if (res.flag) {
                    this.options=res.data.ProvinceDetail;
                    this.cityArrey=res.data.CVPairs;
                }
            });
        }
	}
};

</script>
<style>
.text-r{text-align: right;}
.text-c{text-align: center;}
.mr-5{margin-right: 5px;}
.mb-20{margin-bottom: 20px;}
.mb-30{margin-bottom: 30px;}
.gps-box{
    min-height: 100px;
}
.city-label{
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 5px 10px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.city-label i{
    cursor: pointer;
}
.city-label i:hover{
    color: red;
}
.el-cascader__dropdown{
    z-index: 200000!important;
}
</style>