<style>
.sceneBox .el-form{
    padding: 20px;
    padding-top: 0;
}
.sceneBox .el-form--label-top .el-form-item__label{
    padding: 0;
}
.sceneBox .el-form-item{
    margin: 0;
}
.sceneBox .delete-btn{
    margin-left: 15px;
}
.add-tj{
    padding: 0 20px 20px;
}
.sceneBox .dialog-footer{
    text-align: center;
}
</style>
<template>
    <div class="sceneBox">
        <el-form label-position="top" label-width="80px" :model="sceneMsg">
            <el-form-item label="场景名称" v-if="checked || sceneType === 1">
                <el-input v-model="sceneMsg.SceneName" placeholder="请输入场景名称，最多10个字符"></el-input>
            </el-form-item>
            <el-form-item label="筛选条件">
                <el-row v-for="(item, index) in dataList" :key="index" style="margin-bottom: 15px;">
                    <el-col :span="8">
                        <el-select v-model="item.SceneIndex" placeholder="请选择要筛选的字段名" style="width: 100%;" @change="changeScene(item, index)">
                            <el-option v-for="(scene, sIndex) in item.sceneList" :label="scene.Name" :value="sIndex" :key="sIndex"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="1">
                        &nbsp;
                    </el-col>
                    <!-- regionShow -->
                    <template v-if="item.regionS && item.regionS.length">
                        <el-col :span="5">
                            <el-select v-model="item.region" placeholder="请选择" @change="changeRegion(item, index)">
                                <el-option v-for="(r, rx) in item.regionS" :key="rx" :label="r.c" :value="r.n"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="1">
                            &nbsp;
                        </el-col>
                        <el-col :span="8">
                            <el-input v-if="!item.Setting.length && item.nameStr !== '负责人' && item.nameStr !== '创建人'" v-model="item.SceneName" placeholder="请输入筛选条件"></el-input>
                            <el-select v-else-if="item.nameStr === '负责人' || item.nameStr === '创建人'" v-model="item.id" filterable @change="changeFC(index)" placeholder="请选择" style="width: 100%;" >
                                <el-option
                                    filterable
                                    v-for="item in EmployeeList"
                                    :label='item.EmName'
                                    :value='item.EmployeeId'
                                    :key='item.EmployeeId'>
                                </el-option>
                            </el-select>
                            <el-select v-else v-model="item.SceneName" filterable placeholder="请选择" style="width: 100%;" >
                                <el-option v-for="(select, sIndex) in item.Setting" :label="select" :value="select" :key="sIndex"></el-option>
                            </el-select>
                        </el-col>
                    </template>
                    <template v-else>
                        <el-col :span="14">
                            <el-date-picker
                                style="width: 100%;" 
                                v-model="item.time"
                                value-format="yyyy-MM-dd hh:mm:ss"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-col>
                    </template>
                    <el-col :span="1">
                        <i @click="deleteRow(index)" class="el-icon-error delete-btn cp"></i>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
        <div class="add-tj">
            <p> <span class="font-color-link cp" @click="addRow"><i class="el-icon-circle-plus-outline"></i> 添加筛选条件</span></p>
        </div>
        <div class="add-tj">
            <el-checkbox v-model="checked" v-if="sceneType!==1 && LableType!==6">保存为场景</el-checkbox>
        </div>
        <div class="add-tj" v-if="checked || sceneType === 1">
            <el-checkbox v-model="sceneMsg.IsDefault" :true-label="1" :false-label="0">设为默认</el-checkbox>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="add-box-btn" @click="sceneAdd()">确 定</el-button>
            <el-button class="add-box-btn add-box-cancel" @click="MsgBus.$emit('sceneBoxClose')">取 消</el-button>
        </div>
    </div>
</template>
<script>
export default {
    props: ['LableType', 'sceneType', 'sceneDataList'],
    data(){
        return{
            checked: false,
            sceneMsg: {
                SceneName: '',
                IsDefault: 0,
            },
            WhereDataStr: {
                NextContactTime: {
                    start: '',
                    end: '',
                    formType: '',
                    name: ''
                },
                CustomerName: {
                    condition: '',
                    value: '',
                    formType: '',
                    name: '',
                },
                ContactPhone: {
                    condition: '',
                    value: '',
                    formType: '',
                    name: '',
                },
                Remark: {
                    condition: '',
                    value: '',
                    formType: '',
                    name: '',
                },
                PersonChargeId: {
                    condition: '',
                    value: '',
                    formType: '',
                    name: '',
                },
                CreateBy: {
                    condition: '',
                    value: '',
                    formType: '',
                    name: '',
                },
                ContactName: {
                    condition: '',
                    value: '',
                    formType: '',
                    name: '',
                },
                ContactDuty: {
                    condition: '',
                    value: '',
                    formType: '',
                    name: '',
                },
                IsMain: {
                    condition: '',
                    value: '',
                    formType: '',
                    name: '',
                },
                Sex: {
                    condition: '',
                    value: '',
                    formType: '',
                    name: '',
                },
                CreateTime: {
                    start: '',
                    end: '',
                    formType: '',
                    name: '',
                },
                UpdateTime: {
                    start: '',
                    end: '',
                    formType: '',
                    name: '',
                },
                LableType: 1
            },
            dataList: [
                {
                    SceneName: '',
                    IsDefault: '',
                    region: '',
                    regionS: [],
                    sceneList: [],
                    SceneIndex: '',
                    Setting: [],
                    time: [],
                    WhereDataStr: {},
                    formType: ''
                }
            ],
            region: [],
            optionsNames: [
                {
                    c: "等于",
                    n: 'is',
                    t: "t",
                },
                {
                    c: "不等于",
                    n: 'isnot',
                    t: "t",
                },
                {
                    c: "包含",
                    n: "contains"
                },
                {
                    c: "不包含",
                    n: "not_contain"
                },
                {
                    c: '开始于',
                    n: 'start_with'
                },
                {
                    c: '结束于',
                    n: 'end_with'
                },
                {
                    c: '为空',
                    n: 'is_empty'
                },
                {
                    c: '不为空',
                    n: 'is_not_empty'
                },
                {
                    c: '等于',
                    n: 'eq'
                },
                {
                    c: '不等于',
                    n: 'neq'
                },
                {
                    c: '大于',
                    n: 'gt'
                },
                {
                    c: '大于等于',
                    n: 'egt'
                },
                {
                    c: '小于',
                    n: 'lt'
                },
                {
                    c: '小于等于',
                    n: 'elt'
                },
            ],
            sceneList: [],
            regionShow: true,
            userInfo: {},
            EmployeeList: [],
        }
    },
    watch: {
        LableType:{
            handler(val, oldVal){
                this.GetSceneList()
                this.dataList = [
                    {
                        SceneName: '',
                        IsDefault: '',
                        region: '',
                        regionS: [],
                        sceneList: [],
                        SceneIndex: '',
                        Setting: [],
                        time: [],
                        WhereDataStr: {},
                        formType: ''
                    }
                ]
            },
            deep:true
        },
        sceneDataList: {
            handler(val, oldVal){
                this.GetSceneList()
                this.dataList = [
                    {
                        SceneName: '',
                        IsDefault: '',
                        region: '',
                        regionS: [],
                        sceneList: [],
                        SceneIndex: '',
                        Setting: [],
                        time: [],
                        WhereDataStr: {},
                        formType: ''
                    }
                ]
                this.sceneMsg = {
                    SceneName: '',
                    IsDefault: 0,
                }
                console.log(val)
            },
            deep:true
        }
    },
    mounted(){
        this.userInfo = this.getLocalStorage();
        this.GetSceneList()
        this.Employee()
    },
    methods:{
        // 修改组装数据
        sceneInitDataList(){
            this.dataList = []
            let item = JSON.parse(this.sceneDataList.WhereData)
            let i = 0
            var arr = []
            for (let i in item) {
                arr.push(item[i])
            }
            arr.map((x, index)=>{
                console.log(x)
                this.sceneList.map((s, sIndex)=>{
                    if(x.name === s.FieldName) {
                        let msg = {
                            SceneName: x.value,
                            IsDefault: '',
                            region: x.condition,
                            regionS: [],
                            sceneList: this.sceneList,
                            SceneIndex: sIndex,
                            Setting: s.Setting,
                            time: [x.start, x.end],
                            WhereDataStr: {},
                            formType: s.FormType
                        }
                        this.dataList.push(msg)
                        this.changeScene(this.dataList[index], index, 2)
                    }
                })
            })
        },
        changeFC(index){
            for(let i = 0; i < this.EmployeeList.length; i++){
                if (this.EmployeeList[i].EmployeeId === this.dataList[index].id){
                    this.dataList[index].SceneName = this.EmployeeList[i].EmployeeId
                    this.dataList[index].nameFC = this.EmployeeList[i].EmName
                    break;
                }
            }
        },
        sceneAdd(){
            let msg = {}, list = [], ok = true;
            this.dataList.forEach( item =>{
                if(item.formType === 'datetime') {
                    if(!item.time.length){
                        ok = false
                        this.$message.error('筛选内容不能为空！')
                        return 
                    }
                    msg[item.FieldName] = {
                        start: item.time[0],
                        end: item.time[1],
                        formType: item.formType,
                        name: item.FieldName,
                        str: item.nameStr,
                        regionStr: item.regionStr
                    }
                    list.push({
                        start: item.time[0],
                        end: item.time[1],
                        formType: item.formType,
                        name: item.FieldName,
                        str: item.nameStr,
                        regionStr: item.regionStr,
                        nameFC: item.nameFC
                    })
                } else {
                    if(!item.SceneName){
                        ok = false
                        this.$message.error('筛选内容不能为空！')
                        return 
                    }
                    msg[item.FieldName] = {
                        condition: item.region,
                        value: item.SceneName,
                        formType: item.formType,
                        name: item.FieldName,
                        str: item.nameStr,
                        regionStr: item.regionStr
                    }
                    list.push({
                        condition: item.region,
                        value: item.SceneName,
                        formType: item.formType,
                        name: item.FieldName,
                        str: item.nameStr,
                        regionStr: item.regionStr,
                        nameFC: item.nameFC
                    })
                } 
            })
            if(ok && (this.checked || this.sceneType === 1)) {
                if(this.sceneMsg.SceneName === '') {
                    return this.$message.error('场景名称不能为空！')
                }
                this.sceneMsg.WhereDataStr = msg
                this.sceneMsg.LableType = this.LableType
                if(this.sceneDataList) {
                    this.sceneMsg.ID = this.sceneDataList.ID
                }
                this.apipost('/api/Scene/AddSceneEmployee', this.sceneMsg, res=>{
                    if (res.data.resultCode == 1) {
                        this.$message.success('操作成功')
                        this.MsgBus.$emit('editScene')
                        this.dataList = [
                            {
                                SceneName: '',
                                IsDefault: '',
                                region: '',
                                regionS: [],
                                sceneList: this.sceneList,
                                SceneIndex: '',
                                Setting: [],
                                time: [],
                                WhereDataStr: {},
                                formType: ''
                            }
                        ]
                        this.checked = false
                    }
                })
            }
            if(this.sceneDataList && ok) {
                this.MsgBus.$emit('sceneBoxClose')
            } else if (ok){
                setTimeout(()=>{
                    this.MsgBus.$emit('sceneBoxClose')
                    this.MsgBus.$emit('sceneSave', list)
                }, 500)
            }
            
        },
        changeRegion(i, index){
            this.optionsNames.map(x=>{
                if(x.n === i.region) {
                    this.dataList[index].regionStr = x.c
                }
            })
            
        },
        changeScene(item, pIndex, type){
            this.dataList[pIndex].regionS = this.dataList[pIndex].sceneList[item.SceneIndex].region
            this.dataList[pIndex].nameStr = this.dataList[pIndex].sceneList[item.SceneIndex].Name
            this.dataList[pIndex].formType = this.dataList[pIndex].sceneList[item.SceneIndex].FormType
            this.dataList[pIndex].region = type ? this.dataList[pIndex].region : ''
            this.dataList[pIndex].FieldName = this.dataList[pIndex].sceneList[item.SceneIndex].FieldName
            this.dataList[pIndex].SceneName = type ? this.dataList[pIndex].SceneName : ''
            this.dataList[pIndex].time = type && this.dataList[pIndex].formType === 'datetime' ? this.dataList[pIndex].time : []
            this.region = this.sceneList[item.SceneIndex].region
            if(this.dataList[pIndex].nameStr && type) {
                this.dataList[pIndex].id = this.dataList[pIndex].SceneName
            }
            if(this.dataList[pIndex].sceneList[item.SceneIndex].FormType === 'select') {
                this.dataList[pIndex].Setting = this.dataList[pIndex].sceneList[item.SceneIndex].Setting
            } else {
                this.dataList[pIndex].Setting = []
            }
            this.$forceUpdate()
        },
        GetSceneList(){
            this.apipost('/api/Scene/GetSceneList', {LableType: this.LableType}, res=>{
                if (res.data.resultCode == 1) {
                    let arr = res.data.data
                    arr.map(x=>{
                        if (x.Name === '客户名称' || x.Name === '备注' || x.Name === '商机名称' || x.Name === '详细地址' || x.Name === '姓名' || x.Name === '地址' || x.Name === '线索名称') {
                            x.region = [
                                {
                                    c: "等于",
                                    n: 'is',
                                    t: 't'
                                },
                                {
                                    c: "不等于",
                                    n: 'isnot',
                                    t: 't'
                                },
                                {
                                    c: "包含",
                                    n: "contains"
                                },
                                {
                                    c: "不包含",
                                    n: "not_contain"
                                },
                            ]
                        } else if (x.Name === '手机'  || x.Name === '详细地址') {
                            x.region = this.optionsNames.filter(item=>{
                                return !item.t
                            })
                        } else if (x.Name === '负责人' || x.Name === '客户类别' || x.Name === '创建人' || x.Name === '线索来源' || x.Name === '客户来源' || x.Name === '客人级别' || x.Name === '经营场所' || x.Name === '性别' || x.Name === '是否关键决策人' || x.Name === '职务' || x.Name === '商机状态组' || x.Name === '交客数' || x.Name === '优惠券数' || x.Name === '交易金额' || x.Name === '幸福存折') {
                            x.region = this.optionsNames.filter(item=>{
                                return (item.c === '等于' || item.c === '不等于') && item.t
                            })
                        } else if ( x.Name === '商机金额' || x.Name === '累计订单数') {
                            x.region = this.optionsNames.filter(item=>{
                                return !item.t || item.c !== '开始于' || item.c !== '结束于'
                            })
                        }
                    })
                    this.sceneList = arr
                    if (this.sceneDataList){
                        this.sceneInitDataList()
                        this.sceneMsg.SceneName = this.sceneDataList.SceneName
                        this.sceneMsg.IsDefault = this.sceneDataList.IsDefault
                    } else {
                        this.dataList[0].sceneList = arr
                    }
                }
            })
        },
        addRow(){
            this.dataList.push(
                {
                    SceneName: '',
                    IsDefault: '',
                    region: '',
                    regionS: [],
                    sceneList: this.sceneList,
                    SceneIndex: '',
                    Setting: [],
                    time: [],
                    WhereDataStr: {},
                    formType: ''
                }
            )
        },
        deleteRow(index){
            this.$confirm('您确定要删除这一条数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.dataList.splice(index, 1)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        Employee(){
            let msg = {
                RB_Group_id: this.userInfo.RB_Group_id,
                BranchId:-1,
                DepartmentId:0,
                PostId:0,
                IsLeave:0,
            }
            this.apipost2(
            "admin_get_EmployeeGetList",
            this.msg,
            res => {
                if (res.data.resultCode == 1) {
                this.EmployeeList = res.data.data;
                } else {
                }
            },
            err => {}
            );
        },
    }
}
</script>