<template>
    <div class="content-main">
        <el-row>
            <el-form :inline="true" :model="formInline" class="search-bm-boder" ref="formInline" label-width="110px">
                <el-form-item label="填报单位：" prop="dwmc">
                    <el-input type="text" v-model="formInline.dwmc" clearable class="inputWidth"></el-input>
                </el-form-item>
                <el-form-item label="填报时间：" prop="tbsj">
                    <el-date-picker
                            v-model="tbsj"
                            style="width:250px"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <div class="search-button">
                        <span class="search-line"></span>
                        <el-button type="primary" plain @click="isShowSelect = !isShowSelect">
                            更多条件
                            <i :class="!isShowSelect?'el-icon-arrow-up':'el-icon-arrow-down' "></i>
                        </el-button>
                        <el-button type="primary" size="small" class="iconfont iconchaxun" @click="doSearch">查询</el-button>
                        <el-button type="primary" @click="resetInfo('formInline')" size="small" class="iconfont iconzhongzhi"> 重置</el-button>
                    </div>
                </el-form-item>
                <div v-show="isShowSelect">
                    <div>
                        <el-form-item label="填报期数：">
                            <el-date-picker
                                    type="month"
                                    class="inputWidth"
                                    value-format="yyyy-MM"
                                    placeholder="选择期数"
                                    v-model="formInline.tbqs"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item label="状态：">
                            <el-select
                                    placeholder="不限"
                                    v-model="formInline.zt"
                                    clearable
                                    style="width: 180px !important;"
                            >
                                <el-option
                                        v-for="item in ztList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-form-item label="期初库存：">
                        <el-input type="text" v-model="formInline.qckcMin" clearable class="inputWidth"></el-input> -
                        <el-input type="text" v-model="formInline.qckcMax" clearable class="inputWidth"></el-input>
                    </el-form-item>
                    <el-form-item label="期末库存：">
                        <el-input type="text" v-model="formInline.qmkcMin" clearable class="inputWidth"></el-input> -
                        <el-input type="text" v-model="formInline.qmkcMax" clearable class="inputWidth"></el-input>
                    </el-form-item>
                    <el-form-item label="收入：">
                        <el-input type="text" v-model="formInline.srhjMin" clearable class="inputWidth"></el-input> -
                        <el-input type="text" v-model="formInline.srhjMax" clearable class="inputWidth"></el-input>
                    </el-form-item>
                    <el-form-item label="支出：">
                        <el-input type="text" v-model="formInline.zchjMin" clearable class="inputWidth"></el-input> -
                        <el-input type="text" v-model="formInline.zchjMax" clearable class="inputWidth"></el-input>
                    </el-form-item>
                </div>

            </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="subtbqs" label="填报期数" align="center"></el-table-column>
                <el-table-column prop="tbsj" label="填报时间" align="center"></el-table-column>
                <el-table-column prop="qckc" label="期初库存" align="center"></el-table-column>
                <el-table-column prop="srhj" label="收入" align="center"></el-table-column>
                <el-table-column prop="zchj" label="支出" align="center"></el-table-column>
                <el-table-column prop="qmkc" label="期末库存" align="center"></el-table-column>
                <el-table-column prop="zt" label="状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.zt === 0">已上报</span>
                        <span v-else>未上报</span>
                    </template>
                </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>
                    </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 { grainOilRotationPage } from "@/api/bordereaux/index"
    export default {
        data() {
            return {
                isShowSelect: false,
                formInline: {},
                tbsj:"",
                ztList: [
                    {
                        value: 0,
                        label: "已上报"
                    },
                    {
                        value: 1,
                        label: "未上报"
                    },
                ],
                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 = {}
                this.tbsj = ""
                this.getList()
            },
            //查询
            doSearch(){
                this.pageForm.pageNum = 1
                this.getList()
            },
            //获取列表
            getList() {
                this.formInline.tbsjMin = this.tbsj ? this.tbsj[0] : ""
                this.formInline.tbsjMax = this.tbsj ? this.tbsj[1] : ""
                grainOilRotationPage(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'){
                    let task = '{663403FA-E5CE-4805-B9F8-263793DE0C02}'
                    let bbq = '季度报'
                    let bbqVal = row.tbqs
                    let path = '/ywbb/reserveGrainAndOilRotation'
                    this.$router.push({ path: '/ywbb/common/detail', query: { userid: row.userid, task: task, bbq: bbq, bbqVal: bbqVal, path: path} });
                    
                    //查看
                }else if(type == 'dealWith'){
                    //处理
                }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>
