<template>
    <div class="orderbox">
        <h2>{{infolist.woName}}</h2>
        <p>预警规则：{{infolist.ruleName}}</p>
        <span>{{infolist.replyDesc}}</span>
        <!-- <div>
            <div style="padding: 0 30px 0 20px;">
                <uploadDown :datalist="datalist" :dialogStatus="dialogInfo"></uploadDown>
            </div>
        </div> -->

        <div class="tabbox" style="padding: 0 20px;">
            <el-table class="com-table" ref="multipleTable" :data="tableSmall" tooltip-effect="dark" size="mini"
                border style="width: 100%">
                <el-table-column prop="woId" label="工单号" width="200px">
                </el-table-column>
                <el-table-column prop="opTime" label="预警时间" width="200px">
                </el-table-column>
                <!-- <el-table-column prop="overtime" label="是否超时" width="200px">
                </el-table-column> -->
                <el-table-column prop="description" label="内容">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="light" :content="scope.row.description" placement="bottom">
                            <span class="tab-long">{{scope.row.description}}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pageBox" @current-change="currchanges" layout="prev, pager, next" background
                :total="totals">
            </el-pagination>
        </div>

        <div class="tabbox" v-if="historySts">
            <el-table :data="hisList" tooltip-effect="dark" size="mini" border>
                <el-table-column prop="dealName" label="处理人">
                </el-table-column>
                <el-table-column prop="dealTime" label="处理时间">
                </el-table-column>
                <el-table-column prop="dealTypeDesc" label="节点">
                </el-table-column>
                <el-table-column prop="deptName" label="部门">
                </el-table-column>
                <el-table-column prop="woStsDesc" label="状态">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import uploadDown from '../../../components/uploadDown.vue'
    export default {
        props: ["infolist","datalist","dialogInfo","historySts"],
        components:{
            uploadDown
        },
        data() {
            return {
                hisList:[],
                tableSmall:[],
                totals:0,
                pageSizes:1
            };
        },
        methods: {
            getList(){
                this.$http({
                    url: "/market/wotrace/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        woNo: this.infolist.woNo,
                    },
                }).then((res) => {
                    this.hisList = res.data;
                    res.data.forEach(item=>{
                        if(item.woSts == 4){
                            item.dealTypeDesc = '审核'
                        }else if(item.woSts == 2){
                            item.dealTypeDesc = '派发'
                        }else if(item.woSts == 1){
                            item.dealTypeDesc = '回复'
                        }else if(item.woSts == 3){
                            item.dealTypeDesc = '归档'
                        }else{
                            item.dealTypeDesc = '发起'
                        }
                    })
                });
            },
            getListsmall() {
                let _this = this;
                this.tableSmall = [];
                this.$http({
                    url: "/market/alarmWoDesc/queryPage",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + this.pageSizes + '","pageSize":"10"}'
                    },
                    data: {woId:this.infolist.woNo},
                }).then((res) => {
                    this.tableSmall = res.data.data;
                    this.totals = res.data.totalRecord;
                });
            },
            currchanges(v) {
                this.pageSizes = v;
                this.getListsmall();
            },
        },
        created() {
            this.getList();
            this.getListsmall();
            this.$forceUpdate()
        },
        watch: {
            dialogInfo(){
                this.getList();
                this.getListsmall();
                this.$forceUpdate()
            },
        }
    };
</script>

<style scoped lang="scss">
    .tab-long {
        height: 22px;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /* 将对象作为弹性伸缩盒子模型显示 */
        -webkit-line-clamp: 1;
        /* 控制最多显示几行 */
        -webkit-box-orient: vertical;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
    }
    .tabbox {
        margin-top: 15px;
    }

    .pageBox {
        text-align: right;
        margin-top: 10px;
    }
    .orderbox{
        h2{
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
        }
        span{
            display: inline-block;
            text-indent:30px;
            line-height: 30px;
            padding: 0 30px 0 20px;
            text-align: justify;
            margin-bottom: 20px;
        }
        em{
            font-style: normal;
            display: inline-block;
            text-indent:30px;
            line-height: 30px;
            padding: 0 30px 0 20px;
            text-align: justify;
            margin-top: 20px;
        }
        .tabbox{
            padding: 0 30px 0 20px;
            margin-top: 20px;
        }
        p{
            text-align: right;
            margin-right: 30px;
        }
    }
</style>
