<template>
    <div class="content-main">
        <el-row>
            <el-form :inline="true" :model="formInline" class="search-bm-boder" ref="formInline">
                <el-form-item label="填报期数：">
                    <el-date-picker
                            v-model="formInline.tbqs"
                            type="month"
                            class="inputWidth"
                            value-format="yyyy-MM"
                            placeholder="选择期数"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="应付储存费：">
                    <el-col :span="11">
                        <el-input type="text" v-model="formInline.yfccfmin" clearable class="inputWidth"></el-input>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-input type="text" v-model="formInline.yfccfmax" clearable class="inputWidth"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    stripe
                    v-loading="listLoading"
                    border
                    fit
                    highlight-current-row
                    style="width: 100%">
                <el-table-column type="index" label="序号" width="60" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.$index+1}}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="dwmc" label="填报期数" align="center"></el-table-column>
                <el-table-column prop="tbsj" label="应付储存费" align="center"></el-table-column>
                <el-table-column prop="lhsl" label="小麦金额" align="center"></el-table-column>
                <el-table-column prop="ybfbt" label="稻谷金额" align="center"></el-table-column>
                <el-table-column prop="ysqbt" label="成品粮金额" align="center"></el-table-column>
                <el-table-column prop="bcqs" label="储备油金额" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="60">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="light" content="查看" placement="top">
                            <el-button
                                    type="primary"
                                    size="small"
                                    @click="handledetail(scope.row, 'detail')"
                                    class="iconfont iconchakan2 operate_show_btn"
                            ></el-button>
                        </el-tooltip>
                        <!-- <el-tooltip class="item" effect="light" content="导出" placement="top">
                            <el-button
                                    type="primary"
                                    size="small"
                                    class="iconfont icondaochu11 operate_edit_btn"
                                    @click="handledetail(scope.row, 'export')"
                            ></el-button>
                        </el-tooltip> -->
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageForm.pageNum"
                    :page-sizes="[10,20,30,40]"
                    :page-size="pageForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageForm.total"
            ></el-pagination>
        </el-row>
    </div>
</template>
<script>
    import { applicationSubsidyPage } from "@/api/bordereaux/index"
    export default {
        data() {
            return {
                formInline: {},
                options:[],
                listLoading: false,
                tableData: [],
                pageForm: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 0
                },
                pickerOptions:{
                    disabledDate(time) {
                        return time.getTime() > Date.now()-8.64e7;
                    },
                },
            }
        },
        created() {
            this.getList()
        },
        methods: {
            //重置
            resetInfo(){
                this.pageForm.pageNum = 1;
                this.pageForm.pageSize = 10;
                this.formInline.tbnd = null
                this.tbnd = this.formInline.tbnd
                this.getList()
            },
            //查询
            doSearch(){
                this.pageForm.pageNum = 1
                this.getList()
            },
            //获取列表
            getList() {
                // applicationSubsidyPage(this.formInline, this.pageForm).then(res => {
                //     if (res.infoCode == 200) {
                //         this.tableData = res.data.list;
                //         this.$set(this.pageForm,"total", Number(res.data.total))
                //     } else {
                //         this.$message({
                //             type: 'error',
                //             message: res.msg
                //         });
                //     }
                // }).catch()
            },
            //操作
            handledetail(row,type){
                if(type == 'detail'){
                    //查看
                }else{
                    //导出
                }
            },
            handleSizeChange(val) {
                this.pageForm.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.pageForm.pageNum = val
                this.getList()
            },
            formatDateTime(date) {
                let y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? "0" + m : m;
                let d = date.getDate();
                d = d < 10 ? "0" + d : d;
                let h = date.getHours();
                h = h < 10 ? "0" + h : h;
                let minute = date.getMinutes();
                minute = minute < 10 ? "0" + minute : minute;
                let second = date.getSeconds();
                second = second < 10 ? "0" + second : second;
                return y + '';
            },
        }
    }
</script>
<style scoped lang="scss">
    .content-main {
        margin: 10px 10px 0;
        padding-top: 20px;
    }

    .span-inline-block {
        float: left;
        margin-right: 5px;
        width: 80px;
        text-align: right;
        line-height: 30px;
    }

    .inputWidth {
        width:180px !important
    }

    .h3 {
        width: 98%;
        text-align: center;
        font-size: 1em;
        line-height: 2.5;
        color: #fff;
        background-color: #49a2fa;
        margin-bottom: 20px;
    }

    .el-form {
        overflow: hidden;
        overflow-y: auto;
    }

    .el-row {
        .el-tooltip {
            float: left;
            padding: 0 12px 0 0;
            width: 118px;
            white-space: nowrap;
            text-align: right;
            vertical-align: middle;
            color: #525357;
            font-size: 14px;
            line-height: 40px;
            box-sizing: border-box;
        }
    }
    .chb_box {
        /deep/ .el-checkbox {
            min-width: 150px;
        }
    }
    table {
        margin-bottom: 10px;
        font-size: 14px;
        border-collapse: collapse;
        color: #525357;
    }
    th {
        font-weight: 700;
        font-size: 18px;
    }
    td,
    th {
        padding: 10px;
        text-align: center;
        border: 1px solid #b0b0b0;
    }
</style>
