<template>
  <div class="page">
    <div style="height: 100%">
      <div class="fixed-top">
        <!-- 选择时间和类型 -->
        <div class="slect flex-row">
          <!-- 类型选择 -->
          <div class="uni-list type-slect">
            <div class="uni-list-cell">
              <div class="uni-list-cell-db">
                <picker
                    @change="bindPickerChange"
                    :range="array"
                    range-key="dictName"
                >
                  <div class="uni-input">{{ styleText }}</div>
                  <image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
                </picker>
              </div>
            </div>
          </div>
          <!-- 时间选择 -->
          <div class="uni-list type-slect">
            <div class="uni-list-cell">
              <div class="uni-list-cell-db">
                <picker
                    mode="date"
                    :value="date"
                    :start="startDate"
                    :end="endDate"
                    @change="bindDateChange"
                    fields="month"
                >
                  <div class="uni-input">{{ day }}</div>
                  <image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
                </picker>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="session-list">
        <div class="session-item" v-for="(item, index) in meetList" :key="index" @click="toDetail(item.id)">
          <div class="info">
            <p v-if="fromType != 'style'"><span
                :class="item.style == 0 ? 'status0' : 'status1'">{{
                item.style == 0 ? '党史知识' : '党史图书馆'
              }}</span>{{ item.title }}
            </p>
            <p v-else><span class="status0">{{
                $dict.getLabel(`partyHistoryType${optionStyle}`, item.type)
              }}</span>{{ item.title }}</p>
            <span class="time">{{ item.organizationName }} {{ item.createDate }}</span>
          </div>
          <div class="img" v-if="item.thumbUrl && item.thumbUrl.length">
            <img :src="item.thumbUrl[0].url" alt="">
          </div>
        </div>
      </div>
      <AiEmpty v-if="meetList.length == 0"/>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      array: [],
      partyStudyType: "",
      date: currentDate,
      day: "时间",
      createDate: "", //创建时间
      meetList: [],
      pageNum: 1,
      pageSize: 10,
      pages: 2,
      fromType: '', //style 0、党建要闻 1、政策解读  knowledge 党史知识 policy 党史图书馆
      style: '4',
      styleText: '类型',
      optionStyle: ''
    };
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },
  onLoad(options) {
    console.log(options)
    if (options.type == 'knowledge') {
      this.array = [{dictName: "全部类型", dictValue: "4"}, {dictName: "党史知识 ", dictValue: 0}, {
        dictName: "党史图书馆",
        dictValue: 1
      }]
    }
    if (options.type == 'style') {
      this.style = ''
      this.optionStyle = options.style
      this.$dict.load("partyHistoryType0", "partyHistoryType1").then(() => {
        this.array = this.$dict.getDict(`partyHistoryType${options.style}`)
        this.array.unshift({dictName: "全部类型", dictValue: ""})
      })
    }

    this.fromType = options.type
    this.getList();
  },
  methods: {
    bindPickerChange(e) {
      console.log(e)
      this.style = this.array[e.detail.value].dictValue
      if (this.style === '') {
        this.styleText = '类型'
      } else {
        this.styleText = this.array[e.detail.value].dictName
      }

      this.pageNum = 1;
      this.pages = 2;
      this.pageSize = 10;
      this.getList();
    },
    bindDateChange(e) {
      this.day = e.target.value;
      this.createDate = e.target.value;
      this.pageNum = 1;
      this.pages = 2;
      this.pageSize = 10;
      this.getList();
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;

      return `${year}-${month}-08 00:00:00  `;
    },

    search() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.pages = 2;
      this.getList();
    },
    getList() {
      if (this.pageNum > this.pages) return;

      var createDate = ''
      if (this.createDate) {
        createDate = this.createDate + '-01'
      }
      this.$instance.post(`/app/apppartyeducation/list?size=10&current=${this.pageNum}&createDateParam=${createDate}&style=${this.style}&status=1`).then((res) => {
        if (res.code == 0) {
          res.data.records.map((item) => {
            if (item.thumbUrl) {
              item.thumbUrl = JSON.parse(item.thumbUrl)
            }
            if (item.createDate) {
              item.createDate = item.createDate.substring(0, 10)
            }
          })
          const meetList = this.pageNum > 1 ? [...this.meetList, ...res.data.records] : res.data.records
          this.pages = Math.ceil(res.data.total / 10)
          this.meetList = meetList
        }
      });
    },
    toDetail(id) {
      uni.navigateTo({
        url: "./todayDetail?type=know&id=" + id,
      });
    },
  },
  onReachBottom() {
    this.pageNum = this.pageNum + 1;
    this.getList();
  },
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";

.page {
  .search-box {
    width: 100%;
    height: 112px;
    background-color: #D7261E;
    padding: 24px 32px;
    box-sizing: border-box;
  }

  .slect {
    width: 100%;
    height: 96px;
    background-color: #fff;
    color: #666;

    .type-slect {
      width: 50%;
      border-right: 1px solid #f7f7f7;
      margin: 30px 0;
      box-sizing: border-box;
      text-align: center;
      font-size: 26px;

      .uni-input {
        display: inline-block;
      }

      image {
        width: 32px;
        height: 32px;
        display: inline-block;
        position: relative;
        top: 6px;
        margin-left: 8 spx;
      }
    }

    .type-slect:nth-child(2) {
      border: none;
    }
  }

  .session-list {
    padding-top: 112px;

    .session-item {
      width: 686px;
      padding: 32px;
      box-sizing: border-box;
      margin: 0 auto 32px auto;
      background-color: #fff;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      border-radius: 8px;

      .info {
        p {
          height: 88px;
          font-size: 32px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #333;
          line-height: 44px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-bottom: 24px;

          span {
            display: inline-block;
            padding: 0 8px;
            font-size: 26px;
            font-family: PingFangSC-Regular, PingFang SC;
            line-height: 44px;
            margin-right: 16px;
            border-radius: 8px;
          }

          .status0 {
            color: #2266FF;
            background-color: #E8EFFF;
          }

          .status1 {
            color: #FF8822;
            background-color: #FFF3E9;
          }
        }

        .time {
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999;
          line-height: 22px;
        }
      }

      .img {
        padding-left: 24px;

        img {
          width: 192px;
          height: 144px;
        }
      }
    }
  }

  .no-affairs {
    width: 100%;
    height: calc(100% - 210px);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
