<template>
    <div class="app-container">
        <!-- <router-view></router-view> -->
        <div class="detail_content">
            <div class="detail_topBox">
                <div class="icons">
                    <i class="el-icon-picture"></i>
                </div>
                <div>
                    <div class="detail_title">
                        铜-分光分度法
                    </div>
                    <div class="copper">
                        <div class="copper_left">
                            <div>执行人:李天问</div>
                            <div>开始时间:2023-10-27 11:00</div>
                            <div>异常原因:<span style="color: red;">错误显示</span></div>
                        </div>
                        <div class="copper_right">
                            <div>关联流程:<span style="color: #1890FF;">铜-SPEC (TP-SPEC-Cu)</span></div>
                            <div>方法节点:<span style="color: #1890FF;">测定 (TM-SPEC-03)</span></div>
                        </div>

                    </div>
                </div>
                <div class="btn_box">
                    <el-button size="mini">
                        返回上个节点
                    </el-button>
                    <el-button type="primary" size="mini">
                        流程重启
                    </el-button>
                </div>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="详情" name="1">
                    <div class="mt_box">
                        <div class="mt_tit">方法描述：</div>
                        <div>1.将反应后的样品放入分光分度计的比色皿中</div>
                        <div>2.将选择适当的波长</div>
                    </div>
                    <el-collapse v-model="activeNames" @change="handleChange">
                        <el-collapse-item name="1" class="tabs">
                            <template slot="title">
                                <div style="font-weight: bold;padding-left: 20px;">前序步骤 - 制样（TM-SPEC-02） 李天问 2023-11-01
                                    13:00</div>
                            </template>
                            <div style="padding-left: 20px;">
                                <div style="margin:20px 0">设备类型：<span>电子天平(EQ-EPMT23001)</span></div>
                                <div style="margin:20px 0">样品数量： <el-input style="width: 100px;text-align: center;"
                                        v-model="input" disabled size="small" />个</div>
                                <el-table :data="tableData" border style="width: 100%">
                                    <el-table-column prop="date" label="样品编号">
                                    </el-table-column>
                                    <el-table-column prop="name" label="制作类型" width="200">
                                    </el-table-column>
                                    <el-table-column prop="address" label="制作规格" width="180">
                                    </el-table-column>
                                    <el-table-column prop="address" label="使用试剂">
                                    </el-table-column>
                                    <el-table-column prop="address" label="状态">
                                    </el-table-column>
                                    <el-table-column prop="address" label="异常原因">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-collapse-item>
                        <el-collapse-item class="tabs" name="2">
                            <template slot="title">
                                <div style="font-weight: bold;padding-left: 20px;">当前步骤 - 测定（TM-SPEC-03）</div>
                            </template>
                            <div style="padding-left: 20px;">
                                <div style="display: flex;margin: 20px 0;">
                                    <div>设备类型：<el-select v-model="values" placeholder="请选择" disabled>
                                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div style="margin-left: 20px;">设备编号： <el-input style="width: 100px;text-align: center;"
                                            v-model="input" disabled size="small" /></div>
                                </div>
                                <div style="margin: 20px 0;">样品数量： <el-input style="width: 100px;text-align: center;"
                                        v-model="input" disabled size="small" />个</div>
                                <el-table :data="tableData" border style="width: 100%">
                                    <el-table-column prop="date" label="样品编号">
                                        <template slot-scope="{ row }">
                                            <span v-show="!row.date">{{ row.date }}</span>
                                            <el-input v-show="row.date" v-model="row.date"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="name" label="吸光度" width="200">
                                        <template slot-scope="{ row }">
                                            <span v-show="!row.name">{{ row.name }}</span>
                                            <el-input v-show="row.name" v-model="row.name"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="address" label="反射率" width="180">
                                        <template slot-scope="{ row }">
                                            <span v-show="!row.address">{{ row.address }}</span>
                                            <el-input v-show="row.address" v-model="row.address"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="address" label="散射率">
                                        <template slot-scope="{ row }">
                                            <span v-show="!row.address">{{ row.address }}</span>
                                            <el-input v-show="row.address" v-model="row.address"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="address" label="备注">
                                        <template slot-scope="{ row }">
                                            <span v-show="!row.address">{{ row.address }}</span>
                                            <el-input v-show="row.address" v-model="row.address"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="scope" label="操作">
                                        <template slot-scope="scope">
                                            <el-button size="mini"
                                                @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                                            <el-button size="mini" type="danger"
                                                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            
                            </div>
                        </el-collapse-item>

                    </el-collapse>
                </el-tab-pane>
                <el-tab-pane label="节点" name="2">节点</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>


export default {
    data() {
        return {
            activeName: '1',
            input: 4,
            activeNames: ['1'],
            tableData: [],
            options: [{
                value: '选项1',
                label: '分光分度计'
            }],
            values: '选项1',
        };
    },
    methods: {
        handleChange(val) {
            console.log(val);
        }
    }
}

</script>
<style lang="scss" scoped>
.detail_content {
    .detail_topBox {
        display: flex;
        margin-bottom: 20px;

        .icons {
            width: 35px;
            background: #1890FF;
            height: 35px;
            border-radius: 50%;
            margin-right: 20px;
            text-align: center;
            line-height: 35px;
            font-size: 18px;
            color: #fff;
        }

        .detail_title {
            font-size: 24px;
            font-weight: bold;
            display: flex;
        }

        .copper {
            display: flex;
            font-size: 16px;
            margin-top: 20px;
            display: flex;

            .copper_left {
                margin-right: 100px;

                div {
                    padding: 5px 0px;
                }
            }

            .copper_right {
                div {
                    padding: 5px 0px;
                }
            }
        }

        .btn_box {
            width: 60%;
            text-align: right;
        }
    }

    .mt_box {
        font-weight: bold;
        padding-left: 10px;

        .mt_tit {
            font-size: 24px;

        }

        div {
            margin-bottom: 10px;
        }
    }

    .tabs {
        ::v-deep .el-collapse-item__header {
            background-color: rgba(250, 250, 250, 1) !important;
        }
    }




}
</style>