<template>
    <div id="purchaseManagement">
        <div class="app-container">
            <!-- <right-toolbar @queryTable="getData"></right-toolbar> -->
            <!-- $t('purchaseManagement.tradeName') -->
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="taskId" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="departureDate" :label="$t('purchaseManagement.tradeName')" sortable width="580">
                </el-table-column>
                <el-table-column prop="num" :label="$t('purchaseManagement.purchasersNum')" sortable width="180">
                </el-table-column>
                <el-table-column :label="$t('purchaseManagement.operation')">
                    <template slot-scope="scope">
                        <!-- v-hasPermi="['order:order:edit']" -->
                        <el-button v-if="scope.row.butType" size="mini" type="text" icon="el-icon-view" @click="see(scope.row)">{{$t('purchaseManagement.see')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :title="$t('purchaseManagement.purchaseRecord')" :visible.sync="open"  @close="closeCell" width="1200px" append-to-body>
            <div class="app-container">
                <div class="purchaseManagementButBox">
                    <el-button size="mini" type="primary" icon="el-icon-upload2" @click="exports">{{$t('purchaseManagement.export')}}</el-button>
                </div>
                <el-table :data="detailsList" style="width: 100%">
                    <el-table-column prop="date" :label="$t('purchaseManagement.serialNo')" width="180">
                        <template slot-scope='scope'>
                            {{scope.$index+1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="customerName" :label="$t('purchaseManagement.userName')" width="180">
                    </el-table-column>
                    <el-table-column prop="phone" :label="$t('purchaseManagement.phone')">
                    </el-table-column>
                    <el-table-column prop="totalNum" :label="$t('purchaseManagement.peopleAll')">
                    </el-table-column>
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList"/>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    purchasedList,
    purchasedDetailList,
    purchasedDetailListExport,
} from "@/api/purchaseManagement/index";
export default {
    data() {
        return {
            tableData: [],
            detailsList: [],
            hasChildren: true,
            open: false,
            exportData: {},
            total:0,
            pageNum:1,
            pageSize:10,
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            purchasedList().then((res) => {
                if (res.code == 200) {
                    for (let i = 0; i < res.data.length; i++) {
                        this.tableData.push({
                            departureDate: res.data[i].title,
                            taskId: i,
                            butType: false,
                            children: res.data[i].list.map((item, index) => {
                                item.taskId = i + "" + index;
                                item.butType = true;
                                return item;
                            }),
                        });
                    }
                }
            });
        },
        see(item) {
            if(item){
                this.exportData = {
                    departureDate: item.departureDate,
                    commodityId: item.commodityId,
                };
            }
            let pages={
                pageNum:this.pageNum,
                pageSize:this.pageSize,
            }
            let query=Object.assign(pages,this.exportData);
            purchasedDetailList(query).then((res) => {
                if (res.code == 200) {
                    this.detailsList = res.data.rows;
                    this.total=res.data.total;
                    this.open = true;
                }
            });
        },
        getList(data) {
            this.pageNum = data.page;
            this.see();
        },
        exports() {
            console.log(111);
            // purchasedDetailListExport(this.exportData).then(res=>{
            //     if(res.code==200){
            //         console.log(res);
            //     }
            // })
            this.download(
                "/order/order/purchasedDetailListExport?departureDate=" +
                    this.exportData.departureDate +
                    "&commodityId=" +
                    this.exportData.commodityId,
                {
                    ...this.tableData,
                },
                `post_${new Date().getTime()}.xlsx`
            );
        },
        closeCell(){
            this.pageNum =1;
        }
    },
};
</script>
<style scoped>
.purchaseManagementButBox {
    padding: 12px 0px;
}
</style>