// 计时作业
<template>
    <div class="sale">
        <div class="top">
            <!-- 框计算 -->
            <span class="text">计时时间：</span>
            <el-date-picker v-model="startTime" type="datetime" placeholder="选择日期">
            </el-date-picker>
            <span class="text">至</span>
            <el-date-picker v-model="endTime" type="datetime" placeholder="选择日期">
            </el-date-picker>
            <el-button type="primary" class="btn" @click="onclick">
                <i class="el-icon-search"></i>查询
            </el-button>
        </div>
        <div class="tab">
            <dilTable v-bind.sync="option" ref="table1">
                <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                    <div class="step">
                        <el-button
                        @click="getStepsList(scope.row)"
                        type="text"
                        size="small"
                        >运输详情</el-button>
                    </div>
                  <!-- <el-button @click="" type="primary" style="margin-left: 16px;">
                    运输详情
                  </el-button> -->
                </template>
                </el-table-column>
            </dilTable>
        </div>
        <!-- 运输进程详情 -->
        <el-drawer
            :visible.sync="drawer"
            :direction="direction">
            <!-- 步骤条显示 -->
            <div style="height: 200px;content-align:center" >
                <el-table
                :data="stepList"
                style="width: 100%">
                <el-table-column
                    prop="linkName"
                    label="计时状态"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="pointDate"
                    label="时间"
                    width="180">
                </el-table-column>
                </el-table>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { getCookie } from "@/utils/util.js";
import { sjTime } from "@/utils/sharedJsFile";
export default {
    data(){
        return{
            inputText:'',
            option: {       
                // 表格请求数据的地址
                requestUrl: "",
            },
            tableData: [],
            startTime: null,
            endTime: null,
            oldRow1: "",
            oldRowCount1: 1,
            drawer: false,
            direction: 'rtl',
            orderId: 0,
            stepList:[]
        }
    },
    created(){
        if(getCookie("orgCode") == "dagangadmin"||getCookie("orgCode") == "zidonghuabu"||getCookie("orgCode") == "wuliuchuyunzhongxin"){
            this.option.requestUrl = "/api/v1/tms/getAllTimeTaskResult?apiId=458"
        }else{
            console.log("cookier"+getCookie("userId"))
            this.option.requestUrl = "/api/v1/tms/getAllTimeTaskResult?apiId=458&orgCode="+getCookie("userId");
        }
    },
    methods:{
        getStepsList(row){
            console.log(row.orderId)
            this.orderId = row.orderId
            this.drawer = true
            let map = {
                orderId : this.orderId
            }
            this.axios.post("/api/v1/oms/getOrderResult",map)
                .then((res) => {
                    console.log(res)
                if (res.status == 200) {
                    this.stepList = res.data
                } else {
                    this.$message.error("展示失败！");
                }
            });
            console.log(this.stepList)
        },
        getRequirementMaterial1(row) {
        // 记录重复点击次数
        if (this.oldRow1 === row) {
            this.oldRowCount1 += 1;
        }
        // 切换当前详情表
        this.$refs.table1.toggleRowExpansion(row);
        // 打开前关闭上一个详情表
        if (this.oldRow1 != "") {
            if (this.oldRow1 != row) {
            if (this.oldRowCount1 % 2 === 1) {
                this.$refs.table1.toggleRowExpansion(this.oldRow1);
            } else {
                this.oldRowCount1 = 1;
            }
            } else {
            this.oldRow1 = null;
            return;
            }
        }
        // 重置上一个点击对象
        this.oldRow1 = row;
        this.getMaterial(row.orderId);
        },
        onclick(){
            let startTime = null;
            let endTime = null;
            if (this.startTime) {
                startTime = sjTime(this.startTime);
            }
            if (this.endTime) {
                endTime = sjTime(this.endTime);
            }
            if (startTime && endTime) {
                if (startTime < endTime) {
                    console.log(startTime)
                    console.log(endTime)
                if(getCookie("orgCode") == "dagangadmin"||getCookie("orgCode") == "zidonghuabu"||getCookie("orgCode") == "wuliuchuyunzhongxin"){
                    this.option.requestUrl = "/api/v1/tms/getAllTimeTaskResult?apiId=458&startTime=" + startTime + "&endTime=" + endTime + "&i=" +new Date();
                }else{
                    this.option.requestUrl = "/api/v1/tms/getAllTimeTaskResult?apiId=458&orgCode="+getCookie("userId")+"&startTime=" + startTime + "&endTime=" + endTime + "&i=" +new Date();
                }
                } else {
                this.startTime = null;
                this.endTime = null;
                this.$message.warning("开始时间要比结束时间早");
                }
            } else {
               
            }
        },
        getMaterial(orderId){
            console.log(orderId)
            this.axios.post("/api/v1/oms/getPauseTimeTaskDetail/" + orderId).then((res) => {
                console.log(res)
                this.tableData = res.data.data
            })
        },
    }
}
</script>
<style lang="scss">
    .sale{
        .top {
            padding: 1.25rem 1.875rem;
            .el-input{
            width: 20%;
            }
        }
    }
    .el-table th.el-table__cell>.cell {
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        vertical-align: middle;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        text-align: center;
    }
    .step {
    text-align: center;
    }
</style>