<template>
  <div class="bi_home_data">
    <el-scrollbar>
      <div class="content">
        <div class="swiper">
          <el-carousel
            class="swiper_data"
            height="19.5vw"
            :autoplay="true"
          >
            <el-carousel-item
              v-for="(item, index) in swiperData"
              :key="index"
            >
              <div
                class="swiper_content"
                :style="'background: url(' + item.image_path + ') no-repeat;background-size: 100% 100%;'"
                @click="swiperClick(item)"
              ></div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="data">
          <div class="data_search">
            <el-input
              v-model="searchData.combination"
              placeholder="输入标题/关键字"
              clearable
              size="small"
              style="width:14vw;"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                style="width:3vw;height:32px;"
                @click="clickSearch"
              ></el-button>
            </el-input>
            <div>
              <el-button
                v-for="(item, index) in options.buttonList"
                :key="index"
                size="small"
                style="width:84px;height:32px;"
                @click="buttonClick(item.value)"
              >{{ item.label }}</el-button>
            </div>
          </div>
          <div class="data_content_warp">
            <div class="data_content">
              <div
                v-for="(item, index) in messageData"
                :key="index"
                class="message_item"
                @click="getDataDetail(item)"
              >
                <div class="item_title">
                  <img
                    :src="returnCategoryImg(item.category_id)"
                    alt=""
                  >
                  <p>{{ returnCategory(item.category_id) }}</p>
                </div>
                <div class="item_content">
                  <img
                    :src="item.cover_image"
                    alt=""
                  >
                  <div class="content_content">
                    <div class="content_title">{{ item.title }}</div>
                    <div class="content_desc">{{ item.short_desc }}</div>
                    <div class="content_time">{{ item.create_time }}</div>
                  </div>
                </div>
                <img
                  v-if="!item.is_read"
                  class="is_read"
                  src="https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/homeData/new.png"
                  alt=""
                >
              </div>
            </div>
            <div
              class="left_page"
              @click="pageClick('left')"
            >
              <img
                src="https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/homeData/left_page.png"
                :style="canLeftClick ? 'opacity:1' : 'opacity:0.5'"
                alt=""
              >
            </div>
            <div
              class="right_page"
              @click="pageClick('right')"
            >
              <img
                src="https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/homeData/right_page.png"
                :style="canRightClick ? 'opacity:1' : 'opacity:0.5'"
                alt=""
              >
            </div>
          </div>
        </div>
        <el-drawer
          title="消息详情"
          :visible.sync="dataDetail.isShow"
          direction="rtl"
          size="560"
          :before-close="handleClose"
        >
          <el-scrollbar>
            <div class="detail">
              <div class="detail_title">{{ dataDetail.data.title }}</div>
              <div class="detail_time">{{ dataDetail.data.create_time }}</div>
              <div class="detail_desc">{{ dataDetail.data.short_desc }}</div>
              <div class="detail_content">
                <div
                  class="content_content"
                  v-html="dataDetail.data.content"
                ></div>
              </div>
            </div>
          </el-scrollbar>
        </el-drawer>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
//  import axios from 'axios'
import request from '../../utils/request/index.js'
export default {
  name: 'BiHomeData',
  props: {
    userId: {
      type: String,
      default: '1919'
    }
  },
  data() {
    return {
      uid: '',
      searchData: {
        uid: '1919',
        combination: '',
        category_id: '',
        page: 1,
        page_size: 4,
        total: 0
      },
      // url: 'https://applause.zwwlkj03.top/api',
      options: {
        buttonList: []
      },
      swiperData: [],
      messageData: [],
      dataDetail: {
        isShow: false,
        data: {}
      }
    }
  },
  computed: {
    canLeftClick() {
      if (this.searchData.page <= 1) {
        return false
      } else {
        return true
      }
    },
    canRightClick() {
      const allPage = Math.ceil(this.searchData.total / this.searchData.page_size)
      if (this.searchData.page >= allPage) {
        return false
      } else {
        return true
      }
    }
  },
  mounted() {
    // this.url = this.$BI.env !== 'production' ? 'https://applause.zwwlkj03.top/api' : 'https://applause.wozhangwan.com/api'
    this.uid = this.userId
    this.searchData.uid = this.userId
    this.init()
  },
  methods: {
    init() {
      this.Searchcondition()
      this.getSwiper()
      this.getMessage()
    },
    swiperClick(item) {
      if (item.type === '1') {
        window.open(item.jump_url, '_blank')
      }
      if (item.type === '2') {
        this.getDetail(this.uid, item.notify_id)
      }
    },
    clickSearch() {
      this.searchData.page = 1
      this.searchData.category_id = ''
      this.getMessage()
    },
    buttonClick(id) {
      this.searchData.page = 1
      this.searchData.category_id = id
      this.getMessage()
    },
    pageClick(type) {
      if (type === 'left' && this.canLeftClick) {
        this.searchData.page--
        this.getMessage()
      }
      if (type === 'right' && this.canRightClick) {
        this.searchData.page++
        this.getMessage()
      }
    },

    async getMessage() {
      const res = await request({
        env: this.$BI.env,
        system: 'applause',
        api: '/api/home/notify/list',
        data: this.searchData
      })
      if (res.status_code === 1) {
        this.messageData = res.data.data
        this.searchData.page = res.data.page_info.page
        this.searchData.total = res.data.page_info.total
      }
    },
    async getSwiper() {
      const res = await request({
        env: this.$BI.env,
        system: 'applause',
        api: '/api/home/carousel/list',
        data: { uid: this.uid }
      })
      if (res.status_code === 1) {
        this.swiperData = res.data.data
      }
    },
    async Searchcondition() {
      const res = await request({
        env: this.$BI.env,
        system: 'applause',
        api: '/api/home/Searchcondition/index',
        data: { uid: this.uid, notify_category: 1 }
      })
      if (res.status_code === 1) {
        this.options.buttonList = res.data.notify_category
      }
    },
    returnCategory(id) {
      const list = this.options.buttonList.filter((data) => {
        return data.value === id
      })
      if (list.length) {
        return list[0].label
      } else {
        return '掌资讯'
      }
    },
    returnCategoryImg(id) {
      switch (id) {
        case '1':
          return 'https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/homeData/1.png'
          break
        case '2':
          return 'https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/homeData/2.png'
          break
        case '3':
          return 'https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/homeData/3.png'
          break
        case '4':
          return 'https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/homeData/4.png'
          break
        default:
          return 'https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/homeData/1.png'
      }
    },
    getDataDetail(data) {
      this.sendRaed(data)
      this.getDetail(this.uid, data.id)
    },
    // 数据已读
    async sendRaed(data) {
      const res = await request({
        env: this.$BI.env,
        system: 'applause',
        api: '/api/home/notify/read',
        data: { uid: this.uid, notify_id: data.id }
      })
      if (res.status_code === 1) {
        data.is_read = true
      }
    },
    // 数据详情
    async getDetail(uid, notify_id) {
      const res = await request({
        env: this.$BI.env,
        system: 'applause',
        api: '/api/home/notify/detail',
        data: { uid, notify_id }
      })
      if (res.status_code === 1) {
        this.dataDetail.data = res.data.data
        this.dataDetail.isShow = true
      }
    },
    handleClose() {
      this.dataDetail.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.bi_home_data {
  width: 100%;
  .content {
    width: 100%;
    height: calc(100vh - 115px);
    background: #ffffff;
    border-radius: 2px;
    .swiper {
      width: 100%;
      height: 19.5vw;
      .swiper_data {
        .swiper_content {
          width: 100%;
          height: 19.5vw;
          background: url(https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/homeData/swiperBg.png) no-repeat;
          background-size: 100% 100%;
          display: flex;
          box-sizing: border-box;
          padding: 1.5vw 6vw;
          cursor: pointer;
          .swiper_message {
            .title {
              width: 31.5vw;
              height: 3vw;
              font-size: 2.1vw;
              font-weight: 500;
              color: #333333;
              line-height: 3vw;
            }
            .desc {
              width: 31.5vw;
              height: 1.1vw;
              font-size: 0.8vw;
              font-weight: 400;
              color: #333333;
              line-height: 1.1vw;
              margin-top: 1.5vw;
            }
          }
        }
      }
    }
    .data {
      .data_search {
        margin: 1vw 3.5vw;
        display: flex;
        justify-content: space-between;
      }
      .data_content_warp {
        position: relative;
        left: 0;
        top: 0;
        .left_page {
          position: absolute;
          left: 0;
          top: 45%;
          width: 2.25vw;
          height: 2.25vw;
          cursor: pointer;
          img {
            width: 2.25vw;
            height: 2.25vw;
          }
        }
        .right_page {
          position: absolute;
          right: 0;
          top: 45%;
          width: 2.25vw;
          height: 2.25vw;
          cursor: pointer;
          img {
            width: 2.25vw;
            height: 2.25vw;
          }
        }
        .data_content {
          margin: 0 3.5vw;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          height: 19.5vw;
          .message_item {
            width: 49%;
            height: 9vw;
            background: #f8f8fa;
            box-shadow: 0px 0.1vw 0.45vw 0px rgba(168, 203, 255, 0.36);
            border-radius: 0.2vw;
            border: 0.1vw solid #ffffff;
            margin-bottom: 1.5vw;
            box-sizing: border-box;
            padding: 1vw;
            position: relative;
            left: 0;
            top: 0;
            cursor: pointer;
            &:nth-child(3) {
              margin-bottom: 0;
            }
            &:nth-child(4) {
              margin-bottom: 0;
            }
            .item_title {
              display: flex;
              height: 1vw;
              img {
                width: 1vw;
                height: 1vw;
              }
              p {
                height: 1vw;
                line-height: 1vw;
                margin: 0 0 0 0.5vw;
              }
            }
            .item_content {
              margin-top: 1.6vw;
              display: flex;
              img {
                width: 4vw;
                height: 4vw;
                margin-right: 1.2vw;
              }
              .content_content {
                width: 31vw;
                position: relative;
                top: 0;
                left: 0;
                .content_title {
                  max-width: 20vw;
                  height: 1.1vw;
                  font-size: 0.8vw;
                  font-weight: 500;
                  color: #333333;
                  line-height: 1.1vw;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                .content_desc {
                  max-width: 26vw;
                  height: 1vw;
                  margin-top: 0.8vw;
                  font-size: 0.7vw;
                  font-weight: 400;
                  color: #333333;
                  line-height: 1vw;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                .content_time {
                  position: absolute;
                  left: 22vw;
                  top: 0.05vw;
                  width: 8vw;
                  height: 1vw;
                  font-size: 0.7vw;
                  font-weight: 400;
                  color: #333333;
                  line-height: 1vw;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
            .is_read {
              position: absolute;
              right: 0.1vw;
              top: 0.3vw;
              width: 1.5vw;
              height: 0.8vw;
            }
          }
        }
      }
    }
    .detail {
      width: 100%;
      box-sizing: border-box;
      padding: 0 20px;
      height: calc(100vh - 80px);
      .detail_title {
        width: 440px;
        height: 22px;
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        line-height: 22px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .detail_time {
        width: 320px;
        height: 16px;
        margin-top: 12px;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .detail_desc {
        margin-top: 24px;
        width: 500px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
      }
      .detail_content {
        width: 520px;
        margin-top: 24px;
        overflow-y: auto;
        .content_content {
          width: 500px;
        }
      }
    }
  }
}
</style>
<style>
.bi_home_data img {
  width: 100%;
  height: auto;
}
.el-carousel__indicator.is-active button {
  opacity: 1;
  background-color: #38ce81;
}
</style>
