<template>
  <div>
    <div class="fldy" style="height: 370px;" v-loading="loading">
      <el-scrollbar
        wrap-class="column-wrapper scrollable-items-container"
        :native="false"
        style="height: 330px;"
      >
        <ul class="fuli_lis">
          <li
            v-for="item in datalist"
            :key="item.id"
            @click="openFuliDetail(item)"
            style="border-bottom:1px solid #ebeef5;margin-bottom:10px;"
          >
            <!-- 单张图片 或 文档-->
            <div
              style="height:70px; display:flex; align-items: center;"
              v-if="item.file_list && item.file_list.length !== 0 && item.file_list.length === 1"
              >
              <img
                v-if=" ['jpg', 'png', 'bmp', 'jpeg','JPG','PNG'].indexOf(item.file_list[0].url.split('.')[1]) >= 0"
                style="width:107px; height:60px; cursor: pointer; margin-right:10px;"
                :src="item.file_list[0].url"
                alt
              >
              <div
                style="display:inline-block; width:auto; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;"
              >
                <h4
                  style="font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; margin-top:5px;"
                >{{item.name}}</h4>
                <p
                  style="font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; margin: 0;"
                >{{item.content}}</p>
                <div style="margin-top: 5px; font-size: 14px; color: #5b8bf7"
                  @click.stop="onFilePreView(item.file_list[0])"
                  v-if="['doc', 'docx', 'pptx', 'xls', 'xlsx', 'ppt', 'txt','pdf'].indexOf(item.file_list[0].url.split('.')[1]) >= 0">
                  {{item.file_list[0].name}}
                </div>
              </div>
            </div>
            <!-- 两张以上图片 或 文档 -->
            <div v-if="item.file_list && item.file_list.length !== 0 && item.file_list.length > 1">
              <h4
                style="font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;"
              >{{item.name}}</h4>
              <p
                style="margin-top:5px;line-height: 2rem; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; margin-bottom:0"
              >{{item.content}}</p>
              <div style="display:flex; margin-bottom:10px;align-items: center;" v-if="item.file_list.length < 3">
                <div v-for="(img_item, index) in item.file_list" :key="img_item.name+index">

                  <img
                    :src="img_item.url"
                    alt
                    v-if=" ['jpg', 'png', 'bmp', 'jpeg','JPG','PNG'].indexOf(img_item.url.split('.')[1]) >= 0"
                    style="max-height:60px; marginRight:15px; flex:0 0 107px;"
                  >
                  <div style="color: #5b8bf7; font-size:14px; margin-right:5px;"
                    @click.stop="onFilePreView(img_item)"
                    v-if="['doc', 'docx', 'pptx', 'xls', 'xlsx', 'ppt', 'txt','pdf'].indexOf(img_item.url.split('.')[1]) >= 0">
                    {{img_item.name}}
                  </div>
                </div>

              </div>
              <div style="display:flex; margin-bottom:10px;align-items: center;" v-if="item.file_list.length >= 3">
                <img
                  :src="item.file_list[0].url"
                  v-if=" ['jpg', 'png', 'bmp', 'jpeg','JPG','PNG'].indexOf(item.file_list[0].url.split('.')[1]) >= 0"
                  alt
                  style="max-height:60px; marginRight:15px; flex:0 0 107px;"
                >
                <div style="color: #5b8bf7; font-size:14px; margin-right:5px;"
                    @click.stop="onFilePreView(item.file_list[0])"
                    v-if="['doc', 'docx', 'pptx', 'xls', 'xlsx', 'ppt', 'txt','pdf'].indexOf(item.file_list[0].url.split('.')[1]) >= 0">
                    {{item.file_list[0].name}}
                </div>
                <img
                  :src="item.file_list[1].url"
                  v-if=" ['jpg', 'png', 'bmp', 'jpeg','JPG','PNG'].indexOf(item.file_list[1].url.split('.')[1]) >= 0"
                  alt
                  style="max-height:60px; marginRight:15px; flex:0 0 107px;"
                >
                <div style="color: #5b8bf7; font-size:14px; margin-right:5px;"
                    @click.stop="onFilePreView(item.file_list[1])"
                    v-if="['doc', 'docx', 'pptx', 'xls', 'xlsx', 'ppt', 'txt','pdf'].indexOf(item.file_list[1].url.split('.')[1]) >= 0">
                    {{item.file_list[1].name}}
                </div>
                <img
                  :src="item.file_list[2].url"
                  v-if=" ['jpg', 'png', 'bmp', 'jpeg','JPG','PNG'].indexOf(item.file_list[2].url.split('.')[1]) >= 0"
                  alt
                  style="max-height:60px; marginRight:15px; flex:0 0 107px;"
                >
                <div style="color: #5b8bf7; font-size:14px;"
                    @click.stop="onFilePreView(item.file_list[2])"
                    v-if="['doc', 'docx', 'pptx', 'xls', 'xlsx', 'ppt', 'txt','pdf'].indexOf(item.file_list[2].url.split('.')[1]) >= 0">
                    {{item.file_list[2].name}}
                </div>
              </div>
            </div>
            <!-- 无图 -->
            <div
              v-if="!item.file_list || item.file_list.length == 0"
              style="height:70px;margin-top:14px;"
            >
              <h4
                style="font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;"
              >{{item.name}}</h4>
              <p
                style="line-height: 2rem; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;"
              >{{item.content}}</p>
            </div>
            <!-- </div> -->
          </li>
        </ul>
        <div
          v-if="datalist.length == 0"
          style="
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -115px;
"
        >
          <img
            v-if="datalist.length == 0"
            src="static/images/nodata.png"
            style="display: block; margin:0 auto;"
          >
          <div style="color:#ccc; text-align: center">暂无内容</div>
        </div>
              <el-pagination
              v-if="datalist.length != 0"
          background
          layout="prev, pager, next"
          @size-change="handleSizeChange"
          :page-size="pageLimit"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalCount"
          :current-page.sync="currentPage"
          @current-change="changePage">
        </el-pagination>
      </el-scrollbar>
    </div>
    <!-- 福利弹框 -->
    <el-dialog :title="fuli_item.name" :visible.sync="fuliVisible">
        <div style="font-size: 0.2remp;color: #909399;
       display:flex;
       align-items: center;
       ">
           <img  :src="fuli_item.img_url"  style="width: 50px; height:35px;display: inline-block;padding-left: 10px;" />
         <span style="padding-left: 10px;" v-if="fuli_item.employee_name != null ">发布昵称：{{sendName}}</span>
         <sapn  style="padding-left: 10px;" v-if="fuli_item.create_time != 'null' ">发布时间：{{timeSend}}</sapn>
        </div>
       <div v-for='item in fuli_item.file_list' style="margin: 10px 0;">
         <img  :src="item.url"  style="width: 80%; height:60%;display: inline-block;padding-left: 10px;" />
       </div>

      <el-scrollbar
        wrap-class="column-wrapper scrollable-items-container"
        :native="false"
        style="height: auto;"
      >
        <div style="max-height:500px">
          <div v-for="(item,idx) of fuli_item.file_list" :key="idx">
            <img
              style="width:100%;"
              :src="item.url"
              v-if=" ['jpg', 'png', 'bmp', 'jpeg','JPG','PNG'].indexOf(item.url.split('.')[1]) >= 0"
              alt
            >

            <div style="color: #5b8bf7; height:25px; line-height:25px; cursor:pointer; padding: 0;"
              @click="onFilePreView(item)"
              v-if="['doc', 'docx', 'pptx', 'xls', 'xlsx', 'ppt', 'txt','pdf'].indexOf(item.url.split('.')[1]) >= 0">
              {{item.name}}
            </div>
          </div>

          <div style="margin:10px 0; line-height: 1.75" v-html="fuli_item.br_content"></div>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<style>
.fldy {
  padding: 0 15px 15px 15px;
}
</style>
<script>
export default {
  data() {
    return {
      url: 'http://test.g107.net/uploads/20190917/1ef43527f9828da22de1cde935a02afb.png',
      sendName:'', // 发布昵称
      timeSend:'', // 发布时间
      dialogRewardVisible: false,
      fuliVisible: false,
      datalist: [],
      loading: false,
      fuli_item: [],
      pageLimit:10,
      currentPage:1,
      totalCount:0
    };
  },
  methods: {
    dateTimeFormatter: function(cellValue) {
      return  this.$moment(cellValue).format('YYYY-MM-DD HH:mm');
    },
    onFilePreView(file) {
      //点击时查看文件
        window.open(
          "https://view.officeapps.live.com/op/view.aspx?src=" +
            this.serverdomain +
            file.url,
          "_blank"
        );
    },
    handleSizeChange(val) {
        this.pageLimit = val
        this.loadTableData()
      },
    changePage(current) {
        if (isNaN(current) || current < 1) {
          return false
        }
        this.loadTableData()
      },
    loadTableData() {
      this.loading = true;
      var self = this;
      var params = {
        keywords: "",
        page: this.currentPage,
        offset: (this.currentPage == 1 ? 0 : this.currentPage - 1) * this.pageLimit,
        limit: this.pageLimit,
        type: 0
      };
      this.$http('get',"/integral.php/reward/get_reward_list",params)
        .then(function(response) {
          console.log(response.data);
          if (response.status == 200) {
            self.loading = false;
            var jsonData = response.data;
            try {
              self.datalist = jsonData.data.list;
              self.totalCount = jsonData.data.total;
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    openFuliDetail(item) {
      console.log(item);
      this.fuli_item = item;
      this.timeSend = this.dateTimeFormatter(item.create_time);
     // this.sendName = item.sendName;
      this.sendName = item.employee_name;
      this.fuliVisible = true;
    }
  },
  created() {
    console.log("ddddee");
    this.loadTableData();
  }
};
</script>
<style scoped>
.el-dialog__body {
  padding: 1.5rem!important;
  padding-top: 0!important;
}
.fldy li,
.fldy ul,
.fldy h4 {
  padding: 0;
  list-style: none;
  margin: 0;
}
.fuli_lis li {
  cursor: pointer;
}
.fldy .fuli_lis li h4 {
  color: #333;
}
.fldy .fuli_lis li:hover h4 {
  color: #38a2ff;
}
.fuli_lis li:hover img {
  opacity: 0.8;
}
.fuli_item {
  max-height: 750px;

  overflow-y: auto;
}
.fuli_item::-webkit-scrollbar {
  width: 0px;
}
/* .fuli_item{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 580px;
  height: 750px;
  margin-left: -290px;
  margin-top: -375px;
  background-color: pink;
  z-index: 99;
  padding: 0 20px;
}
.fuli_item .close_icon {
  font-size: 30px;
}
.fuli_item .fuli_imgs{
  width: 100%;
} */
/* .fldy .fuli_imgs {
    display: flex;
  }
  .fuli_imgs img {
    width: 100px;
    height: 100px;
    margin-right:10px;
  } */
</style>
