<template>
  <div class="clue" v-loading="loading">
    <div class="dm-wrap draw_wrap" :style="{ marginBottom: type == '计划整体' ? '0' : '10px' }">
      <h2 class="title">{{ type == '计划整体' ? '计划概览' : type.indexOf('话务') != -1 ? '话务概览' : '群发任务概览' }}</h2>
      <touch-charts v-if="$route.query.type != '计划整体'" :style="{ marginBottom: '3px' }" :type="$route.query.type" :createTime="$route.query.createTime" />
      <div :is="componensList" :isCluePage="true" :isRepeat="true" :isReference="false" :data="dynamicParams"></div>
    </div>
    <div class="dm-wrap area" :style="{ padding: type == '计划整体' ? '0' : '19px 0 0' }">
      <div class="areatitle" v-if="type != '计划整体'">
        <span class="txt">区域详情</span>
      </div>
      <div class="tab1" v-if="type != '计划整体'">
        <span v-for="item in listTabs" :key="item.value" :class="{ active: item.value == listTabsIndex }" @click="changeListTab(item.value)">{{ item.name }}</span>
        <div class="line" :class="{ lineActive: listTabsIndex == 0 }"></div>
      </div>
      <!--转为树结构下钻-->
      <div class="area_content">
        <div class="tree">
          <el-tree ref="treeList" :expand-on-click-node="false" highlight-current :props="defaultProps" @node-click="refreshLazyTree" :load="loadNode" lazy node-key="storeGroupId" :default-expanded-keys="allStoreId">
            <span class="node-label" v-if="data.storeGroupName.length <= 10" slot-scope="{ data }">{{ data.storeGroupName }}</span>
            <el-tooltip effect="dark" :content="data.storeGroupName" placement="top" slot-scope="{ data }" v-else>
              <span class="custom-tree-node">{{ data.storeGroupName }}</span>
            </el-tooltip>
          </el-tree>
        </div>
        <div class="map_area">
          <div class="top">
            <span class="txt" v-if="type == '计划整体'">
              区域详情转化效果
            </span>
            <span v-else>
              <span class="uncredited_num" v-if="showUncreditedNum">（另外有{{ uncreditedNum }}名顾客没有归属门店，无法下发任务。）</span>
            </span>
            <div>
              <el-checkbox label="展开所选区域下门店明细" v-model="expendStoreFlag" @change="changeExpendFlag" class="expend_store"></el-checkbox>
              <el-button type="primary" class="btn" @click="cdkeyExport"><i class="iconfont icon-icon_yunxiazai" style="marginRight:6px;fontSize:14px"></i>导出</el-button>
            </div>
          </div>
          <el-table ref="table" tooltipEffect="dark" :data="tableList" element-loading-text="拼命加载中" @sort-change="sortChange" header-cell-class-name="clue-table-header" style="width: 100%">
            <el-table-column v-for="v in tableHeader" :key="v.prop" :prop="v.prop" :min-width="v.minWidth" :label="v.label" :formatter="v.formatter" :sortable="v.sortable" :render-header="onRender" :fixed="v.fixed" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="v.formatter" v-html="v.formatter(scope.row)" @click="onMapTree(scope.row, $event)"></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>
    </div>
    <!--数据导出-->
    <vue-gic-export-excel :dialogVisible.sync="exportDialog" :dataArr="tableList" :type="1" :excelUrl="excelUrl" :params="params" projectName="marketing"></vue-gic-export-excel>
  </div>
</template>

<script>
import { getGroupTree, overAllList, massList, telTaskList, overAllTable, telTaskTable, massTable, overAllTableExport, telTaskTableExport, massTableExport } from '@/service/api/ecmApi.js';
import marketList from '@/views/ecm/touch-components/market-list.vue';
import batchToTelList from '@/views/ecm/touch-components/batch-send/batch-fail-phone.vue';
import batchTaskList from '@/views/ecm/touch-components/batch-send/batch-send-sum.vue';
import phoneTaskList from '@/views/ecm/touch-components/phone-traffic/phone-traffic-sum.vue';
import touchCharts from '@/views/ecm/touch-components/touch-charts.vue';
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
  name: 'touch-clue',
  components: {
    marketList,
    touchCharts,
    batchToTelList,
    tip
  },
  mixins: [formatterNum],
  data() {
    return {
      tableHeader: [],
      tableList: [],
      listTabs: [
        {
          name: '触达效果',
          value: 1
        },
        {
          name: '任务完成情况',
          value: 0
        }
      ],
      listTabsIndex: 1,
      defaultProps: {
        label: 'storeGroupName',
        isLeaf: 'isLeaf'
      },
      componensList: '', // 动态组件
      dynamicParams: {}, // 动态组件参数
      type: '',
      currentPage: 1,
      pageSize: 20,
      total: 0,
      touchOrderBy: '',
      taskOrderBy: '',
      allStoreId: [],
      storeGroupId: '',
      level: 0,
      loading: false,
      dialogVisible: false,
      // 导出数据
      projectName: 'marketing', // 当前项目名
      exportDialog: false,
      excelUrl: '', // 下载数据的地址
      params: {}, // 导出数据传递的参数
      expendStoreFlag: false, //  导出分组下所有得门店数据
      uncreditedNum: 0 // 无归属门店会员数量
    };
  },
  mounted() {
    this.type = this.$route.query.type;
    this.getMarketList();
    if (this.type == '计划整体') {
      this.componensList = marketList;
    } else if (this.type == '话务') {
      this.componensList = phoneTaskList;
    } else if (this.type == '群发转话务') {
      this.componensList = batchToTelList;
    } else if (this.type == '群发') {
      this.componensList = batchTaskList;
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableList();
    },
    changeListTab(index) {
      if (index == this.listTabsIndex) return;
      this.listTabsIndex = index;
      this.currentPage = 1;
      this.$refs.table.clearSort();
      this.getTableList();
    },
    getMarketList() {
      let meth;
      const params = { ecmPlanId: this.$route.query.id };
      if (this.type == '计划整体') meth = overAllList;
      else if (this.type == '群发') meth = massList;
      else if (this.type == '话务') {
        meth = telTaskList;
        params.convType = 1;
      } else if (this.type == '群发转话务') {
        meth = telTaskList;
        params.convType = 2;
      }
      meth(params).then(res => {
        const data = res.result || {};
        if (this.type == '计划整体') {
          data.customrPrice = data.convSalesAmt * 1 && data.convMbrNum * 1 ? (data.convSalesAmt / data.convMbrNum).toFixed(2) : 0;
          data.relatedRate = data.convGoodsCnt * 1 && data.convOrderCnt * 1 ? (data.convGoodsCnt / data.convOrderCnt).toFixed(2) : '--';

          data.taskRate = (data.cplTaskTotalCnt / data.taskCnt) * 100;
          data.isSales = 1;
          data.touchRate = data.touchMbrNum * 1 && data.planMbrNum * 1 ? ((data.touchMbrNum / data.planMbrNum) * 100).toFixed(2) : 0;
          data.transformRate = data.convMbrNum * 1 && data.touchMbrNum * 1 ? ((data.convMbrNum / data.touchMbrNum) * 100).toFixed(2) : 0;
          this.dynamicParams = [{ ...data }];
        } else {
          if (this.type == '群发') {
            data.massExecuteNum = data.taskExecuteNum;
          }
          this.dynamicParams = data;
          this.uncreditedNum = this.dynamicParams.noGroupNum;
        }
      });
    },
    getTableHeader() {
      const pubilc = [
        {
          label: { name: '排名' },
          prop: 'index',
          align: 'left',
          fixed: true,
          minWidth: '80',
          formatter(row) {
            let textColor = '#606266';
            let color = '#F0F5FF';
            if (row.index == 1) {
              textColor = 'white';
              color = '#F5222D';
            } else if (row.index == 2) {
              color = '#FAAD14';
              textColor = 'white';
            } else if (row.index == 3) {
              color = '#FFCB48';
              textColor = 'white';
            } else if (!row.index) {
              return '- -';
            }
            return `<span style="background:${color};color:${textColor};width: 16px; display: inline-block; text-align: center; line-height:16px">${row.index}</span>`;
          }
        },
        {
          label: { name: this.listTabsIndex == 1 ? '区域' : '门店名称' },
          prop: 'groupName',
          align: 'left',
          fixed: true,
          minWidth: '130',
          formatter(row) {
            if (!row.groupName) return '--';
            else if (row.groupName == '-1') return '【无归属门店】';
            else if (row.groupName == '区域合计' || row.groupId == '-1') return row.groupName; // row.groupId == '-1' 是最后一层
            return `<span style="color:#2f54eb;cursor:pointer;" data-type="groupName">${row.groupName}</span>`;
          }
        }
      ];
      if (this.type == '计划整体') {
        const convMbrText = '成功触达的顾客中，于收益有效期内在区域（门店）消费的人数，按照订单消费门店进行统计。统计“区域合计”数据时，按照每个门店求和计算，即如果一个顾客在同一个区域的两个门店都有消费，在计算区域合计时，会被算作两个人。';
        const convOrderText = '智能营销计划触达的顾客中，在收益有效期内在区域（门店）消费产生的订单数。统计区域数据时按照每个门店求和计算。';
        const convSalesText = '智能营销计划触达的顾客中，在收益有效期内在区域（门店）消费产生的订单金额。统计区域数据时按照每个门店求和计算。';
        const customrPriceText = '触达顾客转化收益/触达顾客转化人数';
        const relatedRateText = '触达顾客订单商品件数/触达顾客订单数。在2021年10月29日前创建的智能营销计划不进行连带率统计。';
        // eslint-disable-next-line
        this.tableHeader = [
          ...pubilc,
          { label: { name: '触达顾客转化人数', tipText: convMbrText }, prop: 'convMbrNum', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.convMbrNum) },
          { label: { name: '触达顾客订单数', tipText: convOrderText }, prop: 'convOrderCnt', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.convOrderCnt) },
          { label: { name: '触达顾客转化收益', tipText: convSalesText }, prop: 'convSalesAmt', align: 'left', sortable: 'custom', formatter: row => this.formatterNumAndFixed(row.convSalesAmt) },
          { label: { name: '客单价', tipText: customrPriceText }, prop: 'customerUnitPrice', align: 'left', sortable: 'custom', formatter: row => this.formatterNumAndFixed(row.customrPrice) },
          { label: { name: '连带率', tipText: relatedRateText }, prop: 'jointRate', align: 'left', sortable: this.timeLimit ? 'custom' : false, formatter: row => (this.timeLimit && row.relatedRate != '--' ? this.formatterNumAndFixed(row.relatedRate) : '--') }
        ];
      }
      if (this.type.indexOf('话务') != -1 || this.type == '群发') {
        if (this.listTabsIndex == 0) {
          const allTeskText = this.type == '群发' ? '智能营销成功创建的群发任务总数。下发至门店导购的一个群发任务中可能会包含针对多个顾客的群发，而且如果一个顾客添加了多个门店导购为好友，那么基于企微的规则，会给这多个导购都下发针对该顾客的群发任务。' : '营销计划针对该区域（门店）所下发的话务任务总数';
          const cplTaskText = this.type == '群发' ? '导购完成的企业微信群发任务数，不含导购主动放弃的任务。' : '导购完成的话务任务数，不含导购主动放弃的任务。';
          const cplTaskRateText = '完成任务数 / 总任务数';
          const giveUpText = this.type == '群发' ? '导购主动放弃的企业微信群发任务数。' : '导购主动放弃的话务任务数。';
          const ovinplText = this.type == '群发' ? '导购未处理任务，最终逾期的企业微信群发任务数。' : '导购未处理任务，最终逾期的任务数。';
          const itincplText = '下发任务后，导购未完成也未放弃，目前还未逾期的任务数。';
          // 任务完成情况表格字段相同
          this.tableHeader = [
            ...pubilc,
            { label: { name: '总任务数', tipText: allTeskText }, prop: 'taskCnt', minWidth: '120', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.taskCnt) },
            { label: { name: '完成任务数', tipText: cplTaskText }, prop: 'cplTaskCnt', minWidth: '130', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.cplTaskCnt) },
            { label: { name: '任务完成率', tipText: cplTaskRateText }, prop: 'cplTaskRate', minWidth: '130', align: 'left', sortable: 'custom', formatter: row => this.formatterRate(row.cplTaskRate) },
            { label: { name: '放弃任务数', tipText: giveUpText }, prop: 'giveUpTaskCnt', minWidth: '130', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.giveUpTaskCnt) },
            { label: { name: '逾期任务数', tipText: ovinplText }, prop: 'ovinplTaskCnt', minWidth: '130', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.ovinplTaskCnt) },
            { label: { name: '未处理任务数', tipText: itincplText }, prop: 'itincplTaskCnt', minWidth: '150', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.itincplTaskCnt) }
          ];
        } else {
          if (this.type == '群发') {
            const planMbrText = '计划使用群发任务触达的顾客人数，按照下发任务的区域（门店）进行统计。统计区域数据时按照每个门店求和计算。如果多个区域（门店）都计划触达同一个顾客，该顾客在每个区域（门店）会分别算作1个人。';
            const succRateText = '任务创建成功顾客数 / 计划触达人数';
            const taskCreateText = '创建群发任务成功的顾客人数。按照下发任务的区域（门店）进行统计。统计区域数据时按照每个门店求和计算。如果多个区域（门店）都计划触达同一个顾客，该顾客在每个区域（门店）会分别算作1个人。导致任务创建不成功的原因，可能是该顾客未添加企业微信好友或对该顾客进行的群发次数已经超过上限。';
            const execRateText = '群发执行顾客数 / 任务创建成功顾客数';
            const execeMbrText = '导购使用企业微信执行群发的顾客人数。按照下发任务的区域（门店）进行统计。统计区域数据时按照每个门店求和计算。如果多个区域（门店）都计划触达同一个顾客，该顾客在每个区域（门店）会分别算作1个人。';
            const touchRateText = '实际触达人数 / 群发执行顾客数';
            const touchMbrText = '导购执行群发后，群发消息发送成功的顾客数，按照下发任务的区域（门店）进行统计。区域合计数据为每个门店求和计算，如果多个区域（门店）都触达了同一个顾客，该顾客在每个区域（门店）会分别算作1个人';
            const convRateText = '转化人数 / 实际触达人数';
            const convMbrText = '区域（门店）执行群发任务所成功触达的顾客，在收益有效期内于任意门店产生消费的人数。统计区域数据时按照每个门店求和计算。';
            const convSalesText = '区域（门店）执行群发任务所成功触达的顾客，在收益有效期内于任意门店产生消费的订单金额。统计区域数据时按照每个门店求和计算。';
            this.tableHeader = [
              ...pubilc,
              { label: { name: '计划触达人数', tipText: planMbrText }, prop: 'planMbrNum', minWidth: '150', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.planMbrNum) },
              { label: { name: '成功率', tipText: succRateText }, prop: 'successRate', minWidth: '110', align: 'left', sortable: 'custom', formatter: row => this.formatterRate(row.successRate) },
              { label: { name: '任务创建成功顾客数', tipText: taskCreateText }, prop: 'taskCreateNum', minWidth: '190', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.taskCreateNum) },
              { label: { name: '执行率', tipText: execRateText }, prop: 'executeRate', minWidth: '110', align: 'left', sortable: 'custom', formatter: row => this.formatterRate(row.executeRate) },
              { label: { name: '群发执行顾客数', tipText: execeMbrText }, prop: 'executeMbrNum', minWidth: '160', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.executeMbrNum) },
              { label: { name: '触达率', tipText: touchRateText }, prop: 'touchRate', minWidth: '110', align: 'left', sortable: 'custom', formatter: row => this.formatterRate(row.touchRate) },
              { label: { name: '实际触达人数', tipText: touchMbrText }, prop: 'touchMbrNum', minWidth: '150', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.touchMbrNum) },
              { label: { name: '转化率', tipText: convRateText }, prop: 'convRate', minWidth: '110', align: 'left', sortable: 'custom', formatter: row => this.formatterRate(row.convRate) },
              { label: { name: '转化人数', tipText: convMbrText }, prop: 'convMbrNum', minWidth: '120', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.convMbrNum) },
              { label: { name: '转化收益', tipText: convSalesText }, prop: 'convSalesAmt', minWidth: '120', align: 'left', sortable: 'custom', formatter: row => this.formatterNumAndFixed(row.convSalesAmt) }
            ];
          } else {
            const planMbrText = '计划使用话务任务触达的顾客人数，按照下发话务任务的区域（门店）进行统计。统计区域数据时按照每个门店求和计算。如果多个区域（门店）都计划触达同一个顾客，该顾客在每个区域（门店）会分别算作1个人。';
            const execRateText = '任务执行顾客数 / 计划触达人数';
            const execeMbrText = '导购实际执行话务任务的顾客人数，包括任务完成和放弃任务的人数。按照下发话务任务的区域（门店）进行统计。统计区域数据时按照每个门店求和计算。如果多个区域（门店）都计划触达同一个顾客，该顾客在每个区域（门店）会分别算作1个人。';
            const touchRateText = '实际触达人数 / 任务执行顾客数';
            const touchMbrText = '导购执行并完成话务任务的顾客人数，不包括放弃任务的人数。按照下发话务任务的区域（门店）进行统计。统计区域数据时按照每个门店求和计算。如果多个区域（门店）都计划触达同一个顾客，该顾客在每个区域（门店）会分别算作1个人。';
            const convRateText = '转化人数 / 实际触达人数';
            const convMbrText = '区域（门店）执行话务任务所成功触达的顾客，在收益有效期内于任意门店产生消费的人数。统计区域数据时按照每个门店求和计算。';
            const convSalesText = '区域（门店）执行话务任务所成功触达的顾客，在收益有效期内于任意门店产生消费的订单金额。统计区域数据时按照每个门店求和计算。';
            this.tableHeader = [
              ...pubilc,
              { label: { name: '计划触达人数', tipText: planMbrText }, prop: 'planMbrNum', minWidth: '150', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.planMbrNum) },
              { label: { name: '执行率', tipText: execRateText }, prop: 'executeRate', minWidth: '110', align: 'left', sortable: 'custom', formatter: row => this.formatterRate(row.executeRate) },
              { label: { name: '任务执行顾客数', tipText: execeMbrText }, prop: 'executeMbrNum', minWidth: '160', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.executeMbrNum) },
              { label: { name: '触达率', tipText: touchRateText }, prop: 'touchRate', minWidth: '110', align: 'left', sortable: 'custom', formatter: row => this.formatterRate(row.touchRate) },
              { label: { name: '实际触达人数', tipText: touchMbrText }, prop: 'touchMbrNum', minWidth: '150', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.touchMbrNum) },
              { label: { name: '转化率', tipText: convRateText }, prop: 'convRate', minWidth: '110', align: 'left', sortable: 'custom', formatter: row => this.formatterRate(row.convRate) },
              { label: { name: '转化人数', tipText: convMbrText }, prop: 'convMbrNum', minWidth: '120', align: 'left', sortable: 'custom', formatter: row => this.formatterNum(row.convMbrNum) },
              { label: { name: '转化收益', tipText: convSalesText }, prop: 'convSalesAmt', minWidth: '120', align: 'left', sortable: 'custom', formatter: row => this.formatterNumAndFixed(row.convSalesAmt) }
            ];
          }
        }
      }
    },
    getTableList() {
      let meth;
      let params = { ecmPlanId: this.$route.query.id, pageNum: this.currentPage, pageSize: this.pageSize, orderBy: this.listTabsIndex == 1 ? this.touchOrderBy : this.taskOrderBy, storeGroupId: this.storeGroupId, level: this.level, type: this.listTabsIndex ? 1 : 2, shopShow: this.expendStoreFlag ? 1 : 0 };
      if (this.type == '计划整体') {
        meth = overAllTable;
      } else if (this.type == '话务') {
        meth = telTaskTable;
        params.convType = 1;
      } else if (this.type == '群发转话务') {
        meth = telTaskTable;
        params.convType = 2;
      } else if (this.type == '群发') {
        meth = massTable;
      }
      meth(params).then(res => {
        if (!res.result.result || !res.result.result.length) {
          this.tableList = [];
          return;
        }
        this.tableList = res.result.result.map((el, index) => {
          el.customrPrice = el.convSalesAmt * 1 && el.convMbrNum * 1 ? (el.convSalesAmt / el.convMbrNum).toFixed(2) : 0;
          el.relatedRate = el.convGoodsCnt * 1 && el.convOrderCnt * 1 ? (el.convGoodsCnt / el.convOrderCnt).toFixed(2) : '--';
          if (el.groupName == '区域合计') {
            el.index = '';
            return el;
          }
          el.index = (this.currentPage - 1) * this.pageSize + index;
          return el;
        });
        this.total = res.result.totalCount;
        this.loading = false;
      });
      this.getTableHeader();
    },
    changeExpendFlag() {
      this.getTableList();
    },
    sortChange(column) {
      let prop = column.prop;
      let orderby = column.order;
      if (orderby == 'descending') orderby = 'desc';
      else orderby = 'asc';
      if (this.listTabsIndex == 1) {
        this.touchOrderBy = prop + ' ' + orderby;
      } else {
        this.taskOrderBy = prop + ' ' + orderby;
      }
      this.getTableList();
    },
    // 懒加载树结构
    async loadNode(node, resolve) {
      let params = { level: node.level, storeGroupId: node.data ? node.data.storeGroupId : null };
      if (node.level === 0) {
        let allStore = await getGroupTree(params);
        allStore.result.forEach(el => {
          el.isLeaf = !el.child;
        });
        this.allStoreId.push(allStore.result[0].storeGroupId); // 设置默认展开所有门店的叶子节点
        this.$nextTick(() => this.$refs.treeList.setCurrentKey(this.allStoreId[0])); // 设置树默认高亮结点
        return resolve(allStore.result || []);
      }
      if (node.level == 1) {
        this.level = node.level;
        this.storeGroupId = node.data ? node.data.storeGroupId : null;
        this.getTableList();
      }
      let otherArea = await getGroupTree(params);
      otherArea.result.forEach(el => {
        el.isLeaf = !el.child;
      });
      return resolve(otherArea.result || []);
    },
    // 点击表格映射到树结构
    onMapTree(row, event) {
      // 展开且选中对应的树，然后调获取合计字段的接口,给表格接口带入树的参数
      if (event.srcElement.dataset.type == 'groupName') {
        this.currentPage = 1;
        this.level = row.level;
        this.storeGroupId = row.groupId;
        this.$refs.treeList.setCurrentKey(row.groupId);
        this.allStoreId.push(row.groupId);
        this.getTableList();
        setTimeout(() => this.allStoreId.splice(this.allStoreId.length - 1, 1)); // 点击表格添加进树结构展开组的要删除掉，否则下次展开树结构会直接加载到对应的叶子结点
      }
    },
    refreshLazyTree(data) {
      if (data.storeGroupId == this.storeGroupId) return;
      this.level = data.level;
      this.storeGroupId = data.storeGroupId;
      this.currentPage = 1;
      this.getTableList();
    },
    // 导出表格数据
    cdkeyExport() {
      this.exportDialog = true;
      let meth;
      let params = { requestProject: 'marketing', ecmPlanId: this.$route.query.id, pageNum: this.currentPage, pageSize: this.pageSize, orderBy: this.listTabsIndex == 1 ? this.touchOrderBy : this.taskOrderBy, storeGroupId: this.storeGroupId, level: this.level, type: this.listTabsIndex ? 1 : 2, shopShow: this.expendStoreFlag ? 1 : 0 };
      if (this.type == '计划整体') {
        meth = overAllTableExport;
      } else if (this.type.indexOf('话务') != -1) {
        meth = telTaskTableExport;
        if (this.type == '话务') params.convType = 1;
        else {
          params.convType = 2;
        }
      } else {
        meth = massTableExport;
      }
      this.excelUrl = meth;
      this.params = params;
    },
    // 渲染表头icon
    onRender(h, { column }) {
      let isShowTip = column.label.name != '排名' && column.label.name != '区域' && column.label.name != '门店名称';
      return h('span', [
        h('span', column.label.name),
        h(isShowTip && tip, {
          props: { text: column.label.tipText }
        })
      ]);
    }
  },
  beforeRouteEnter: (to, from, next) => {
    if (to.query.type == '计划整体') {
      to.meta.aliasName = '计划整体效果详情';
    } else if (to.query.type == '话务' || to.query.type == '群发转话务') {
      to.meta.aliasName = '话务详情';
    } else if (to.query.type == '群发') {
      to.meta.aliasName = '群发任务详情';
    }
    next();
  },
  computed: {
    rankStyle() {
      return {
        width: '16px',
        display: 'inline-block',
        'text-align': 'center',
        'line-height': '16px'
      };
    },
    showUncreditedNum() {
      return this.uncreditedNum > 0 && this.listTabsIndex == 1 && this.level == 1;
    }
  }
};
</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 {
    padding-left: 32px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
  }
  .txt {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    height: 22px;
    color: #303133;
    display: flex;
    align-items: center;
  }
  .area_content {
    display: flex;
    border-top: 1px solid #dcdfe6;
    .tree {
      width: 243px;
      padding-top: 20px;
      border-right: 1px solid #dcdfe6;
      .node-label {
        font-family: PingFangSC-Regular, PingFang SC;
        color: #303133;
      }
      .custom-tree-node {
        font-family: PingFangSC-Regular, PingFang SC;
        color: #303133;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      /deep/ .el-tree-node__expand-icon {
        margin-left: 31px;
        color: #606266;
      }
      /deep/ .el-tree-node__content {
        padding-right: 20px;
      }
      /deep/ .el-tree-node__content:hover {
        background: rgba(47, 84, 235, 0.06);
      }
      /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        background: rgba(47, 84, 235, 0.06);
      }
      /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__label {
        color: #2f54eb !important;
      }
      /deep/ .el-tree-node__expand-icon.is-leaf {
        color: transparent !important;
      }
    }
    .map_area {
      flex: 1;
      min-width: 0;
      padding: 0 20px 20px;
      box-sizing: border-box;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        .btn {
          font-family: PingFangSC-Regular, PingFang SC;
        }
        .expend_store {
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          padding: 6px 10px 5px 5px;
          margin-right: 6px;
        }
      }
    }
  }
  .tab1 {
    height: 40px;
    font-size: 0;
    padding: 0 0 0 33px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    .line {
      position: absolute;
      width: 84px;
      height: 2px;
      background: #2f54eb;
      bottom: -1px;
      left: 21px;
      transition: all 0.3s;
      &.lineActive {
        left: 137px;
      }
    }
    .active {
      color: #2f54eb;
    }
    span {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #606266;
      line-height: 40px;
      display: inline-block;
      height: 100%;
      position: relative;
      &:nth-child(1) {
        margin-right: 47px;
        &.active::before {
          left: -5px;
        }
      }
    }
  }
  .uncredited_num {
    color: #909399;
    font-size: 14px;
  }
}
.area {
  margin-top: 0 !important;
}
.draw_wrap {
  padding: 16px 20px 32px !important;
}
.dm-pagination {
  margin: 20px 15px 0 0;
  padding: 0;
}
/deep/ .clue-table-header .cell {
  padding-left: 0;
  display: flex;
  & > div {
    display: flex;
    align-items: center;
    padding-right: 0;
    span {
      font-weight: 500;
      font-family: PingFangSC-Medium, PingFang SC;
    }
    span,
    i {
      line-height: 34px;
    }
  }
}
/deep/ .el-table__fixed::before {
  display: none;
}
</style>
