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

.el-table__fixed-body-wrapper table {
  padding-bottom: 8px !important;
}
.el-table__fixed-body-wrapper {
  overflow: auto;
}
.newline .imgCol .imgItem {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
}
.newline .imgCol .imgItem img {
  width: 100%;
  max-height: 100%;
  min-height: 100%;
}
.newline .labelImg {
  position: relative;
  width: 100px;
  height: 100px;
  top: 15px;
}
.newline .labelImg img {
  width: 100%;
  height: 100%;
}
.newline .labelImg:hover .hoverDiv {
  display: block;
  cursor: pointer;
}
.newline .hoverDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  display: none;
}
.newline .hoverDiv span {
  color: #fff;
  font-size: 30px;
  position: relative;
  top: 30px;
}
.newline .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #409efe;
}
</style>
<template>
  <div class="newline 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>
        </div> -->
        <el-select v-model="msg.Type" placeholder="请选择"  @change="changeType">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <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='所有客户',transferVisiblezf=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="transferVisiblezf=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="CustomerName"
                label="客户名称"
                width="120"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p @click="openDetails(scope)" class="font-color-link cp">{{scope.row.CustomerName}}</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="CustomerTypeAlias"
                label="客户类型"
                v-if="queryType[20].show"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerSourceTypeStr"
                label="客户来源"
                width="120"
                v-if="queryType[1].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="Contact"
                label="联系人"
                width="120"
                v-if="queryType[2].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="ContactNumber"
                label="联系电话"
                width="120"
                sortable
                v-if="queryType[3].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="Address"
                label="地址"
                width="150"
                v-if="queryType[4].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="BusinessCount"
                label="商机数"
                width="80"
                v-if="queryType[5].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="OrderCount"
                label="交易订单数"
                sortable
                width="120"
                v-if="queryType[6].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="GuestCount"
                label="交客数"
                sortable
                width="100"
                v-if="queryType[19].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="OrderMoney"
                label="交易金额"
                sortable
                width="120"
                v-if="queryType[7].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CouponCount"
                label="优惠券"
                sortable
                width="80"
                v-if="queryType[8].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="Client_Balance"
                label="幸福存折"
                width="100"
                sortable
                v-if="queryType[9].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerLevelStr"
                label="客户级别"
                width="120"
                sortable
                v-if="queryType[10].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerStatus"
                label="审核状态"
                v-if="queryType[11].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="RealNameAuthentication"
                label="实名认证状态"
                v-if="queryType[12].show"
                width="120"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p v-if="scope.row.RealNameAuthentication === 1" class="font-color-success">已认证</p>
                    <p v-else class="font-color-warning">未认证</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="IsAppLogin"
                label="APP激活状态"
                v-if="queryType[13].show"
                width="120"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p v-if="scope.row.IsAppLogin === 0" class="font-color-warning">未激活</p>
                    <p v-else class="font-color-success">已激活</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                label="距进入公海天数"
                sortable
                v-if="queryType[14].show"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="PersonChargeStr"
                label="负责人"
                width="120"
                v-if="queryType[15].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="LastFollowUpTime"
                label="近期约访"
                sortable
                v-if="queryType[16].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="UpdateTime"
                label="更新时间"
                sortable
                v-if="queryType[17].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="CreateTimestr"
                label="创建时间"
                sortable
                v-if="queryType[18].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 :transferState="false" :CustomerId="CustomerId"/>

    </el-drawer>
    <div v-if="dialogTableVisible">
        <customerDialogBox @getList="getList" :name="dialogTableVisibleName" :CustomerId="CustomerId"/>
    </div>
    <el-dialog :visible.sync="transferVisiblezf" :close-on-click-modal="false" width="850px" 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" >
            <el-row>
                <el-col :span="10">
                    <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>
                    <div class="MyEditForm-item">
                        <el-form-item label="图片" class="label-pad-left">
                            <div v-show="addSendMsg.ImgUrl!=''" class="labelImg">
                                <div class="hoverDiv">
                                    <span @click="DeleteImg" class="iconfont icondelete"></span>
                                    <span @click="previewFile(addSendMsg.ImgUrl)" class="iconfont iconchakan"></span>
                                    
                                </div>
                                <img :src="addSendMsg.ImgUrl" alt="">
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col class="imgCol" :span="14">
                    <div class="imgItem" v-for="(item,index) in ImgList" :key="index">
                        <img @click="chooseImg(item.PictureUrl)"  :src="item.PictureUrl" alt="">
                    </div>
                    <div style="text-align:right;margin-top:10px">
                        <el-pagination
                        background
                        @current-change="handleCurrentChange2"
                        layout="prev, pager, next"
                        :page-size="imgmsg.pageSize"
                        :total="total2">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="add-box-btn" @click="transferNew(2)">确 定</el-button>
            <el-button class="add-box-btn add-box-cancel" @click="transferVisiblezf = false">取 消</el-button>
        </div>
       
    </el-dialog>
  </div>
</template>
<script>
import mySelect from "../dialogModel/select";
// import customerInfoBox from "../guestManagement/customerInfoBox";
import customerInfoBox from "../assembly/customerInfoBox";
// import customerDialogBox from "./customerDialogBox";
import customerDialogBox from "../dialogModel/customerDialogBox";
export default {
  components: {
    mySelect,
    customerInfoBox,
    customerDialogBox,
  },
  data() {
    return {
      options: [
        {
          value: "0",
          label: "元旦节",
        },
        {
          value: "1",
          label: "2.14情人节",
        },
        {
          value: "2",
          label: "妇女节",
        },
        {
          value: "3",
          label: "劳动节",
        },
        {
          value: "4",
          label: "春节",
        },
        {
          value: "5",
          label: "儿童节",
        },
        {
          value: "6",
          label: "母亲节",
        },
      ],
      transferMsg: {
        CustomerIds: [],
        TransferType: 1, //类型，1-移除，2-转为团员
        IsRead: 0, //0-读写，1-只读
        EmpId: "",
        TransferOther: [], //1-联系人，2-商机，3-合同
      },
      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,
        },
        {
          label: "实名认证状态",
          show: true,
        },
        {
          label: "APP激活状态",
          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,
        },
        {
          label: "实名认证状态",
          show: true,
        },
        {
          label: "APP激活状态",
          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: "",
      transferVisiblezf: false,
      mySelectCtrl: false,
      drawer: false,
      loading: true,
      dialogTableVisible: false,
      dialogTableVisibleName: "新建直客",
      tableData: [],
      multipleSelection: [],
      EmployeeList: [],
      value: "",
      userInfo: {},

      msg: {
        GusetName: "",
        pageIndex: 1,
        pageSize: 30,
        ContactNumber: "",
        Type: "0",
        OrderBy: "",
        ID: 36,
      },
      total: 0,
      sceneList: [],
      SceneEmployeeList: [],
      sceneID: 36,
      visible: false,
      addSendMsg: {
        Tittle: "",
        Type: 10,
        SendType: "2",
        Details: [],
        SendTime: "",
        isAll: false,
        ImgUrl: "",
        GraduationType: "0",
      },
      ImgList: [],
      imgmsg: {
        pageIndex: 1,
        pageSize: 16,
      },
      total2: 0,
      GraduationType: "0",
    };
  },
  mounted() {
    this.userInfo = this.getLocalStorage();
    this.getList();
    this.getImg();
    //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: {
    changeType(item) {
      this.msg.Type = item;
      this.addSendMsg.GraduationType = item;
      this.GraduationType = item;
      this.msg.pageIndex = 1;
      this.visible = false;
      this.getList();
    },
    previewFile(file) {
      if (file.IsPicture()) {
        this.MsgBus.$emit("showImg", file);
        return;
      }
      window.open(file, "_blank");
    },
    chooseImg(PictureUrl) {
      this.addSendMsg.ImgUrl = PictureUrl;
    },
    DeleteImg() {
      this.addSendMsg.ImgUrl = "";
    },
    handleCurrentChange2(val) {
      this.imgmsg.pageIndex = val;
      this.getImg();
    },
    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();
    },

    // 新增
    transferNew() {
      this.apipost(
        "/api/SellEvent/AddFestivalCustomer",
        this.addSendMsg,
        (res) => {
          if (res.data.resultCode == 1) {
            this.multipleSelection = [];
            this.transferVisiblezf = false;
            this.$message.success(res.data.message);
            this.getList();
            this.addSendMsg = {
              Tittle: "",
              Type: 10,
              SendType: "2",
              Details: [],
              isAll: false,
              ImgUrl: "",
              GraduationType: this.GraduationType,
            };
          }
        }
      );
    },
    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.CustomerId;
      this.CustomerName = scope.row.CustomerName;
    },
    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/GetFestivalCustomer", this.msg, (res) => {
        if (res.data.resultCode == 1) {
          this.tableData = res.data.data.pageData;
          this.total = res.data.data.count;
          this.loading = false;
        }
      });
    },
    getImg() {
      this.apipost("/api/sellevent/GetAdvertising", this.imgmsg, (res) => {
        if (res.data.resultCode == 1) {
          this.ImgList = res.data.data.pageData;
          this.total2 = res.data.data.count;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.addSendMsg.isAll = false;
      if (val && val.length > 0) {
        let list = val.map((x) => {
          return {
            GuestName: "",
            GuestId: 0,
            CustomerName: x.CustomerName,
            CustomerId: x.CustomerId,
            GuestPhone: "",
            SentId: x.ContactNumber,
          };
        });
        this.addSendMsg.Details = list;
        this.addSendMsg.sendObj =
          val.length == 1 ? val[0].CustomerName : val[0].CustomerName + "等";
      } else {
        this.addSendMsg.sendObj = "";
      }
    },
  },
};
</script>
