<template>
  <div>
    <div style="width: 100%;margin-left: 2%;margin-top: 1%;display: flex;">
      <el-select
        v-model="valueHelpSel"
        class="m-2"
        placeholder="一维水动力"
        size="default"
        style="width: 15%"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button style="width: 5%;" type="primary" size="default">搜索</el-button>
    </div>
    <div style="margin-top: 1%;display: flex;margin-left: 2%;width: 100%;align-items: center;">
      <div style="font-weight: bold;">
        模型用途:
      </div>
      <el-button-group style="width: 45%;">
        <el-button :type="seledMo[0]"  style="margin-left: 1%;">降雨预报</el-button>
        <el-button :type="seledMo[1]">产汇流预报</el-button>
        <el-button :type="seledMo[2]">洪水演进</el-button>
        <el-button :type="seledMo[3]">工程调度</el-button>
        <el-button :type="seledMo[4]">水资源调度</el-button>
        <el-button :type="seledMo[5]">大坝安全</el-button>
        <el-button :type="seledMo[6]">多目标调度</el-button>
      </el-button-group>
      <div style="font-weight: bold;">
        模型原理:
      </div>
      <el-button-group style="width: 20%;">
        <el-button :type="seledMo[0]"  style="margin-left: 1%;">数学机理</el-button>
        <el-button :type="seledMo[1]">经验模型</el-button>
        <el-button :type="seledMo[2]">机器学习</el-button>
      </el-button-group>
    </div>
    <div style="width: 96%;margin-top: 1%;margin-left: 2%;" :style="{'height':heightAll*0.7+'px'}">
      <div  style="width: 100%;display: flex;flex-wrap: wrap;justify-content: center;">
        <div v-for="(item, index) in listHelp" style="width: 32%;;margin-bottom: 1%;margin-left: 1%;background-color: #F7F7F7;" :style="{'height':heightAll*0.22+'px'}">
          <div style="margin-left: 2%;margin-top: 3%;font-weight: bold;">
            {{item.modelName}}:
          </div>
          <div>
            <div style="margin-left: 2%;margin-top: 5%;white-space: pre-wrap;text-indent: 2em;width: 96%;font-size: 17px;">
              {{item.modelContent}}
            </div>
          </div>
          <div>
            <div style="display: flex;width: 98%;margin-top: 1%;justify-content: flex-end;margin-right: 1%;">
              <el-button type="primary" plain>导出</el-button>
              <el-button type="primary" plain>编辑</el-button>
              <el-button type="primary">查看</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 1%;float: right;margin-right: 3%;">
       <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="50"
          class="mt-4"
        />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const listHelp = [
  {
    modelName:'马斯京根模型',
    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
  },{
    modelName:'马斯京根模型',
    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
  },{
    modelName:'马斯京根模型',
    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
  },{
    modelName:'马斯京根模型',
    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
  },{
    modelName:'马斯京根模型',
    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
  },{
    modelName:'马斯京根模型',
    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
  },{
    modelName:'马斯京根模型',
    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
  },{
    modelName:'马斯京根模型',
    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
  },{
    modelName:'马斯京根模型',
    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
  },
]
const heightAll = window.innerHeight
const valueHelpSel = '';
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
</script>
<style scoped lang="scss">

</style>