<!-- 成本分析 -->
<template>
    <el-container class="app-container">
        <el-header>
            <div>
                <el-select v-model="query.mgroup" placeholder="工段" clearable @change="mgroupChange" class="headerSearch">
                    <el-option v-for="item in mgroupOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select v-model="query.type" placeholder="查询类型" clearable class="headerSearch" @change="typeCange">
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-date-picker 
                    v-model="query.shift" 
                    type="datetime" 
                    value-format="YYYY-MM-DD" 
                    format="YYYY-MM-DD"
                    placeholder="班次" 
                    class="headerSearch" 
                    v-if="query.type == 0" 
                />
                <el-date-picker 
                    v-model="value1" 
                    type="datetimerange" 
                    value-format="YYYY-MM-DD HH:mm:ss" 
                    format="YYYY-MM-DD HH:mm:ss" 
                    placeholder="日"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    v-if="query.type == 1" 
                    style="width: 300px;"
                />
                <el-date-picker 
                    v-model="query.month" 
                    type="month" 
                    value-format="YYYY-MM" 
                    format="YYYY-MM" 
                    placeholder="月"
                    v-if="query.type == 2" 
                />
                <el-button type="primary" icon="el-icon-search" 
                @click="getTableData">
                </el-button>
                <el-button type="primary" @click="exportExcel()" :loading="exportLoading">导出xlsx
                </el-button>
                <el-button type="primary" @click="handlePrint">打印
                </el-button>
            </div>
        </el-header>
        <el-main>
            <scTable
                ref="stlogTable"
                :apiObj="apiObjStlog"
                :query="query"
                :params="params"
                row-key="id"
            >
                <el-table-column type="index" width="100" />
                <el-table-column
                    label="异常类别"
                    prop="duration"
                >
                    <template #default="scope">
                        <span v-if="scope.row.is_shutdown"
                            >停机</span
                        >
                        <span v-else>其他</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="发生时间"
                    prop="start_time"
                ></el-table-column>
                <el-table-column
                    label="结束时间"
                    prop="end_time"
                ></el-table-column>
                <el-table-column
                    label="原因类别"
                    prop="cate"
                ></el-table-column>
                <el-table-column
                    label="异常名称"
                    prop="title"
                ></el-table-column>
                <el-table-column
                    label="事件原因"
                    prop="reason"
                ></el-table-column>
                <el-table-column
                    label="处置措施"
                    prop="measure"
                ></el-table-column>
                <el-table-column
                    label="停机时长"
                    prop="duration"
                ></el-table-column>
            </scTable>
    </el-main>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            query: {
                type: 1,
                month: '',
                year: '',
                mgroup: '',
                start_time__gt: '',
                start_time__lt: '',
                shift: '',
            },
            params:{ 
                mgroup: "", 
                start_time__gt: '',
                start_time__lt: '',
            },
            value1:[],
            materialList: [],
            mgroupOptions: [],
            tableName: '班组成本计算',
            options: [
                // { id: 0, name: '班统计' },
                { id: 1, name: '日统计' },
                { id: 2, name: '月统计' },
            ],
            tableNmae: '',
            tableData1: [],
            apiObjStlog: null,
            sourceData: {}
        };
    },
    mounted() {
        var myDate = new Date();
        let month = myDate.getMonth() + 1;
        if (month < 10) {
            month = '0' + month;
        }
        this.getShift();
        this.getMgroup();

    },
    methods: {
        //获取工段列表
        getMgroup() {
            this.$API.mtm.mgroup.list.req({ page: 0, cate: 'section' }).then(res => {
                res.forEach(item => {
                    this.mgroupOptions.push(item);
                })
                this.mgroupOptions = this.mgroupOptions.reverse();
                this.query.mgroup = this.mgroupOptions[0].id;
                this.params.mgroup = this.mgroupOptions[0].id;
                this.apiObjStlog = this.$API.wpm.stlog.list;
                this.tableName = this.mgroupOptions[0].name;
                this.getTableData();
            })
        },
        //班组列表
        getShift() {
            this.$API.mtm.shift.list.req({ page: 0 }).then(res => {
                this.optionsShift = res;
            })
        },
        //查询类型
        // getData() {
        //     let that = this;
        //     that.tableData1 = [];
        //     let params = {};
        //     params.mgroup = that.query.mgroup;
        //     // if (that.query.type == 0) {//班
        //     //     arr = that.query.day.split('-');
        //     //     params.year_s = Number(arr[0]);
        //     //     params.month_s = Number(arr[1]);
        //     //     params.day_s = Number(arr[2]);
        //     //     params.type = "day_s"
        //     // } else if (that.query.type == 1) {//日
        //     //     arr = that.query.month.split('-');
        //     //     params.start_time__year = Number(arr[0]);
        //     //     params.start_time__month = Number(arr[1]);
        //     //     params.start_time__day = Number(arr[2]);
        //     // } else {//月
        //     //     params.start_time__year = Number(that.query.year);
        //     //     params.start_time__month = Number(that.query.month);
        //     // }
        //     params.start_time__gt = that.query[0];
        //     params.start_time__lt = that.query[1];
        //     this.$API.wpm.stlog.list.req(params).then(res => {
        //         that.apiObjStlog = res;
        //     })
        // },
        getTableData() {
            let that = this;
            let arr = [];
            if (that.query.type == 1) {
                this.query.start_time__gt = this.value1[0];
                this.query.start_time__lt = this.value1[1];}
            else if (that.query.type == 2) {
                console.log(this.query.month);
                arr = that.query.month.split('-');
                this.query.start_time__year = Number(arr[0]);
                this.query.start_time__month = Number(arr[1]);
            }
            this.$refs.stlogTable.queryData(this.query);
        },

        handlePrint() {
            this.$PRINT('#myReport');
        },
        exportExcel() {
            this.exportLoading = true;
            this.$XLSX('#myTable', this.tableName)
            this.exportLoading = false;
        },
    }
};
</script>
<style scoped>
.printContainer {
    width: 100%;
    overflow-x: scroll;
}
</style>