<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,
                    }
                },
                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) => {
                    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.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>