<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-button
        style="float:right;"
        type="primary"
        size="small"
        icon="el-icon-circle-plus-outline"
        @click="AddArticle()"
      >添加文章</el-button>
    </div>
    <div class="app-container">
      <div style="margin-bottom: 10px">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-input style="width: 300px" v-model="listQuery.keyword" placeholder="请输入您需要搜索的内容"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="changeKey()">搜索</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="cell clearfix">
        <label class="title">
          <span class="name">标签</span>:
        </label>
        <div class="time">
          <ul class>
            <li :class="0==tagType?'active':''" @click="selectsign(0)">全部</li>
            <li
              :class="item.id==tagType?'active':''"
              v-for="item in tagOptions"
              :key="item.id"
              @click="selectsign(item.id)"
            >{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div class="cell clearfix">
        <label class="title">
          <span class="name">状态:</span>
        </label>
        <div class="time">
          <ul class>
            <li :class="{ active: selecting_status == 0 }" @click="changeSelectingStatus(0)">全部</li>
            <li :class="{ active: selecting_status == 1 }" @click="changeSelectingStatus(1)">已发布</li>
            <li :class="{ active: selecting_status == 2 }" @click="changeSelectingStatus(2)">草稿箱</li>
            <li :class="{ active: selecting_status == 3 }" @click="changeSelectingStatus(3)">未通过</li>
          </ul>
        </div>
      </div>

      <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
        <el-checkbox style="width: 30px" @change="selectAllFunc" v-model="selectAll">全选</el-checkbox>
        <el-button size="small" icon="el-icon-delete" @click="deleteAllArticles()">批量删除</el-button>
      </div>

      <div class="clearfix">
        <div class="published-cell" v-for="(article,index) in articsData" :key="article.id">
          <div class="checkbox">
            <el-checkbox v-model="article.checked" @change="selectProduct"></el-checkbox>
          </div>

          <div class="activity-image-panel">
            <span
              class="status-text"
            >{{article.article_status ==1 ? '已发布':'' || article.article_status ==2 ? '草稿':'' || article.article_status ==3 ? '未通过':''}}</span>
            <img :src="article.imgs" />
          </div>
          <div class="activity-info-panel">
            <h3 class="title">
              <span @click="articleDetail(article.id,article.type)">{{article.title}}</span>
            </h3>
            <!-- <div class="statistics">
              阅读：{{article.real_read_num}} 丨 评论：{{article.comment_num}} 丨 点赞：{{article.star_num}}
            </div>-->
            <div>
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit-outline"
                  @click="editArticles(article.id,article.type)"
                ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteArticle(article.id,index)"
                ></el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="activity-time-panel">
            <span class="center">{{orgName}}</span>
            <span class="time">{{articlecreatetime(article.ctime)}}</span>
          </div>
        </div>
      </div>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,20,50,100]"
        :page-size="10"
        background
        style="margin-top:20px;float: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "../components/bread-crumb";
import {
  GetAllArticles,
  deleteArticle,
  deleteAllArticles,
  GetAllCategory
} from "@/api/act/submitinfo";
import PublishedCell from "@/scrm_pages/article/components/published_cell";
import { uParseTime } from "@/utils/tools";
export default {
  name: "commentList",
  components: {
    BreadCrumb,
    PublishedCell
  },
  inject: ["reload"],
  data() {
    return {
      crumbs: [
        { path: false, name: "文章管理" },
        { path: "/articles/articleList", name: "文章列表" }
      ],
      time: "",
      active: true,
      tagType: 0,
      tagOptions: [],
      listQuery: {
        page: 1,
        limit: 10,
        classid: "",
        name: "",
        keyword: ""
      },
      articsData: [],
      total: 0,
      dialogVisible: false,
      checkAllStatus: false,
      selecting_status: "",
      orgName: "",
      statustext: "",
      checked: false,
      selectAll: false,
      selectReply: [],
      startPointX: 0,
      changePointX: 0,
      showIndex: 0
    };
  },
  methods: {
    GetAllArticles() {
      GetAllArticles(
        this.selecting_status,
        this.listQuery.classid,
        this.listQuery.keyword,
        this.listQuery.limit,
        this.listQuery.page
      ).then(response => {
        if (response.data.state === 1) {
          this.articsData = response.data.data.articles;
          this.total = response.data.data.total;
          console.log("文章列表", this.articsData);
          console.log("total", this.total);
          // this.orgName =  response.data.data.OrgName;
          // console.log("机构姓名",this.orgName)
        }
        //  if(typeof(response.data.data.category != 'undefined')){
        //    this.tagOptions = response.data.data.category
        //     console.log("分类列表",this.tagOptions)
        //  }
      });
    },
    articlecreatetime(time) {
      return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
    },
    selectsign(id) {
      console.log("id", id);
      this.listQuery.classid = id;
      this.listQuery.name = name;
      this.tagType = id;
      this.GetAllArticles();
    },
    handleSizeChange(limit) {
      this.listQuery.limit = limit;
      this.GetAllArticles();
    },
    handleCurrentChange(page) {
      this.listQuery.page = page;
      this.GetAllArticles();
    },
    changeKey() {
      this.GetAllArticles();
    },
    memberAvatar(row) {
      return row.imgs;
    },
    AddArticle() {
      this.$router.push({ path: "/articles/createArticle/:id" });
    },
    changeSelectingStatus(status) {
      console.log("status是多少?", status);
      this.selecting_status = status;
      this.GetAllArticles();
    },
    openDelete(row, index) {
      var id = row.id;
      this.$confirm("确认要删除该信息吗?删除后将无法恢复!", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var ids = [];
          ids.push(row.id);
          openDelete({ ids: ids })
            .then(response => {
              this.articsData.splice(index, 1);
              this.$message.success("删除成功");
            })
            .catch(e => {});
        })
        .catch(e => {});
    },

    handleSelectionChange(val) {
      this.selectedArticles = val;
    },
    deleteArticle(id, index) {
      this.$confirm("确定要删除吗?删除后信息将无法恢复!", "删除提示", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteArticle(id)
            .then(response => {
              if (response.data.state == 1) {
                this.articsData.splice(index, 1);
                this.$message.success("删除成功");
              } else {
                this.$message.error(response.msg);
              }
            })
            .catch(e => {});
        })
        .catch(() => {
          return false;
        });
    },
    editArticles(id, articletype) {
      if (articletype == 1) {
        this.$router.push("/articles/editArticle/" + id);
      }
      if (articletype == 2) {
        this.$router.push("/articles/editVido/" + id);
      }
    },

    selectProduct(val) {
      var ids = [];
      for (let i = 0, len = this.articsData.length; i < len; i++) {
        if (!this.articsData[i].checked) {
          this.selectAll = false;
        } else {
          this.selectAll = true;
          this.selectReply = val;
          ids.push(this.articsData[i].id);
          this.selectReply = ids;
        }
      }
      console.log("ids是什么", ids);
    },
    selectAllFunc(val) {
      var ids = [];
      this.articsData.map((item, i) => {
        item.checked = val;
      });

      for (let i = 0, len = this.articsData.length; i < len; i++) {
        if (!this.articsData[i].checked) {
          this.selectAll = false;
        } else {
          this.selectAll = true;
          this.selectReply = val;
          ids.push(this.articsData[i].id);
          this.selectReply = ids;
        }
      }
      console.log("ids是什么", ids);
    },

    deleteAllArticles() {
      if (this.selectReply.length == 0) {
        this.$message.error("请选择要删除的信息");
        return false;
      }

      this.$confirm("确认要删除所选的文章吗?", "删除提示", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteAllArticles().then(response => {
          var ids = [];
          var idMap = {};
          for (let index = 0; index < this.selectReply.length; index++) {
            ids.push(this.selectReply[index]);
            idMap[this.selectReply[index]] = this.selectReply[index];
          }
          console.log("第二个ids是什么?", ids);
          deleteAllArticles({ ids: ids }).then(response => {
            if (response.data.state == 1) {
              for (
                let index = this.articsData.length - 1;
                index >= 0;
                index--
              ) {
                if (this.articsData[index].id in idMap) {
                  this.articsData.splice(index, 1);
                }
              }
              this.$message.success("删除成功");
            }
          });
        });
      });
    },
    GetAllCategory() {
      GetAllCategory().then(response => {
        if (response.data.state == 1) {
          var categorys = response.data.data.categorys;
          this.tagOptions = response.data.data.categorys;
          console.log("标签是什么", categorys);
        }
      });
    },
    articleDetail(id, articletype) {
      if (articletype == 1) {
        this.$router.push("/articles/articleDetail/" + id);
      }
      if (articletype == 2) {
        this.$router.push("/articles/vidoDetail/" + id);
      }
    }
  },
  created() {
    this.GetAllArticles();
    this.GetAllCategory();
  }
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss">
.parent {
  position: relative;
  width: 160px;
  height: 120px;
  left: 20px;
}
.parent .text {
  display: inline-block;
  transform: rotate(-45deg);
  padding: 20px;
  color: red;
  position: relative;
  left: -60px;
}
.triangle-topleft {
  width: 0;
  height: 0;
  border-top: 70px solid yellow;
  border-right: 70px solid transparent;
  position: relative;
  margin-top: -140px;
}

.published-cell {
  padding: 20px 15px;
  border: none;
  border-bottom: 1px solid #e5e8ea;
  float: left;
  margin: 0;
  width: 100%;
  border-radius: 0;
  position: relative;

  .activity-image-panel {
    width: 155px;
    height: 122px;
    border: 1px #dee2e5 solid;
    display: flex;
    justify-content: center;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden;
    float: left;

    .status-text {
      position: absolute;
      font-size: 12px;
      color: #fff;
      top: 14px;
      left: 3px;
      -webkit-transform: rotate(316deg);
      transform: rotate(316deg);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  .activity-image-panel::before {
    border-top: 28px solid #5bd18b;
    border-right: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-left: 28px solid #5bd18b;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    display: block;
    content: "";
  }

  .activity-info-panel {
    padding: 7px 20px;
    width: 60%;
    float: left;

    .title {
      padding-bottom: 5px;
      margin-bottom: 15px;
      a {
        color: #495060;
        font-size: 20px;
        max-width: 100%;
        font-weight: 500;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
      }
    }

    .statistics {
      color: #a8b3ba;
      font-size: 15px;
      justify-content: space-between;
      line-height: 30px;
    }
  }

  .activity-time-panel {
    float: right;
    padding: 7px 0;

    .time {
      font-size: 15px;
      color: #a8b3ba;
    }
  }
  .center {
    font-size: 15px;
    color: #a8b3ba;
  }
  .checkbox {
    float: left;
    position: relative;
    left: -10px;
  }
}
</style>
