<template>
  <div class="doc_manage_container">
    <apass-list
      ref="list"
      search-placeholder="请输入关键字"
      :hide-search="true"
      :list-total="listTotal"
      :list-header="listHeader"
      :list-data="listData"
      :list-padding-left="paddingLeft"
      @list-action="init"
    >
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item to="/technical_support">
          技术支持
        </el-breadcrumb-item>
        <el-breadcrumb-item to="/technical_support/doc_manage">
          开发文档
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          管理列表
        </el-breadcrumb-item>
      </el-breadcrumb>

      <template slot="header-left">
        <el-button type="primary" @click="addNew">
          新建
        </el-button>
      </template>

      <template slot="top">
        <div class="top_fliter">
          <show-more-filter class="filter_list">
            <div class="filter_item">
              <span class="filter_title">文档名称：</span>
              <el-input
                v-model="topFilter.name"
                placeholder="请输入banner关键词"
                @keyup.enter.native="topFilterAction"
              ></el-input>
            </div>
            <div class="filter_item">
              <span class="filter_title">文档类型：</span>
              <el-select v-model="topFilter.type" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="(item, index) in types"
                  :key="'top_type_' + index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="filter_item">
              <span class="filter_title">最后更新时间：</span>
              <el-date-picker
                v-model="topFilter.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </show-more-filter>
          <div class="filter_action apaas_button">
            <el-button type="primary" @click="topFilterAction">
              查询
            </el-button>
            <el-button type="defalut" @click="topFilterClear">
              重置
            </el-button>
          </div>
        </div>
      </template>
    </apass-list>

    <apass-dialog ref="addDialog" title="新增">
      <div class="add_content" slot="content">
        <div class="add_notice">
          <p>注：同一文档类型下可维护多个文档名称</p>
        </div>
        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="活动区域" prop="region">
            <el-select
              v-model="addForm.region"
              placeholder="请选择文档类型"
              style="width: 100%;"
            >
              <el-option
                v-for="(item, index) in types"
                :key="'add_type_' + index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文档名称" prop="name">
            <el-input
              v-model="addForm.name"
              placeholder="请输入文档名称"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <template slot="action">
        <el-button type="defalut" size="mini" @click="AddCancelAction">
          取消
        </el-button>
        <el-button type="primary" size="mini" @click="AddSubmitAction">
          确定
        </el-button>
      </template>
    </apass-dialog>

    <apass-dialog
      ref="detailDialog"
      title="预览"
      class="doc_manage_detail_dialog"
      width="1340px"
    >
      <div
        class="detail_content apaas_scroll"
        slot="content"
        v-html="detailContent"
      ></div>
    </apass-dialog>

    <apass-dialog
      ref="deleteDialog"
      :msg="deleteDialogInfo.msg"
      :submit="deleteDialogInfo.submit"
    ></apass-dialog>
  </div>
</template>

<script>
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
import showMoreFilter from "@/components/show-more-filter";

export default {
  components: {
    apassList,
    apassDialog,
    showMoreFilter,
  },
  data() {
    return {
      paddingLeft: 25,
      listTotal: 50,
      listHeader: [
        {
          label: "文档名称",
          prop: "name",
          type: "button",
          callback: this.viewItem,
          width: 320,
        },
        {
          label: "文档类型",
          prop: "type",
          align: "center",
        },
        {
          label: "操作人",
          prop: "person",
          align: "center",
        },
        {
          label: "最后更新时间",
          prop: "update_time",
          align: "center",
        },
        {
          label: "操作",
          type: "buttons",
          align: "center",
          width: 240,
          actionList: [
            {
              label: "编辑",
              callback: this.editItem,
            },
            {
              label: "删除",
              callback: this.deleteItem,
              class: "warn",
            },
          ],
        },
      ],
      listData: [
        {
          id: "1000001",
          type: "平台简介",
          name: "BD-aPaaS平台（V3.0）平台简介",
          person: "江阳",
          update_time: "2016-09-21  08:50:08",
        },
        {
          id: "1000002",
          type: "使用须知",
          name: "BD-aPaaS平台（V3.0）使用须知",
          person: "江阳",
          update_time: "2016-09-21  08:50:08",
        },
        {
          id: "1000003",
          type: "术语说明",
          name: "BD-aPaaS平台（V3.0）相关术语说明",
          person: "江阳",
          update_time: "2016-09-21  08:50:08",
        },
      ],
      topFilter: {
        name: "",
        type: "",
        time: "",
      },
      types: [
        { label: "平台简介", value: "introductory" },
        { label: "使用须知", value: "notice" },
        { label: "术语说明", value: "trem" },
        { label: "标准规范", value: "standard" },
        { label: "操作指南", value: "guide" },
        { label: "接口文档", value: "api" },
        { label: "常见问题", value: "questions" },
      ],
      addForm: {
        region: "",
        name: "",
      },
      addFormRules: {
        region: [
          { required: true, message: "请选择文档类型", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入文档名称", trigger: "blur" },
          { max: 20, message: "长度应小于20个字符", trigger: "change" },
        ],
      },
      detailContent: "",
      deleteDialogInfo: {
        msg: "",
        submit: null,
      },
    };
  },
  computed: {},
  created() {},
  methods: {
    init(filter) {
      let fullFilter = {
        ...filter,
        ...this.topFilter,
      };

      console.log(fullFilter);
    },
    topFilterAction() {
      this.refreshPage();
    },
    topFilterClear() {
      this.topFilter = {
        name: "",
        type: "",
        time: "",
      };
      this.refreshPage();
    },
    refreshPage() {
      this.$refs.list.resetCurrentPage();
    },
    viewItem(item) {
      this.detailContent = `
        <h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1><img src="http://pic1.win4000.com/tj/2020-10-19/5f8d3a49abc54.jpg" style="font-size: 14px; max-width: 100%;"></h1><h1><a href="https://www.baidu.com" target="_blank" style="font-size: 14px;">链接</a></h1><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能</p><h1></h1>
      `;
      this.$refs.detailDialog.show();
    },
    editItem(item) {
      this.$router.push(`/technical_support/doc_manage/edit/${item.id}`);
    },
    deleteItem(item) {
      this.deleteDialogInfo.msg = "是否删除该条文档？";
      this.deleteDialogInfo.submit = () => {
        console.log(`delete ${item.name}`);
      };
      this.$refs.deleteDialog.show();
    },
    addNew() {
      this.addForm = {
        region: "introductory",
        name: "",
      };
      this.$refs.addDialog.show();
    },
    AddCancelAction() {
      this.$refs.addDialog.hide();
    },
    AddSubmitAction() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          console.log("AddSubmitAction");
          this.$refs.addDialog.hide();
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.doc_manage_container {
  height: 100%;
}
.add_notice {
  display: inline-block;
  margin: 10px auto;
  background-color: #f4f7fc;
  border-radius: 8px;
  padding: 10px;
}
.add_notice > p {
  font-size: 12px;
  line-height: 16px;
  color: #58617a;
  padding-left: 20px;
  background-image: url("../../../assets/imgs/ic_tishi.png");
  background-repeat: no-repeat;
  background-position: left center;
}
.detail_content {
  max-height: 650px;
  overflow: auto;
}
</style>

<style>
.doc_manage_detail_dialog .el-dialog__body {
  padding: 10px;
}
.doc_manage_detail_dialog .el-dialog__footer {
  display: none;
}
</style>
