<template>
  <div class="list_container">
    <apass-list
      ref="list"
      class="no_wrap"
      :list-header="listHeader"
      :list-data="listData"
      :list-total="listTotal"
      :hide-search="true"
      :list-padding-left="0"
      @list-action="initList"
    >
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/message' }">
          {{ $t("lang.message") }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ $t("lang.banner") }}
        </el-breadcrumb-item>
      </el-breadcrumb>

      <template slot="top">
        <div class="top_fliter">
          <show-more-filter class="filter_list">
            <div class="filter_item">
              <span class="filter_title">banner搜索：</span>
              <el-input
                v-model="topFilter.name"
                placeholder="请输入banner关键词"
                @keyup.enter.native="topFilterAction"
              ></el-input>
            </div>
            <div class="filter_item">
              <span class="filter_title">状态：</span>
              <el-select v-model="topFilter.state" placeholder="请选择">
                <el-option label="全部" value=""> </el-option>
                <el-option label="已上架" value="1"> </el-option>
                <el-option label="已下架" value="2"> </el-option>
                <el-option label="已过期" value="3"> </el-option>
              </el-select>
            </div>
            <div class="filter_item">
              <span class="filter_title">上架时间：</span>
              <el-date-picker
                v-model="topFilter.up_time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
            <div class="filter_item">
              <span class="filter_title">下架时间：</span>
              <el-date-picker
                v-model="topFilter.down_time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </show-more-filter>
          <div class="filter_action apaas_button">
            <el-button type="primary" @click="topFilterAction">
              查询
            </el-button>
            <el-button type="defalut" @click="topFilterClear">
              重置
            </el-button>
          </div>
        </div>
      </template>

      <el-button type="primary" @click="addNew" slot="header-left">
        新建
      </el-button>
    </apass-list>

    <apass-dialog
      ref="dialog"
      :msg="dialogInfo.msg"
      :submit="dialogInfo.submit"
    ></apass-dialog>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
import showMoreFilter from "@/components/show-more-filter";

export default {
  components: {
    apassList,
    apassDialog,
    showMoreFilter,
  },
  data: () => ({
    listHeader: [],
    listData: [],
    listTotal: 0,
    dialogInfo: {
      msg: "",
      submit: null,
    },
    useItem: "",
    topFilter: {
      name: "",
      state: "",
      up_time: "",
      down_time: "",
    },
    tempFilter: null,
  }),
  created() {
    this.listHeader = [
      {
        label: "",
        prop: "state",
        type: "image-tooltip",
        getImage(item) {
          return [
            require("@/assets/imgs/ic_true.png"),
            require("@/assets/imgs/ic_failed.png"),
            require("@/assets/imgs/ic_guoqi.png"),
          ][item.state - 1];
        },
        getTooltip(item) {
          return ["已上架", "已下架", "已过期"][item.state - 1];
        },
        align: "center",
        width: 60,
      },
      {
        label: "排序",
        prop: "ordid",
        width: 60,
        align: "center",
      },
      {
        label: "banner编码",
        prop: "serial_num",
        width: 200,
      },
      {
        label: "banner名称",
        prop: "name",
        type: "button",
        callback: this.detailAction,
        width: 240,
      },
      {
        label: "链接地址",
        prop: "url",
      },
      {
        label: "图片大小",
        prop: "image_size",
        getText(item) {
          let value = item.image_size || 0;
          return (value / 1024).toFixed(2) + "KB";
        },
        width: 100,
      },
      {
        label: "上架时间",
        prop: "up_time",
        getText(item) {
          let date = item.up_time || "";
          return helper.dateStringTransform(date);
        },
        align: "center",
        width: 180,
      },
      {
        label: "下架时间",
        prop: "down_time",
        getText(item) {
          let date = item.down_time || "";
          return helper.dateStringTransform(date);
        },
        align: "center",
        width: 180,
      },
      {
        label: "操作",
        type: "buttons",
        align: "center",
        width: 320,
        actionList: [
          {
            label: "编辑",
            callback: this.editAction,
            disabledRule(item) {
              return item.state == 1;
            },
          },
          {
            label: "上架",
            callback: this.upActionBtn,
            disabledRule(item) {
              return item.state == 1 || item.state == 3;
            },
          },
          {
            label: "下架",
            callback: this.downActionBtn,
            disabledRule(item) {
              return item.state == 2 || item.state == 3;
            },
          },
          {
            label: "删除",
            class: "warn",
            callback: this.deleteActionBtn,
            disabledRule(item) {
              return item.state == 1;
            },
          },
        ],
      },
    ];
  },
  methods: {
    initList(filter) {
      let fullFilter = {
        ...filter,
        ...this.topFilter,
      };
      let params = {
        page: fullFilter.page,
        size: fullFilter.size,
        state: fullFilter.state,
        name: fullFilter.name,
        up_time_s: fullFilter.up_time ? fullFilter.up_time[0] : "",
        up_time_e: fullFilter.up_time ? fullFilter.up_time[1] : "",
        down_time_s: fullFilter.down_time ? fullFilter.down_time[0] : "",
        down_time_e: fullFilter.down_time ? fullFilter.down_time[1] : "",
      };

      this.tempFilter = filter; // filter存档，用于页面刷新

      // console.log(params);

      this.$http
        .get("/apaas/service/v3/recommend/manage/banners/list", { params })
        .then(({ data }) => {
          if (data.success == 1) {
            this.listTotal = data.data.total;
            this.listData = data.data.data;
          } else {
            this.$message({
              message: data.errMsg || "获取列表失败",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.log(error);

          this.$message({
            message: "获取列表失败",
            type: "warning",
          });
        });
    },
    resetCurrentPage() {
      this.$refs.list.resetCurrentPage();
    },
    topFilterAction() {
      this.resetCurrentPage();
    },
    topFilterClear() {
      this.topFilter = {
        name: "",
        state: "",
        up_time: "",
        down_time: "",
      };

      this.resetCurrentPage();
    },
    showDialog() {
      this.$refs.dialog.show();
    },
    detailAction(item) {
      this.$router.push("/message/banner_detail?id=" + item.serial_num);
    },
    addNew() {
      this.$router.push("/message/banner_add");
    },
    editAction(item) {
      this.$router.push("/message/banner_edit?id=" + item.serial_num);
    },
    upActionBtn(item) {
      this.useItem = item;
      this.dialogInfo = {
        msg: "是否上架到首页banner区域",
        submit: this.upAction,
      };
      this.$refs.dialog.show();
    },
    deleteActionBtn(item) {
      this.useItem = item;
      this.dialogInfo = {
        msg: "删除后无法撤销，您确定删除吗",
        submit: this.deleteAction,
      };
      this.$refs.dialog.show();
    },
    downActionBtn(item) {
      this.useItem = item;
      this.dialogInfo = {
        msg: "下架后首页banner区域将不再显示",
        submit: this.downAction,
      };
      this.$refs.dialog.show();
    },
    upAction() {
      this.$refs.dialog.hide();
      this.$http
        .post("/apaas/service/v3/recommend/manage/banners/up", {
          serial_num: this.useItem.serial_num,
        })
        .then(({ data }) => {
          if (data.success == 1) {
            this.$message.success("上架成功");
            this.initList(this.tempFilter);
          } else {
            this.$message.warning("上架失败");
          }
        })
        .catch((error) => {
          console.log(error);

          this.$message.warning("上架失败");
        });
    },
    downAction() {
      this.$refs.dialog.hide();
      this.$http
        .post("/apaas/service/v3/recommend/manage/banners/down", {
          serial_num: this.useItem.serial_num,
        })
        .then(({ data }) => {
          if (data.success == 1) {
            this.$message.warning("下架成功");
            this.initList(this.tempFilter);
          } else {
            this.$message.warning("下架失败");
          }
        })
        .catch((error) => {
          console.log(error);

          this.$message.warning("下架失败");
        });
    },
    deleteAction() {
      this.$refs.dialog.hide();
      this.$http
        .post("/apaas/service/v3/recommend/manage/banners/del", [
          this.useItem.serial_num,
        ])
        .then(({ data }) => {
          if (data.success == 1) {
            this.$message.success("删除成功");
            this.initList(this.tempFilter);
          } else {
            this.$message.warning("删除失败");
          }
        })
        .catch((error) => {
          console.log(error);

          this.$message.warning("删除失败");
        });
    },
  },
};
</script>

<style scoped>
.list_container {
  height: 100%;
}
</style>
