<template>
  <div>
    <div class="tab">
      <div
        :class="['tab-item', model.catenum === activeTab ? 'actTab' : '']"
        v-for="model in mock"
        :key="model.catenum"
        @click="handleTabChange(model.catenum)"
      >
        {{ model.name }}
      </div>
    </div>
    <div class="subList">
      <div
        v-for="sub in subList"
        :key="sub.catenum"
        :class="['subItem', activeSub.catenum === sub.catenum ? 'act' : '']"
        @click="changeSub(sub)"
      >
        {{ sub.subName }}
      </div>
    </div>
    <van-dropdown-menu>
      <van-dropdown-item
        v-if="activeSub.hasFilter && activeSub.single"
        v-model="singleFilter"
        :options="activeSub.filter"
        @change="handleChange"
      ></van-dropdown-item>
      <van-dropdown-item
        v-if="activeSub.hasFilter && activeSub.mutiple"
        title="筛选"
        ref="item"
      >
        <van-tree-select
          :items="activeSub.filter"
          :active-id.sync="activeId"
          :main-active-index.sync="activeIndex"
          @click-nav="(index) => handleNav(index, activeSub.filter)"
        />
        <div style="padding: 5px 16px">
          <van-button type="danger" block round @click="onConfirm"> 确认 </van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item :title="dateRange" ref="filtercalendar" @opened="handleOpen">
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="search">
      <div class="inputCon">
        <img src="@/assets/govservice/search_icon.png" alt="" />
        <input v-model="title" class="input" type="text" placeholder="请输入搜索内容" />
      </div>
      <van-button class="button" @click="init('')">搜索</van-button>
    </div>
    <div class="list">
      <no-data v-if="nodata" text="暂无数据~"></no-data>
      <div
        class="cell"
        v-for="item in list"
        :key="item.InfoID"
        @click="Jump(item.InfoID)"
      >
        <p class="name">{{ item.Title }}</p>
        <p class="date">{{ item.InfoDate }}</p>
      </div>
    </div>
    <van-calendar
      ref="calendar"
      v-model="show"
      position="right"
      type="range"
      :allow-same-day="true"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="onDateConfirm"
    />
  </div>
</template>

<script>
import Vue from "vue";
import {
  Tab,
  Tabs,
  DropdownMenu,
  DropdownItem,
  TreeSelect,
  Button,
  Calendar,
} from "vant";
import { getinfolist } from "@/api/respurchase";
import { mock } from "./data";
import NoData from "@/components/NoData";

Vue.use(Tab)
  .use(Tabs)
  .use(DropdownMenu)
  .use(DropdownItem)
  .use(TreeSelect)
  .use(Button)
  .use(Calendar);

export default {
  name: "ResPurchaseIndex",
  components: { NoData },
  data() {
    return {
      mock,
      subList: [],
      activeTab: "003",
      activeSub: {},
      singleFilter: "",
      show: false,
      dateRange: "时间",
      minDate: new Date(1990 - 0 - 1),
      maxDate: new Date(),
      activeId: "",
      activeIndex: "",
      catenum: "",
      title: "",
      list: [],
      nodata: false,
    };
  },
  methods: {
    init(catenum) {
      if (this.catenum === catenum) return;
      if (catenum) this.catenum = catenum;
      console.log("栏目号:", this.catenum);
      console.log("时间:", this.dateRange);
      let infoDateFrom = "";
      let infoDateTo = "";
      if (this.dateRange !== "" && this.dateRange !== "时间") {
        let arr = this.dateRange.split("-");
        infoDateFrom = arr[0].replace(/\//g, "-");
        infoDateTo = arr[1].replace(/\//g, "-");
      }
      let params = {
        ValidateData: "Epoint_WebSerivce_**##ZJ",
        para: {
          infoDateFrom,
          infoDateTo,
          catenum: this.catenum,
          isheadnews: "0",
          title: this.title,
        },
      };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      getinfolist(params).then((res) => {
        this.$toast.clear();
        let TotalNumCount = res.EpointDataBody.DATA.UserArea.PageInfo.TotalNumCount;
        if (TotalNumCount === "0") {
          this.list = [];
          this.nodata = true;
        } else {
          this.nodata = false;
          this.list = res.EpointDataBody.DATA.UserArea.InfoList.Info;
        }
      });
    },
    handleTabChange(name) {
      if (this.activeTab === name) return;
      this.activeTab = name; // 切换大tab
      this.title = "";
      this.subList = this.mock.filter((item) => {
        return item.catenum === name;
      })[0].children; // 重新获取副标题列表
      this.activeSub = this.subList[0]; // 默认选择第一个副标题
      // 如果副标题中有单个筛选条件 则默认选中第一个筛选条件
      if (this.activeSub.hasFilter && this.activeSub.single) {
        this.singleFilter = this.activeSub.filter[0].value;
        this.init(this.singleFilter); // 开始搜索相关内容
      }
      // 如果副标题中有多个筛选条件 则默认选中第一个筛选条件
      if (this.activeSub.hasFilter && this.activeSub.mutiple) {
        this.activeIndex = 0;
        this.activeId = this.activeSub.filter[0].id;
        this.init(this.activeSub.filter[0].id); // 开始搜索相关内容
      }
      // 如果副标题没有筛选条件
      if (!this.activeSub.hasFilter) {
        this.init(this.activeSub.catenum); // 开始搜索相关内容
      }
    },
    changeSub(sub) {
      if (sub.catenum === this.activeSub.catenum) return;
      this.activeSub = sub;
      this.title = "";
      if (this.activeSub.hasFilter && this.activeSub.single) {
        this.singleFilter = this.activeSub.filter[0].value;
        this.init(this.singleFilter);
      }
      if (this.activeSub.hasFilter && this.activeSub.mutiple) {
        this.activeIndex = 0;
        this.activeId = this.activeSub.filter[0].id;
        this.init(this.activeSub.filter[0].id);
      }
      if (!this.activeSub.hasFilter) {
        this.init(this.activeSub.catenum);
      }
    },
    handleNav(index, filter) {
      if (filter[index].children && filter[index].children.length > 0) {
        this.activeId = filter[index].children[0].id;
      } else {
        this.activeId = filter[index].id;
      }
    },
    handleChange(value) {
      this.init(value);
    },
    onConfirm() {
      const { activeId } = this;
      if (activeId) {
        this.init(activeId);
      }
      this.$refs.item.toggle(false);
    },
    handleOpen() {
      this.$refs.filtercalendar.toggle(false);
      this.show = true;
    },
    onDateConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.dateRange = `${this.formatDate(start)}-${this.formatDate(end)}`;
      this.init();
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    Jump(id) {
      this.$router.push({
        name: "ResPurchaseDetail",
        query: {
          id,
          catenum: this.catenum,
        },
      });
    },
  },
  created() {
    this.subList = this.mock[0].children;
    this.activeSub = this.subList[0];
    this.init(this.activeSub.catenum);
  },
};
</script>

<style lang="stylus" scoped>
.tab {
  display flex;
  justify-content space-around
  background #fff

  .tab-item {
    height 96px;
    text-align center
    line-height 96px;
    font-size: 32px;
    color: #666666;
  }
  .actTab {
    font-weight: 600;
    color: #EB4E3F;
    border-bottom 4px solid #EB4E3F
  }
}
.subList {
  width: calc(100% - 60px);
  padding 20px 30px;
  display flex;
  align-items center;
  background #fff;
  overflow-x: scroll;

  .subItem {
    margin-right: 20px;
    padding 18px 16px;
    background: #F7F7F7;
    border-radius: 4px;
    white-space:nowrap
    font-size: 24px;
    color: #666666;
  }
  .act {
    background rgba(235,78,63,0.1)
    color #EB4E3F
  }
}
.subList::-webkit-scrollbar {
  display: none;
}
.search {
  height 96px;
  padding 0 30px;
  display flex;
  align-items center
  background #fff;

  .inputCon {
    height 60px;
    padding 0 20px;
    display flex;
    align-items center;
    background: #F3F6F9;
    border-radius: 4px;

    img {
      width 26px;
      height 26px;
    }
    .input {
      width 480px;
      margin-left 20px;
      background rgba(0,0,0,0)
      font-size: 26px;
      color: #666666;
    }
  }
  .button {
    height 60px;
    margin-left 10px
    background #EB4E3F
    border-radius: 4px;
    line-height 60px;
    font-size: 24px;
    font-weight: 500;
    color: #FFFFFF;
  }
}
.list {
  margin-top 20px;
  padding 0 30px;
  height calc(100vh - 416px)
  overflow-y auto
  background #fff

  .cell {
    padding 30px 0;
    border-bottom 1px solid #EEEEEE

    .name {
      line-height: 45px;
      font-size: 32px;
      font-weight: 400;
      color: #333333;
    }
    .date {
      margin-top 26px;
      font-size: 22px;
      font-weight: 400;
      color: #999999;
    }
  }
}
</style>
