<template>
  <div class="p-20">
    <dm-sub-title class="m-b-10">
      <div class="title">
        <span>引流加入</span>
        <span class="info-content cur-po"><i class="iconfont-hb3 iconzhibiaoshuoming  info-icon"></i>指标说明</span>
      </div>
    </dm-sub-title>
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="引流加人" name="first"> -->

    <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>
        <el-select class="m-l-10 w-160" v-model="form.linkType" placeholder="全部类型" @change="getList" clearable @clear="clear">
          <el-option v-for="item in options" :key="item.key" :label="item.label" :value="item.key"> </el-option>
        </el-select>
        <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 @click="goLanding">落地页模板</el-button>
        <el-button type="primary" @click="$router.push('attractFlowLinkAdd')">新增链接</el-button>
      </div>
    </div>
    <el-table :data="tableData" style="width:100%" v-loading="loading" @sort-change="handleSortChange">
      <el-table-column width="120" prop="linkId" label="链接ID" />
      <el-table-column minWidth="180" prop="memberId" label="链接信息">
        <template slot-scope="{ row }">
          <p class="overFlow">{{ row.name }}</p>
          <p class="tips">{{ row.linkCode }}</p>
        </template>
      </el-table-column>
      <el-table-column width="110" prop="linkType" label="链接类型">
        <template slot-scope="{ row }">
          <el-tag size="mini" v-if="row.linkType == 1"> 专用链接 </el-tag>
          <el-tag v-else size="mini" class="el-tag--cyan">通用链接</el-tag>
        </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="操作" width="160" fixed="right">
        <template slot-scope="{ row }">
          <dm-dropdown ref="drop" :scope-data="row" :configs="btnArr" />
        </template>
      </el-table-column>
    </el-table>
    <div class="text-right" v-if="tableData.length != 0">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size.sync="form.pageSize" :current-page.sync="form.pageNum" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[20, 40, 60, 80]" :total="total"> </el-pagination>
    </div>
    <links :src="linkUrl" :show.sync="show" :imageName="imageName" />
    <!-- </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';
import filters from '@/filters/index';
import links from '@/components/common/links';
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',
    tooltip: true,
    prop: 'creatorName',
    formatter: function(row) {
      return `<span>${row.creatorName ? row.creatorName : '- -'}</span>`;
    }
  },
  {
    label: '创建时间',
    width: '120',
    tooltip: true,
    prop: 'createTime',
    formatter: function(row) {
      let ymd = filters.timeStampToYmd(row.createTime);
      let sfm = filters.timeStampToHms(row.createTime);
      return `${ymd}<br /> ${sfm}`;
    }
  }
];
export default {
  data() {
    return {
      activeName: 'first',
      loading: false,
      form: {
        pageSize: 20,
        pageNum: 1,
        linkType: '',
        searchParams: '',
        dateRange: []
      },
      options: [
        {
          label: '专用链接',
          key: 1
        },
        {
          label: '通用链接',
          key: 2
        }
      ],
      btnArr: [
        {
          text: '数据',
          handler: row => this.goInformation(row)
        },
        {
          text: '详情',
          handler: row => this.goDetail(row)
        },
        {
          text: '链接',
          visible: row => {
            return row.linkType;
          },
          handler: row => this.goLink(row)
        },
        {
          text: '编辑',
          handler: row => this.goEdit(row)
        }
      ],
      total: '',
      tableData: [],
      tableHeader: tableHead,
      show: false,
      linkUrl: ''
    };
  },
  mounted() {
    this.getList();
  },
  components: {
    links
  },
  methods: {
    clear() {
      console.log('clear');
    },
    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);
      this.loading = true;
      linkPage(param)
        .then(res => {
          console.log(res);
          if (res.data.result) {
            const { totalCount, result } = res.data.result;
            this.tableData = result;
            this.total = totalCount;
          }
        })
        .finally(_ => {
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      this.form.pageNum = 1;
      this.form.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList();
    },
    handleSortChange(data) {
      const { prop, order } = data;
      console.log(order);
      if (order == 'descending') {
        this.form.sortColumn = prop;
        this.form.sortType = 'desc';
      } else if (order === 'ascending') {
        this.form.sortColumn = prop;
        this.form.sortType = 'asc';
      } else {
        this.form.sortColumn = '';
        this.form.sortType = undefined;
      }
      this.form.pageNum = 1;
      this.getList();
    },
    goLanding() {
      this.$router.push('/ladingPageList');
    },
    goInformation(row) {
      console.log(row);
    },
    goDetail(row) {
      console.log(row);
    },
    goLink(row) {
      this.linkUrl = row.linkUrl;
      this.imageName = `${row.linkId}_${row.name}`;
      this.show = true;
      console.log(row);
    },
    goEdit(row) {
      console.log(row);
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .info-content {
    color: #2f54eb;
    font-size: 14px;
  }
  .info-icon {
    margin-right: 8px;
  }
}
.overFlow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
