<template>
  <div>
    <basic-container>
      <div class="rules-intro">
        <ul>
          <li class="intro-title">{{ rulePromptObj.title }}</li>
          <li class="intro">
            {{ rulePromptObj.intro }}
          </li>
          <li class="intro-recommend">
            温馨提示： {{ rulePromptObj.introRecommend }}
          </li>
        </ul>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="rules-tabs">
        <el-tab-pane
          v-for="(item, index) in tabItemsList"
          :key="index"
          :label="item.name"
          :name="item.id"
        >
        </el-tab-pane>
      </el-tabs>
    </basic-container>
    <div
      class="rules-second-type-items"
      v-show="secondTypeList.lenght != 0"
      ref="rulesSecondTabs"
    >
      <el-button
        plain
        v-for="(item, index) in secondTypeList"
        :key="index"
        @click="getRuleInfo(item.id)"
        class="rules-second-tabs"
        >{{ item.name }}</el-button
      >
    </div>
    <div class="rules-items" v-if="ruleDetailList.length != 0">
      <div
        class="HR-document-container"
        v-for="(item, index) in ruleDetailList"
        :key="index"
      >
        <p class="HR-document-title">
          <span class="HR-title-icon">
            <img
              :src="item.iconUrl"
              alt=""
              srcset=""
              style="width: 40px; height: 40px"
            />
          </span>
          <span class="HR-rules-name">{{ item.docName }}</span>
        </p>
        <p class="HR-document-cover">
          <span class="HR-cover-img">
            <img
              :src="item.docImage"
              alt=""
              srcset=""
              style="width: 100%; height: 185px;"
            />
          </span>
        </p>
        <p class="HR-document-footer">
          <span style="border-right: 1px solid #d9dadd">
            <el-button
              type="text"
              size="mini"
              @click="viewRuleInfo(item.docImage, item.docUrl)"
              >预览</el-button
            >
          </span>
          <span>
            <el-button type="text" size="mini" @click="downDoc(item.docUrl)"
              >下载</el-button
            >
          </span>
        </p>
      </div>
    </div>
    <div v-if="ruleDetailList.length == 0" class="rules-no-data">暂无文档</div>

    <el-dialog
      title="预览文档"
      :visible.sync="viewDialogVisible"
      width="50%"
      append-to-body
      :before-close="handleClose"
    >
      <img :src="imgUrl" alt="" srcset="" style="width: 100%; height: auto" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="downDoc(docUrl)">下载全文</el-button>
      </span>
    </el-dialog>
    <!--文档预览dialog-->
  </div>
</template>
<script>
import {
  getRulesItem,
  ruleGetTypeList,
  ruleTypeDetail,
} from "@/api/manage/rules";
export default {
  data() {
    return {
      activeName: "",
      tabItemsList: [],
      secondTypeList: [],
      rulePromptObj: {},
      ruleDetailList: [],
      viewDialogVisible: false,
      docUrl: "", //预览界面的文件下载链接
      imgUrl: "",
    };
  },
  mounted() {
    this.getFirstTypeList();
  },
  watch: {
    /* activeName: {
      handler(val) {
     
      },
    },*/
  },
  computed: {},
  methods: {
    handleClick(tab) {
      this.ruleDetailList = [];
      this.rulePromptObj = {};
      ruleTypeDetail(tab.name) //获取一级分类下的介绍
        .then((res) => {
          const data = res.data.data;
          this.rulePromptObj.title = data.name;
          this.rulePromptObj.intro = data.introduce;
          this.rulePromptObj.introRecommend = data.prompt;
        })
        .then(
          ruleGetTypeList(tab.name).then((res) => {
            this.secondTypeList = res.data.data; //获取二级标签列表
            if (this.secondTypeList.length == 0) {
              /**如果没有二级标签，就展示一级标签下的数据 */
              this.$refs.rulesSecondTabs.style.display = "none";
              getRulesItem(tab.name).then((res) => {
                let iconUrl = "/manage/img/rules/";
                res.data.data.forEach((ele) => {
                  ele["iconUrl"] = `${iconUrl}${ele["type"]}.png`;
                });
                this.ruleDetailList = res.data.data;
              });
            } else {
              this.$refs.rulesSecondTabs.style.display = "block";
              getRulesItem(this.secondTypeList[0]["id"]).then((res) => {
                /**有二级标签，默认展示第一个分类下的数据 */
                let iconUrl = "/manage/img/rules/";
                res.data.data.forEach((ele) => {
                  ele["iconUrl"] = `${iconUrl}${ele["type"]}.png`;
                });
                this.ruleDetailList = res.data.data;
              });
            }
          })
        );
    },
    getFirstTypeList() {
      //刚加载进来的页面，获取数据
      this.tabItemsList = [];
      ruleGetTypeList(0).then((res) => {
        //获取tab栏数据
        if (res.data.data.length != 0) {
          this.tabItemsList = res.data.data;
          this.activeName = this.tabItemsList[0]["id"];
          let val = this.tabItemsList[0]["id"];
          ruleTypeDetail(val)
            .then((res) => {
              const data = res.data.data; //获取一级标签下的介绍内容
              this.rulePromptObj.title = data.name;
              this.rulePromptObj.intro = data.introduce;
              this.rulePromptObj.introRecommend = data.prompt;
            })
            .then(
              ruleGetTypeList(val).then((res) => {
                this.secondTypeList = res.data.data;
                if (this.secondTypeList.length == 0) {
                  getRulesItem(this.activeName).then((res) => {
                    this.$refs.rulesSecondTabs.style.display = "none";
                    let iconUrl = "/manage/img/rules/";
                    res.data.data.forEach((ele) => {
                      ele["iconUrl"] = `${iconUrl}${ele["type"]}.png`;
                    });
                    this.ruleDetailList = res.data.data;
                  });
                } else {
                  this.$refs.rulesSecondTabs.style.display = "block";
                  getRulesItem(this.secondTypeList[0]["id"]).then((res) => {
                    let iconUrl = "/manage/img/rules/";
                    res.data.data.forEach((ele) => {
                      ele["iconUrl"] = `${iconUrl}${ele["type"]}.png`;
                    });
                    this.ruleDetailList = res.data.data;
                  });
                }
              })
            );
        }
      });
    },
    getRuleInfo(id) {
      getRulesItem(id).then((res) => {
        let iconUrl = "/manage/img/rules/";
        res.data.data.forEach((ele) => {
          ele["iconUrl"] = `${iconUrl}${ele["type"]}.png`;
        });
        this.ruleDetailList = res.data.data;
      });
    },
    /**预览文档 */
    viewRuleInfo(imgUrl, docUrl) {
      this.viewDialogVisible = true;
      this.imgUrl = imgUrl;
      this.docUrl = docUrl;
    },
    downDoc(url) {
      window.open(url);
    },
    /**关闭预览文档dialog */
    handleClose() {
      this.imgUrl = "";
      this.docUrl = "";
      this.viewDialogVisible = false;
    },
  },
};
</script>
<style  scoped>
.rules-items {
  overflow: hidden;
  padding-bottom: 60px;
  padding-left: 30px;
}

.rules-tabs {
  float: left;
  width: 100%;
      margin-left: 10px;
}
.rules-tabs /deep/ .el-tabs__header {
  margin: 0px;
}
  

.rules-intro {
  height: auto;
}
.rules-intro ul {
  list-style: none;
  padding-inline-start: 10px;
}

.rules-intro ul li {
  margin-block-start: 1em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.rules-intro .intro-title {
  font-family: "Arial-BoldMT", "Arial Bold", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #333333;
}
.rules-intro .intro {
  font-family: "ArialMT", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #333333;
  line-height: 25px;
}
.rules-intro .intro-recommend {
  font-size: 12px;
  color: #999999;
  font-family: "ArialMT", "Arial";
  font-weight: 400;
  font-style: normal;
}
.rules-second-type-items {
  margin-top: 16px;
  margin-left: 30px;
}
.rules-second-type-items /deep/ .el-button {
  margin-bottom: 10px;
  margin-right: 10px;
}

.rules-second-type-items .rules-second-tabs{
  font-size: 12px;
}
/**制度模块样式 */
.HR-container {
  width: 270px;
  height: 330px;
  margin-left: 28px;
  clear: both;
}
.HR-document-container {
  width: 230px;
  height: 300px;
  margin-right: 20px;
  margin-top: 18px;
  float: left;
  background-color: #ffffff;
}
.HR-document-title {
  height: 50px;
}
.HR-document-title .HR-title-icon {
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 20px;
  margin-right: 10px;
}
.HR-document-title .HR-rules-name {
  width: 152px;
  float: right;
  margin-top: -50px;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  display: block;
}
.HR-document-cover{
      display: block;
    border-bottom: 1px solid #d9dadd;
}
.HR-document-cover .HR-cover-img {
  width: 96%;
  margin:0 auto;
  height: 190px;
  display: block;
  margin-top: -20px;
}
.HR-document-footer {
  display: block;
  -webkit-margin-after: 2em;
  margin-block-end: 2em;
}
.HR-document-footer span {
  width: 49%;
  text-align: center;
  display: block;
  float: left;
  margin-top: -16px;
  line-height: 48px;
}
.rules-no-data {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 36px;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-style: normal;
  color: #333333;
  text-align: center;
  margin-top: 50px;
}
</style>