<template>
  <div>

    <ul v-if="list.length > 0"
        class="list van-clearfix"
        ref="listBox"
        @click.stop="clickOutMenu">
      <van-list
          v-model="pageSetting.loading"
          :finished="pageSetting.finished"
          @load="downLoad"
          finished-text="没有更多了"
          loading-text="加载中..."
          :offset="offset"
      >
        <li v-for="(item,index) in currentList"
            :key="index"
            @click="onDetail(item)">
          <div class="top"
               ref="elTop">
            <div class="left"
                 :style="type != ''?'width:100%':''"
                 :knwlname="item.knwlName">
              <template v-if="type=='search'">
                <div class="title"
                     v-html="item.title"></div>
              </template>
              <template v-else>
                <div class="title"
                     :style="(type=='borrow'&&item.readFlag)?'color:#333':''"
                     v-html="item.cardName?item.cardName:item.favoriteTitle"></div>
              </template>
              <div class="description"
                   v-show="type == 'search'&&item.content&&item.content.length>0"
                   v-html="item.content"></div>

              <div class="steps"
                   v-show="type == 'search'"
                   :style="type=='search'?'color:#60BA99; margin-top:6px;':''">
                {{ item.dimensionPath }}
              </div>
              <div class="description"
                   :style="(type == 'knwlhome'||type=='publish')?'margin-bottom:6px;margin-top:2px;':'margin-top:8px'">

                <template v-if="type=='search'">
                  <label>{{ item.fileCreateTime }}</label>
                  <label class="line">|</label>
                  <label>{{ item.fileCreateUser }}</label>
                  <a v-show="item.onlineLevel===1"
                     @click.stop="downLoadFile(item)">
                    <i class="awsui-iconfont"
                       style="position: absolute;right: 0; color: #83B9F5;">&#xe7ae;</i>
                  </a>
                </template>

                <template v-else>
                  {{ item.publishUsername ? item.publishUsername + "" : "" }}
                  <font v-show="item.publishUsername"
                        class="divids">|</font>
                  {{ item.publishTime ? item.publishTime + "" : item.createTime + "" }}
                  <font v-show="type!='favorite'"
                        class="divids">|</font>
                  {{ type != "favorite" ? (item.readCount ? "阅读(" + item.readCount + ")" : "阅读(" + 0 + ")") : "" }}
                  <font v-show="type=='knowl'||type == 'knwlhome'"
                        class="divids">|</font>
                  {{ type == "knowl"||type == "knwlhome" ? (item.commentCount ? "讨论(" + item.commentCount + ")" : "讨论(" + 0 + ")") : "" }}
                  <font v-show="type=='borrow'"
                        class="divids">|</font>
                  {{ type == "borrow" ? item.STATUS : "" }}
                  <font v-show="type=='borrow'&&item.STATUS === '同意'&&(item.CONTROLTYPE.indexOf('限制')>-1)"
                        class="divids">|</font>
                  {{ (type == "borrow" && item.STATUS === "同意" && (item.CONTROLTYPE.indexOf("限制") > -1)) ? readType(item) : "" }}
                  <font v-show="item.myKnowlage"
                        class="publicstate"
                        :style="item.isPublished?'':'color:#e29b1a'">{{ item.isPublished ? " 已发布" : " 未发布" }}</font>
                  <font v-show="type=='publish'"
                        class="divids">|</font>
                  {{ type == "publish" ? item.publishStatus : "" }}
                </template>
              </div>
              <i v-show="item.myKnowlage||type=='publish'"
                 class="awsui-iconfont knowlage-icon"
                 @click.stop="onMenu(item)">&#xe611;</i>
            </div>
          </div>
          <div class="bottom"
               v-show="type == 'knwlhome'||type=='publish'">
            {{ item.dimensionPath }}
          </div>
        </li>
      </van-list>
    </ul>

    <div class="list"
         v-else>
      <div class="con">
        <div class="img">
          <img v-if="type=='search'"
               src="../assets/no_search.png"
               alt=""
               style="width: 125px;">
          <img v-else
               src="../assets/no_content.png"
               alt=""
               style="width: 125px;">
        </div>
        <div v-if="type=='search'||type=='knwlhome'"
             class="text">没有搜索到匹配结果
        </div>
        <div v-else-if="type=='borrow'"
             class="text">暂无借阅知识
        </div>
        <div v-else-if="type=='knowl'"
             class="text">暂无知识
        </div>
        <div v-else-if="type=='publish'"
             class="text">暂无发布知识
        </div>
        <div v-else-if="type=='favorite'"
             class="text">暂无收藏
        </div>
      </div>
    </div>

    <van-dialog v-model="showDialog"
                show-cancel-button
                @confirm="handleDialog">
      <span style="text-align: center;padding: 20px 0;display: inline-block;width: 100%;">确认删除选中的知识？</span>
    </van-dialog>
    <van-dialog v-model="showUnReleaseDialog"
                show-cancel-button
                @confirm="handleReleaseDialog">
      <span style="text-align: center;padding: 20px 0;display: inline-block;width: 100%;">确认取消发布选中的知识？</span>
    </van-dialog>
    <van-action-sheet v-model="menushow"
                      :closeable="false"
                      :description="activeCardName">
      <div class="content"
           style="width: 100%;padding: 20px 0px">
        <div :style="styleWidth"
             class="options_op"
             @click="editorCard">
          <div class="icon"><i class="awsui-iconfont">&#xe622;</i></div>
          <div class="label">编辑</div>
        </div>
        <div :style="styleWidth"
             v-if="type!='publish'"
             class="options_op"
             @click="releaseFun">
          <div class="icon"><i class="awsui-iconfont">&#xe745;</i></div>
          <div class="label">发布</div>
        </div>
        <div :style="styleWidth"
             v-else
             class="options_op"
             @click="unreleaseFun">
          <div class="icon"><i class="awsui-iconfont">&#xe745;</i></div>
          <div class="label">取消发布</div>
        </div>
        <div :style="styleWidth"
             class="options_op"
             @click="logData">
          <div class="icon"><i class="awsui-iconfont">&#xe6de;</i></div>
          <div class="label">日志</div>
        </div>
        <div :style="styleWidth"
             v-show="type=='knowl'"
             class="options_op"
             @click="deleteCardConfrim">
          <div class="icon"><i class="awsui-iconfont">&#xe626;</i></div>
          <div class="label">删除</div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import awsuiAxios from "../awsuiAxios";

export default {
  name: "list",
  props: {
    myPublicCount: {
      type: Number,
      default: 0
    },
    type: {
      type: String,
      default: ""
    },
    list: {
      type: Array,
      default: () => [{}]
    },
    searchval: {
      type: String,
      default: null
    },
    pageSetting: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      offset: 10,
      styleWidth: "width:25%;",
      currentList: [],
      searchText: this.searchval,
      menuActiveId: "",
      activeCard: {},
      activeCardName: "",
      menushow: false,
      showDialog: false,
      showUnReleaseDialog: false,
      topHeight: 0,
    };
  },
  methods: {
    readType(item) {
      if (item.STATUS === "同意") {
        if (item.CONTROLTYPE === "限制阅读次数") {
          return "阅读次数:" + item.READTIMES + " / " + item.TIMES;
        } else if (item.CONTROLTYPE === "限制有效日期") {
          return "有效期至:" + item.ENDDATE;
        }
      }
    },
    backTop() {
      if (this.$refs.listBox) {
        this.$refs.listBox.scrollTop = 0;
      }
    },
    downLoadFile(obj) {
      let that = this;
      awsuiAxios.post({
        url: "jd",
        data: {
          cmd: "com.actionsoft.apps.kms_knwl_filePreview",
          fileId: obj.fileId
        }
      }).then(function (r) {
        if (r.result == "error") {
          that.$toast({message: r.data ? r.data.desc : r.msg, overlay: true});
        } else {
          // let a = document.createElement('a');
          // a.href = r.data.downloadURL;
          // a.click();
          // a.remove();
          window.location.href = r.data;
        }
      });
    },
    downLoad() {
      this.pageSetting.loading = true;
      setTimeout(() => {
        this.$emit("downLoadMore", {});
      }, 300);
    },
    clickOutMenu(e) {
      this.list.forEach(el => {
        let iconId = document.getElementById(el.id + "icon");
        if (iconId) {
          if (!iconId.contains(e.target)) {
          }
        }
      });
    },
    onDetail(el) {
      if (this.type == "borrow" && el.readFlag) {
      } else if (el.knwlId) {
      } else {
        this.$router.push({
          name: "know-detail",
          params: {
            id: el.cardId ? el.cardId : el.favoriteId,
            dimensionId: el.dimensionId ? el.dimensionId : "",
            boId: el.boId
          }
        });
      }
    },
    onMenu(item) {
      this.handleScroll();
      this.activeCard = item;
      this.isPublished = item.isPublished;
      this.menushow = true;
      this.activeCardName = item.cardName;
    },
    deleteCardConfrim() {
      this.showDialog = true;
      this.menushow = false;
    },
    handleDialog() {
      this.showDialog = false;
      this.deleteCard();
    },
    editorCard() {
      this.$router.push({
        name: "new-knowledge",
        params: {
          cardId: this.activeCard.cardId,
          dimensionId: this.activeCard.dimensionId,
          type: "editor"
        }
      });
    },
    deleteCard() {
      let that = this;
      // 获取知识列表数据
      awsuiAxios.post({
        url: "jd",
        data: {
          cmd: "com.actionsoft.apps.kms_knwl_center_delete_card",
          cardIds: this.activeCard.cardId
        },
      }).then(function (r) {
        that.loading = false;
        if (r.result == "error") {
          that.$toast({message: r.data ? r.data.desc : r.msg, overlay: true});
        } else {
          that.$toast({message: "删除成功", overlay: true});
          let datas = that.list;
          for (let i = 0; i < datas.length; i++) {
            if (datas[i]["cardId"] == that.activeCard.cardId) {
              that.list.splice(i, 1);
              break;
            }
          }
          that.$emit("changeSizeInfo");
        }
      });
    },
    releaseFun() {
      let that = this;
      this.menushow = false;
      that.publicCardId = this.activeCard.cardId;
      let validDateTmp = this.activeCard.validDate;
      let datee = new Date();
      let mm = datee.getMonth() + 1;
      let currentDate = datee.getFullYear() + "-" + (mm < 10 ? "0" : "") + mm + "-" + datee.getDate();
      if (validDateTmp && validDateTmp != "" && validDateTmp < currentDate) {
        this.$toast({message: "知识[" + this.activeCard.cardName + "]已过期，不允许发布", overlay: true});
        return false;
      }
      // 获取知识列表数据
      awsuiAxios.post({
        url: "jd",
        data: {
          cmd: "com.actionsoft.apps.kms_knwl_center_check_card_has_file",
          cardIds: JSON.stringify([that.publicCardId])
        },
      }).then(function (r) {
        that.loading = false;
        if (r.result != "ok") {
          that.$toast({message: r.data ? r.data.desc : r.msg, overlay: true});
        } else {
          that.$router.push({
            name: "release-knowledge",
            params: {
              name: that.activeCard.cardName,
              id: that.publicCardId,
              type: "myknowledge"
            }
          });
        }
      });
    },
    unreleaseFun() {
      this.menushow = false;
      this.dialogMsg = "确认取消发布知识目录[" + this.activeCard.dimensionPath + "]下的知识[" + this.activeCard.cardName + "]吗？";
      this.showUnReleaseDialog = true;
    },
    handleReleaseDialog() {
      this.showUnReleaseDialog = false;
      let that = this;
      that.activePublishId = this.activeCard.publishId;
      awsuiAxios.post({
        url: "jd",
        data: {
          cmd: "com.actionsoft.apps.kms_knwl_center_cancel_publish_card",
          publishId: this.activeCard.publishId,
        },
      }).then(function (r) {
        if (r.result == "error") {
          that.$toast({message: r.data ? r.data.desc : r.msg, overlay: true});
        } else {
          that.$toast({message: "取消发布成功", overlay: true});
          let datas = that.list;
          for (let i = 0; i < datas.length; i++) {
            if (datas[i]["publishId"] == that.activePublishId) {
              that.list.splice(i, 1);
              break;
            }
          }
          that.myPublicCount--;
          that.$emit("refreshCount", that.myPublicCount);
        }
      });
    },
    logData() {
      this.menushow = false;
      this.$router.push({
        name: "knwlborrow",
        params: {
          id: this.activeCard.cardId,
          name: this.activeCard.cardName,
        }
      });
    },
    getTopHeight() {
      // 动态控制表格高度
      this.$nextTick(function () {
        let topHeight = this.$refs.elTop[0].offsetHeight - 10;
        this.topHeight = topHeight;
      });
    },
    handleScroll() {
      var scrollTop = this.$refs.listBox.scrollTop;
      let topHeight = this.$refs.elTop[0].offsetHeight - 10;
      var offsetTop = 0;
      if (scrollTop <= 200) {
        offsetTop = topHeight;
      } else {
        offsetTop = -(topHeight + 80);
      }
      this.topHeight = offsetTop;
    }
  },
  mounted() {
    if (this.list.length > 0) {
      this.box = this.$refs.listBox;
    }
    if (this.type == "publish") {
      this.styleWidth = "width:33.3333333%;";
    } else {
      this.styleWidth = "width:25%;";
    }
  },
  watch: {  //这里是重点，用到了loadsh处理函数
    type: function () {
    },
    list: {
      immediate: true,
      handler(value) {
        this.currentList = value;
      }
    }
  }
};
</script>

<style scoped>
.divids {
  color: #dcdcdc;
  margin: 0px 3px;
}

.list {
  padding: 0 12px;
  width: calc(100% - 24px);
  height: calc(100vh - 148px);
  overflow-y: auto;
  position: relative;
}

.list span, .list label {
  display: inline-block;
}

.list li {
  width: 100%;
  position: relative;
  padding-top: 2px;
  padding-bottom: 0px;
}

.list li:not(:last-child) {
  border-bottom: 0.33px solid #e9e9e9;
}

.list li .top {
  padding: 11px 0 0;
  width: 100%;
}

.list li .top .left {
  width: 100%;
}

.list li .top .left .title {
  font-size: 16px;
  color: #378DEC;
  line-height: 18px;
  /*margin-bottom: 8px;*/
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.list li .top .right .name {
  color: #333;
  font-size: 12px;
}

.list li .top .left .description, .list li .top .right .time {
  color: #999999;
  line-height: 15px;
  font-size: 13px;
  position: relative;
  width: 100%;
  /*float: left;*/
}

.list li .top .left .description {
  font-size: 12px;
}

.list li .top .left .description .line {
  display: inline-block;
  margin: 0 8px;
  color: #E8E8E8;
}

.list li .top .left .description {
  width: calc(100% - 2px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}

.list li .top .left .steps {
  padding: 11px 0 13px;
}

.list li .top .left .steps, .list li .bottom {
  line-height: 15px;
  color: #808080;
  width: 100%;
  font-size: 11px;
}

.list li .bottom {
  margin-bottom: 4px;
}

.list li .top .left .steps {
  padding: 0 0 10px;
}


.list li .menu li {
  width: auto;
  border: none;
  padding: 10px 0;
  cursor: pointer;
}


.list li .menu .text {
  padding: 0 14px;
  display: inline-block;
}

.con {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.con .img {
  width: 125px;
  height: 125px;
  margin: 0 auto;
}

.con .text {
  color: #999;
  line-height: 20px;
  font-size: 13px;
  width: 100%;
}

.options_op {
  /*width: 25%;*/
  display: inline-block;
  text-align: center;
}

.options_op .icon {
  font-size: 16px;
  margin-bottom: 10px;
}

.options_op .label {
  font-size: 12px;

}

.knowlage-icon {
  font-size: 13px;
  float: right;
  position: absolute;
  right: 1px;
  bottom: 6px;
}

.publicstate {
  float: right;
  margin-right: 22px;
}
</style>
