<template>
  <div class="daily-set-content">
    <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.pageSearchText" @keyup.native="toInput" 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>
      <el-button type="primary" @click="addTemp">新增模板</el-button>
    </div>
    <div class="tips m-b-16">
      二维码只是样式预览效果，请勿直接使用
    </div>
    <div v-loading="loading">
      <div class="card-content" v-if="list && list.length">
        <card-view :content="item" v-for="item in list" :key="item.pageId" @relationDetail="relationDetail(item)" @deleteTemp="deleteTemp(item)" @editTemp="editTemp(item)" />
      </div>
      <div v-else class="chart--nodata">
        <div>
          <img class="image-120" src="@/assets/no-data.svg" />
          <p class="font-14 color-606266 no-data-text">暂无数据</p>
        </div>
      </div>
    </div>
    <relation-dialog :dialogVisible.sync="dialogVisible" :pageId="pageId" @goLinkDetail="goLinkDetail" />
    <div class="text-right" v-if="list.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>
  </div>
</template>
<script>
import cardView from './cardView';
import relationDialog from './relationDialog';
import { guidePageList, guidePageDel, guidePageRelation } from '@/api/actCode';
import { _debounce } from '@/common/js/public';
export default {
  name: 'ladingPageList',
  data() {
    return {
      form: {
        pageSearchText: '',
        dateRange: [],
        pageSize: 20,
        pageNum: 1
      },
      loading: false,
      total: 0,
      pageId: '',
      dialogVisible: false,
      list: []
    };
  },
  components: {
    cardView,
    relationDialog
  },
  mounted() {
    this.getList();
  },
  activated() {
    this.getList();
  },
  methods: {
    toInput: _debounce(function(e, value) {
      this.getList();
    }, 500),

    getList() {
      const param = { ...this.form };
      if (this.form.dateRange && this.form.dateRange.length) {
        param.startTime = this.form.dateRange[0] + ' 00:00:00';
        param.endTime = this.form.dateRange[1] + ' 23:59:59';
      }
      delete param.dateRange;
      this.loading = true;
      guidePageList(param)
        .then(res => {
          const { result, totalCount } = res.data.result;
          if (result) {
            this.total = totalCount;
            this.list = result;
          }
        })
        .finally(_ => {
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      this.form.pageNum = 1;
      this.form.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList();
    },
    addTemp() {
      this.$router.push('/ladingPageAdd');
    },
    relationDetail(item) {
      this.dialogVisible = true;
      this.pageId = item.pageId;
    },
    deleteTemp(item) {
      guidePageRelation({ pageId: item.pageId }).then(res => {
        const { totalCount } = res.data.result;
        if (totalCount) {
          this.$confirm(`当前模板已关联链接（${totalCount}），请确认投放链接已投放结束，解除关联后才可删除该模板`, '无法删除该模板', {
            confirmButtonText: '关联详情',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(_ => {
            this.relationDetail(item);
          });
        } else {
          this.$confirm('模板删除后将无法恢复', '确认要删除该模板吗？', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(_ => {
            this.deleteRequest(item);
          });
        }
      });
    },
    deleteRequest(item) {
      guidePageDel({ pageId: item.pageId }).then(res => {
        this.$message.success('删除成功');
        this.getList();
      });
    },
    editTemp(item) {
      this.$router.push(`/ladingPageEdit/${item.pageId}`);
    },
    goLinkDetail(referId) {
      window.open(`/haoban-3/#/attractFlowLinkInfo/${referId}`);
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
.daily-set-content {
  padding: 20px;
}
.card-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.chart--nodata {
  height: 359px;
  width: 100%;
  display: flex;
  justify-content: center;
  .image-120 {
    width: 120px;
    height: 120px;
    padding-top: 60px;
  }
  .no-data-text {
    text-align: center;
    padding-top: 18px;
  }
}
</style>
