<template>
  <div class="marketing-record">
    <div class="tabs">
      <el-tabs v-model="tabsIndex" @tab-click="handleClick">
        <el-tab-pane label="智能营销" name="1">
          <ecm-record ref="ecmRecord" :tableData="ecmTableData" @changeSearch="onChange" />
        </el-tab-pane>
        <el-tab-pane label="卡券营销" name="2">
          <card-record :tableData="cardTableData" @changeSearch="onChange" />
        </el-tab-pane>
        <el-tab-pane label="短信营销" name="3">
          <message-record :tableData="messageTableData" @changeSearch="onChange" />
        </el-tab-pane>
        <el-tab-pane label="微信营销" name="4">
          <wechat-record :tableData="wechatTableData" @changeSearch="onChange" />
        </el-tab-pane>
        <el-tab-pane label="AI营销" name="5">
          <ai-record :tableData="aiTableData" @changeSearch="onChange"></ai-record>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ecmRecord from "./components/ecm.vue";
import cardRecord from "./components/card.vue";
import wechatRecord from "./components/wechat.vue";
import messageRecord from "./components/message.vue";
import AiRecord from './components/ai-record.vue';
import { doFetch, doFetchqs } from "@/components/axios/api";
import { dateformat } from '@/utils/formatTime';
import url from "@/components/axios/url";
const { ecmLogPage, cardLogPage, messageLogPage, wechatLogPage, cardChannelType, aiLogPage  } = url;
export default {
  name: "marketing-record",
  components: {
    ecmRecord,
    cardRecord,
    wechatRecord,
    messageRecord,
    AiRecord
  },
  data() {
    return {
      tabsIndex: "1",
      search: {
        msg: ""
      },
      ecmTableData: {
        data: [],
        currentPage: 1,
        pageSizeList: [20, 40, 60, 80],
        pageSize: 20,
        total: 0,
        tableHeader: [],
        loading: false
      },
      wechatTableData: {
        data: [],
        currentPage: 1,
        pageSizeList: [20, 40, 60, 80],
        pageSize: 20,
        total: 0,
        tableHeader: [],
        loading: false
      },
      messageTableData: {
        data: [],
        currentPage: 1,
        pageSizeList: [20, 40, 60, 80],
        pageSize: 20,
        total: 0,
        tableHeader: [],
        loading: false
      },
      cardTableData: {
        data: [],
        currentPage: 1,
        pageSizeList: [20, 40, 60, 80],
        pageSize: 20,
        total: 0,
        tableHeader: [],
        dictList: [],
        loading: false
      },
      aiTableData: {
        data: [],
        currentPage: 1,
        pageSizeList: [20, 40, 60, 80],
        pageSize: 20,
        total: 0,
        tableHeader: [],
        dictList: [],
        loading: false
      }
    };
  },
  created() {
    this.getTableHeader();
    this.getCardChannelType();
    // 触发第一个ecm子组件的change时候。触发自身的onChange
    this.$nextTick(() => this.$refs.ecmRecord.change());
    this.$store.commit("mutations-slide", true);
  },
  methods: {
    async getTableData(tab, params) {
      let res, name;
      switch(tab) {
        case "1":
          name = 'ecmTableData';
          this[name].loading = true;
          res = await doFetchqs(ecmLogPage, params);
          break;
        case "2":
          name = 'cardTableData';
          this[name].loading = true;
          res = await doFetchqs(cardLogPage, params);
          break;
        case "3":
          name = 'messageTableData';
          this[name].loading = true;
          res = await doFetchqs(messageLogPage, params);
          break;
        case "4":
          name = 'wechatTableData';
          this[name].loading = true;
          res = await doFetchqs(wechatLogPage, params);
          break;
        case '5':
          name = 'aiTableData';
          res = await doFetchqs(aiLogPage, params);
          this[name].loading = true;
          break;
      }
      this.extendTable(this[name], res.data.result); // 赋值对应表格数据
      this[name].loading = false;
    },
    getTableHeader() {
      this.ecmTableData.tableHeader = [
        {
          label: "提交时间",
          prop: "createDate",
          minWidth: 80,
          formatter(row) {
            return `${row.createDate ? dateformat(new Date(row.createDate), 'yyyy-MM-dd hh:mm:ss') : '--'}`;
          }
        },
        { label: "计划名称", prop: "ecmName", minWidth: 120 },
        { label: "营销方式", prop: "marketingType", minWidth: 60, formatter(row) {
          const type = row.marketingType;
          switch(type) {
            case 'integral':
              return '积分';
            case 'message':
              return '短信';
            case 'teltask':
              return '话务';
            case 'qfxx':
              return '群发任务';
            case 'teletext':
              return '图文消息';
            case 'image':
              return '图片';
            case 'text':
              return '文本消息';
            case 'wxa':
              return '小程序';
            case 'card':
              return '卡券';
          }
         }
        },
        { label: '营销内容', prop: "eventTitle", minWidth: 180  }
      ];
      this.cardTableData.tableHeader = [
        {
          label: "投放时间",
          prop: "createDate",
          minWidth: 100,
          formatter(row) {
           return `${row.createDate ? dateformat(new Date(row.createDate), 'yyyy-MM-dd hh:mm:ss') : '--'}`;
          }
        },
        {
          label: "领取时间",
          prop: "receiveTime",
          minWidth: 100,
          formatter(row) {
            return `${row.receiveTime ? dateformat(new Date(row.receiveTime), 'yyyy-MM-dd hh:mm:ss') : '--'}`;
          }
        },
        { label: "卡券名称", prop: "cardName", minWidth: 100, },
        { label: "卡券代码", prop: "cardCode", minWidth: 100, },
        { label: "投放途径", prop: "receiveName", minWidth: 120, },
        { label: "来源明细", prop: "receiveTypeExcel", minWidth: 120, }
      ];
      this.messageTableData.tableHeader = [
        {
          label: "发送时间",
          prop: "createDate",
          minWidth: 80,
          formatter(row) {
            return `${row.createDate ? dateformat(new Date(row.createDate), 'yyyy-MM-dd hh:mm:ss') : '--'}`;
          }
        },
        { label: '活动来源', prop: 'sourceType', minWidth: 50, formatter(row) {
          return row.sourceType == 1 ? '智能营销' : row.sourceType == 5 ? 'AI营销' : '短信营销'
        } },
        { label: "模板类型", prop: "smsType", minWidth: 50, formatter(row) {
          return row.smsType == 1 ? '营销短信' : '普通短信'
        } },
        { label: "模板名称", prop: "smsTitle", minWidth: 60, },
        { label: "模板内容", prop: "smsContent", minWidth: 220 }
      ];
      this.wechatTableData.tableHeader = [
        {
          label: "提交时间",
          prop: "createDate",
          minWidth: 80,
          formatter(row) {
            return `${row.createDate ? dateformat(new Date(row.createDate), 'yyyy-MM-dd hh:mm:ss') : '--'}`;
          }
        },
        { label: "素材类型", prop: "contentType",minWidth: 60, formatter(row) {
            const type = row.contentType;
            switch(type) {
              case 0:
                return '图文消息';
              case 1:
                return '文本消息';
              case 2:
                return '图片';
              }
          }
        },
        { label: "素材标题/文本内容", prop: "title",minWidth: 220,formatter(row) {
           return row.title || '--';
        }
       }
      ];
      this.aiTableData.tableHeader = [
        {
          label: "触达时间",
          prop: "aiTime",
          minWidth: 80,
          formatter(row) {
            return `${row.aiTime ? dateformat(new Date(row.aiTime), 'yyyy-MM-dd hh:mm:ss') : '--'}`;
          }
        },
        { label: "活动名称", prop: "planName", minWidth: 120 },
        { label: "活动场景", prop: "activityScene", minWidth: 120 },
        { label: "话术名称", prop: "aiTemplateName", minWidth: 120 }
      ];
    },
    // 设置表格数据
    extendTable(tableObj, remoteData) {
      tableObj['total'] = remoteData['totalCount'];
      tableObj['currentPage'] = remoteData['currentPage'];
      tableObj['data'] = remoteData['result'];
    },
    handleClick(tab) {
      // 获取切换的组件实例重置数据, 注意不要改变el-tab-pane里的组件层级关系
      const vm = tab.$children[0];
      Object.assign(vm.$data, vm.$options.data.call(vm));
      vm.change();
    },
    // 获取卡券营销所有投放渠道
    async getCardChannelType() {
      const res = await doFetch(cardChannelType, { businessType: "CARD_RECEIVE_TYPE" })
      this.cardTableData.dictList = res.data.result.dictList;
    },
    // 子组件任何筛选项发生改变, 包括tab切换、父组件初始化都会触发
    onChange(params) {
      params.memberId = this.$route.query.memberId || '';
      this.getTableData(this.tabsIndex, params);
    }
  }
};
</script>

<style lang="scss" scoped>
.marketing-container {
  padding:5px 20px 20px;
  background-color: #fff;
}
/deep/.el-tabs {
  .el-tabs__header .el-tabs__nav-wrap{
    /deep/.el-tabs__nav-scroll .el-tabs__nav .el-tabs__item:nth-child(2){
      padding-left:20px ;
    }
    &::after{
      height: 1px;
    }
  }
  .el-tab-pane{
    padding: 5px 20px 20px;
  }
}
.table {
  .pager {
    text-align: right;
    padding: 20px 0;
  }
}

.w160 {
  width: 160px;
}
.w260 {
  width: 260px;
}
</style>
