<!--
<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">在线沟通</span><el-switch v-model="chatData.chatFlag" active-text="" inactive-text=""></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"></div>
            <!--模板-->
            <div v-if="activeTab == 2" class="online-chat-template"></div>
            <!--图文-->
            <div v-if="activeTab == 3" class="online-chat-article"></div>
            <!--商品-->
            <div v-if="activeTab == 4" class="online-chat-goods"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'online-chat',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      activeTab: '1',
      leftData: [
        {
          tabId: '1',
          tabName: '短信提醒'
        },
        {
          tabId: '2',
          tabName: '模板消息'
        },
        {
          tabId: '3',
          tabName: '图文'
        },
        {
          tabId: '4',
          tabName: '商品'
        }
      ],
      chatData: {
        chatFlag: false // 总的
      },
      // 图文
      articleList: [],
      // 商品
      goodsList: [],
      // 积分商品
      pointList: []
    };
  },
  methods: {
    /**
     * 选择菜单
     */
    changeTab(item) {
      const that = this;
      that.activeTab = item.tabId;
    },
    /**
     * 获取商品列表
     */
    getGoodsList(brandId) {
      const that = this;
      let para = {
        brandId: brandId
      };
      postRequest('/haoban-app-member-web/customer/find_goods_list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.goodsList = resData.result.list || [];
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取积分商品列表
     */
    getPointList(brandId) {
      const that = this;
      let para = {
        brandId: brandId
      };
      postRequest('/haoban-app-member-web/customer/find_integal_goods_list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.pointList = resData.result.list || [];
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取图文列表
     */
    getArticleList(brandId) {
      const that = this;
      let para = {
        brandId: brandId
      };
      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 || [];
            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) {
              that.myCustomData.chatFlag = !!resData.result.chatFlag ? true : false;
            }
            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>
.online-chat-content {
  width: 100%;
  padding: 20px;
  .online-chat-switch {
    padding: 18px 0 33px 0;
  }
  .online-chat-body {
    width: 100%;
    height: 492px;
    border: 1px solid #dcdfe6;
    .online-chat-left {
      width: 172px;
      min-width: 172px;
      max-width: 172px;
      height: 492px;
      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: 492px;
      padding: 40px;
      overflow: hidden;
      .online-chat-right_body {
        height: 100%;
        overflow-y: auto;
        .online-chat-message {
        }
        .online-chat-template {
        }
        .online-chat-article {
        }
        .online-chat-goods {
        }
      }
    }
  }
}
</style>
