<template>
  <div class="wrapper">
    <el-row>
      <h3>模型服务商管理</h3>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" style="margin-left: 20px">
        <el-form-item label="服务商名称">
            <el-input v-model="input" style="width: 240px" placeholder="请输入服务商名称" />
        </el-form-item>

      </el-col>
      <el-col :span="5">
        <el-form-item label="服务商编码">
            <el-input v-model="input" style="width: 240px" placeholder="请输入服务商编码" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="服务商种类">
          <el-select v-model="modelType" placeholder="全部">
            <el-option
              v-for="item in modelTypeOption"
              :value="item"
              :label="item"
              :key="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="状态">
          <el-select v-model="modelState" placeholder="全部">
            <el-option
              v-for="item in modelStateOption"
              :label="item"
              :value="item"
              :key="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="1" :offset="4" style="padding-left: 30px">
        <el-button type="primary">搜索</el-button>
      </el-col>
      <el-col :span="1" style="padding-left: 30px">
        <el-button>重置</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="2">
        <el-button type="primary" @click="dialogVisible = true">+新增服务商</el-button>
        <el-dialog v-model="dialogVisible" title="新增服务商" width="40%">

            <el-form>
                <!-- Tab 栏 -->
                <el-tabs  tab-position="top" v-model="activeTab" type="card">
                    <el-tab-pane label="基本信息" name="info1">
                        <BasicInfo v-model="formData.info1" />
                    </el-tab-pane>
                    <el-tab-pane label="API配置" name="info2">
                        <ApiInfo v-model="formData.info2" />
                    </el-tab-pane>
                    <el-tab-pane label="附加信息" name="info3">
                        <AdditionInfo v-model="formData.info3" />
                    </el-tab-pane>
                </el-tabs>
                <!-- 提交按钮 -->
                <div style="display: flex; justify-content: flex-end;">
                    <el-form-item>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitForm">提交</el-button>
                    </el-form-item>
                </div>
            </el-form>

        </el-dialog>
      </el-col>
        <el-col :span="1.5">
            <el-button><el-icon><Upload /></el-icon>批量导入</el-button>
        </el-col>
      <el-col :span="1">
        <el-button><el-icon><Download /></el-icon>导出</el-button>
      </el-col>

    </el-row>
    <!--<div class="content">-->
    <!--  -->
    <!--</div>-->
    <div class="table">

        <el-table :data="models" @selection-change="handleSelectionChange">
            <el-table-column type="selection" />
            <el-table-column label="Logo">
                <template #default="slot">
                    <el-avatar :src="slot.row.logo" size="small" v-if="slot.row.logo" />
                    <span v-else>无</span>
                </template>
            </el-table-column>
            <el-table-column label="服务商编码" prop="providerCode" width="120" />
            <el-table-column label="服务商名称" prop="providerName" width="120" />
            <el-table-column label="模型种类" prop="modelType" width="420" />
            <el-table-column label="官方认证" width="120">
                <template #default="slot">
                    <el-icon size="15" color="#45D1A6" name="success" v-if="slot.row.officialCertified">
                        <component is="Check" />
                    </el-icon>
                    <el-icon size="15" color="#FF4C4E" name="danger" v-else>
                        <component is="Close" />
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column label="API接入" width="120">
                <template #default="slot">
                    <el-icon size="15" color="#45D1A6" v-if="slot.row.apiAccess">
                        <component is="Check" />
                    </el-icon>
                    <el-icon size="15" color="#FF4C4E" name="danger" v-else>
                        <component is="Close" />
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="120">
                <template #default="slot">
                    <el-tag
                            :type="
              slot.row.status === 'active'
                ? 'success'
                : slot.row.status === 'configuring'
                ? 'primary'
                : 'warning'
            "
                    >
                        {{
                        slot.row.status === 'active'
                          ? '启用'
                          : slot.row.status === 'configuring'
                            ? '配置中'
                            : '待配置'
                        }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="240" />
            <el-table-column label="操作" width="240">
              <template #default="slot">
                <!-- 查看 -->
                <el-icon size="15" color="#15A9FF" style="margin-right: 10px;"><View /></el-icon>

                <!-- 编辑 -->
                <el-icon size="15" color="#15A9FF" style="margin-right: 10px;"><Edit /></el-icon>

                <!-- 启用/禁用图标 -->
                <el-icon size="15" style="margin-right: 10px;" :color="slot.row.status === 'active' ? '#13ce66' : '#ff4949'">
                  <SwitchButton />
                </el-icon>

                <!-- 列表 -->
                <el-icon size="15" color="#15A9FF" style="margin-right: 10px;"><More /></el-icon>


              </template>
            </el-table-column>

        </el-table>
      <div class="batch-actions">
        <span>已选择 {{ selectedIds.length }} 项</span>
        <el-button type="primary" size="small" :disabled="selected.length === 0" @click="batchEnable">批量启用</el-button>
        <el-button type="danger" size="small" :disabled="selected.length === 0" @click="batchDisable">批量禁用</el-button>
        <el-button type="warning" size="small" :disabled="selected.length === 0" @click="batchDelete">批量删除</el-button>
      </div>

      <!-- 右下角的分页 -->
      <div class="pagination">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="handlePageChange"
        />
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsInstance, FormInstance } from 'element-plus'
import {Download, More, UploadFilled} from "@element-plus/icons-vue";
import { View, Edit, List, Check, Close } from '@element-plus/icons-vue'
import BasicInfo from "@/views/modleServiceProvide/components/BasicInfo.vue";
import ApiInfo from "@/views/modleServiceProvide/components/ApiInfo.vue";
import AdditionInfo from "@/views/modleServiceProvide/components/AdditionInfo.vue";
import components from "../../../vite/plugins/components";


const serviceOption = ref(["OpenAI"])
const modelNameOption = ref(["服务商1","服务商2"])
const modelTypeOption = ref(["大语言模型","多模态","OCR","视觉","向量化","重排序","语音"])
const modelStateOption = ref(["全部","开启","关闭"])
// const models = ref([])
const total = ref(50) // 总条目数
const currentPage = ref(1) // 当前页码
const pageSize = ref(10) // 每页显示条目个数
const selected = ref<number[]>([]) // 存储选中的行ID
const modelName = ref(null)
const modelType = ref(null)
const activeTab = 'info1'
const service = ref(null)
const modelState = ref(null)
// 定义表格数据的类型
interface ProviderModel {
  id: number
  logo?: string
  providerCode: string
  providerName: string
  modelType: string
  officialCertified: boolean
  apiAccess: boolean
  status: 'active' | 'configuring' | 'pending' // 状态枚举
  createTime: string
}

// 表格数据
const models = ref<ProviderModel[]>([
  {
    id: 1,
    logo: 'https://via.placeholder.com/40',
    providerCode: 'PROV001',
    providerName: '阿里云',
    modelType: '大语言模型',
    officialCertified: true,
    apiAccess: true,
    status: 'active',
    createTime: '2025-01-01 10:30',
  },
  {
    id: 2,
    logo: 'https://via.placeholder.com/40',
    providerCode: 'PROV002',
    providerName: '腾讯云',
    modelType: '图像识别',
    officialCertified: false,
    apiAccess: true,
    status: 'configuring',
    createTime: '2025-02-15 10:30',
  },
  {
    id: 3,
    logo: 'https://via.placeholder.com/40',
    providerCode: 'PROV003',
    providerName: '百度云',
    modelType: '语音识别',
    officialCertified: false,
    apiAccess: false,
    status: 'pending',
    createTime: '2025-03-10 10:30',
  },
])
// 批量启用
const batchEnable = () => {
  // 实现批量启用逻辑
}

// 批量禁用
const batchDisable = () => {
  // 实现批量禁用逻辑
}

// 批量删除
const batchDelete = () => {
  // 实现批量删除逻辑
}

// 分页处理
const handlePageChange = (newPage: number) => {
  currentPage.value = newPage
  // 根据新页面加载数据
}

const selectedIds = ref<number[]>([])

const handleSelectionChange = (selection: ProviderModel[]) => {
  selectedIds.value = selection.map(item => item.id)
}

const dialogVisible = ref(false)
const formRef = ref<FormInstance>()

interface Info1 {
    name: string
    desc: string
}

interface Info2 {
    phone: string
    email: string
}
const formData = ref({
    info1: { name: '', desc: '' },
    info2: { phone: '', email: '' },
    info3: { address: '', remark: '' }
})
interface Info3 {
    address: string
    remark: string
}

interface formData {
    info1: Info1
    info2: Info2
    info3: Info3
}

const form = ref({
  providerName: '',
  providerCode: '',
  modelType: '',
  logo: '',
  officialCertified: false,
  apiAccess: false,
  status: 'active'
})

const rules = {
  providerName: [
    { required: true, message: '服务商名称不能为空', trigger: 'blur' }
  ],
  providerCode: [
    { required: true, message: '服务商编码不能为空', trigger: 'blur' }
  ],
  modelType: [
    { required: true, message: '请选择模型种类', trigger: 'change' }
  ]
}

// const modelTypeOption = ref(['大语言模型', '图像识别', '语音识别'])

// Logo 上传成功回调
const handleLogoSuccess = (response, file) => {
  form.value.logo = URL.createObjectURL(file.raw)
}

// Logo 上传前校验
const beforeLogoUpload = (file) => {
  const isValid = ['image/jpeg', 'image/png'].includes(file.type)
  if (!isValid) {
    alert('只能上传 JPG/PNG 文件')
  }
  return isValid
}

// 提交表单
const submitForm = () => {
  formRef.value.validate(valid => {
    if (valid) {
      // 添加 ID 和 创建时间
      const newProvider = {
        ...form.value,
        id: Math.floor(Math.random() * 10000),
        createTime: new Date().toLocaleString()
      }

      // 添加到表格数据
      models.value.unshift(newProvider)

      // 关闭弹窗并重置表单
      dialogVisible.value = false
      form.value = {
        providerName: '',
        providerCode: '',
        modelType: '',
        logo: '',
        officialCertified: false,
        apiAccess: false,
        status: 'active'
      }
    } else {
      return false
    }
  })
}
</script>

<style scoped lang="scss">
.input-tips{
  font-size: 10px;
  color: #989a9a;

}
.wrapper{
  margin:10px auto;
  width:90%;
}
.model-msg{
  span{
    color:#666666;
  }
}
.section-type{
  span{
    padding-left: 5px;
  }
}
.batch-actions {
  padding: 10px;
  border-top: 1px solid #EBEEF5;
  display: flex;
  align-items: center;
  span {
    margin-right: 10px;
  }
}
.pagination {
  position:absolute;
  right: 0;
  padding: 10px;
  border-top: 1px solid #EBEEF5;
}
.msg-space{
  margin-top:5px;
}
.content{
  padding-left: 10px;
}
.table{
  margin-top: 10px;
}
.el-dialog {
  .el-form {
    padding: 10px;
  }
}
</style>
