<template>
  <div class="page">
    <div v-if="isShow" style="height: 100%">
      <div class="fixed-top">
        <!-- 头部搜索样式 -->
        <div class="search-box">
          <div class="search-input flex-row" @click="changeSearchBox">
            <image src="https://cdn.cunwuyun.cn/img/search-red.svg"></image>
            <span>{{ inputValue }}</span>
          </div>
        </div>
        <!-- 选择时间和类型 -->
        <div class="slect flex-row">
          <!-- 类型选择 -->
          <div class="uni-list type-select">
            <div class="uni-list-cell">
              <div class="uni-list-cell-db">
                <picker
                    @change="bindPickerChange"
                    :range="array"
                    range-key="dictName"
                >
                  <div class="uni-input" v-if="partyStudyType === ''">
                    学习类别
                  </div>
                  <div class="uni-input" v-else>
                    {{ array[partyStudyType + 1].dictName }}
                  </div>
                  <image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
                </picker>
              </div>
            </div>
          </div>
          <!-- 时间选择 -->
          <div class="uni-list type-select">
            <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"
        >
          <div class="item-top" @click="toDetail(item.id)">
            <div class="item-title mar-b12">{{ item.title }}</div>
            <div class="item-info">
              <span class="info-label">学习类别：</span>
              <span class="info-value">{{
                  $dict.getLabel("partyStudyType", item.type)
                }}</span>
            </div>
            <div class="item-info">
              <span class="info-label">发布时间：</span>
              <span class="info-value">{{ item.publishTime }}</span>
            </div>
            <div class="item-info mar-b12">
              <span class="info-label">发布人员：</span>
              <span class="info-value">{{ item.publishUserName }}</span>
            </div>
          </div>
          <div class="item-status" :class="'item-status' + item.studyStatus">
            {{ $dict.getLabel("partyStudyStatus", item.studyStatus) }}
          </div>
        </div>
      </div>
      <AiEmpty v-if="meetList.length == 0"/>
    </div>
    <div v-if="!isShow" class="search-input">
      <div class="input-box flex-row">
        <input
            type="span"
            class="input"
            placeholder="请输入学习标题"
            focus="false"
            v-model="searchValue"
            @blur="onBlur"
        />
        <image
            class="sousuo"
            src="https://cdn.cunwuyun.cn/img/search-active.svg"
        ></image>
        <image
            v-if="searchValue"
            @tap="clearInput"
            class="clear"
            src="https://cdn.cunwuyun.cn/img/empty-Input.svg"
        ></image>
        <div class="search-word" @click="search">搜索</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  appName: "党员学习",
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      inputValue: "请输入学习标题",
      isShow: true,
      array: [],
      meetType: "",
      partyStudyType: "",
      index: 0,
      date: currentDate,
      day: "时间",
      createDate: "", //创建时间
      meetList: [],
      searchValue: "", //搜索框输入值
      pageNum: 1,
      pageSize: 10,
      pages: 2,
      userId: "",
      partyId: "",
    };
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },
  onLoad(options) {
    this.partyId = options.partyId;
    this.$dict.load("partyStudyStatus", "partyStudyType").then((res) => {
      this.array = this.$dict.getDict("partyStudyType");
      this.array.unshift({dictName: "全部类型", dictValue: ""})
      this.getList();
    });
  },
  onShow() {
    this.$dict.load("partyStudyStatus", "partyStudyType");
    this.getList();
  },
  methods: {
    bindPickerChange(e) {
      if (e.detail.value - 1 >= 0) {
        this.partyStudyType = e.detail.value - 1;
      } else {
        this.partyStudyType = "";
      }
      this.pageNum = 1;
      this.pages = 2;
      this.pageSize = 10;
      this.getList();
    },
    bindDateChange: function (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  `;
    },
    changeSearchBox() {
      this.isShow = false;
    },
    onBlur(e) {
      this.searchValue = e.target.value;
      if (this.searchValue) {
        this.inputValue = this.searchValue;
      } else {
        this.inputValue = "请输入学习标题";
      }
    },
    search() {
      this.isShow = true;
      this.pageNum = 1;
      this.pageSize = 10;
      this.pages = 2;
      this.getList();
    },
    clearInput() {
      this.searchValue = "";
      this.inputValue = "请输入学习标题";
    },
    getList() {
      if (this.pageNum > this.pages) return;

      this.$http.post(`/app/apppartystudy/listWechat`, {
        title: this.searchValue,
        type: this.partyStudyType,
        searchMonth: this.createDate,
        current: this.pageNum,
        size: this.pageSize,
      }).then((res) => {
        if (res.code == 0) {
          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: "./partyStudyDetail?id=" + id,
      });
    },
  },
  onReachBottom() {
    this.pageNum = this.pageNum + 1;
    this.getList();
  },
};
</script>
<style lang="scss" scope>
@import "../../../common/common.css";

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

    .search-input {
      line-height: 64px;
      width: 100%;
      height: 100%;
      background: #ce0010;
      border-radius: 32px;
      color: #f0cbcd;
      font-size: 26px;

      image {
        width: 34px;
        height: 34px;
        margin: 8px 8px 8px 24px;
        position: relative;
        top: 6px;
      }

      span {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        span-overflow: ellipsis;
        width: 600px;
      }
    }
  }

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

    .type-select {
      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: 8px;
      }
    }

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

  .search-input {
    .input-box {
      width: 100%;
      height: 112px;
      background-color: #fff;
      padding: 24px 32px;
      box-sizing: border-box;
      position: relative;

      .sousuo {
        position: absolute;
        top: 35px;
        left: 60px;
        width: 34px;
        height: 34px;
      }

      .input {
        background-color: #f3f3f3;
        width: 598px;
        height: 64px;
        color: #999999;
        font-size: 26px;
        margin-left: 8px;
        border-radius: 32px;
        padding-left: 70px;
        padding-right: 60px;
        box-sizing: border-box;
      }

      .clear {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 40px;
        right: 130px;
        z-index: 10;
      }

      .search-word {
        font-size: 28px;
        color: #135ab8;
        line-height: 60px;
        margin-left: 20px;
      }
    }
  }

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

    .session-item {
      width: 686px;
      margin: 0 auto 32px auto;
      background-color: #fff;
      position: relative;
      overflow: hidden;

      .item-top {
        padding: 32px 32px 0 32px;
      }

      .item-title {
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 44px;
        word-break: break-all;
        width: 600px;
      }

      .item-info {
        line-height: 42px;
        font-size: 28px;
        margin-bottom: 8px;

        .info-label {
          color: #999;
        }
      }

      .item-bottom {
        border-top: 2px solid #eee;
        text-align: right;
        padding-right: 64px;
        box-sizing: border-box;
        line-height: 96px;

        .item-btn {
          display: inline-block;
          width: 152px;
          height: 52px;
          line-height: 52px;
          border-radius: 28px;
          text-align: center;
          font-size: 28px;
          margin-left: 32px;
          border: 2px solid #e1e1e1;
        }
      }

      .info-value {
        color: #343d65;
        background-color: #fff !important;
      }

      .item-status {
        position: absolute;
        top: 14px;
        right: -30px;
        width: 140px;
        text-align: center;
        line-height: 44px;
        font-size: 24px;
        transform: rotate(45deg);
      }

      .item-status1 {
        color: #5a98f2;
        background-color: #f1f6ff;
      }

      .item-status0 {
        color: #ff9b2b;
        background-color: #fff3e8;
      }

      .color-1365DD {
        color: #1365dd;
      }

      .color-FF4466 {
        color: #ff4466;
      }

      .color-333333 {
        color: #333;
      }

      .color-606060 {
        color: #606060;
      }

      .border-1365DD {
        border-color: #1365dd !important;
        color: #1365dd !important;
      }

      .border-E1E1E1 {
        border-color: #e1e1e1 !important;
        color: #606060;
      }

      .border-E1E1E1 {
        border-color: #e1e1e1 !important;
      }

      .mar-b12 {
        margin-bottom: 26px !important;
      }
    }
  }

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