<template>
  <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;" :style="{'height':heightAll+'px'}">
    <div style="display: flex;width: 100%;margin-left: 1%;">
        <div style="display: flex;width: 20%;align-items: center;">
            <div>
                组件名称:
            </div>
            <el-input v-model="input" style="width:50%;margin-left: 1%;" placeholder="" />
        </div>
        <div style="display: flex;width: 20%;align-items: center;margin-left: -5%;">
            <div>
                组件分类:
            </div>
            <el-select
                v-model="value"
                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="display: flex;width: 20%;align-items: center;margin-left: -5%;">
            <div>
                提供单位:
            </div>
            <el-input v-model="input" style="width: 50%;margin-left: 1%;" placeholder="" />
        </div>
        <div style="display: flex;width: 20%;align-items: center;margin-left: -5%;">
            <div>
                时间:
            </div>
            <el-date-picker
            v-model="value1"
            style="width: 50%;margin-left: 1%;"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            />
        </div>
        <div style="display: flex;width: 20%;align-items: center;margin-left: 15%;">
            <el-button type="primary" plain="">
            更多<el-icon><DArrowRight /></el-icon>
            </el-button>
            <el-button type="primary" style="margin-left: 5%;">查询</el-button>
            <el-button type="primary" style="margin-left:5%;">注册</el-button>
        </div>
    </div>
    <div style="margin-top: 1%;margin-left: 1%;width: 98%;">
        <el-table 
        :data="tableData" 
        style="width: 98%;margin-left: 1%;margin-top: 1%;"
        :cell-style="{ textAlign: 'center', }"
        :header-cell-style="{ textAlign: 'center',color:'#337ecc',fontWeight: 'bold', fontSize: '16px' }"
        :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
        border 
        :max-height="tableheight">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="date" label="组件名称">

        </el-table-column>
        <el-table-column prop="name" label="组件分类" />
        <el-table-column prop="address" label="提供单位" />
        <el-table-column prop="address" label="注册人员" />
        <el-table-column prop="tm" label="注册时间" />
        <el-table-column prop="address" label="评价结果">
            <template #default="scope">
              <div v-if="scope.row.sta=='1'" style="color: black;">未评价</div>
              <div v-if="scope.row.sta=='0'" style="color: #337ecc;">优</div>
              <div v-if="scope.row.sta=='2'" style="color: greenyellow;">良</div>
              <div v-if="scope.row.sta=='3'" style="color: red;">差</div>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" >
            <template #default="scope">
                <div style="display: flex;justify-content: space-between;width: 80%;">
                    <el-button type="primary" size="mini" text style="margin-left: -2%;">发布</el-button>
                    <el-button type="primary" size="mini" text style="margin-left: -3%;">查看</el-button>
                    <el-button type="primary" text size="mini" style="margin-left: -3%;">编辑</el-button>
                    <el-button type="danger" text size="mini" style="margin-left: -3%;">注销</el-button>
                </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>
        <el-dialog v-model="dialogVisible" title="组件注册" width="50%" >
            <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
                <div style="background-color: blue;width: 2px;height: 16px;"></div>
                <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">基本信息</div>
            </div>
            <div style="margin-left: 1%;margin-top: 1%;">
                <el-form style="margin-left: 5%;"  :model="form" class="demo-form-inline" :rules="rules">
                    <el-row :gutter="40">
                    <el-col :span="9">
                        <el-form-item label="组件名称:" prop="name">
                        <el-input v-model="form.user" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="版本号:" prop="name">
                            <el-input v-model="form.region" />
                        </el-form-item>
                    </el-col>
                    </el-row>
                    <el-row :gutter="40" style="margin-top: 1%;">
                    <el-col :span="9" >
                        <el-form-item label="组件英文名称:" prop="name"> 
                        <el-input v-model="form.user" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="开发语言:">
                            <el-radio-group v-model="radio1" class="ml-4" size="small" style="margin-top: -10%;">
                                <el-radio label="1" size="large">C++</el-radio>
                                <el-radio label="2" size="large">.net</el-radio>    
                                <el-radio label="2" size="large">java</el-radio>
                                <el-radio label="2" size="large">Python</el-radio>
                                <el-radio label="2" size="large">其他</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    </el-row>
                     <el-row :gutter="40" style="margin-top: 1%;">
                    <el-col :span="9" >
                        <el-form-item label="组件分类:">
                            <el-select
                            v-model="value"
                            style="width: 50%;margin-left: 1%;"
                        >
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="标签:">
                            <el-checkbox-group v-model="checkList" style="margin-top: -5%;">
                                <el-checkbox v-for="item in checkGroup" :label="item.label"/>
                            </el-checkbox-group>
                            <el-button type="primary" size="small" :icon="Plus">添加标签</el-button>
                        </el-form-item>
                    </el-col>
                    </el-row>
                    <el-form-item label="组件简介:">
                         <el-input v-model="form.region" style="width: 30%;"/>
                    </el-form-item>
                </el-form>
            </div>
            <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
                <div style="background-color: blue;width: 2px;height: 16px;"></div>
                <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">提供单位信息</div>
            </div>
            <div style="margin-left: 1%;margin-top: 1%;">
                <el-form style="margin-left: 5%;margin-top: 2%;"  :model="form" class="demo-form-inline" :rules="rules">
                    <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="提供单位:" prop="name">
                        <el-input v-model="form.name" style="width: 50%;"/>
                         <el-button type="primary" style="margin-left: 1%;">选择</el-button>
                          <el-button type="" style="margin-left:1%;">清空</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="技术支撑单位:" prop="name">
                            <el-input v-model="form.region" style="width: 50%;" />
                            <el-button type="" style="margin-left:1%;">清空</el-button>
                        </el-form-item>
                    </el-col>
                    </el-row>
                    <el-row :gutter="40" style="margin-top: 1%;">
                    <el-col :span="9" >
                        <el-form-item label="联系方式:" prop="name"> 
                        <el-input v-model="form.user" />
                        </el-form-item>
                    </el-col>
                    </el-row>
                </el-form>
            </div>
            <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
                <div style="background-color: blue;width: 2px;height: 16px;"></div>
                <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">输入输出示例数据</div>
            </div>
            <div style="margin-left: 1%;margin-top: 1%;">
                <el-form style="margin-left: 5%;margin-top: 2%;"  :model="form" class="demo-form-inline" :rules="rules">
                    <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="输入示例数据:" prop="name">
                        <el-input v-model="form.name" style="width: 50%;"/>
                         <el-button type="primary" style="margin-left: 1%;">上传</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="输出示例数据:" prop="name">
                            <el-input v-model="form.name" style="width: 50%;"/>
                            <el-button type="primary" style="margin-left: 1%;">选择</el-button>
                            <el-button type="" style="margin-left:1%;">清空</el-button>
                        </el-form-item>
                    </el-col>
                    </el-row>
                </el-form>
            </div>
            <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
                <div style="background-color: blue;width: 2px;height: 16px;"></div>
                <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">模型组件上传</div>
            </div>
            <div style="margin-left: 1%;margin-top: 1%;">
                <el-form style="margin-left: 5%;margin-top: 2%;"  :model="form" class="demo-form-inline" :rules="rules">
                  <el-form-item label="组件执行包:" prop="name">
                    <div style="width: 100%;">
                      <el-input v-model="form.name" style="width: 50%;"/>
                      <el-button type="primary" style="margin-left: 1%;">上传</el-button>
                      <el-button type="" style="margin-left:1%;">清空</el-button>
                    </div>
                    <div style="color: #b1b3b8;">
                      注:请上传后缀名为.jar、·ph、.sh、.exe、.zip、.bat的文件
                    </div>
                  </el-form-item>
                  <el-form-item label="组件说明文档:" prop="">
                  <div style="width: 100%;">
                    <el-input v-model="form.name" style="width: 50%;"/>
                    <el-button type="primary" style="margin-left: 1%;">上传</el-button>
                    <el-button type="" style="margin-left:1%;">清空</el-button>
                  </div>
                  <div style="color: #b1b3b8;">
                    注:请上传后缀名为.jar、·ph、.sh、.exe、.zip、.bat的文件
                  </div>
                  </el-form-item>
                  <el-form-item label="组件依赖环境说明:" prop="">
                  <div style="width: 100%;">
                    <el-input v-model="form.name" style="width: 50%;"/>
                    <el-button type="primary" style="margin-left: 1%;">上传</el-button>
                    <el-button type="" style="margin-left:1%;">清空</el-button>
                  </div>
                  </el-form-item>
                </el-form>
            </div>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                Confirm
                </el-button>
            </span>
            </template>
        </el-dialog>
    </div>
  </div>
</template>
<script lang="ts"  setup>
import { ref, onMounted } from 'vue';
import {
  ArrowLeft,
  Plus
} from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { reactive } from 'vue'

interface RuleForm {
  name: string
}
const dialogVisible = true
const form = reactive({
  name: '',
  region: '',
  date: '',
})
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: ' ', trigger: 'blur' },
  ],
})

const checkGroup = [
    {label:'水文预报'},
    {label:'维水动力'},
    {label:'二维水动力'},
    {label:'机器学习'},
]
const tableData = [
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'0'
  },
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'1'
  },
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'2'
  },

  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'3'
  },{
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'1'
  },

  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'2'
  },
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'3'
  },
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'3'
  },
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'3'
  },
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'3'
  },
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'3'
  },
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'3'
  },
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'3'
  },
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'3'
  },
  {
    date:'新安江模型',
    name:'模型组件',
    address:'张XX',
    tm:'2023-5-15',
    sta:'3'
  },
]
const heightAll = window.innerHeight
const valueHelpSel = '';
const tableheight = window.innerHeight*0.7
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']
function showNode(data, node){
  console.log(data,node)
}
</script>
<style scoped lang="scss">
.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
}
</style>