<template>
    <div class="app-container home">
      <TabTitle :text="nowText" />
     
      <div class="add-but">
        <div class="search-input">
          <el-input
            v-model="queryParams.algorithmName"
            style="max-width: 400px"
            placeholder="请输入关键字"
            class="input-with-select"
            clearable
          >
            <!-- <template #append>
              <div class="my-search" style="cursor: pointer;">
                <el-button type="primary"  plain>搜索</el-button>
              </div>
            </template> -->
          </el-input>
          <el-button type="primary"  @click="searchList" plain>搜索</el-button>
        </div>
          <!-- <el-button type="primary" plain @click="handAdd">新增算法</el-button> -->
          <el-button type="primary" @click="handeAdd" plain>告警等级</el-button>
      </div>
      <el-row :gutter="10">
        <el-col :xs="0" :sm="2" :md="3" :lg="4">
          <el-scrollbar :height="globalScreenHeight+'px'">
            <el-card class="left-list" :style="{height:globalScreenHeight+'px'}">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
              >
                <el-menu-item :index="'我的算法'" @click="handMyMenuClick" >
                  <span><el-icon ><component :is="'Collection'" /></el-icon>我的算法</span>
                </el-menu-item>
                <el-divider style="margin: 5px 0;"/>
                <el-menu-item :index="''" @click="handMenuAllClick" >
                  <span> <el-icon ><component :is="'Discount'" /></el-icon>全部算法</span>
                </el-menu-item>
                <el-menu-item v-for="item in algorithm_scen" :key="item.value" :index="item.value" @click="handMenuClick" > 
                  <span style="display: flex;align-items: center;">
                    <el-icon ><component :is="iconComponent(item.remark)"/></el-icon>
                  </span>
                  <span>{{ item.label }}</span>
                </el-menu-item>
              </el-menu>  
            </el-card>
          </el-scrollbar>
        </el-col>
        <el-col :xs="24" :sm="20" :md="20" :lg="20">
          <el-scrollbar :height="globalScreenHeight+'px'">
            <el-card class="right-list" >
            <template v-slot:header>
              <div class="cleartitle" style="justify-content: flex-start">
                <img src="@/assets/images/logo_video.png" width="25px" alt=""> <span>{{nowTopTitle}}</span>
              </div>
            </template>
            <el-row v-if="nowTopTitle=='我的算法'" :gutter="10" class="mb8" style="justify-content: flex-start;">
               <el-col :span="1.5">
                  <el-button
                     type="primary"
                     plain
                      :class="isActive==''?'active':''"
                     @click="handState('')"
                  >全部</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="primary"
                     plain
                       :class="isActive=='0'?'active':''"
                    @click="handState('0')"
                  >启用中</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="primary"
                     plain
                       :class="isActive=='1'?'active':''"
                     @click="handState('1')"
                  >已停用</el-button>
               </el-col>
            </el-row>
            <div class="alg-list">
              <el-card  v-for="item in algList" :key="item.name" class="alg-item" shadow="hover" @click="handDetails(item)">
                <template v-slot:header>
                  <div class="cleartitle">
                    <span class="ellipsis">{{item.algorithmName}}</span>
                    <el-tag
                      v-if="listState"
                      :type=" item.algorithmStatus=='0'?'success':'danger'"
                      effect="dark"
                    >
                      {{ item.algorithmStatus=='0'?'已启用':'已停用' }}
                    </el-tag>
                  </div>
                </template>
                <template v-slot:default >
                  <div style="width: 100%;height: 200px;overflow: hidden;">
                    <img
                      :src="'http://192.168.3.82' +item.cardImg"
                      style="width: 100%;height: 100%;"
                    />
                  </div>
                  <!-- <p class="ellipsis" style="color: #999999;font-size: 12px;height: 80px;">
                    {{item.cardCopywriting}}
                  </p> -->
                  <div class="more-ellipsis" style=" color: #999999; font-size: 12px;" :title="item.cardCopywriting"
                    >
                    {{ item.cardCopywriting }}
                  </div>
                  <div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 5px;" >
                    <el-button link type="primary" :icon="item.status=='0'?'Bottom':'Check'" @click.stop="handleUpdate(item)" v-if="!listState">{{item.status=='0'?'添加':'已添加'}}</el-button>
                    <el-button link type="primary" icon="Open" @click.stop="handleEnable(item)" v-if="listState">{{item.algorithmStatus=='0'?'停用':'启用' }}</el-button>
                    <el-button link type="primary" icon="Edit" @click.stop="handlUpdateMyAlg(item)" v-if="listState">{{'编辑'}}</el-button>
                    <el-button link type="primary" icon="Delete" @click.stop="handleDelete(item)" v-if="listState">删除</el-button>
                    <!-- <el-dropdown trigger="click" @command.stop="handleSetSize">
                      <el-button link type="primary">
                        <el-icon class="el-icon--right">
                        <arrow-down />
                      </el-icon>更多</el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item :command="'卸载'">
                            {{ '卸载' }}
                          </el-dropdown-item>
                          <el-dropdown-item :command="'导入'">
                            {{ '导入' }}
                          </el-dropdown-item>
                          <el-dropdown-item :command="'下载'">
                            {{ '下载' }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown> -->
                  </div>
                </template>
              </el-card>
            </div>
          </el-card>
          </el-scrollbar>
        </el-col>
      </el-row>
      <algorithmDown ref="algorithmDownRef" />
      <algForm ref="algFormRef" />
    </div>
</template>
  
<script setup name="Index">
  import { listAlg, listMyAlg ,detailAlg, addMyAlg, updateMyAlgState,deleteMyAlg, deleteAlg,updateAlgState } from "@/api/algorithmList/index.js";
  import algorithmDown from './components/algorithmDown.vue'
  import algForm from './components/form.vue'
  const { proxy } = getCurrentInstance();
  const { algorithm_scen, sys_job_status } = proxy.useDict("algorithm_scen", "sys_job_status");
  import { ArrowDown } from '@element-plus/icons-vue'
  import { Search } from '@element-plus/icons-vue'
import { el } from "element-plus/es/locales.mjs";
  const globalScreenHeight = inject('globalScreenHeight');
  const router = useRouter();
  const algorithmDownRef = ref(null)
  const algFormRef = ref(null)
  const nowText=ref('算法管理')
  const nowTopTitle=ref('算法管理')
  const listState=ref(false)
  const ids = ref([]);
  const isActive = ref('');
  const isMenuActive = ref('');
  // const iconComponent = ref('');
  // setTimeout(() => {
  //   iconComponent.value='CirclePlusFilled'
  // }, 1000);
  const algorithmList=reactive([])
  const algList = ref([]);
  const data = reactive({
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 100,
      postCode: undefined,
      searchValue: '',
      status: undefined
    },
    rules: {
      postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
      postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
      postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
    }
  });
  const { queryParams, form, rules } = toRefs(data);

  function searchList(){
    if(nowTopTitle.value=='我的算法'){
      getMyList()
    }else{
      getList()
    }
  }

  /** 查询算法列表 */
  function getList() {
    listAlg(queryParams.value).then(response => {
      algList.value = response.rows
      listState.value=false
    });
  }
  /** 查询我的算法列表 */
  function getMyList() {
    nowTopTitle.value='我的算法'
    listMyAlg(queryParams.value).then(response => {
      algList.value = response.rows
      listState.value=true
    });
  }

  function handeAdd(row){
    algorithmDownRef.value.handleAdd()
  }
  function handDetails(row){
    // console.log("🚀 ~ handDetails ~ row:", row)
    router.push("/algorithmList/details/info/" + row.id);
  }
  function handState(state) {
    isActive.value=state
    queryParams.value.algorithmStatus=state
    getMyList()
  }
  function handleUpdate(row) {  
   if(row.status=='0') addMyAlg({algorithmId:row.id}).then((res) => {
      proxy.$modal.msgSuccess("添加成功");
      getList()
      console.log("🚀 ~ addMyAlg ~ res:", res)
    })
    // algorithmDownRef.value.handleUpdate(row)
  }
  
  function handMenuClick(row) {
    queryParams.value.applicationScenarios=row.index
    nowTopTitle.value=row.index
    getList()
  }
  
  function handMenuAllClick(row) {
    queryParams.value.algorithmStatus=''
    queryParams.value.applicationScenarios=''
    nowTopTitle.value='全部算法'
    getList()
  }
  
  function handMyMenuClick(row) {
    queryParams.value.algorithmStatus=''
    queryParams.value.applicationScenarios=''
    nowTopTitle.value='我的算法'
    getMyList()
  }
  
  function iconComponent(row){
    if(row){
      return row
    }else{
      return 'CirclePlusFilled'
    }
  }

  function handleEnable(row){
    const params={
      algorithmStatus: row.algorithmStatus=='1'?"0":"1",
      id:row.userAlgorithmId
    }
    updateMyAlgState(params).then((res) => {
      console.log("🚀 ~ updateAlgState ~ res:", res)
      getMyList()
    })

  }

  function handlUpdateMyAlg(row){
    algFormRef.value.handleUpdate(row)
  }

  /** 删除按钮操作 */
  function handleDelete(row) {
    const id = row.userAlgorithmId || ids.value;
    proxy.$modal.confirm('是否确认删除算法名称为"' + row.algorithmName + '"的数据项？').then(function() {
      return deleteMyAlg(id);
    }).then(() => {
      getMyList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }

  //
    function handeImg(row){
      if(row){
        return `src/assets/algImg/${row}.png`

      }else{
        return `src/assets/algImg/setting.png`
      }
    }
  getList();
  </script>
  
  <style scoped lang="scss">
    .my-search:active{
        color: #409EFF;
    }
    .my-search:focus-within {
        color: #409EFF;
    }
    .el-menu-item.is-active{
      background: #E4F2FF !important;
    }
    .menu-active{
      // background: #E4F2FF !important;
    }
    .active{
      background-color: #409EFF;
      color: #fff;
    }
    .more-ellipsis {
      text-overflow: ellipsis;
      display: -webkit-box;
      overflow-wrap: break-word;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin: 10px 0;
    }
    .ellipsis {
      overflow: hidden;       /* 隐藏超出的内容 */
      white-space: nowrap;     /* 不换行 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
   .search-input{
    display: flex;
    width: 400px;
    margin-right: 10px;
   }
   .add-but{
    position: absolute;
    display: flex;
    top: 30px;
    right: 30px;
   }
   .left-list{
    min-height: 700px;
   }
   .right-list{
    min-height: 700px;
    .alg-list{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      .alg-item{
        width: 100%;
        min-height: 350px;
        cursor: pointer;
        position: relative;
      }
    }
   }
   .cleartitle{
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
  }
  </style>
  
  