<template>
  <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;" :style="{'height':heightAll+'px'}">
    <div style="width: 98%;margin-left: 1%;background-color: white;padding-top: 0.5%;" :style="{'height':heightAll*0.5+'px'}">
      <div style="display: flex;align-items: center;margin-left: 1%">
        <div style="width: 3px;background-color: #5B8DB6;height: 15px;"></div>
        <div style="font-weight: bold;margin-left: 0.2%;">方案列表</div>
      </div>
      <div style="width: 100%;display: flex;margin-top: 1%;margin-left: 2%;">
        <div style="width: 20%;display: flex;align-items: center;">
          <div style="font-weight: bold;">
            方案名称
          </div>
          <el-input style="width: 50%;margin-left: 1%;" v-model="input" placeholder="请输入名称" />
        </div>
        <div style="width: 20%;display: flex;align-items: center;margin-left: -5%;">
          <div style="font-weight: bold;">
            服务类型
          </div>
          <el-select
            v-model="value"
            class="m-2"
            placeholder=""
            style="width: 50%;margin-left: 1%;"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="width: 20%;display: flex;align-items: center;margin-left: -5%;">
          <div style="font-weight: bold;">
            模型名称
          </div>
          <el-input style="width: 50%;margin-left: 1%;" v-model="input" placeholder="请输入名称" />
        </div>
        <div style="margin-left: -4%;">
          <el-button type="primary" plain>重置</el-button>
          <el-button type="primary">查询</el-button>
        </div>
      </div>
      <div style="margin-left: 2%;margin-top: 1%;">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          border 
          :cell-style="{ textAlign: 'center',backgroundcolor:'#F7F7F7' }"
          :header-cell-style="{ textAlign: 'center' }"
          style="width: 100%"
          :max-height="tableheight"
          :row-style="{ height: '45px' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" type="index" width="55"/>
          <el-table-column property="name" label="方案名称"/>
          <el-table-column property="mom" label="模型名称"/>
          <el-table-column property="fu" label="服务类型"/>
          <el-table-column property="ji" label="计算进度"/>
          <el-table-column property="ren" label="任务状态">
            <template #default="scope">
              <div v-if="scope.row.ren=='1'" style="color: #95d475;">正常</div>
              <div v-if="scope.row.ren=='0'" style="color: red;">故障</div>
            </template>
          </el-table-column>
        </el-table>
        <div style="float: right;margin-top: 1%;margin-right: 1%;">
          <el-pagination
            small
            background
            layout="prev, pager, next"
            :total="50"
            class="mt-4"
          />
        </div>
      </div>
    </div>
    <div style="margin-top: 1%;width: 98%;margin-left: 1%;display: flex;" :style="{'height':heightAll*0.5+'px'}">
      <div style="background-color: white;width: 49.5%;" :style="{'height':heightAll*0.5+'px'}">
        <div style="display: flex;align-items: center;margin-left: 1%;margin-top: 1%;">
          <div style="width: 3px;background-color: #5B8DB6;height: 15px;"></div>
          <div style="font-weight: bold;margin-left: 0.2%;margin-left: 1%;">模型计算进度</div>
        </div>
        <div style="display: flex;width: 100%;margin-top:2%;margin-left: 2%;font-size: 14.5px;">
          <div style="display: flex;width: 30%;">
            <div style="font-weight: bold;">
              方案编号:
            </div>
            <div>
              潢川
            </div>
          </div>
          <div style="display: flex;width: 30%;">
            <div style="font-weight: bold;">
              模型名称:
            </div>
            <div>
              新安江-二维水动力模型
            </div>
          </div>
        </div>
        <div style="display: flex;width: 100%;margin-top:3%;margin-left: 2%;font-size: 14.5px;align-items: center;">
          <div style="display: flex;width: 30%;align-items: center;">
            <div style="font-weight: bold;">
              预计剩余时间:
            </div>
            <div style="margin-left: 5%;">
              32 min
            </div>
          </div>
          <div style="display: flex;width: 30%;align-items: center;">
            <div style="font-weight: bold;">
              历史调用次数:
            </div>
            <div style="margin-left: 5%;">
              59 次
            </div>
          </div>
          <div style="display: flex;width: 30%;align-items: center;">
            <div style="font-weight: bold;">
              计算准确率:
            </div>
            <div style="margin-left: 5%;">
              80 %
            </div>
          </div>
        </div>
        <div style="width: 100%;display: flex;margin-left: 2%;margin-top: 6%;font-weight: bold;font-size: 14.5px;align-items: center;">
          <div style="width: 20%">
            新安江模型
          </div>
          <div style="width: 60%;">
            <el-progress  :stroke-width="10" :percentage="50" ></el-progress>
          </div>
        </div>
        <div style="width: 100%;display: flex;margin-left: 2%;margin-top: 6%;;font-size: 14.5px;align-items: center;">
          <div style="width: 20%;font-weight: bold">
            二维水动力模型
          </div>
          <div style="width: 60%;">
            运行中...
          </div>
        </div>
      </div>
      <div style="background-color: white;width: 49.5%;margin-left: 1%;" :style="{'height':heightAll*0.5+'px'}">
        <div style="display: flex;align-items: center;margin-left: 1%;margin-top: 1%;">
          <div style="width: 3px;background-color: #5B8DB6;height: 15px;"></div>
          <div style="font-weight: bold;margin-left: 0.2%;margin-left: 1%;">计算各节点进度</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
const tableData = [
  {
    name:'横川',
    mom:'新安江-二维水动力模型',
    fu:'业务流程',
    ji:'50%',
    ren:'1'
  },
  {
    name:'北庙集',
    mom:'新安江-二维水动力模型',
    fu:'业务流程',
    ji:'50%',
    ren:'1'
  },
  {
    name:'息县-王家坝河道',
    mom:'分布式水文模型',
    fu:'业务流程',
    ji:'50%',
    ren:'1'
  },
  {
    name:'黄河中下游',
    mom:'CASC2D-二维水动力模型',
    fu:'业务流程',
    ji:'30%(暂停)',
    ren:'1'
  },
  {
    name:'屯溪',
    mom:'新安江-二维水动力模型',
    fu:'业务流程',
    ji:'65%(停用)',
    ren:'0'
  },
  {
    name:'屯溪',
    mom:'HBV-二维水动力模型',
    fu:'业务流程',
    ji:'100%',
    ren:'1'
  },
]
const heightAll = window.innerHeight
const valueHelpSel = '';
const tableheight = window.innerHeight*0.5
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">
.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
</style>