""" @author: yy @desc： 集成厂商 @date: 2025-07-21 21:47:17 """
<template>
  <div class="bigBox">
    <div class="tabox">
      <!-- table -->
      <section class="custom-container" :style="{ maxHeight: totalHeight }">
        <div class="title">集成厂商列表</div>
        <!-- 按钮区 -->
        <section class="button" style="margin-bottom: 20px">
          <el-button @click="handleMaskData('xz', '新增注册厂商', {})">
            <el-icon> <Plus /> </el-icon>新增厂商
          </el-button>
        </section>
        <MOSTY.Table
          :table-columns="tableConfig"
          :tableData="pageData.tableData"
          :tableloading="tableloading"
          :isSelect="true"
          :isSort="true"
          actionsW="280"
          :style="{ height: tableHeight }"
        >
          <template #actions="{ row }">
            <span class="operesee" @click="handleMaskData('my', '查看吗密钥', row)">
              <el-icon><Lock /></el-icon>厂商ID
            </span>
            <span class="operesee" @click="handleMaskData('view', '厂商详情', row)">
              <el-icon> <View /> </el-icon>详情
            </span>
            <span class="operedit" @click="handleMaskData('edit', '编辑注册厂商', row)">
              <el-icon> <EditPen /> </el-icon>编辑
            </span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?" @confirm="handleClick(row, 'sc')">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除
                </span>
              </template>
            </el-popconfirm>
          </template>
        </MOSTY.Table>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div>
      </section>
    </div>
    <!-- 查看密钥 -->
    <SecretModal v-model:visible="pageData.secretVisible" :id="pageData.actionId" />
    <!-- 操作区弹窗 -->
    <Action
      v-if="pageData.actionVisible"
      v-model:visible="pageData.actionVisible"
      :id="pageData.actionId"
      :title="pageData.title"
      :mode="pageData.mode"
      @success="handleActionSuccess"
    />
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, nextTick } from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import SecretModal from "./components/secretModal.vue"
import Action from "./components/action.vue"
import { getApi2, postApi2 } from "@/api/tobAcco_api.js"
import { tableConfig } from "./models/list"

const pageData = reactive({
  tableData: [],
  pageConfiger: {
    total: 0,
    pageSize: 10,
    pageNum: 1
  },
  secretVisible: false,
  actionVisible: false,
  actionId: "",
  title: "新增",
  mode: "action"
})
const tableloading = ref(false)
const totalHeight = ref(null)
const tableHeight = ref(null)

// 操作
const handleMaskData = (type, title, row) => {
  pageData.actionId = row?.id
  pageData.title = title
  pageData.mode = type === "view" ? "view" : "action"
  switch (type) {
    case "xz":
    case "edit":
    case "view":
      pageData.actionVisible = true
      break
    case "my":
      pageData.secretVisible = true
      break
    default:
      break
  }
}

// 获取列表数据
const queryData = async () => {
  try {
    tableloading.value = true
    const res = await postApi2({ ...pageData.pageConfiger }, "/mosty-wljc/djcs/pageAll")
    pageData.tableData = res.records
    pageData.pageConfiger.total = res.total
  } catch (e) {
    console.log(e)
  } finally {
    tableloading.value = false
  }
}

//页码发生变化
const handleCurrentChange = val => {
  pageData.pageConfiger.pageNum = val
  queryData()
}
//查询条数发生变化
const handleSizeChange = val => {
  pageData.pageConfiger.pageSize = val
  queryData()
}

const handleClick = (row, type) => {
  if (type === "sc") {
    getApi2({ id: row.id }, "/mosty-wljc/djcs/delete").then(res => {
      queryData()
    })
  }
}

// 操作成功回调
const handleActionSuccess = () => {
  handleCurrentChange(1)
}

onMounted(() => {
  queryData()
  nextTick(() => {
    totalHeight.value = `calc(100vh - ${270}px)`
    tableHeight.value = `calc(${totalHeight.value} - ${190}px)`
  })
})
</script>
<style lang="scss" scoped>
.query-flex {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;

  .query-section {
    flex: 1;

    .form-inline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
  }

  .query-btn {
    width: 250px;
    display: flex;
    justify-content: flex-end;

    .toggle {
      height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      color: #0f3916;

      .el-icon {
        transform: rotate(90deg);
        transition: all 0.25s ease;
      }

      &.active {
        .el-icon {
          transform: rotate(-90deg);
        }
      }
    }
  }
}
.view {
  width: 100%;
  border-radius: 8px;
  margin-top: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  .item {
    border-radius: 8px;
    width: 20%;
    height: 98px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    &:not(:last-child) {
      margin-right: 10px;
    }
    .left {
      flex: 1;
      display: flex;
      align-items: center;
      .icon {
        width: 40px;
        height: 40px;
        background: rgba(39, 121, 247, 0.2);
        border-radius: 8px;
        margin-left: 20px;
        line-height: 40px;
        text-align: center;
      }
      .content {
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        label {
          font-weight: 400;
          font-size: 14px;
          color: #999999;
        }
        span {
          font-weight: 500;
          font-size: 20px;
          color: #333333;
          margin-top: 6px;
        }
      }
    }
    .right {
      width: 92px;
      height: 92px;
      align-self: flex-end;
    }
  }
}

.custom-container {
  width: 100%;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 10px;
  background-color: #fff;

  .title {
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    padding-bottom: 20px;
  }
}
</style>
