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

<!--
<online-chat :brandId="brandId"></online-chat>
import onlineChat from '@/components/app/online-chat.vue';
components: {
  onlineChat
}
-->
<template>
  <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>
            </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: '100%' }">
                  <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>
                <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: '100%' }">
                      <el-table-column prop="" label="商品信息" show-overflow-tooltip>
                        <template slot-scope="scope">
                          <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.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>
                        <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>
                  </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: '100%' }">
                      <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>
                        <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>
                  </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>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
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 '';
      }
    }
  },
  data() {
    return {
      activeTab: '2',
      leftData: [
        // {
        //   tabId: '1',
        //   tabName: '短信提醒'
        // },
        {
          tabId: '2',
          tabName: '模板消息'
        },
        {
          tabId: '3',
          tabName: '图文'
        },
        {
          tabId: '4',
          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: []
    };
  },
  methods: {
    /**
     * 改变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 {
        that.activeName == 'first' ? that.getGoodsList(that.brandId) : that.getPointList(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
      };
      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;
      that.pageNum = 1;
      that.activeTab = item.tabId;
      that.getChatSet(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 || [];
            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 || [];
            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
          });
        });
    },
    /**
     * 获取在线沟通设置数据
     */
    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);
      }
    }
  },
  mounted() {
    const that = this;
    if (that.brandId != '') {
      that.getChatSet(that.brandId);
    }
  }
};
</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%;
  }
}

.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;
        &: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;
              }
            }
          }
        }
      }
    }
  }
}
</style>
