<template>
    <div class="flex-column">
        <sticky :className="'sub-navbar'">
            <div class="filter-container" style="align-items: center;display: flex;padding-left: 10px">
                <el-select v-model="listQuery.typeid" placeholder="请选择变更类型" style="" @change="changeType">
                    <el-option 
                        v-for="item in typeList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
                <el-input 
                     @keyup.enter.native="handleFilter"
                    prefix-icon="el-icon-search"
                    size="small"
                    style="width: 200px; margin-bottom: 0;margin-left: 20px"
                    class="filter-item"
                    :placeholder="'记录内容进行查询'"
                    v-model="listQuery.key">
                </el-input>
                <el-button size="small" style="margin-left: 20px"  @click="resetList">重置</el-button>
            </div>
        </sticky>
        <div class="app-container flex-item">
            <div class="bg-white fh">
                <el-table :data="changeList" border fit highlight-current-row style="width: 100%;" height="calc(100% - 255px)">
                    <el-table-column min-width="130px" :label="'记录内容'">
                        <template slot-scope="scope">
                        <span>{{ scope.row.content }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="30px" :label="'变更类型'">
                        <template slot-scope="scope">
                        <span>{{ scope.row.type_name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="30px" :label="'创建人'">
                        <template slot-scope="scope">
                        <span>{{ scope.row.createuser }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="30px" :label="'创建时间'">
                        <template slot-scope="scope">
                        <span>{{ scope.row.createtime }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handleCurrentChange"/>
            </div>
        </div>
    </div>
</template>
<script>
import Sticky from '@/components/Sticky'
import Pagination from '@/components/Pagination'
import {getMethodCommon} from "../../api/common"
export default {
    name:'index',
    components: {
        Sticky,
        Pagination
    },
    data(){
        return{
            listQuery: {
                key: "",
                page: 1,
                limit: 20,
                typeid:''
            },
            typeList:[],
            changeList:[],
            total:0
        }
    },
    created(){
        this.getCheckReasonData()
        this.getChangeLog()
    },
    methods:{
        //获取变更选项
        getCheckReasonData() {
            let _this = this
            getMethodCommon('/Categorys/LoadList', {typeid: 'CHANGE_REASON'}).then(res => {
                if(res.code === 200){
                    _this.typeList = res.result
                }
            })
        },
        getChangeLog(){
            let _this = this;
            console.log("this.listQuery:",_this.listQuery)
            getMethodCommon('/TaxProductEquipment/LoadTaxOperationLog',this.listQuery).then(res =>{
                if(res.code === 200){
                    _this.changeList = res.data
                    _this.total = res.count
                }
            })
        },
        changeType(id){
            this.listQuery.typeid = id;
            this.getChangeLog()
        },
        handleFilter(){
            this.getChangeLog()
        },
        handleCurrentChange(val) {
            this.listQuery.page = val.page
            this.listQuery.limit = val.limit
            this.changeList = []
            this.getChangeLog()
        },
        resetList(){
            this.listQuery.typeid = "";
            this.listQuery.key ="";
            this.getChangeLog()
        }
    }

}
</script>
<style scoped>

</style>