<template>
  <div class="KnowledgeInfo">
    <el-row class="topBar">
      <el-col>
        <el-form :inline="true" :model="searchData">
          <el-form-item label>
            <el-input v-model="searchData.title" placeholder="请输名称"></el-input>
          </el-form-item>
          <el-form-item label>
            <el-select v-model="searchData.fileType" placeholder="请选择类别" @change="seletChange" filterable>
              <el-option
                      v-for="item in knowledgeTypeArr"
                      :key="item.dictId"
                      :label="item.name"
                      :value="item.dictId.toString()"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label>
            <el-input v-model="searchData.applyArea" placeholder="请输适用领域"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFun()">
              <i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button type="primary" @click="resetFun()">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </el-form-item>
          <el-form-item class="fr">
            <el-button plain type="primary" @click="addFun()">
              <i class="el-icon-plus"></i> 新增
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table
            :data="tableData.pageData"
            stripe
            border
            style="width:100%;"
            :loading="false"
    >
      <el-table-column width="50" type="index" label="序号"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="fileType" label="类别"></el-table-column>
      <el-table-column prop="applyArea" label="适用领域"></el-table-column>
      <!--<el-table-column prop="remarks" label="内容备注"></el-table-column>-->
      <el-table-column prop="fileUrl" label="源文件">
        <template slot-scope="scope">
                    <span
                            class="dbtn sd qiCr"
                            @click="checkFile(scope.row.fileUrl)"
                            v-if="scope.row.fileUrl != ''"
                    >
                        <i class="el-icon el-icon-view"></i>查看/下载
                    </span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="detailFun(scope.row)" size="small">详情</el-button>
          <el-button @click="editFun(scope.row)" size="small">编辑</el-button>
          <el-button type="danger" @click="delFun(scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="total,sizes, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="PAGE.page"
            :page-size="PAGE.size"
    ></el-pagination>
    <KnowledgeInfoEdit
            v-if="dialogVisible"
            :dialogVisible="dialogVisible"
            :editForm="formData"
            :title="dialogTit"
            @dialogFun="closeDialog"
            @refreshTableData="getTableData"
            :key="zjKey"
    ></KnowledgeInfoEdit>
  </div>
</template>
<script lang="ts">
    import { Component, Vue, Provide } from "vue-property-decorator";
    import KnowledgeInfoEdit from "./KnowledgeInfoEdit.vue";
    import METHOD from "@/utils/methods";
    @Component({
        components: { KnowledgeInfoEdit }
    })
    export default class KnowledgeInfo extends Vue {
        @Provide() signId: String = "";
        @Provide() id: String = "";
        @Provide() tableData: Object = { pageData: [], total: 0 };
        @Provide() PAGE: any = { page: 1, size: 10 };
        @Provide() searchData: any = { title: "", fileType: "", applyArea: "" };
        @Provide() loading: Boolean = false;
        @Provide() knowledgeTypeArr: any = [];

        //编辑组件
        @Provide() dialogVisible: Boolean = false;
        @Provide() dialogTit: String = "新增";
        @Provide() formData: Object = {};
        @Provide() zjKey: any = 0;

        getTableData() {
            let that = this,
                params = Object.assign(that.PAGE, that.searchData);
            (that as any).$axios.post("/knowledgeInfo/getKnowledgeInfoList", params).then((res: any) => {
                if( res ) that.tableData = res;
            })
        }
        //风险类型
        getKnowledgeType() {
            let that = this;
            (that as any).$axios
                .get(
                    `/dict/getSysDictByDictTypeCode/knowledge_type`
                )
                .then((res: any) => {
                    that.knowledgeTypeArr = res;
                });
        }
        seletChange(dictId: any) {
            let that = this,
                arr;
            arr = that.knowledgeTypeArr.filter((ele: any) => dictId == ele.dictId);
            that.searchData.fileType = arr[0].name;
        }
        searchFun() {
            this.PAGE = { page: 1, size: 10 };
            this.getTableData();
        }
        resetFun() {
            this.PAGE = { page: 1, size: 10 };
            this.searchData = {};
            this.getTableData();
        }
        addFun() {
            this.zjKey++;
            this.dialogVisible = true;
            this.dialogTit = "新增";
        }
        detailFun(row: any){
            this.dialogTit = "详情";
            this.formData = Object.assign({}, row);
            this.zjKey++;
            this.dialogVisible = true;
        }
        editFun(row: any) {
            this.dialogTit = "编辑";
            this.formData = Object.assign({}, row);
            this.zjKey++;
            this.dialogVisible = true;
        }
        delFun(row: any) {
            let that = this as any;
            METHOD.deleteFun(that, `/knowledgeInfo/delKnowledgeInfoById/${row.id}`, function() {
                that.getTableData();
            });
        }
        handleSizeChange(val: any) {
            this.PAGE.size = val;
            this.getTableData();
        }
        handleCurrentChange(val: any) {
            this.PAGE.page = val;
            this.getTableData();
        }
        closeDialog() {
            //关闭窗口
            this.dialogVisible = false;
            this.formData = {};
        }
        checkFile(url: any) {
            window.open("http://" + METHOD.GlobalUrl + "/ioc" + url)
        }
        created() {
            this.getTableData();
            this.getKnowledgeType();
        }
    }
</script>
