<template>
  <div class="notification">
    <template v-if="showList">
      <AiTopFixed>
        <u-tabs :list="tabs" :is-scroll="false" height="96" :current="index" bar-width="192" @change="change"></u-tabs>
      </AiTopFixed>
      <div class="body" v-if="dataList.length">
        <div class="card" v-for="(item,idx) in dataList" :key="idx" @click="handeClick(item)">
          <template v-if="!item.imgUrl">
            <label>
              <span class="status" v-if="index==0 && item.readStatus==0">未读</span>
              <span class="status read" v-if="index==0 && item.readStatus!=0">已读</span>
              <div class="tag" v-if="index==1" :style="color(item.status)">
                {{ $dict.getLabel("announcementStatus", item.status) }}
              </div>
              {{ item.title }}
            </label>
            <u-gap height="16"></u-gap>
            <span class="info">
              <text>{{ item.releaseUserName }}</text>
            <text>{{ item.releaseTime }}</text>
          </span>
          </template>
          <template v-else>
            <div class="has-pic">
              <div class="left">
                <label>
                  <span class="status" v-if="index==0 && item.readStatus==0">未读</span>
                  <span class="status read" v-if="index==0 && item.readStatus!=0">已读</span>
                  <div class="tag" v-if="index==1" :style="color(item.status)">
                    {{ $dict.getLabel("announcementStatus", item.status) }}
                  </div>
                  {{ item.title }}
                </label>
                <u-gap height="16"></u-gap>
                <span class="info">
                <text>{{ item.releaseUserName }}</text>
                <text>{{ item.releaseTime }}</text>
              </span>
              </div>
              <img :src="item.imgUrl" alt="">
            </div>
          </template>
        </div>
      </div>

      <AiEmpty v-else/>
      <u-loadmore :status="status" v-if="dataList.length"/>
      <AiAdd @add="handleAdd"/>
      <u-popup v-model="show" mode="bottom">
        <div class="popup-wrap">
          <u-row justify="between">
            <div class="colum" v-for="(item,index) in optList" :key="index" @click="handleOpt(item)">
              <u-icon :name="item.icon" size="100" :custom-style="{backgroundColor:'#fff',borderRadius:'8px'}"></u-icon>
              <u-gap height="16"></u-gap>
              {{ item.name }}
            </div>
          </u-row>
          <div class="btn" @click="show=false">关闭</div>
        </div>
      </u-popup>
      <u-modal v-model="modal" :content="'是否确定' + content + '该公告？'" title="" show-confirm-button
               show-cancel-button confirm-text="确定" cancel-text="取消"
               @confirm="confirm" @cancel="modal=false"></u-modal>
    </template>
    <component :is="comp" v-else :params="params"></component>
  </div>
</template>

<script>
import add from "./add";
import detail from "./detail";
import read from "./read";
import {mapActions} from "vuex";

export default {
  name: "AppNotification",
  appName: "通知公告",
  components: {add, detail, read},
  data() {
    return {
      index: 0,
      show: false,
      modal: false,
      content: "",
      current: 1,
      dataList: [],
      detail: {},
      showList: true,
      comp: "",
      params: null,
      status: "加载更多",
    }
  },

  computed: {
    tabs() {
      return [{name: "最新公告"}, {name: "公告管理"}];
    },
    optList() {
      return [
        {
          name: "详情",
          icon: this.$cdn + "notice/yl.png",
          val: 0,
          show: true,
        },
        {
          name: "撤回",
          icon: this.$cdn + "notice/ch.png",
          val: 1,
          show: this.detail?.status == 1,
        },
        {
          name: "发布",
          icon: this.$cdn + "notice/fb.png",
          val: 2,
          show: this.detail?.status == 0,
        },
        {
          name: "编辑",
          icon: this.$cdn + "notice/bj.png",
          val: 3,
          show: this.detail?.status == 0 || this.detail?.status == 3,
        }, {
          name: "删除",
          icon: this.$cdn + "notice/sc.png",
          val: 4,
          show: true,
        }
      ].filter(e => e.show)
    }
  },

  onShow() {
    this.current = 1;
    document.title = "通知公告";
    this.$dict.load("announcementStatus");
    this.injectJWeixin(['sendChatMessage']).then(() => {
      this.getList();
    })
  },

  onReachBottom() {
    this.current++;
    this.getList();
  },

  methods: {
    ...mapActions(['injectJWeixin']),
    changeState() {
      this.$http.post(this.content == '删除' ? '/app/appannouncement/delete' : "/app/appannouncement/update-status", null, {
        params: {
          [this.content == '删除' ? 'ids' : 'id']: this.detail.id
        }
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast(this.content + "成功");
          this.modal = false;
          this.getList();
        }
      })
    },
    confirm() {
      this.show = false;
      this.changeState();
    },
    handleOpt(item) {
      this.content = {
        1: "撤回",
        2: "发布",
        4: "删除",
      }[item.val];

      if (item.val == 0) {
        this.show = false;
        return uni.navigateTo({
          url: "/apps/AppNotification/detail?id=" + this.detail.id
        });
      }

      if ([1, 2, 4].includes(item.val)) {
        return this.modal = true;
      }

      if (item.val == 3) {
        this.show = false;
        return uni.navigateTo({
          url: "/apps/AppNotification/add?id=" + this.detail.id + "&flag=" + false
        });
      }
    },
    color(status) {
      return [
        {backgroundColor: "rgba(255,136,34,0.1)", color: "#FF8822"},
        {backgroundColor: "rgba(34,102,255,0.1)", color: "#2266FF"},
        {backgroundColor: "rgba(102,102,102,0.1)", color: "#666666"},
        {backgroundColor: "rgba(255,136,34,0.1)", color: "#FF8822"}
      ][status];
    },
    handeClick(item) {
      this.detail = item;
      if (this.index == 1) {
        this.show = true;
      } else {
        uni.navigateTo({
          url: "/apps/AppNotification/detail?id=" + this.detail.id + "&flag=" + true
        })
      }
    },
    handleAdd() {
      uni.navigateTo({
        url: "/apps/AppNotification/add"
      })
    },
    change(val) {
      this.index = val;
      this.current = 1;
      this.dataList = [];
      this.getList();
    },
    getList() {
      this.$http.post(this.index == 0 ? "/app/appannouncement/list-latest" : "/app/appannouncement/list-mgr", null, {
        params: {
          size: 10,
          current: this.current
        }
      }).then(res => {
        if (res && res.data) {
          if (this.current > 1 && this.current > res.data.pages) {
            this.status = "已经到底啦"
          }
          this.dataList = this.current > 1 ? [...this.dataList, ...res.data.records] : res.data.records
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.notification {
  min-height: 100%;
  background-color: #F5F5F5;
  padding-bottom: 32px;

  ::v-deep .content {
    padding: 0 !important;
  }

  .body {
    box-sizing: border-box;
    padding: 32px;

    .card {
      height: 255px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 32px;
      border-radius: 8px;
      background-color: #ffffff;
      margin-bottom: 32px;

      &:last-child {
        margin-bottom: 0;
      }

      & > label {
        font-size: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: #333333;
        line-height: 44px;
      }

      .tag {
        width: 96px;
        height: 44px;
        display: inline-block;
        border-radius: 8px;
        margin-right: 16px;
        font-size: 26px;
        font-weight: 400;
        line-height: 46px;
        text-align: center;
      }

      .info {
        font-size: 28px;
        color: #999999;
        line-height: 40px;

        & > text:first-child {
          margin-right: 32px;
        }
      }

      & > .has-pic {
        display: flex;
        justify-content: space-between;

        & > .left {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          & > label {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }

        & > img {
          width: 192px;
          height: 144px;
          flex-shrink: 0;
          margin-left: 32px;
        }
      }
    }

    .status {
      display: inline-block;
      width: 88px;
      height: 36px;
      font-size: 26px;
      color: #FF8822;
      background: rgba(255, 136, 34, .1);
      line-height: 36px;
      text-align: center;
      margin-right: 4px;
    }

    .read {
      background: rgba(102, 102, 102, .1);
      color: #666666;
    }
  }

  .popup-wrap {
    height: 368px;
    background-color: #F7F7F7;

    .btn {
      height: 96px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      font-weight: 500;
      color: #333333;
      background-color: #ffffff;
    }

    & > .u-row {
      height: 272px;
      box-sizing: border-box;
      padding: 0 46px;

      & > .colum {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: #666666;
      }
    }
  }
}
</style>
