<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 style="width: 340px;">
            <!-- <el-input placeholder="请输入直客名称/手机号" v-model="msg.GusetName" class="input-with-select">
                <el-button slot="append"  icon="el-icon-search" @click="getList"></el-button>
            </el-input> -->
     <el-select v-model="msg.Type" placeholder="请选择" @change="changeWhere">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
    </el-select>
        </div>
        <div class="rightmenu">
            <!-- <el-button class="crm-btn query-btn" @click="getList">查询</el-button> -->
            <el-button icon="el-icon-present" class="crm-btn org-btn" @click="addSendMsg.isAll=true;addSendMsg.sendObj='所有客户',transferVisible=true">发送毕业祝福涵</el-button>
            <!-- <el-dropdown>
                <el-button class="crm-btn crm-btn-more easy-btn margin-right0">
                    <i class="iconfont icongengduo"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><i class="iconfont icondaoru"></i> 导入</el-dropdown-item>
                    <el-dropdown-item><i class="iconfont icondaochu"></i> 导出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown> -->
        </div>
    </div>
    <div class="query-box" :style="{'padding-bottom': sceneList.length > 0 ? '0px' : '10px'}">
        <el-row v-if="!multipleSelection.length" :gutter="30">
            <!-- <el-col :span="4">
                <span class="font-size-12" style="padding-right: 10px">场景</span>
                <el-popover
                    placement="bottom"
                    width="180"
                    popper-class="popover-class"
                    v-model="visible"
                    trigger="click">
                    <div data-v-16d669bb="" class="scene-container">
                        <div class="scene-list">
                            <div class="scene-list-item" :class="{'scene-list-item-select': sceneID === item.ID}" v-for="(item, index) in SceneEmployeeList" :key="index" @click="changeWhere(item)">{{item.SceneName}}</div>
                        </div>
                        <div class="handle-interval">
                            <div class="vux-flexbox handle-button vux-flex-row"  @click="MsgBus.$emit('sceneBoxShow', 5, 1)">
                                <i class="el-icon-circle-plus-outline handle-button-icon"></i>
                            <div class="handle-button-name">新建场景</div></div>
                            <div class="vux-flexbox handle-button vux-flex-row" @click="MsgBus.$emit('sceneEditBoxShow', 5, SceneEmployeeList)">
                                <i class="el-icon-setting handle-button-icon"></i>
                                <div class="handle-button-name">管理</div>
                            </div>
                        </div>
                    </div>
                    <el-select size="mini" popper-class="select-no" slot="reference" v-model="msg.ID" placeholder="请选择">
                        <el-option
                            v-for="item in SceneEmployeeList"
                            :key="item.ID"
                            :label="item.SceneName"
                            :value="item.ID">
                        </el-option>
                    </el-select>
                </el-popover>
            </el-col> -->
            <!-- <el-col :span="10">
                <span class="font-size-12" style="padding-right: 10px">距离生日天数</span>
                <el-select size="mini" v-model="t" placeholder="请选择" @change="changeBirthday">
                    <el-option label="今日生日" value="0"></el-option>
                    <el-option label="明日生日" value="1"></el-option>
                    <el-option label="还有3天生日" value="2"></el-option>
                    <el-option label="还有4天生日" value="3"></el-option>
                    <el-option label="还有5天生日" value="4"></el-option>
                    <el-option label="还有6天生日" value="5"></el-option>
                    <el-option label="还有7天生日" value="6"></el-option>
                </el-select>
            </el-col> -->
            <!-- <el-col :span="4">
                <el-button icon="iconfont iconshaixuan" class="crm-btn query-btn crm-btn-mini margin-right0" @click="MsgBus.$emit('sceneBoxShow', 5)">高级筛选</el-button>
            </el-col> --> 
        </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 
                prop="IsCarefor"
                fixed="right"
                width="50"
                label="关注">
                <template slot-scope="scope">
                    <p>
                        <el-tooltip class="item" effect="dark" content="关注" placement="top">
                            <i v-if="scope.row.IsCarefor === 0" @click="CareforCustomer(scope)" class="iconfont iconwujiaoxing cp"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="取消关注" placement="top">
                            <i v-if="scope.row.IsCarefor === 1" @click="CareforCustomer(scope)" class="iconfont iconstar_full cp"></i>
                        </el-tooltip>
                    </p>
                </template>
            </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="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>
    <!-- <div v-if="dialogTableVisible">
        <customerDialogBox @getList="getList" :name="dialogTableVisibleName" :CustomerId="CustomerId"/>
    </div> -->
    <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";
// import customerDialogBox from "./customerDialogBox";
export default {
    components: {
        mySelect,
        customerInfoBox,
        // customerDialogBox
    },
  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,
            }
        ],
        options: [{
          value: '0',
          label: '毕业前'
        }, {
          value: '1',
          label: '毕业后'
        }],
        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,
            Type:"0"
        },
        total: 0,
         sceneList: [],
        SceneEmployeeList: [],
        sceneID: 36,
        visible: false,
        addSendMsg:{
            Tittle:"",
            Type: 1,
            SendType: '2',
            Details: [],
            SendTime: '',
            isAll:false,
            GraduationType:"0",
        }
    };
  },
  created(){
      let date=new Date();
      let month=date.getMonth()+1;
      if(month>=6 && month<=9 ){
          this.msg.Type='1'
      }
  },
  mounted() {
    this.userInfo = this.getLocalStorage();
    this.getList()
    //this.Employee()
    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(){

    },
    
    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/AddBiYeActivity', 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: 2,
                    SendType: '2',
                    Details: [],
                    isAll:false,
                    GraduationType:this.msg.Type,
                }
            }
        })
    },
    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();
    },
    changeWhere(item){
       this.msg.Type=item
       this.addSendMsg.GraduationType=item
       console.log(item)
       this.msg.pageIndex=1
        this.visible = false
        this.getList()
    },
    getList: function (){
        this.tableData = []
        this.loading = true
       
        this.apipost('/api/sellevent/GetBiyeGuest', 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>
