<template>
    <SecondSheet>
        <div class="tolerance-curve">
            <el-form label-width="auto" :inline="true">
                <el-form-item>
                    <el-select v-model="form.name" placeholder="Select">
                        <el-option
                            v-for="item in selectOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.name" placeholder="Select">
                        <el-option
                            v-for="item in selectOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.name" placeholder="Select">
                        <el-option
                            v-for="item in selectOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <div style="display: flex; flex: 1">
                <el-form label-width="auto" label-position="top">
                    <el-form-item label="耐受曲线">
                        <el-select v-model="form.name" placeholder="Select">
                            <el-option
                                v-for="item in selectOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="耐受能力（膝点坐标）">
                        <el-select v-model="form.name" placeholder="Select">
                            <el-option
                                v-for="item in selectOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上限曲线膝点">
                        <div>
                            <div>
                                <el-input-number v-model="form.num" controls-position="right" />
                                <span class="ml10" style="color: #333">p.u.</span>
                            </div>
                            <div class="mt10">
                                <el-input-number v-model="form.num" controls-position="right" />
                                <span class="ml10" style="color: #333">ms</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="下限曲线膝点">
                        <div>
                            <div>
                                <el-input-number v-model="form.num" controls-position="right" />
                                <span class="ml10" style="color: #333">p.u.</span>
                            </div>
                            <div class="mt10">
                                <el-input-number v-model="form.num" controls-position="right" />
                                <span class="ml10" style="color: #333">ms</span>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
                <div style="flex: 1" class="ml10">
                    <MyEchart :options="options" v-if="options"></MyEchart>
                </div>
            </div>
        </div>
    </SecondSheet>
</template>

<script lang="ts" setup>
import SecondSheet from '@/components/secondSheet/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { reactive, ref } from 'vue'
const options = ref({
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        },
        {
            data: [50, 30, 124, 318, 175, 127, 160],
            type: 'line'
        }
    ],
    options: {
        dataZoom: null
    }
})
const form = reactive({
    name: '',
    num: 1
})
const selectOptions = [
    {
        value: 'Option1',
        label: 'Option1'
    },
    {
        value: 'Option2',
        label: 'Option2'
    },
    {
        value: 'Option3',
        label: 'Option3'
    },
    {
        value: 'Option4',
        label: 'Option4'
    },
    {
        value: 'Option5',
        label: 'Option5'
    }
]
const search = () => {
    // 从父组件tableStore获取参数
}
defineExpose({ search })
</script>

<style lang="scss">
.tolerance-curve {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    padding: 10px;
    border: 1px solid var(--el-border-color);
}
</style>
