<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 class="card-content" v-loading="loading">
      <card-view :content="item" v-for="item in list" :key="item.pageId" @relationDetail="relationDetail(item)" @deleteTemp="deleteTemp(item)" @editTemp="editTemp(item)" />
    </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 {
  data() {
    return {
      form: {
        pageSearchText: '',
        dateRange: [],
        pageSize: 20,
        pageNum: 1
      },
      loading: false,
      total: 0,
      pageId: '',
      dialogVisible: false,
      list: [
        {
          pageName: '模板名称模板名称模板名称模板名称模板',
          pageCode: 'MB01123456789012300001',
          pageId: '1',
          pageTitle: '页面页面页面页面标题',
          merchantName: '商户名称商户名称商户名称商户名称商户名称',
          merchantPhoneNumber: '0571-1234567',
          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
          guideComment: '长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二',
          createorName: '艾蜜雪管理员',
          createTime: 1657257986000
        },
        {
          pageName: '模板名称模板名称模板名称模板名称模板',
          pageCode: 'MB01123456789012300001',
          pageId: '2',
          pageTitle: '页面标题2',
          merchantName: '商户名称',
          merchantPhoneNumber: '0571-1234567',
          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
          pageBackgroudImg: '',
          guideComment: '长按识别二维码添加您的专属导购',
          createorName: '艾蜜雪管理员',
          createTime: 1657257986000
        },
        {
          pageName: '模板名称模板名称模板名称模板名称模板',
          pageCode: 'MB01123456789012300001',
          pageId: '3',
          pageTitle: '页面标题3',
          merchantName: '商户名称',
          merchantPhoneNumber: '0571-1234567',
          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
          guideComment: '长按识别二维码添加您的专属导购',
          createorName: '艾蜜雪管理员',
          createTime: 1657257986000
        },
        {
          pageName: '模板名称模板名称模板名称模板名称模板',
          pageCode: 'MB01123456789012300001',
          pageId: '4',
          pageTitle: '页面标题4',
          merchantName: '商户名称',
          merchantPhoneNumber: '0571-1234567',
          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
          guideComment: '长按识别二维码添加您的专属导购',
          createorName: '艾蜜雪管理员',
          createTime: 1657257986000
        },
        {
          pageName: '模板名称模板名称模板名称模板名称模板',
          pageCode: 'MB01123456789012300001',
          pageId: '5',
          pageTitle: '页面标题5',
          merchantName: '商户名称',
          merchantPhoneNumber: '0571-1234567',
          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
          guideComment: '长按识别二维码添加您的专属导购',
          createorName: '艾蜜雪管理员',
          createTime: 1657257986000
        }
      ]
    };
  },
  components: {
    cardView,
    relationDialog
  },
  mounted() {
    this.getList();
  },
  activated() {
    if (this.$route.meta.refresh) {
      this.form = {
        pageSearchText: '',
        dateRange: [],
        pageSize: 20,
        pageNum: 1
      };
    }
    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;
}
</style>
