<!-- 成本分析 -->
<template>
    <div class="app-container">
        <el-header>
            <div class="left-panel">
                <el-select
                    v-model="query.type"
                    placeholder="查询类型"
                    clearable
                    @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.day"
                    type="date"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    placeholder="日"
                    v-if="query.type==0||query.type==1"
                    />
                    <!-- 选择班次 -->
                    <el-select
                        v-if="query.type==0"
                        v-model="query.shift"
                        placeholder="班次"
                        clearable
                        style="margin-left: 2px; width: 120px"
                    >
                    <el-option
                        v-for="item in optionsShift"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                    </el-select>
                  <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-card style="margin-top:5px">
            <div ref="print" id="myReport" class="printContainer">
                <table border="1"  cellspacing="0" :key="timeStamp" id="myTable">
                    <thead style="background: #efefef;height: 40px;">
                        <tr>
                            <th colspan="8">电石渣干粉核算</th>
                        </tr>
                        <tr>
                            <th>要素</th>
                            <th>类别</th>
                            <th>费用名称</th>
                            <th>实际产量</th>
                            <th>消耗量</th>
                            <th>单价</th>
                            <th>总成本</th>
                            <th>单位成本</th>
                        </tr>
                    </thead>
                    <tr v-for="(item,index) in tableDatas" :key="index">
                        <td class="numCell" v-if="index==0" rowspan="3">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==3" rowspan="2">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==5" rowspan="8">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==13" colspan="3">{{item[0]}}</td>
                        <td class="numCell" v-if="index==1||index==7" rowspan="2">{{item[1]}}</td>
                        <td class="numCell" v-else-if="index==3||index==4" colspan="2">{{item[1]}}</td>
                        <td class="numCell" v-else-if="index==13" colspan="4">{{item[1]}}</td>
                        <td class="numCell" style="display: none;" v-else-if="index==2||index==8">{{item[1]}}</td>
                        <td class="numCell" v-else>{{item[1]}}</td>
                        <td class="numCell">{{item[2]}}</td>
                        <td class="numCell" v-if="index!==13">{{item[3]}}</td>
                        <td class="numCell" v-if="index!==13">{{item[4]}}</td>
                        <td class="numCell" v-if="index!==13">{{item[5]}}</td>
                        <td class="numCell" v-if="index!==13">{{item[6]}}</td>
                        <td class="numCell" style="display: none;" v-if="index==3||index==4||index==13">{{item[7]}}</td>
                        <td class="numCell" v-else>{{item[7]}}</td>
                    </tr>
                </table>
                <table border="1"  cellspacing="0" :key="timeStamp" id="myTable2">
                    <thead style="background: #efefef;height: 40px;">
                        <tr>
                            <th colspan="8">生料核算</th>
                        </tr>
                        <tr>
                            <th>要素</th>
                            <th>类别</th>
                            <th>费用名称</th>
                            <th>实际产量</th>
                            <th>消耗量</th>
                            <th>单价</th>
                            <th>总成本</th>
                            <th>单位成本</th>
                        </tr>
                    </thead>
                    <tr v-for="(item,index) in tableDatas2" :key="index">
                        <td class="numCell" v-if="index==0" rowspan="6">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==6" rowspan="2">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==8" rowspan="8">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==16" colspan="3">{{item[0]}}</td>

                        <td class="numCell" v-if="index==0" rowspan="4">{{item[1]}}</td>
                        <td class="numCell" v-else-if="index==4||index==10" rowspan="2">{{item[1]}}</td>
                        <td class="numCell" v-else-if="index==6||index==7" colspan="2">{{item[1]}}</td>
                        <td class="numCell" v-else-if="index==16" colspan="4">{{item[1]}}</td>
                        <td class="numCell" style="display: none;" v-else-if="index==1||index==2||index==3||index==5||index==11">{{item[1]}}</td>
                        <td class="numCell" v-else>{{item[1]}}</td>

                        <td class="numCell">{{item[2]}}</td>
                        <td class="numCell" v-if="index!==16">{{item[3]}}</td>
                        <td class="numCell" v-if="index!==16">{{item[4]}}</td>
                        <td class="numCell" v-if="index!==16">{{item[5]}}</td>
                        <td class="numCell" v-if="index!==16">{{item[6]}}</td>
                        <td class="numCell" style="display: none;" v-if="index==6||index==7||index==16">{{item[7]}}</td>
                        <td class="numCell" v-else>{{item[7]}}</td>
                    </tr>
                </table>
                <table border="1"  cellspacing="0" :key="timeStamp" id="myTable3">
                    <thead style="background: #efefef;height: 40px;">
                        <tr>
                            <th colspan="8">熟料核算</th>
                        </tr>
                        <tr>
                            <th>要素</th>
                            <th>类别</th>
                            <th>费用名称</th>
                            <th>实际产量</th>
                            <th>消耗量</th>
                            <th>单价</th>
                            <th>总成本</th>
                            <th>单位成本</th>
                        </tr>
                    </thead>
                    <tr v-for="(item,index) in tableDatas3" :key="index">
                        <td class="numCell" v-if="index==0" rowspan="4">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==4" rowspan="2">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==6" rowspan="8">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==14" colspan="3">{{item[0]}}</td>

                        <td class="numCell" v-if="index==2||index==8" rowspan="2">{{item[1]}}</td>
                        <td class="numCell" v-else-if="index==4||index==5" colspan="2">{{item[1]}}</td>
                        <td class="numCell" v-else-if="index==14" colspan="4">{{item[1]}}</td>
                        <td class="numCell" style="display: none;" v-else-if="index==3||index==9">{{item[1]}}</td>
                        <td class="numCell" v-else>{{item[1]}}</td>
                        <td class="numCell">{{item[2]}}</td>
                        <td class="numCell" v-if="index!==14">{{item[3]}}</td>
                        <td class="numCell" v-if="index!==14">{{item[4]}}</td>
                        <td class="numCell" v-if="index!==14">{{item[5]}}</td>
                        <td class="numCell" v-if="index!==14">{{item[6]}}</td>
                        <td class="numCell" style="display: none;" v-if="index==4||index==5||index==14">{{item[7]}}</td>
                        <td class="numCell" v-else>{{item[7]}}</td>
                    </tr>
                </table>
                <table border="1"  cellspacing="0" :key="timeStamp" id="myTable4">
                    <thead style="background: #efefef;height: 40px;">
                        <tr>
                            <th colspan="8">水泥核算</th>
                        </tr>
                        <tr>
                            <th>要素</th>
                            <th>类别</th>
                            <th>费用名称</th>
                            <th>实际产量</th>
                            <th>消耗量</th>
                            <th>单价</th>
                            <th>总成本</th>
                            <th>单位成本</th>
                        </tr>
                    </thead>
                    <tr v-for="(item,index) in tableDatas4" :key="index">
                        <td class="numCell" v-if="index==0" rowspan="10">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==10" rowspan="2">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==12" rowspan="8">{{item[0]}}</td>
                        <td class="numCell" v-else-if="index==20" colspan="3">{{item[0]}}</td>

                        <td class="numCell" v-if="index==1" rowspan="4">{{item[1]}}</td>
                        <td class="numCell" v-else-if="index==8||index==5" rowspan="2">{{item[1]}}</td>
                        <td class="numCell" v-else-if="index==10||index==11" colspan="2">{{item[1]}}</td>
                        <td class="numCell" v-else-if="index==20" colspan="4">{{item[1]}}</td>
                        <td class="numCell" style="display: none;" v-else-if="index==2||index==3||index==6||index==4||index==9">{{item[1]}}</td>
                        <td class="numCell" v-else>{{item[1]}}</td>
                        <td class="numCell">{{item[2]}}</td>
                        <td class="numCell" v-if="index!==20">{{item[3]}}</td>
                        <td class="numCell" v-if="index!==20">{{item[4]}}</td>
                        <td class="numCell" v-if="index!==20">{{item[5]}}</td>
                        <td class="numCell" v-if="index!==20">{{item[6]}}</td>
                        <td class="numCell" style="display: none;" v-if="index==10||index==11||index==20">{{item[7]}}</td>
                        <td class="numCell" v-else>{{item[7]}}</td>
                    </tr>
                </table>
            </div>
        </el-card>
    </div>
  </template>
<script>
    export default {
        data() {
            return { 
                query:{
                    type:0,
                    day:'',
                    month:'',
                    shift:'',
                },
                tableName:'班组成本计算',
                options:[
                    {id:0,name:'班统计'},
                    {id:1,name:'日统计'},
                    {id:2,name:'月统计'},
                ],
                tableHead:['车间','工段','能源分类','1号','2号','3号','4号','5号','6号','7号','8号'],
                tableDatas:[
                    ['直接材料','原材料','湿电石渣',1,2,3,4,5],
                    ['直接材料','电、水','动力电',1,2,3,4,5],
                    ['直接材料','电、水','工业水',1,2,3,4,5],


                    ['直接人工','车间人员工资','/','/','/','/',5],
                    ['直接人工','车间人员工资','/','/','/','/',5],

                    ['制造费用','倒运费用','倒运费用','/','/','/','/',5],
                    ['制造费用','材料出库','物料消耗','/','/','/','/',5],
                    ['制造费用','维修费用','检修','/','/','/','/',5],
                    ['制造费用','维修费用','外协施工费用','/','/','/','/',5],
                    ['制造费用','装卸费','装卸费 ','/','/','/','/',5],
                    ['制造费用','差旅费','差旅费','/','/','/','/',5],
                    ['制造费用','折旧','折旧','/','/','/','/',5],
                    ['制造费用','摊销','无形资产摊销','/','/','/','/',5],
                    ['成本合计','',''],
                ],
                tableDatas2:[
                    ['直接材料','原材料','干粉',1,2,3,4,5],
                    ['直接材料','原材料','辅料',1,2,3,4,5],
                    ['直接材料','原材料','粉煤灰',1,2,3,4,5],
                    ['直接材料','原材料','电石厂除尘灰',1,2,3,4,5],
                    ['直接材料','电、水','动力电',1,2,3,4,5],
                    ['直接材料','电、水','工业水',1,2,3,4,5],


                    ['直接人工','车间人员工资','/','/','/','/',5],
                    ['直接人工','车间人员工资','/','/','/','/',5],

                    ['制造费用','倒运费用','倒运费用','/','/','/','/',5],
                    ['制造费用','材料出库','物料消耗','/','/','/','/',5],
                    ['制造费用','维修费用','检修','/','/','/','/',5],
                    ['制造费用','维修费用','外协施工费用','/','/','/','/',5],
                    ['制造费用','装卸费 ','装卸费 ','/','/','/','/',5],
                    ['制造费用','差旅费','差旅费','/','/','/','/',5],
                    ['制造费用','折旧','折旧','/','/','/','/',5],
                    ['制造费用','摊销','无形资产摊销','/','/','/','/',5],
                    ['成本合计','',''],
                ],
                tableDatas3:[
                    ['直接材料','原材料','生料',1,2,3,4,5],
                    ['直接材料','辅助材料','原煤',1,2,3,4,5],
                    ['直接材料','电、水','动力电',1,2,3,4,5],
                    ['直接材料','电、水','工业水',1,2,3,4,5],
                    ['直接人工','车间人员工资','/','/','/','/',5],
                    ['直接人工','车间人员工资','/','/','/','/',5],
                    ['制造费用','倒运费用','倒运费用','/','/','/','/',5],
                    ['制造费用','材料出库','物料消耗','/','/','/','/',5],
                    ['制造费用','维修费用','检修','/','/','/','/',5],
                    ['制造费用','维修费用','外协施工费用','/','/','/','/',5],
                    ['制造费用','装卸费 ','装卸费 ','/','/','/','/',5],
                    ['制造费用','差旅费','差旅费','/','/','/','/',5],
                    ['制造费用','折旧','折旧','/','/','/','/',5],
                    ['制造费用','摊销','无形资产摊销','/','/','/','/',5],
                    ['成本合计','',''],
                ],
                tableDatas4:[
                    ['直接材料','原材料','熟料',1,2,3,4,5],
                    ['直接材料','辅助材料','废石灰石粉',1,2,3,4,5],
                    ['直接材料','辅助材料','脱硫石膏',1,2,3,4,5],
                    ['直接材料','辅助材料','粉煤灰',1,2,3,4,5],
                    ['直接材料','辅助材料','矿粉',1,2,3,4,5],
                    ['直接材料','助剂','助磨剂',1,2,3,4,5],
                    ['直接材料','助剂','缓凝剂',1,2,3,4,5],
                    ['直接材料','包装','包装袋',1,2,3,4,5],
                    ['直接材料','电、水','动力电',1,2,3,4,5],
                    ['直接材料','电、水','工业水',1,2,3,4,5],
                    ['直接人工','车间人员工资','/','/','/','/',5],
                    ['直接人工','车间人员工资','/','/','/','/',5],
                    ['制造费用','倒运费用','倒运费用','/','/','/','/',5],
                    ['制造费用','材料出库','物料消耗','/','/','/','/',5],
                    ['制造费用','维修费用','检修','/','/','/','/',5],
                    ['制造费用','维修费用','外协施工费用','/','/','/','/',5],
                    ['制造费用','装卸费 ','装卸费 ','/','/','/','/',5],
                    ['制造费用','差旅费','差旅费','/','/','/','/',5],
                    ['制造费用','折旧','折旧','/','/','/','/',5],
                    ['制造费用','摊销','无形资产摊销','/','/','/','/',5],
                    ['成本合计','',''],
                ],
                optionsShift:[],
                sourceData:{}
            };
        },
        mounted() {
            var myDate = new Date();
            let month = myDate.getMonth()+1;
            if(month<10){
                month = '0'+month;
            } 
            this.query.month = myDate.getFullYear()+'-'+month;
            // this.getData();
            this.getShift();

        },
        methods: {
            getShift(){
                this.$API.mtm.shift.req({page:0}).then(res=>{
                this.optionsShift = res;
                })
            },
            typeCange(value){
                if(value==1){
                    this.tableName = '班组成本计算'
                }else if(value==1){
                    this.tableName = '日成本计算'
                }else{
                    this.tableName = '月成本计算'
                }
            },
            getData(){
                let that = this;
                let params = {query:{}};
                let id = '';
                let arr = [];
                if(that.query.type==0){//班
                    arr = that.query.month.split('-');
                    params.query.year_s = Number(arr[0]);
                    params.query.month_s = Number(arr[1]);
                    id='energy_day'
                }else if(that.query.type==1){//日
                    params.query.year_s = Number(that.query.year);
                    id='energy_month'
                }else{//月
                    params.query.year_s =  Number(that.query.yearStart);
                    id='energy_year'
                }
            },
            getTableData(){
                this.getData();
            },
            
            handlePrint() {
                this.$PRINT('#myReport');
            },
            exportExcel() {
                this.exportLoading = true;
                this.$XLSX('#myTable', this.tableName)
                this.exportLoading = false;
            },
        }
    };
</script>
<style>
    .printContainer{
        /* width: 1075px; */
    }
    #numTable{
        margin-left: 37px;
    }
    #numTable td{
        height: 32px;
        padding-left: 5px;
    }
    .numCell{
        width: 70px;
    }
    .numCell.numCell_last{
        width: 80px;
    }
    .searchHead{
        display:flex
    }
    .middleText{
        height: 32px;
        line-height: 32px;
        margin: 0 5px;
        display: inline-block;
    }
    .searchBtn{
        margin-left: 5px;
    }
    #myTable,#myTable2,#myTable3,#myTable4{
        display: inline-block;
    }
</style>