<!--
 * @Author: pikachu
 * @Date: 2021-04-29 09:46:36
 * @LastEditors: Please set LastEditors
-->
<template>
  <a-card class="landing-list">
    <a-card class="search">
      <a-input placeholder="请输入标题" class="a-input-200" v-model:value="title" />
      <a-input placeholder="请输入公众号名称或ID" class="a-input-200" v-model:value="gzh_name" />
      <!-- <a-input placeholder="请输入公众号" class="a-input-200" v-model:value="book_name" /> -->
      <a-select v-model:value="status" class="a-input-200" ref="select" placeholder="请选择审核状态">
        <a-select-option :value="1">待提交</a-select-option>
        <a-select-option :value="2">待审核</a-select-option>
        <a-select-option :value="4">审核未通过</a-select-option>
        <a-select-option :value="3">审核通过</a-select-option>
        <a-select-option :value="''">全部</a-select-option>
      </a-select>
      <a-range-picker
        class="a-input-200"
        :ranges="rangePick"
        format="YYYY/MM/DD"
        v-model:value="pickered"
      />
      <a-select v-model:value="link_source" class="a-input-200" ref="select" placeholder="请选择渠道">
        <a-select-option value="uc">uc</a-select-option>
        <a-select-option value="iqiyi">爱奇艺</a-select-option>
        <a-select-option value="tiktok">抖音</a-select-option>
        <a-select-option value="vivo">vivo</a-select-option>
        <a-select-option value="baidu">百度</a-select-option>
        <a-select-option value>全部</a-select-option>
      </a-select>
      <a-button type="primary" @click="getdata">查询</a-button>
      <a-button style="margin-left:20px" @click="getdataclean">重置</a-button>
    </a-card>
    <a-card class="search create-box">
      <a-button type="primary" @click="create()" class="create">+新建</a-button>
    </a-card>
    <a-table
      rowKey="id"
      :loading="loading"
      :columns="columns"
      :data-source="list"
      :pagination="tablePageOptions"
      @change="getdata"
    >
      <template #gzh="{record}">
        <div>{{record.gzh_name}}</div>
        <div>ID:{{record.gzh_code}}</div>
      </template>
      <template #setting="{record}">
        <div
          class="button_blue"
          v-show="record.status==3"
          @click="copylink(record.landing_page_link)"
        >复制落地页链接</div>
        <div class="button_blue" @click="goEdit(record.id)">编辑</div>
        <div class="button_blue" v-show="record.status==1" @click="confirmData(record.id)">提交审核</div>
        <!-- <confirm-button
          v-show="record.status==1"
          @confirm="confirmData(record.id)"
          @close="close"
          :buttonStatus="false"
          title="确认提交审核?"
          text="提交审核"
        ></confirm-button>-->
        <confirm-button
          @confirm="deleteData(record.id)"
          @close="close"
          :buttonStatus="false"
          title="确认删除?"
          text="删除"
        ></confirm-button>
      </template>
    </a-table>
  </a-card>
</template>
<script lang='ts'>
import { defineComponent, ref, reactive, toRefs } from "vue";
import { landingCloumn } from "@/views/_pageOptions/table-put";
import usePagination from "@/hooks/usePagination";
import { getLandingPageList, landingDelete, landingSubmit } from "@/api";
import useApp from "@/hooks/useApp";
import { picker } from "@/helper/config/range";
import moment from "moment";
export default defineComponent({
  setup() {
    const { meta, loading, tablePageOptions } = usePagination();
    const { router } = useApp();
    const data = reactive({
      columns: landingCloumn,
      list: ref<any[]>([]),
      status: ref(),
      title: ref(),
      gzh_name: ref(),
      book_name: ref(),
      link_source: ref(),
      rangePick: picker,
      pickered: [moment().subtract(30, "d"), moment()],
    });
    const getdata = (pagination?: { current: number }) => {
      loading.value = true;
      const page = pagination?.current ?? 1;
      let [begin_dates, end_dates] = data.pickered;
      let start_time = moment(begin_dates).format("YYYY-MM-DD");
      let end_time = moment(end_dates).format("YYYY-MM-DD");
      let params = {
        status: data.status,
        title: data.title,
        gzh_name: data.gzh_name,
        start_time,
        end_time,
        link_source:data.link_source
      };
      //   请求
      getLandingPageList({ page, ...params }).then((r) => {
        loading.value = false;
        data.list = r.data.list;
        meta.value = r.data.meta;  
      });
    };
    //编辑
    const goEdit = (id: string) => {
      router.push(`/put/landing/add?id=${id}`);
    };
    const create = () => {
      router.push(`/put/landing/add`);
    };
    const getdataclean = () => {
      data.status = undefined;
      data.title = undefined;
      data.gzh_name = undefined;
      data.link_source = undefined;
      getdata();
    };
    getdata();
    return {
      ...toRefs(data),
      getdata,
      tablePageOptions,
      loading,
      getdataclean,
      goEdit,
      create,
    };
  },
  methods: {
    confirmData(id: string | number) {
      landingSubmit({ id: id }).then((r) => {
        this.$message.success("已提交审核");
        this.getdata();
      });
    },
    deleteData(id: string | number) {
      landingDelete({ id: id }).then((r) => {
        this.$message.success("删除成功");
        this.getdata();
      });
    },
    copylink(data: string) {
      this.$copyText(data).then((_) => {
        this.$message.success("复制成功");
      });
    },
    close() {
      console.log("关闭");
    },
  },
});
</script>
<style  lang='scss'>
.landing-list {
  .create-box {
    position: relative;
    width: 100%;
    display: flex;
    height: 50px;
    .create {
      position: absolute;
      right: 10px;
    }
  }
}
</style>