<style>
    @import '../../assets/css/customerManage.css';

    .el-table__fixed-body-wrapper table {
        padding-bottom: 8px !important;
    }

    .el-table__fixed-body-wrapper {
        overflow: auto;
    }
</style>
<template>
    <div class="customerManage">
        <div class="tools">
            <h1>突发事件客户</h1>
            <div class="rightmenu">
                <el-button icon="el-icon-present" class="crm-btn org-btn"
                    @click="addSendMsg.isAll=true;addSendMsg.sendObj='所有客户',transferVisible=true">发送突发事件涵</el-button>
            </div>
        </div>
        <div class="query-box" :style="{'padding-bottom': sceneList.length > 0 ? '0px' : '10px'}">
            <el-row v-if="!multipleSelection.length" :gutter="30">
            </el-row>
            <div v-else class="flex-center">
                <p class="font-size-12">已选 <span class="font-color-link">{{multipleSelection.length}}</span> 项</p>
                <div class="selection-box">
                    <el-button @click="transferVisible=true"><i class="el-icon-present"></i>发送事件</el-button>
                </div>
            </div>
            <div class="scene-wrapper" v-if="sceneList.length > 0">
                <ul class="list">
                    <li class="list-item" v-for="(item, index) in sceneList" :key="index">
                        <span
                            v-if="item.formType !== 'datetime'">{{item.str}}&nbsp;{{item.regionStr}}“{{item.nameFC ? item.nameFC : item.value}}”</span>
                        <span v-else>{{item.str}}&nbsp;“{{item.start}}-{{item.end}}”</span>
                        <i class="el-icon-close icon" @click="deleteScene(index)"></i>
                    </li>
                </ul>
            </div>
        </div>
        <div class="page-content">
            <el-table v-if="loading" v-loading="true" :data="[]">
                <el-table-column v-for="(item, index) in queryType2" :key="index" :label="item.label">
                </el-table-column>
            </el-table>
            <el-table v-if="!loading" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                :height="sceneList.length > 0 ? '600' : '660'" border row-class-name="font-size-12"
                @selection-change="handleSelectionChange">
                <el-table-column fixed type="selection" width="40"></el-table-column>
                <el-table-column fixed prop="GuestName" label="客户名称" width="120" v-if="queryType[0].show"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <p @click="openDetails(scope)" class="font-color-link cp">{{scope.row.GuestName}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="BirthdayMonth" label="生日日期" width="120" v-if="queryType[1].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="MobilePhone" label="手机号码" width="120" v-if="queryType[2].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="Address" label="地址" v-if="queryType[3].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="SexStr" label="性别" v-if="queryType[4].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="TripCount" label="参团次数" sortable v-if="queryType[5].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="Old" label="年龄" sortable v-if="queryType[6].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="PassportNo" label="护照号" sortable v-if="queryType[7].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="Duty" label="职业" sortable v-if="queryType[8].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="CustomerName" label="关联同行" sortable v-if="queryType[9].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="ProductName" label="上次出行产品" sortable v-if="queryType[10].show" width="200"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="UnitPrice" label="上次出行单价" sortable v-if="queryType[11].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column width="40" fixed="right">
                    <template slot="header" slot-scope="scope">
                        <el-popover placement="bottom" width="240">
                            <mySelect :queryType="queryType" @listenTochildEvent="showMessageFromChild" />
                            <i class="el-icon-s-operation cp" slot="reference"></i>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination class="Mypagination" background @current-change="handleCurrentChange"
                :page-sizes="[30, 60, 90, 100]" :page-size="msg.pageSize" layout="total, sizes, prev, pager, next"
                @size-change="handleSizeChange" :total="total">
            </el-pagination>
        </div>
        <el-drawer :with-header="false" size='70%' :visible.sync="drawer" direction="rtl" :before-close="handleClose">
            <customerInfoBox :CustomerId="CustomerId" :hiddenMenu="true" />
        </el-drawer>
        <el-dialog :visible.sync="transferVisible" :close-on-click-modal="false" width="450px"
            custom-class="transfer-box add-box add-box2">
            <div class="add-tit" slot="title">
                <p><span></span>发送突发事件涵</p>
                <span icon="el-icon-close"></span>
            </div>
            <el-form :model="addSendMsg" ref="form" class="MyEditForm">
                <div class="MyEditForm-item">
                    <el-form-item label="计划标题" class="label-pad-left">
                        <el-input v-model="addSendMsg.Tittle" placeholder="请输入计划标题，如果不填系统将自动生成"></el-input>
                    </el-form-item>
                </div>
                <div class="MyEditForm-item">
                    <el-form-item label="发送方式" class="label-pad-left">
                        <el-select v-model="addSendMsg.SendType" placeholder="请选择">
                            <el-option label='同业助手' value='2'></el-option>
                            <el-option label='短信' value='1'></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="MyEditForm-item">
                    <el-form-item label="接收人员" class="label-pad-left">
                        <el-input :readonly="true" v-model="addSendMsg.sendObj"></el-input>
                        <div style="font-size:12px;color:red;margin-left: 10px; margin-top: 2px;">
                            消息将发送给关联的同行，由同行转发给客人，暂不支持直接转发</div>
                    </el-form-item>
                </div>
                <div class="MyEditForm-item">
                    <el-form-item label="发送时间" class="label-pad-left">
                        <el-date-picker type="datetime" v-model="addSendMsg.SendTime" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="add-box-btn" @click="transfer(2)">确 定</el-button>
                <el-button class="add-box-btn add-box-cancel" @click="transferVisible = false">取 消</el-button>
            </div>

        </el-dialog>
    </div>
</template>
<script>
    import mySelect from "../dialogModel/select";
    import customerInfoBox from "../guestManagement/customerInfoBox";
    export default {
        components: {
            mySelect,
            customerInfoBox,
        },
        data() {
            return {
                queryType2: [{
                    label: '客户名称',
                    show: true,
                }, {
                    label: '生日日期',
                    show: true,
                }, {
                    label: '手机号码',
                    show: true,
                }, {
                    label: '地址',
                    show: true,
                }, {
                    label: '性别',
                    show: true,
                }, {
                    label: '参团次数',
                    show: true,
                }, {
                    label: '年龄',
                    show: true,
                }, {
                    label: '护照号',
                    show: true,
                }, {
                    label: '职业',
                    show: true,
                }, {
                    label: '关联同行',
                    show: true,
                }, {
                    label: '上次出行产品',
                    show: true,
                }, {
                    label: '上次出行单价',
                    show: true,
                }],
                queryType: [{
                    label: '客户名称',
                    show: true,
                }, {
                    label: '生日日期',
                    show: true,
                }, {
                    label: '手机号码',
                    show: true,
                }, {
                    label: '地址',
                    show: true,
                }, {
                    label: '性别',
                    show: true,
                }, {
                    label: '参团次数',
                    show: true,
                }, {
                    label: '年龄',
                    show: true,
                }, {
                    label: '护照号',
                    show: true,
                }, {
                    label: '职业',
                    show: true,
                }, {
                    label: '关联同行',
                    show: true,
                }, {
                    label: '上次出行产品',
                    show: true,
                }, {
                    label: '上次出行单价',
                    show: true,
                }],
                CustomerId: 0,
                CustomerIdStr: '',
                transferVisible: false,
                mySelectCtrl: false,
                drawer: false,
                loading: true,
                dialogTableVisible: false,
                dialogTableVisibleName: '新建直客',
                tableData: [],
                multipleSelection: [],
                EmployeeList: [],
                value: '',
                userInfo: {},

                msg: {
                    GusetName: '',
                    pageIndex: 1,
                    pageSize: 30,
                    ContactNumber: '',
                    WhereType: -1,
                    OrderBy: '',
                    ID: 36
                },
                total: 0,
                sceneList: [],
                SceneEmployeeList: [],
                sceneID: 36,
                visible: false,
                addSendMsg: {
                    Tittle: "",
                    Type: 4,
                    SendType: '2',
                    Details: [],
                    SendTime: '',
                    isAll: false,
                }
            };
        },
        mounted() {
            this.userInfo = this.getLocalStorage();
            this.getList()
            let $this = this
            this.MsgBus.$on('closeCustomerDialogBox', function () {
                $this.dialogTableVisible = false
            })
            this.GetSceneEmployeeList()
            this.MsgBus.$on('sceneSave', function (msg) {
                $this.sceneList = [...msg]
                $this.GetSceneEmployeeList()
                let obj = {}
                msg.forEach(element => {
                    obj[element.name] = element
                });
                $this.msg.Data = obj
                $this.getList()
            })
            this.MsgBus.$on('editScene', function () {
                $this.GetSceneEmployeeList()
            })
        },
        beforeDestroy() {
            this.MsgBus.$off('sceneSave');
            this.MsgBus.$off('editScene');
        },
        methods: {
            sendPresent() {

            },
            changeWhere(item) {
                this.msg.ID = item.ID
                this.sceneID = item.ID
                this.msg.Data = item.WhereData ? JSON.parse(item.WhereData) : {}
                this.msg.WhereType = item.WhereType
                this.visible = false
                this.getList()
            },
            GetSceneEmployeeList() {
                this.apipost('/api/Scene/GetSceneEmployeeList', {
                    LableType: 5
                }, res => {
                    if (res.data.resultCode == 1) {
                        this.SceneEmployeeList = res.data.data
                    }
                })
            },
            deleteScene(index) {
                this.sceneList.splice(index, 1)
                let obj = {}
                this.sceneList.forEach(element => {
                    obj[element.name] = element
                });
                this.msg.Data = obj
                this.getList()
            },

            // 转移
            transfer() {
                this.apipost('/api/SellEvent/AddEmergenciesActivity', this.addSendMsg, res => {
                    if (res.data.resultCode == 1) {
                        this.multipleSelection = []
                        this.transferVisible = false
                        this.$message.success(res.data.message);
                        this.getList()
                        this.addSendMsg = {
                            Tittle: "",
                            Type: 4,
                            SendType: '2',
                            Details: [],
                            isAll: false,
                        }
                    }
                })
            },
            showMessageFromChild(list) {
                this.mySelectCtrl = !this.mySelectCtrl
                if (list) {
                    this.queryType = list
                    this.getList()
                }
            },
            editCust() {
                this.dialogTableVisibleName = '修改直客'
                this.dialogTableVisible = true
            },
            openDetails(scope) {
                this.drawer = true
                this.CustomerId = scope.row.Id
                this.CustomerName = scope.row.GuestName
            },
            handleSizeChange(val) {
                this.msg.pageSize = val
                this.getList();
            },
            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
            handleClose(done) {
                done();
            },
            getList: function () {
                this.tableData = []
                this.loading = true
                this.apipost('/api/sellevent/GetEmergenciesGuest', this.msg, res => {
                    if (res.data.resultCode == 1) {
                        this.tableData = res.data.data.pageData;
                        this.total = res.data.data.count;
                        this.loading = false;
                    }
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
                this.addSendMsg.isAll = false
                if (val && val.length > 0) {
                    let list = val.map(x => {
                        return {
                            GuestName: x.GuestName,
                            GuestId: x.Id,
                            CustomerName: x.CustomerName,
                            CustomerId: x.CustomerId,
                            GuestPhone: x.MobilePhone,
                            SentId: x.CustomeMobile,
                        }
                    })
                    this.addSendMsg.Details = list
                    this.addSendMsg.sendObj = val.length == 1 ? val[0].GuestName : val[0].GuestName + "等" + val.length +
                        "人"
                } else {
                    this.addSendMsg.sendObj = ""
                }
            }
        }
    };
</script>