<template>
  <div class="attractFlowLink">
    <div class="iconFlex">
      <i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
      <div class="color-1890ff font-14 p-l-6" @click="explain('http://baidu.com')">指标说明</div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="引流加人" name="first">
        <div class="p-l-20 p-r-20">
          <div class="flex flex-space-between m-b-16">
            <div class="flex flex-align-center">
              <el-input placeholder="请输入模板ID/名称、创建人" class="w-260" v-model="form.searchParams" @keyup.native="value => toInput(value, searchInput)" clearable @clear="getList"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
              <span style="font-size:14px;" class="m-l-10">模板创建时间：</span>
              <el-date-picker class="m-l-10 w-256" v-model="form.dateRange" @change="getList" type="daterange" :value-format="'yyyy-MM-dd'" clearable @clear="getList" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
            </div>
            <div>
              <el-button>落地页模板</el-button>
              <el-button type="primary">新增链接</el-button>
            </div>
          </div>
          <el-table :data="tableData" style="width:100%" v-loading="loading" @sort-change="handleSortChange">
            <el-table-column :min-width="164" prop="linkId" label="链接ID" />
            <el-table-column :min-width="167" prop="memberId" label="链接信息">
              <template slot-scope="{ row }">
                <span>{{ row.name }}</span>
                <span>{{ row.linkCode }}</span>
              </template>
            </el-table-column>
            <el-table-column :min-width="110" prop="linkType" label="链接类型">
              <template slot-scope="{ row }">
                <span>{{ row.linkType }}</span>
              </template>
            </el-table-column>
            <el-table-column v-for="v in tableHeader" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="v.prop" :prop="v.prop" :label="v.label" :formatter="v.formatter" :sortable="v.sortable" :fixed="v.fixed">
              <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-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button type="text">刷新</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="引流入群" name="second">引流入群</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { _debounce } from '@/common/js/public';
import { linkPage } from '@/api/actCode';
const tableHead = [
  {
    label: '添加好友人数',
    prop: 'addNumT',
    width: '130',
    sortable: 'custom',
    formatter: function(row) {
      return `<span>${row.addNumT ? row.addNumT : '- -'}</span>`;
    }
  },
  {
    label: '今日新增人数',
    prop: 'addNum',
    width: '130',
    sortable: 'custom',
    formatter: function(row) {
      return `<span>${row.addNum ? row.addNum : '- -'}</span>`;
    }
  },
  {
    label: '点击总人次',
    prop: 'clickTimesT',
    width: '120',
    sortable: 'custom',
    formatter: function(row) {
      return `<span>${row.clickTimesT ? row.clickTimesT : '- -'}</span>`;
    }
  },
  {
    label: '今日点击人次',
    prop: 'clickNum',
    width: '130',
    sortable: 'custom',
    formatter: function(row) {
      return `<span>${row.clickNum ? row.clickNum : '- -'}</span>`;
    }
  },
  {
    label: '点击总人数',
    prop: 'clickNumT',
    width: '120',
    sortable: 'custom',
    formatter: function(row) {
      return `<span>${row.clickNumT ? row.clickNumT : '- -'}</span>`;
    }
  },
  {
    label: '今日点击人数',
    prop: 'clickNum',
    width: '130',
    sortable: 'custom',
    formatter: function(row) {
      return `<span>${row.clickNum ? row.clickNum : '- -'}</span>`;
    }
  },
  {
    label: '创建人',
    minWidth: '100',
    prop: 'creatorName',
    formatter: function(row) {
      return `<span>${row.creatorName ? row.creatorName : '- -'}</span>`;
    }
  },
  {
    label: '创建时间',
    minWidth: '100',
    prop: 'createTime',
    formatter: function(row) {
      return `<span>${row.createTime ? row.createTime : '- -'}</span>`;
    }
  }
];
export default {
  data() {
    return {
      activeName: 'first',
      loading: false,
      form: {
        filteRight: 1,
        linkType: '',
        searchParams: '',
        dateRange: []
      },
      tableData: [],
      tableHeader: tableHead
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleClick(item) {
      console.log(item);
    },
    toInput: _debounce(function(e, value) {
      this.getList();
    }, 500),
    getList() {
      const param = { ...this.form };
      if (this.form.dateRange && this.form.dateRange.length) {
        param.startDate = this.form.dateRange[0] + ' 00:00:00';
        param.endDate = this.form.dateRange[1] + ' 23:59:59';
      }
      delete param.dateRange;
      console.log(param);
      linkPage(param).then(res => {
        console.log(res);
      });
    },
    handleSortChange(data) {
      const { prop, order } = data;
      console.log(order);
      if (order == 'descending') {
        this.form.orderBy = prop + ' desc';
      } else if (order === 'ascending') {
        this.form.orderBy = prop + ' asc';
      } else {
        this.form.orderBy = undefined;
      }
      this.form.pageNum = 1;
      this.getList();
    }
  }
};
</script>
<style>
.attractFlowLink {
  position: relative;
}
.iconFlex {
  position: absolute;
  display: flex;
  top: 13px;
  right: 20px;
}
</style>
