<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>
