<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-09-18 15:24:50
 * @LastEditors: 无尘
 * @LastEditTime: 2019-10-30 10:40:07
 -->

<!--
<online-chat :brandId="brandId"></online-chat>
import onlineChat from '@/components/app/online-chat.vue';
components: {
  onlineChat
}
-->
<template>
  <div class="app-detail-wrap">
    <div class="online-chat-content border-box">
      <div class="online-chat-switch"><span class="font-14 color-606266 p-r-18">在线沟通</span><el-switch v-model="chatData.chatFlag" active-text="" inactive-text="" @change="changeChatFlag"></el-switch></div>
      <div class="online-chat-body">
        <div class="flex">
          <div class="online-chat-left">
            <ul>
              <template v-for="(item, index) in leftData">
                <li :class="['online-chat-left_li', activeTab == item.tabId ? 'active-li' : '']" :key="index + 'left'" @click="changeTab(item)">{{ item.tabName }}</li>
                <ul v-if="item.children && item.children.length" :key="index + 'left1'">
                  <template v-for="(child, key) in item.children">
                    <li :class="['online-chat-left_li child-li', activeTab == child.tabId ? 'active-li' : '']" :key="key + 'left12'" @click="changeTab(child)">{{ child.tabName }}</li>
                  </template>
                </ul>
              </template>
            </ul>
          </div>
          <div class="online-chat-right border-box">
            <div class="online-chat-right_body">
              <!--短信-->
              <div v-if="activeTab == 1" class="online-chat-message">
                <el-form :model="chatData" :rules="rules" ref="msgForm" label-width="70px" class="demo-ruleForm">
                  <el-form-item label="短信提醒" prop="name"> <el-switch v-model="chatData.isMessageRemind" active-text="" inactive-text=""> </el-switch><span class="font-14 color-909399 p-l-24">开启后，会员发送消息，超出10条后，即发送短信给导购，每日最多触发一条短信，短信计入商家计费中心</span> </el-form-item>
                  <el-form-item v-if="chatData.isMessageRemind" label="" prop="messageRemindTime">
                    <span class="font-14 color-606266 p-r-10">下发时间设置</span
                    ><el-time-select
                      v-model="chatData.messageRemindTime"
                      :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:59'
                      }"
                      placeholder="选择时间"
                    >
                    </el-time-select
                    ><span class="font-14 color-909399 p-l-20">该事件设置将在当日生效</span>
                  </el-form-item>
                  <el-form-item v-if="chatData.isMessageRemind" label="">
                    <el-button type="primary" @click="saveData('msgForm')">保存</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <!--模板-->
              <div v-if="activeTab == 2" class="online-chat-template">
                <div role="alert" class="el-alert el-alert--info">
                  <i class="el-alert__icon el-icon-info font-12 color-1890ff" style="align-self: flex-start;"></i>
                  <div class="el-alert__content"><span class="el-alert__title color-606266 font-14">配置说明：导购可主动发起聊天，发送形式为模板消息，请配置模板消息内容。频繁使用模板消息，可能导致微信封闭模板消息及会员取关率增加，请谨慎使用。</span></div>
                </div>
                <div class="m-t-23"><span class="font-14 color-303133">模板消息</span><el-switch class="m-l-20" v-model="chatData.isTemplateMessage" active-text="" inactive-text="" @change="postSave(brandId)"> </el-switch><span class="font-14 color-909399 p-l-24">仅支持专属导购对会员发送模板消息，每个会员每个自然月模板消息发送次数不超过三次。设置后次日生效。</span></div>
                <div class="m-t-23"><span class="font-14 color-303133">模板名字：</span>{{ templateName }}</div>
              </div>
              <!--图文-->
              <div v-if="activeTab == 3" class="online-chat-article">
                <div role="alert" class="el-alert el-alert--info">
                  <i class="el-alert__icon el-icon-info font-12 color-1890ff"></i>
                  <div class="el-alert__content"><span class="el-alert__title color-606266 font-14">配置说明：选取微信营销素材库中的图文，配置后，导购可以选择对应的营销图文发送给会员</span></div>
                </div>
                <div class="m-t-20"><span class="font-14 color-303133">图文</span><el-switch class="m-l-20" v-model="chatData.isImgMessage" active-text="" inactive-text="" @change="postSave(brandId)"> </el-switch><span class="font-14 color-909399 p-l-24">开启后，导购与会员聊天可发送GIC图文</span></div>
                <div v-if="chatData.isImgMessage" class="m-t-20 p-l-50">
                  <el-table class="select-table" ref="multipleTable" :data="articleList" tooltip-effect="dark" style="width: calc(100% - 3px);">
                    <el-table-column prop="" label="图片" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <div class="flex">
                          <div class="img-wrap border-box">
                            <img v-if="scope.row.img" :src="scope.row.img" alt="" />
                          </div>
                          <div class="article-title font-14 color-606266 p-l-10">
                            {{ scope.row.title }}
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="" label="作者" show-overflow-tooltip>
                      <template slot-scope="scope">{{ scope.row.authorName || '--' }}</template>
                    </el-table-column>
                    <el-table-column>
                      <template slot="header" slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="导购发送图文的总人数统计，次日刷新" placement="right">
                          <span style="cursor: pointer;">导购发送图文人数<i class="el-icon-info font-12 color-606266"></i></span>
                        </el-tooltip>
                      </template>
                      <template slot-scope="scope">
                        {{ scope.row.pushCount }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="" label="操作" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <el-button type="text" size="small" @click="toSendDetail(scope.$index, scope.row, '4')">发送记录</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="block common-wrap__page text-right m-t-24" v-if="articleList.length != 0">
                    <el-pagination @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next" :total="total"> </el-pagination>
                  </div>
                </div>
              </div>
              <!--商品-->
              <div v-if="activeTab == 4" class="online-chat-goods">
                <div role="alert" class="el-alert el-alert--info">
                  <i class="el-alert__icon el-icon-info font-12 color-1890ff"></i>
                  <div class="el-alert__content"><span class="el-alert__title color-606266 font-14">配置说明：选取达摩微商城及积分商城中的商品，配置后，导购可以选择对应的商品发送给会员</span></div>
                </div>
                <div class="m-t-20"><span class="font-14 color-303133">达摩微商城</span><el-switch class="m-l-10" v-model="chatData.isGoodMessage" active-text="" inactive-text="" @change="postSave(brandId)"> </el-switch><span class="font-14 color-303133 p-l-40">积分商城</span><el-switch class="m-l-10" v-model="chatData.isIntegralGoodMessage" active-text="" inactive-text="" @change="postSave(brandId)"> </el-switch></div>
                <div v-if="chatData.isGoodMessage || chatData.isIntegralGoodMessage" class="m-t-20">
                  <el-tabs v-model="activeName" type="card" @tab-click="handleTab">
                    <el-tab-pane v-if="chatData.isGoodMessage" label="达摩微商城" name="first">
                      <el-table class="select-table" ref="multipleTable" :data="goodsList" tooltip-effect="dark" style="width: calc(100% - 3px);">
                        <el-table-column prop="" label="商品信息" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <div class="flex">
                              <div class="img-wrap flex flex-align-center flex-pack-center border-box">
                                <img :src="scope.row.goodImg" alt="" />
                              </div>
                              <div class="article-title flex flex-column">
                                <p class="font-14 color-606266">{{ scope.row.goodName }}</p>
                                <p class="font-12 color-909399">{{ scope.row.goodCode }}</p>
                              </div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="" label="单价（元）">
                          <template slot-scope="scope">{{ scope.row.goodPrice }}</template>
                        </el-table-column>
                        <el-table-column prop="" label="库存">
                          <template slot-scope="scope">{{ scope.row.stock || '--' }}</template>
                        </el-table-column>
                        <el-table-column prop="" label="总销量">
                          <template slot-scope="scope">{{ scope.row.saleAmount }}</template>
                        </el-table-column>
                        <el-table-column prop="" label="发布时间">
                          <template slot-scope="scope">
                            <div>{{ scope.row.publishTime | timeStampToYmd }}</div>
                            <div>{{ scope.row.publishTime | timeStampToHms }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column width="150">
                          <template slot="header" slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="导购发送图文的总人数统计，次日刷新" placement="right">
                              <span style="cursor: pointer;">导购发送图文人数<i class="el-icon-info font-12 color-606266"></i></span>
                            </el-tooltip>
                          </template>
                          <template slot-scope="scope">
                            {{ scope.row.pushCount }}
                          </template>
                        </el-table-column>
                        <el-table-column prop="" label="操作" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <el-button type="text" size="small" @click="toSendDetail(scope.$index, scope.row, '1')">发送记录</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-tab-pane>
                    <el-tab-pane v-if="chatData.isIntegralGoodMessage" label="积分商城" name="second">
                      <el-table class="select-table" ref="multipleTable" :data="pointList" tooltip-effect="dark" style="width: calc(100% - 3px);">
                        <el-table-column prop="" label="商品信息">
                          <template slot-scope="scope" show-overflow-tooltip>
                            <div class="flex">
                              <div class="img-wrap border-box">
                                <img :src="scope.row.goodImg" alt="" />
                              </div>
                              <div class="article-title flex flex-column">
                                <p class="font-14 color-606266">{{ scope.row.goodName }}</p>
                                <p class="font-12 color-909399">{{ scope.row.goodCode }}</p>
                              </div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="" label="积分费用">
                          <template slot-scope="scope">{{ scope.row.integral }}</template>
                        </el-table-column>
                        <el-table-column prop="" label="现金费用">
                          <template slot-scope="scope">{{ scope.row.goodPrice }}</template>
                        </el-table-column>
                        <el-table-column prop="" label="创建时间">
                          <template slot-scope="scope">
                            <div>{{ scope.row.publishTime | timeStampToYmd }}</div>
                            <div>{{ scope.row.publishTime | timeStampToHms }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column width="150">
                          <template slot="header" slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="导购发送图文的总人数统计，次日刷新" placement="right">
                              <span style="cursor: pointer;">导购发送图文人数<i class="el-icon-info font-12 color-606266"></i></span>
                            </el-tooltip>
                          </template>
                          <template slot-scope="scope">
                            {{ scope.row.pushCount }}
                          </template>
                        </el-table-column>
                        <el-table-column prop="" label="操作" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <el-button type="text" size="small" @click="toSendDetail(scope.$index, scope.row, '2')">发送记录</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
                  <div class="block common-wrap__page text-right m-t-24" v-if="goodsList.length != 0">
                    <el-pagination @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next" :total="total"> </el-pagination>
                  </div>
                </div>
              </div>
              <div v-if="activeTab == 51" class="online-chat-card">
                <div role="alert" class="el-alert el-alert--info">
                  <i class="el-alert__icon el-icon-info font-12 color-1890ff" style="align-self: flex-start;"></i>
                  <div class="el-alert__content"><span class="el-alert__title color-606266 font-14">选取GIC中卡券营销适用好办的卡券，配置后，导购可以选择对应的卡券发送给会员</span></div>
                </div>
                <div class="m-t-20 m-b-20 flex flex-space-between">
                  <div class="card-top-left"><span class="font-14 color-303133">卡券</span><el-switch class="m-l-20" v-model="cardCoupChatSwitch" active-text="" inactive-text="" @change="postSaveCard(brandId)"> </el-switch><span class="font-14 color-909399 p-l-24">开启后，导购与会员聊天可发送GIC卡券</span></div>
                  <div class="card-top-right">
                    <el-button type="primary" @click="toNewCard">新建卡券</el-button>
                  </div>
                </div>
                <card-list-table v-if="cardCoupChatSwitch" :activeTab="activeTab" :tableData="cardListData" @delCard="delCard"></card-list-table>
                <div v-if="cardListData.length && cardCoupChatSwitch" class="block common-wrap__page text-right m-t-24">
                  <el-pagination @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next" :total="total"> </el-pagination>
                </div>
              </div>
              <div v-if="activeTab == 52" class="online-chat-card_record">
                <card-record-table :activeTab="activeTab" :tableData="cardRecordData"></card-record-table>
                <div class="block common-wrap__page text-right m-t-24" v-if="cardRecordData.length">
                  <el-pagination @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next" :total="total"> </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cardRecordTable from '@/components/app/card-record-table.vue';
import cardListTable from '@/components/app/card-list-table';
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import { _debounce } from '@/common/js/public';
export default {
  name: 'online-chat',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  components: {
    cardRecordTable,
    cardListTable
  },
  data() {
    return {
      activeTab: '2',
      leftData: [
        // {
        //   tabId: '1',
        //   tabName: '短信提醒'
        // },
        {
          tabId: '2',
          tabName: '模板消息'
        },
        {
          tabId: '3',
          tabName: '图文'
        },
        {
          tabId: '4',
          tabName: '商品'
        },
        {
          tabId: '5',
          tabName: '卡券',
          children: [
            {
              tabId: '51',
              tabName: '卡券列表'
            },
            {
              tabId: '52',
              tabName: '卡券记录'
            }
          ]
        }
      ],
      chatData: {
        chatFlag: false, // 总的
        isMessageRemind: false, // 短信
        messageRemindTime: '',
        isTemplateMessage: false, // 模板消息
        isImgMessage: false, // 图文
        isGoodMessage: false,
        isIntegralGoodMessage: false
      },
      rules: {
        messageRemindTime: [{ required: true, message: '请选择时间', trigger: 'blur' }]
      },
      // 模板
      templateName: '',
      // 图文
      articleList: [],
      pageSize: 4,
      pageNum: 1,
      total: 0,
      // 商品
      activeName: 'first',
      goodsList: [],
      // 积分商品
      pointList: [],
      // 卡券
      cardCoupChatSwitch: false,
      cardListData: [], // 卡券列表
      cardRecordData: [] // 卡券记录
    };
  },
  methods: {
    /**
     * 新建卡券
     */
    toNewCard() {
      const that = this;
      that.$router.push(`/newCard?activeTab=${that.activeTab}&appIcon=${this.$route.query.appIcon}`);
    },
    /**
     * 删除卡券
     */
    delCard(id) {
      const that = this;
      that.delCardList(id);
    },
    /**
     * 发送记录
     */
    toSendDetail(index, row, tabType) {
      const that = this;
      that.$router.push(`/sendRecord?activeTab=${that.activeTab}&tabType=${tabType}&appIcon=${this.$route.query.appIcon}&relatedId=${row.id || row.goodId}`);
    },
    /**
     * 改变chatFlag
     */
    changeChatFlag() {
      const that = this;
      that.postSave(that.brandId);
    },
    /**
     * 分页--当前页变化
     */
    handleCurrentChange(val) {
      const that = this;
      that.pageNum = val;
      if (that.activeTab == 3) {
        that.getArticleList(that.brandId);
      } else if (that.activeTab == 4) {
        that.activeName == 'first' ? that.getGoodsList(that.brandId) : that.getPointList(that.brandId);
      } else if (that.activeTab == 51) {
        that.getCardList(that.brandId);
      } else if (that.activeTab == 52) {
        that.getCardRecord(that.brandId);
      }
    },
    /**
     * 保存数据
     */
    saveData: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postSave(that.brandId);
        } else {
          return false;
        }
      });
    }, 500),
    postSave(brandId) {
      const that = this;
      that.pageNum = 1;
      if (that.chatData.isIntegralGoodMessage && !that.chatData.isGoodMessage) {
        that.activeName = 'second';
      }
      let para = {
        brandId: brandId,
        chatFlag: that.chatData.chatFlag ? 1 : 0, // 总的
        isMessageRemind: that.chatData.isMessageRemind ? 1 : 0, // 短信
        messageRemindTime: that.chatData.messageRemindTime,
        isTemplateMessage: that.chatData.isTemplateMessage ? 1 : 0, // 模板消息
        isImgMessage: that.chatData.isImgMessage ? 1 : 0, // 图文
        isGoodMessage: that.chatData.isGoodMessage ? 1 : 0,
        isIntegralGoodMessage: that.chatData.isIntegralGoodMessage ? 1 : 0,
        mainStoreFlag: that.chatData.mainStoreFlag,
        minorStoreFlag: that.chatData.minorStoreFlag,
        openCardStoreFlag: that.chatData.openCardStoreFlag,
        clerkSeeOtherFlag: that.chatData.clerkSeeOtherFlag,
        allowGuideContact: that.chatData.allowGuideContact,
        allowGuideMobile: that.chatData.allowGuideMobile,
        allowGuideMessage: that.chatData.allowGuideMessage,
        allowGuideOnlineChat: that.chatData.allowGuideOnlineChat,
        isSeeAuthMember: that.chatData.isSeeAuthMember
      };
      postRequest('/haoban-app-member-web/customer/save-member-show-setting', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('保存成功', 'success');
            if (that.activeTab == 3 && that.chatData.isImgMessage) {
              that.getArticleList(brandId);
            }
            if (that.activeTab == 4) {
              that.chatData.isGoodMessage ? that.getGoodsList(brandId) : '';
              that.chatData.isIntegralGoodMessage ? that.getPointList(brandId) : '';
              if (that.chatData.isIntegralGoodMessage && !that.chatData.isGoodMessage) {
                that.activeName = 'second';
              }
              if (that.chatData.isGoodMessage && !that.chatData.isIntegralGoodMessage) {
                that.activeName = 'first';
              }
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 选择菜单
     */
    changeTab(item) {
      const that = this;
      if (item.children) {
        that.activeTab = item.children[0].tabId;
        that.getCardSet(that.brandId);
        return false;
      }
      that.pageNum = 1;
      that.activeTab = item.tabId;
      that.getChatSet(that.brandId);
      that.getCardSet(that.brandId);
    },
    /**
     * 切换 tab
     *
     */
    handleTab(tab, event) {
      const that = this;
      that.pageNum = 1;
      if (tab.name == 'first') {
        that.getGoodsList(that.brandId);
      } else {
        that.getPointList(that.brandId);
      }
    },
    /**
     * 获取模板名字
     */
    getTemplate(brandId) {
      const that = this;
      let para = {
        brandId: brandId
      };
      postRequest('/haoban-app-member-web/customer/find_message_template', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.templateName = resData.result || '--';
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取商品列表
     */
    getGoodsList(brandId) {
      const that = this;
      let para = {
        pageSize: that.pageSize,
        pageNum: that.pageNum,
        brandId: brandId
      };
      postRequest('/haoban-app-member-web/customer/find_good_list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.goodsList = resData.result.list || [];
            if (that.activeName == 'first') {
              that.total = resData.result.total;
            }
            return;
          }
          that.goodsList = [];
          that.total = 0;
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取积分商品列表
     */
    getPointList(brandId) {
      const that = this;
      let para = {
        brandId: brandId,
        pageSize: that.pageSize,
        pageNum: that.pageNum
      };
      postRequest('/haoban-app-member-web/customer/find_integal_good_list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.pointList = resData.result.list || [];
            if (that.activeName == 'second') {
              that.total = resData.result.total;
            }
            return;
          }
          that.pointList = [];
          that.total = 0;
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取图文列表
     */
    getArticleList(brandId) {
      const that = this;
      let para = {
        brandId: brandId,
        pageSize: that.pageSize,
        pageNum: that.pageNum
      };
      postRequest('/haoban-app-member-web/customer/find_img_list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.articleList = resData.result.list || [];
            that.total = resData.result.total;
            return;
          }
          that.articleList = [];
          that.total = 0;
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     * 删除卡券
     */
    delCardList(coupCardId) {
      const that = this;
      let para = {
        brandId: that.brandId,
        coupCardId: coupCardId
      };
      postRequest('/haoban-app-member-web/cardCoupon/del-card-coup', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('删除成功', 'success');
            that.getCardList(that.brandId);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     * 获取卡券列表
     */
    getCardList(brandId) {
      const that = this;
      let para = {
        brandId: brandId,
        pageSize: that.pageSize,
        pageNum: that.pageNum
      };
      postRequest('/haoban-app-member-web/cardCoupon/find-card-page', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.cardListData = resData.result.list || [];
            that.total = resData.result.pageInfo.total;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     * 获取卡券记录
     */
    getCardRecord(brandId) {
      const that = this;
      let para = {
        brandId: brandId,
        pageSize: that.pageSize,
        pageNum: that.pageNum
      };
      postRequest('/haoban-app-member-web/cardCoupon/find-card-log-page', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.cardRecordData = resData.result.list || [];
            that.total = resData.result.total;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     * 设置卡券开关
     */
    postSaveCard(brandId) {
      const that = this;
      let para = {
        cardCoupChatSwitch: that.cardCoupChatSwitch ? 1 : 0,
        brandId: brandId
      };
      postRequest('/haoban-app-member-web/customer/save-card-coup-setting', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('设置成功', 'success');
            if (that.cardCoupChatSwitch) {
              that.getCardList(that.brandId);
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     * 获取卡券开关
     */
    getCardSet(brandId) {
      const that = this;
      let para = {
        brandId: brandId
      };
      postRequest('/haoban-app-member-web/customer/find-card-coup-setting', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            resData.result.cardCoupChatSwitch = resData.result.cardCoupChatSwitch == 1 ? true : false; // 总的
            that.cardCoupChatSwitch = resData.result.cardCoupChatSwitch;
            if (that.activeTab == '51' && that.cardCoupChatSwitch) {
              that.getCardList(that.brandId);
            }
            if (that.activeTab == '52') {
              that.getCardRecord(that.brandId);
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取在线沟通设置数据
     */
    getChatSet(brandId) {
      const that = this;
      let para = {
        brandId: brandId
      };
      postRequest('/haoban-app-member-web/customer/find-online-chat-setting', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!!resData.result) {
              resData.result.chatFlag = resData.result.chatFlag == 1 ? true : false; // 总的
              resData.result.isMessageRemind = resData.result.isMessageRemind == 1 ? true : false; // 短信
              resData.result.messageRemindTime = resData.result.messageRemindTime;
              resData.result.isTemplateMessage = resData.result.isTemplateMessage == 1 ? true : false; // 模板消息
              resData.result.isImgMessage = resData.result.isImgMessage == 1 ? true : false; // 图文
              resData.result.isGoodMessage = resData.result.isGoodMessage == 1 ? true : false;
              resData.result.isIntegralGoodMessage = resData.result.isIntegralGoodMessage == 1 ? true : false;
              that.chatData = resData.result;
              if (that.activeTab == 2) {
                that.getTemplate(brandId);
              }
              if (that.activeTab == 3 && resData.result.isImgMessage) {
                that.pageSize = 4;
                that.getArticleList(brandId);
              }
              if (that.activeTab == 4) {
                that.pageSize = 3;
                resData.result.isGoodMessage ? that.getGoodsList(brandId) : '';
                resData.result.isIntegralGoodMessage ? that.getPointList(brandId) : '';
                if (resData.result.isIntegralGoodMessage && !resData.result.isGoodMessage) {
                  that.activeName = 'second';
                }
                if (resData.result.isGoodMessage && !resData.result.isIntegralGoodMessage) {
                  that.activeName = 'first';
                }
              }
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      if (newData != '') {
        that.getChatSet(newData);
        that.getCardSet(newData);
      }
    }
  },
  mounted() {
    const that = this;
    that.$emit('showTab', '2');
    if (that.brandId != '') {
      that.getChatSet(that.brandId);
      that.getCardSet(that.brandId);
    }
    if (that.$route.query.activeTab != '') {
      that.activeTab = that.$route.query.activeTab || '2';
    }
  }
};
</script>
<style lang="less" scoped>
.m-l-20 {
  margin-left: 20px;
}

.m-t-23 {
  margin-top: 23px;
}

.p-r-18 {
  padding-right: 18px;
}

.p-l-24 {
  padding-left: 24px;
}

.p-l-40 {
  padding-left: 40px;
}

.p-l-50 {
  padding-left: 50px;
}

.img-wrap {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  border: 1px dashed #606266;
  background: #ecf1f5;
  img {
    width: 100%;
    max-width: 40px;
    max-height: 40px;
  }
}

.el-alert {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
}
.online-chat-content {
  width: 100%;
  padding: 20px;
  .online-chat-switch {
    padding: 18px 0 31px 0;
  }
  .online-chat-body {
    width: 100%;
    height: 522px;
    border: 1px solid #dcdfe6;
    .online-chat-left {
      width: 172px;
      min-width: 172px;
      max-width: 172px;
      height: 522px;
      background: #f5f7fa;
      .online-chat-left_li {
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        color: #303133;
        font-size: 14px;
        cursor: pointer;
        &.child-li {
          padding-left: 40px;
        }
        &:hover {
          color: #1890ff;
          background: #fff;
        }
        &.active-li {
          color: #1890ff;
          background: #fff;
        }
      }
    }
    .online-chat-right {
      width: calc(100% - 172px);
      height: 522px;
      // padding: 40px 20px 0 40px;
      overflow: hidden;
      .online-chat-right_body {
        height: 100%;
        overflow-y: auto;
        .online-chat-message {
          padding: 40px 20px 0 40px;
        }
        .online-chat-template {
          padding: 40px 20px 0 40px;
        }
        .online-chat-article {
          padding: 40px 20px 0 40px;
          .article-title {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            align-self: center;
            p {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              align-self: center;
            }
          }
        }
        .online-chat-goods {
          padding: 40px 20px 0 40px;
          .article-title {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            align-self: center;
            padding-left: 10px;
            p {
              line-height: 14px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              & + p {
                margin-top: 4px;
              }
            }
          }
        }
        .online-chat-card {
          padding: 40px 20px 0 40px;
          /deep/ .el-table__header,
          .el-table__body,
          .el-table__footer {
            border-collapse: collapse !important;
          }
        }
        .online-chat-card_record {
          padding: 40px 20px 0 40px;
          /deep/ .el-table__header,
          .el-table__body,
          .el-table__footer {
            border-collapse: collapse !important;
          }
        }
      }
    }
  }
}
</style>
