<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { applicationPage,applicationDel } from '@/api/application/application'
import Addpopup from './addpopup.vue'
import { useRouter } from 'vue-router'
import { ElMessage,ElMessageBox } from 'element-plus-secondary'
const router = useRouter()
const isAppPopUp = ref(false) // 是否显示新增弹窗
const keywords:any =ref("") // 输入关键字
const dataList:any = ref([])
onMounted(()=>{
  getDatasetList()
})
const paramsObj:any = ref({})
function getDatasetList() { // 获取数据集列表
  let params ={
    current:1,
    size:100,
    keywords:keywords.value
  }
  applicationPage(params).then(res => {
    dataList.value = res.data.data.records
  })
}
function handleDatasetName() { // 关键字搜索
  getDatasetList()
}
const mask = ref(-1) // 遮罩层
function mouseover(index) { // 鼠标移入遮罩层
  mask.value = index
}
function mouseleave() { // 鼠标移出遮罩层
  mask.value = -1
}
function closeClick(e){  // 关闭新增弹窗
  if(e == true){
    getDatasetList()
  }
  isAppPopUp.value = false
}
function updateClick(row:any){
  paramsObj.value = row
  isAppPopUp.value = true
}
function addClick(){
  paramsObj.value = {}
  isAppPopUp.value = true
}
function routerClick(item,path){
  router.push({
    path: path,
    query: {
      id: item.id
    }
  })
}
function delClick(row){
  ElMessageBox.confirm('您确定删除'+ row.name+'项目及所有模块吗？', {
      confirmButtonType: 'primary',
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(() => {
      applicationDel(row.id).then(res => {
        if(res.data.code == '0'){
          getDatasetList()
          ElMessage.success('删除成功')
        }else{
          ElMessage.error('删除失败')
        }
      })
    })
 
}
function preview(row){
  // const route = router.resolve({
  //   path: '/PreviewSystem',
  //   query: { id: row.id,name:row.name }
  // });
  // window.open(route.href, '_blank');
  const route = router.resolve({
    path: '/SystemLogin',
    query: { id: row.id ,name:row.name}
  });
  window.open(route.href, '_blank');
}
</script>
<template>
  <div class="common-layout">
    <div>
      <el-input
        placeholder="请输入关键字"
        class="keywordsClass"
        maxlength="64"
        v-model="keywords"
        @blur="handleDatasetName"
      >
      <template #prepend>
        <img src="@/assets/newimg/u62.png" alt="">
      </template>
    </el-input>
    </div>
    <div class="application_list_box">
      <div class="application_add" @click="addClick">
        <img src="@/assets/newimg/u103.png" alt="">
        <div style="width: 100%;text-align: center;padding-top: 10px;">新建项目</div>
      </div>
      <div v-for="(item,index) in dataList" class="application_list" @mouseover="mouseover(index)" @mouseleave="mouseleave">
        <img v-if="item.image!= null && item.image!= ''" :src="item.image" alt="" style="width: 267px;height: 155px;">
        <img v-else src="@/assets/newimg/u110.png" alt="" style="width: 267px;height: 155px;">
        <div style="display: flex;justify-content: space-between;">
          <div class="application_list_text">{{ item.code }}-{{ item.simplename }}</div>
          <div v-if="item.status == '01'" style="color:rgb(0, 174, 255) ;" class="application_list_text" >创建中</div>
          <div v-if="item.status == '02'" style="color:rgb(0, 255, 132) ;" class="application_list_text">正常运行</div>
          <div v-if="item.status == '09'" style="color:rgb(255, 35, 35) ;" class="application_list_text">已停用</div>
        </div>
        
        <div class="mask_box" v-if="mask == index">
          <div class="mask_box_img">
            <img src="@/assets/newimg/icon/editpro.png" @click="updateClick(item)" title="编辑项目">
            <img src="@/assets/newimg/icon/edit.png" alt="" title="编辑数据源" @click="routerClick(item,'/datasourcenew')">
            <img src="@/assets/newimg/icon/dataset.png" alt="" title="编辑数据集" @click="routerClick(item,'/datasetnew')">
            <img src="@/assets/newimg/icon/caidan.png" alt="" title="菜单配置" @click="routerClick(item,'/menuconfig')">
            <img src="@/assets/newimg/icon/fuwu.png" alt="" title="服务配置">
            <img src="@/assets/newimg/icon/permission.png" alt="" title="权限设置" @click="routerClick(item,'/permissionset')">
            <img src="@/assets/newimg/icon/export.png" alt="" title="导出">
            <img src="@/assets/newimg/icon/release.png" alt="" title="发布">
            <img src="@/assets/newimg/icon/del.png" alt="" title="删除" @click="delClick(item)">
          </div>
          <div style="display: flex;justify-content: center;">
            <div class="yulan" @click="preview(item)">预览</div>
            <div class="mokuaipeizhi" @click="routerClick(item,'/module')">模块配置</div>
          </div>
        </div>
      </div>
    </div>
    <Addpopup v-if="isAppPopUp" :paramsObj="paramsObj" @close-click="closeClick"/>
  </div>
</template>

<style lang="less" scoped>  
.common-layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #1f2329;
  min-width: 1000px;
  overflow-x: auto;
  box-sizing: border-box;
  padding: 20px ;
  padding-left: 40px ;
  padding-right: 0px ;
  background-color: rgb(21,21,21);
}
.keywordsClass{
  width: 403px;
  height: 40px;
  background: inherit;
  background-color: rgba(37, 38, 38, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(51, 51, 51, 1);
  border-radius: 4px;
  :deep(.ed-input__wrapper){
    background-color: rgba(37, 38, 38, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(51, 51, 51, 0);
    border-radius: 4px;
    box-shadow:0 0 0 1px transparent ;
  }
  :deep(.ed-input__inner){
    background-color: rgba(37, 38, 38, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(51, 51, 51, 0);
    border-radius: 4px;
    color: #fff;
  }
  :deep(.ed-input-group__prepend){
    background-color: rgba(37, 38, 38, 1);
    border: 0;
    box-shadow:0 0 0 1px transparent ;
    padding:0 10px;
    padding-right: 0;
  }
}
.application_list_box{
  display: flex;
  flex-wrap: wrap;
}
.application_add{
  margin-top: 20px;
  width: 296px;
  height: 210px;
  background: inherit;
  background-color: rgba(37, 38, 38, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 137, 255, 1);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #0089FF;
  margin-right: 20px;
  cursor: pointer;
}
.application_list{
  position: relative;
  margin-top: 20px;
  width: 296px;
  height: 210px;
  background: inherit;
  background-color: rgba(37, 38, 38, 1);
  box-sizing: border-box;
  padding:10px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(51, 51, 51, 1);
  border-radius: 10px;
  margin-right: 20px;
  text-align: center;
}
.application_list_text{
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #F2F4F5;
  padding-top: 7px;
  position: relative;
  z-index: 11;
}
.mask_box{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  box-sizing: border-box;
  padding-top: 50px;
}
.mask_box_img{
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  img{
    margin: 0 8px;
    cursor: pointer;
  }
}
.yulan{
  
  width: 50px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-size: 14px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  color: rgb(255, 255, 255);
  margin-right: 10px;
  cursor: pointer;
}
.mokuaipeizhi{
  width: 80px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background-color: rgba(0, 137, 255, 1);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-size: 14px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  color: rgb(255, 255, 255);
  cursor: pointer;
}
</style>
<style>
.ed-message-box__headerbtn{
  top: -15px;
  right: -10px;
}
</style>