<template>
  <section class="AppPartyHistory">
    <div v-if="isShow" style="height: 100%">
      <!-- 头部搜索样式 -->
      <div class="fixed-top" style="width:100%;">
        <div class="search-box">
          <div class="search-input flex-row" @click="changeSearchBox">
            <img src="https://cdn.cunwuyun.cn/img/search-red.svg"/>
            <span class="color-fff">请输入文章标题</span>
          </div>
        </div>
        <!-- 选择时间和类型 -->
        <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" :value="index" :range="array" range-key="dictName">
                  <div class="uni-input">{{ partyType }}</div>
                  <img src="https://cdn.cunwuyun.cn/img/down.svg"/>
                </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>
                  <img src="https://cdn.cunwuyun.cn/img/down.svg"/>
                </picker>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 党务公开列表 -->
      <div class="affairs-list">
        <div class="affairs" v-if="affairsList.length > 0">
          <!-- 循环 v-for -->
          <div v-for="(item, index) in affairsList" :key="index">
            <div class="affairs-item" @click="getDetail(item.id)">
              <div class="break-word">
                <span class="type">{{ $dict.getLabel(`partyHistoryType${style}`, item.type) }}</span>
                <span class="affirs-title">{{ item.title }}</span>
              </div>
              <div class="created-unit flex-row">
                <span>{{ item.organizationName || "" }}</span>
                <span>{{ item.createDate }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <AiEmpty v-if="affairsList.length == 0"/>
    </div>
    <div v-if="!isShow" class="search-input">
      <div class="input-box flex-row">
        <input
            type="text"
            class="input"
            placeholder="请输入文章标题"
            focus="false"
            v-model="searchValue"
            @blur="onBlur"
        />
        <img
            class="sousuo"
            src="https://cdn.cunwuyun.cn/img/search-active.svg"
        />
        <img
            v-if="searchValue"
            @tap="clearInput"
            class="clear"
            src="https://cdn.cunwuyun.cn/img/empty-Input.svg"
        />
        <div class="search-word" @click="search">搜索</div>
      </div>
    </div>
  </section>
</template>
<script>
import {mapState} from "vuex";

export default {
  name: "AppPartyHistory",
  appName: "党史文章",
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      inputValue: "请输入文章标题",
      isShow: true,
      array: [],
      index: 0,
      partyType: "类型",
      partyTypeIndex: "", //类型index 0:党务公开,1:三会一课
      date: currentDate,
      day: "时间",
      createData: "", //创建时间
      affairsList: [],
      searchValue: "", //搜索框输入值
      pageNum: 1,
      pageSize: 10,
      pages: 2,
      style: '',
    };
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
    ...mapState(["user"]),
  },
  onLoad(option) {
    this.style = option.style
    this.$dict.load("partyHistoryType0", "partyHistoryType1", "partyHistoryType2").then(() => {
      this.array = this.$dict.getDict(`partyHistoryType${this.style}`)
      this.array.unshift({dictName: "全部类型", dictValue: ""})
      this.getPartyList()
    })
  },
  methods: {
    bindPickerChange(e) {
      this.partyType = this.array[e.detail.value].dictName;
      this.partyTypeIndex = this.array[e.detail.value].dictValue;
      this.pageNum = 1;
      this.pages = 2;
      this.pageSize = 10;
      this.getPartyList();
    },
    bindDateChange: function (e) {
      this.day = e.target.value;
      this.createData =
          e.target.value + "-" + "08" + " " + "00" + ":" + "00" + ":" + "00";
      this.pageNum = 1;
      this.pages = 2;
      this.pageSize = 10;
      this.getPartyList();
    },
    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.getPartyList();
    },
    clearInput() {
      this.searchValue = "";
      this.inputValue = "请输入文章标题";
    },
    getDetail(id) {
      uni.navigateTo({
        url: `./detail?id=${id}`,
      });
    },
    getPartyList() {
      if (this.pageNum > this.pages) return;
      this.$http.post(`/app/apppartyhistory/listWechat`, {
        condition: this.searchValue,
        style: this.style,
        type: this.partyTypeIndex,
        createDate: this.createData,
        current: this.pageNum,
        size: this.pageSize,
        // organizationId: this.user.partyOrgId
      }).then((res) => {
        if (res.code == 0) {
          const affairsList = this.pageNum > 1 ? [...this.affairsList, ...res.data.records] : res.data.records;
          this.pages = Math.ceil(res.data.total / 10);
          this.affairsList = affairsList;
        }
      });
    },
  },
  onReachBottom() {
    this.pageNum = this.pageNum + 1;
    this.getPartyList();
  },
};
</script>
<style lang="scss" scope>
@import "../../../common/common.css";

.AppPartyHistory {
  .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;
      //   background:rgba(0,0,0,1);
      border-radius: 32px;
      //   opacity: 0.1;
      color: #f0cbcd;
      font-size: 26px;

      img {
        width: 40px;
        height: 40px;
        margin: 8px 8px 8px 24px;
        position: relative;
        top: 6px;
      }

      .color-fff {
        color: #fff;
      }
    }
  }

  .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;
      }

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

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

  .affairs-list {
    width: 100%;
    //   height:calc(100% - 210rpx);
    //   overflow-y: auto;
    padding-top: 200px;

    .affairs {
      background-color: #fff;
      margin: 32px;

      .affairs-item {
        padding: 32px;
        box-sizing: border-box;

        .type {
          padding: 8px;
          box-sizing: border-box;
          background-color: #e6edf7;
          color: #135ab8;
          font-size: 26px;
          margin-right: 16px;
          border-radius: 8px;
        }

        .affirs-title {
          color: #333333;
          font-size: 32px;
        }

        .created-unit {
          font-size: 28px;
          color: #999;
          justify-content: space-between;
          margin-top: 16px;
        }
      }
    }
  }

  .no-affairs {
    width: 100%;
    height: calc(100% - 210rpx);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-input {
    //   width:100%;
    //   height:112rpx;
    .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: 40px;
        height: 40px;
      }

      .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;
      }
    }
  }
}
</style>
