<template>
  <div class="clue" v-loading="loading">
    <div class="dm-wrap draw_wrap">
      <h2 class="title">{{ type == 1 ? '导购线索概况' : '后台线索概况' }}</h2>
      <touch-charts :style="{ marginBottom: '3px' }" :type="type" />
      <market-list :isCluePage="true" :isRepeat="true" :isReference="false" :data="marketListData" />
    </div>
    <div class="dm-wrap area">
      <div class="areatitle">区域详情</div>
      <div class="tabs" v-if="type == 1">
        <div class="tab1">
          <span v-for="(item, index) in listTabs" :key="index" :class="{ active: index == listTabsIndex }" @click="changeListTab(index)">{{ item }}</span>
        </div>
        <div class="tab2">
          <span v-for="(item, index) in listTabsIndex == 1 ? touchTabs : taskTabs" :key="index" :class="{ active2: index == tabsIndex }" @click="changeTabs(index)">{{ item }}</span>
        </div>
      </div>
      <el-table tooltipEffect="light" :data="tableList" style="width: 100%" element-loading-text="拼命加载中" @sort-change="sortChange" :style="{ marginTop: '20px', padding: '0 20px 0 22px' }">
        <el-table-column v-for="(v, i) in tableHeader" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter" :sortable="v.sortable">
          <template slot-scope="scope">
            <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
            <span v-else>{{ scope.row[v.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <dm-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
    </div>
  </div>
</template>

<script>
import { ecmGuideCluesTable, ecmHeadCluesTaskTab, ecmHeadGuideCluesTable, ecmHeadCluesTaskTabHead, ecmGuideCluesTaskTable } from '@/service/api/ecmApi.js';
import marketList from '@/views/ecm/touch-components/market-list.vue';
import touchCharts from '@/views/ecm/touch-components/touch-charts.vue';
export default {
  name: 'touch-clue',
  components: {
    marketList,
    touchCharts
  },
  data() {
    return {
      tableHeader: [],
      tableList: [],
      touchTabs: ['整体转化', '企业电话', '私人电话', '私人短信', '话务'],
      taskTabs: ['合计', '群发', '话务', '企微任务'],
      listTabs: ['任务完成情况', '触达效果'],
      tabsIndex: 0,
      listTabsIndex: 1,
      type: 1, // 1导购 0后台
      marketListData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      tableFirstData: {},
      ordery: ''
    };
  },
  mounted() {
    let planName = this.$route.query.planName;
    let name;
    let planId = this.$route.query.id;
    this.type = this.$route.query.type;
    if (this.type == 1) name = '导购线索';
    else if (this.type == 2) name = '后台线索';
    this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: `${planName} - 触达效果`, path: `/ecm/touch/${planId}?name=${planName}` }, { name }]); // eslint-disable-line
    this.getMarketList();
    this.getTableFirstData();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableList();
    },
    changeTabs(index) {
      this.tabsIndex = index;
    },
    changeListTab(index) {
      this.listTabsIndex = index;
      this.getTableList();
    },
    getMarketList() {
      let meth;
      if (this.type == 1) meth = ecmGuideCluesTable;
      else if (this.type == 2) meth = ecmHeadGuideCluesTable;
      meth({ ecmPlanId: 1 }).then(res => {
        let data = res.result;
        if (this.type == 1) {
          // 导购线索时，加入一个标识，方便组件判断，同时计算任务完成率
          data.taskRate = (data.cplTaskTotalCnt / data.taskCnt) * 100;
          data.flag = true;
        }
        data.touchRate = parseFloat(((data.touchMbrNum / data.planMbrNum) * 100).toFixed(2));
        data.transformRate = parseFloat(((data.convMbrNum / data.touchMbrNum) * 100).toFixed(2));
        this.marketListData = [{ ...data }];
      });
    },
    getTableHeader() {
      if (this.type == 2) {
        this.tableHeader = [
          {
            label: '排名',
            prop: 'index',
            minWidth: '160',
            align: 'left',
            fixed: 'left',
            formatter(row) {
              let color = '#F0F5FF';
              if (row.index == 1) {
                color = '#F5222D';
              } else if (row.index == 2) {
                color = '#FAAD14';
              } else if (row.index == 3) {
                color = '#FFCB48';
              } else if (!row.index) {
                return '--';
              }
              return `<span style="background:${color};width: 16px; display: inline-block; text-align: center; line-height:16px">${row.index}</span>`;
            }
          },
          { label: '门店名称', prop: 'storeName', minWidth: '160', align: 'left', fixed: 'left' },
          { label: '触达人数', prop: 'touchMbrNum', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' },
          { label: '触达率', prop: 'reachRate', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' },
          { label: '转化人数', prop: 'convMbrNum', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' },
          { label: '触达转化收益', prop: 'convSalesAmt', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' },
          { label: '客单价', prop: 'customerPrice', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' },
          { label: '折扣率', prop: 'discountRate', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' }
        ];
      }
    },
    getTableList() {
      let meth;
      let params = { ecmPlanId: 1, pageNum: this.currentPage, pageSize: this.pageSize, orderBy: this.orderBy ? this.orderBy : '' };
      console.log(params);
      if (this.type == 2) {
        meth = ecmHeadCluesTaskTab;
      } else {
        // 列表类型切换
        if (this.listTabsIndex == 0) {
          // 任务完成情况
          meth = ecmGuideCluesTaskTable;
        } else {
          meth = ecmGuideCluesTaskTable;
        }
        params.touchTypes = 1; // 获取子tab切换的值
      }
      meth(params).then(res => {
        if (this.currentPage == 1) {
          let resetArr = [];
          resetArr[0] = this.tableFirstData;
          this.tableList = resetArr.concat(res.result.result);
        } else {
          this.tableList = res.result.result;
        }
        this.total = res.result.totalCount;
        this.getTableHeader();
        this.loading = false;
      });
    },
    getTableFirstData() {
      let meth;
      if (this.type == 2) meth = ecmHeadCluesTaskTabHead;
      else meth = ecmHeadCluesTaskTabHead;
      meth({ ecmPlanId: 1 }).then(res => {
        let data = res.result;
        data.storeName = '合计';
        data.reachRate = 200;
        this.tableFirstData = res.result;
        this.getTableList();
      });
    },
    sortChange(column) {
      let prop = column.prop;
      let orderby = column.order;
      if (orderby == 'descending') orderby = 'desc';
      else orderby = 'asc';
      this.orderBy = prop + ' ' + orderby;
      this.getTableList();
    }
  },
  beforeRouteEnter: (to, from, next) => {
    if (to.query.type == 1) {
      to.meta.aliasName = '导购线索';
    } else if (to.query.type == 2) {
      to.meta.aliasName = '后台线索';
    }
    next();
  },
  computed: {
    rankStyle() {
      return {
        width: '16px',
        display: 'inline-block',
        'text-align': 'center',
        'line-height': '16px'
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.clue {
  .title {
    padding-left: 12px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 700;
    color: #303133;
    line-height: 22px;
    margin-bottom: 38px;
  }
  .areatitle {
    width: 64px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #303133;
    line-height: 22px;
    padding-left: 32px;
    margin-bottom: 8px;
  }
  .tabs {
    .tab2 {
      margin-top: 20px;
      display: flex;
      padding-left: 22px;
      span {
        display: inline-block;
        width: 84px;
        height: 32px;
        background: #f5f7fa;
        border-radius: 4px;
        margin-right: 10px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #606266;
        line-height: 32px;
        text-align: center;
      }
      .active2 {
        background: #1890ff;
        color: #fff;
      }
      .derive {
        background: #1890ff;
        color: #fff;
        width: 76px;
      }
    }
    .tab1 {
      height: 40px;
      font-size: 0;
      padding: 14px 0 12px 33px;
      box-sizing: border-box;
      border-bottom: 1px solid #dcdfe6;
      .active {
        color: #1890ff;
        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 2px;
          background: #1890ff;
          bottom: -11px;
          left: -20px;
        }
      }
      span {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #606266;
        line-height: 14px;
        display: inline-block;
        width: 96px;
        height: 14px;
        position: relative;
        &:nth-child(1) {
          margin-right: 47px;
          &.active::before {
            left: -5px;
          }
        }
      }
    }
  }
}
.area {
  padding: 19px 0 20px 0 !important;
}
.draw_wrap {
  padding: 16px 20px 32px !important;
}
.dm-pagination {
  margin: 20px 15px 0 0;
  padding: 0;
}
</style>
