#set(title="时间线统计")
#@header()
<style>
    #if(look)
    body{background-color: white}
    #end
    .bg{padding: 15px;background-color: white;}
    .items{padding: 8px;border-bottom: 1px solid #e9ebed;color: #545555}
    .item{padding-top: 10px}
    .s1{padding-right: 10px}
    .bh{color: #2D93CA}
    .before{color: #878787;padding-left: 10px}
    .time{font-size: 14px;color: #878787}
    .av{background-color: aliceblue;padding: 7px 0px 7px 7px;color: #545555}
    .av span{padding-left: 10px}
</style>
<body>
<div id="app" v-cloak>
    #if(!look)
    <el-form :inline="true" label-width="auto">
        <el-form-item label="样机型号">
            <el-input placeholder="请输入样机型号" v-model="param.time_name" clearable :disabled="true" />
        </el-form-item>
        <el-form-item label="参数名称">
            <el-input placeholder="请输入参数名称模糊查询" v-model="param.item_pky" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
        </el-form-item>
        <div style="float:right;">耗时: {{param.time}}</div>
    </el-form>
    #end
    <div >
        <el-divider>变更记录</el-divider>
        <div v-for="(item, index) in list" :key="index" class="bg">
               <div v-for="(i, index) in item.times" class="av">
                   {{item.ITEM_VERSION}}:
                   {{i.ITEM_WT_NUM}}:
                   {{i.ITEM_TITLE}}
                   <span class="s1 bh">{{i.TYPE}}</span>
                   <span class="s1 time">{{i.CREATED}}</span>
               </div>
               <div v-for="(a, index) in item.children" class="items">
                   {{item.ITEM_VERSION}}: {{a.ITEM_PKY}} <span class="s1 before">原记录</span>
                   <div v-for="(b, index) in a.ITEM_TLOG">
                       <div v-if="b.ITEM_NAME" class="item">
                           <span>{{item.ITEM_VERSION}}:</span>
                           <span class="s1">{{a.ITEM_PKY}}{{b.ITEM_NAME}}</span>
                           <span class="s1 bh">变更</span>
                           <span class="s1 time">{{b.DAY}}</span>
                       </div>
                   </div>
               </div>
        </div>
    </div>
</div>
</body>
<script src="#(path)/static/js/jquery.min.js"></script>
<script src="#(path)/static/js/layer/layer.js"></script>
<script src="#(path)/static/js/vue.js"></script>
<script src="#(path)/static/js/common.js"></script>
<script src="#(path)/static/js/echarts.min.js"></script>
<script src="#(path)/static/js/element-ui.js"></script>
<script>
    let myChart = null;
    let vm = new Vue({
        el: "#app",
        data: {
            dialogVisible: false,
            list: [],
            param: {
                time_name:'#(time_name)',
                DOMAINID: '#(DOMAINID)',
                ID: '#(ID)',
                value: ['#(value)'],
                begin: '#(begin)',
                end: '#(end)',
                created: ['#(begin)', '#(end)'],
            },
        },
        mounted() {
            this.getData();
        },
        methods: {
            handleChange(value) {
                this.param.ID = value[value.length - 1]
            },
            search() {
                this.getData();
            },
            getData() {
                sendAjax("#(path)/report/time", this.param, res => {
                    cancelLoding();
                    vm.param.time = res.time;
                    vm.list=res.data;
                    vm.list.forEach(item=>{
                        item.children.forEach(item=>{
                            item.ITEM_TLOG=JSON.parse(item.ITEM_TLOG);
                        })
                    })
                })
            }
        }
    })
</script>
</html>
