<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="天数">
                            <a-select v-model="queryParam.day" show-search placeholder="选择天数" style="width: 200px"
                                :options="options" @change="handleChange"></a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="品名">
                            <j-input type="" placeholder="请输入品名" v-model="queryParam.productName"></j-input>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置
                            </a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- 查询区域-END -->


        <!-- table区域-begin -->
        <div>
            <a-table ref="table" size="middle" bordered rowKey="id" class="j-table-force-nowrap" :scroll="{ x: true }"
                :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
                :rowClassName="setRowClassName" @change="handleTableChange">

                <!-- <template slot="test1">{{ test1 }}</template> -->

            </a-table>
        </div>

    </a-card>

</template>



<script>

import { getAction } from '@/api/manage'
import { filterObj } from '@/utils/util';
import '@/assets/less/TableExpand.less'
import VueQr from 'vue-qr'

export default {
    name: 'TblMaterialList',
    components: {
        VueQr,
    },
    data() {
        return {
            options: [{
                value: 7,
                label: '7天内订单',
            }, {
                value: '15',
                label: '15天内订单',
            }, {
                value: '30',
                label: '30天内订单',
            }],
            datefalg: true,
            visible: false,
            toggleSearchStatus: false,
            queryParam: {day:'7'},
            imgUrl: '',
            fal: false,
            dateFal: [],
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            description: 'tbl_material管理页面',
            // 表头
            columns: [
                {
                    title: '编号',
                    align: 'center',
                    dataIndex: 'partNumber',
                },
                {
                    title: '品名',
                    align: 'center',
                    dataIndex: 'productName',
                },
                {
                    title: '在库数量',
                    align: 'center',
                    dataIndex: 'operNumber',
                },
            ],
            url: {
                list: '/meteRial/Statistics/list',
            },
            dictOptions: {},
            superFieldList: [],
            dataSource: [],
            loading: false,
        }
    },
    created() {
        this.loadData()
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
        },
    },
    methods: {
        loadData(arg) {
            this.dateFal = [],
                this.fal = false,
                this.columns = [
                    {
                        title: '编号',
                        align: 'center',
                        dataIndex: 'partNumber',
                    },
                    {
                        title: '品名',
                        align: 'center',
                        dataIndex: 'productName',
                    },
                    {
                        title: '在库数量',
                        align: 'center',
                        dataIndex: 'operNumber',
                    },

                ];
            if (!this.url.list) {
                this.$message.error("请设置url.list属性!")
                return
            }
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            var params = this.getQueryParams();//查询条件
            this.loading = true;
            getAction(this.url.list, params).then((res) => {
                if (res.success) {
                    //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
                    this.dataSource = res.result.records || res.result;
                    this.getSuperFieldList()
                    if (res.result.total) {
                        this.ipagination.total = res.result.total;
                    } else {
                        this.ipagination.total = 0;
                    }
                    //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
                } else {
                    this.$message.warning(res.message)
                }
            }).finally(() => {
                this.loading = false
            })
        },
        handleChange(value) {
            // console.log(`selected ${value}`);
        },
        getQueryParams() {
            //获取查询条件
            let sqp = {}
            if (this.superQueryParams) {
                sqp['superQueryParams'] = encodeURI(this.superQueryParams)
                sqp['superQueryMatchType'] = this.superQueryMatchType
            }
            var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
            param.field = this.getQueryField();
            param.pageNo = this.ipagination.current;
            param.pageSize = this.ipagination.pageSize;
            return filterObj(param);
        },
        getQueryField() {
            //TODO 字段权限控制
            var str = "id,";
            this.columns.forEach(function (value) {
                str += "," + value.dataIndex;
            });
            return str;
        },
        formatDate(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var date = date.getDate();
            return year + "-" + month + "-" + date
        },
        getSuperFieldList() {
            var Columns = this.columns;
            for (let i = 0; i < this.dataSource.length; i++) {
                for (let j = 0; j < this.dataSource[i].count; j++) {
                    if (this.dateFal.length == 0) {
                        this.dateFal.push(this.dataSource[i]["data" + j])
                        var a = this.formatDate(this.dataSource[i]["data" + j])

                        var nam2 = "ordersNumber" + this.dataSource[i]["data" + j]
                        Columns.push({
                            title: a + '订单量',
                            align: 'center',
                            dataIndex: nam2,
                        })

                        var nam3 = "purchaseNumber" + this.dataSource[i]["data" + j]
                        Columns.push({
                            title: a + '采购量',
                            align: 'center',
                            dataIndex: nam3,
                        })
                    } else {
                        var b = this.dataSource[i]["data" + j]
                        this.getDateFal(b)
                        if (this.fal) {
                        } else {
                            var nam2 = "ordersNumber" + this.dataSource[i]["data" + j]
                           
                            Columns.push({
                                title: this.formatDate(this.dataSource[i]["data" + j]) + '订单量',
                                align: 'center',
                                dataIndex: nam2,
                            })

                            var nam3 = "purchaseNumber" + this.dataSource[i]["data" + j]
                            Columns.push({
                                title: this.formatDate(this.dataSource[i]["data" + j]) + '采购量',
                                align: 'center',
                                dataIndex: nam3,
                            })
                            this.dateFal.push(this.dataSource[i]["data" + j])
                        }
                    }

                }

            }
        },
        getDateFal(vat) {
            for (let i = 0; i < this.dateFal.length; i++) {
                if (vat == this.dateFal[i]) {
                    this.fal = true
                }
            }
        },
        handleCancel() {
            this.$emit('close')
            this.visible = false
        },
        setRowClassName(record, index) {
            return record.purchaseNumber < 0 ? 'clickRowStyle' : ''
        },
        handleTableChange(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            //TODO 筛选
            if (Object.keys(sorter).length > 0) {
                this.isorter.column = sorter.field;
                this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
            }
            this.ipagination = pagination;
            this.loadData();
        },
        searchReset() {
            this.queryParam = {day:'7'}
            this.loadData(1);
        },
        searchQuery() {
            this.dataSource = [];
            this.loadData(1);
            // 点击查询清空列表选中行
            // https://gitee.com/jeecg/jeecg-boot/issues/I4KTU1

        },
    },
}
</script>
<style scoped>
.clickRowStyle {
    background-color: #ff0000;
}
</style>