<template>
  <div class="app-container home">
    <TabTitle :text="nowText" />

    <div class="add-but">
          <el-button  plain @click="router.go('-1')">返回</el-button>
    </div>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-card class="right-list">
          <div class="backcolor" style="height: 350px;width: 100%; padding: 10px;">
              <div style="width: 500px;">
                <h2 style="font-weight: 700;font-style: normal;font-size: 28px;color: #FFFFFF;">{{form.algorithmName}}</h2>
                <p style="font-weight: 700;font-style: normal;font-size: 17px;color: rgba(255, 255, 255, 0.6);line-height: 21px;">
                  {{form.cardCopywriting}}
                </p>
              </div>  
              <ImagePreview style="width: 400px;height: 225px;" :src="form.cardImg"/>
          </div>
          <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
              <span>应用场景</span>
          </div>
          <div class="alg-list" >
            <div v-if="applicationList.length==0">
              暂无数据
            </div>
            <el-card  v-for="item in applicationList" :key="item.name" class="alg-item" shadow="hover" >
              <template v-slot:default >
                <h2>{{ item.sceneName }}</h2>
                <p style="color: #999999;font-size: 12px;">
                  {{ item.sceneDetail }}
                </p>
              </template>
            </el-card>
          </div>
          <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
              <span>算法试用</span>
          </div>
          <div>
              <el-row :gutter="10">
                <el-col :xs="4" :sm="4" :md="4" :lg="4">
                  图片上传
                  <div class="upload-box">
                    <ImageUpload :defaultUrl="'/upload-api'" :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/>
                  </div>
                </el-col>
                <el-col :xs="10" :sm="10" :md="10" :lg="10">
                  原始数据
                  <div class="img-box" v-if="nowImg.length==0">
                    <img src="@/assets/images/default.png" height="100%"/>
                  </div>
                  <div class="img-box" v-else>
                    <img :src="nowImg" height="100%"/>
                  </div>
                </el-col>
                <el-col :xs="10" :sm="10" :md="10" :lg="10">
                  算法识别结果
                  <div class="img-box" v-if="outFilePath.length==0">
                    <img src="@/assets/images/default.png" height="100%"/>
                  </div>
                  <div class="img-box" v-else>
                    <img :src="outFilePath" height="100%"/>
                  </div>
                </el-col>
              </el-row>
          </div>
          <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
              <span>算法边界</span>
          </div>
          <div>
              <el-row :gutter="10">
                <el-col :xs="12" :sm="12" :md="12" :lg="12">
                  有效的拍摄方式：
                  <div class="img-box">
                    <img src="@/assets/images/default.png" height="100%"/>
                  </div>
                </el-col>
                <el-col :xs="12" :sm="12" :md="12" :lg="12">
                  无效的拍摄方式：
                  <div class="img-box">
                    <img src="@/assets/images/default.png" height="100%"/>
                  </div>
                </el-col>
              </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ArrowDown } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
import { detailAlg} from "@/api/algorithmList/index.js";
import { listScene,detailScene } from "@/api/algorithmList/scene.js";
import { listBoundary, detailBoundary } from "@/api/algorithmList/boundary.js";
import { useWebSockets} from './websockt.js'; // 注意文件路径可能需要调整  
const { handeUpload , outFilePath} = useWebSockets();
const router = useRouter();
const route = useRoute()
const nowImg=ref('')
const { roleId } =route.params
const { proxy } = getCurrentInstance();
const algFormRef = ref(null)
const applicationList = ref([])
const nowText=ref('算法详情')
const data = reactive({
  form: {},
  queryParams: {
    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 getDetials(){
  detailAlg(roleId).then(res=>{
    console.log(res)
    form.value=res.data
  })
  listScene({ algorithmId: roleId}).then(res => {
    console.log("🚀 ~ listScene ~ res:", res)
    applicationList.value = res.rows
  })
  listBoundary({ algorithmId: roleId}).then(res=>{
    console.log("🚀 ~ listBoundary ~ res:", res)
  })
}
function getImgObj(obj){
    console.log("🚀 ~ getImgObj ~ obj:", obj)
    nowImg.value = obj.url
    handeUpload(obj)
}

getDetials()

</script>

<style scoped lang="scss">
    .upload-box{
      // width: 500px;
      height: 365px;
      border: 1px solid #d8dce5;
      border-radius: 5px;
      text-align: center;
    }
    .img-box{
      // width: 500px;
      height: 365px;
      border: 1px solid #d8dce5;
      border-radius: 5px;
      text-align: center;
    }
   .form-title{
      display: flex;
      align-items:center;/*for vertical align*/
      font-size: 16px;
      font-weight: 600;
      border-radius: 5px;
      padding: 0;
      margin: 10px 0;
    }
    .form-title::before{
      content:"";
      display: inline-block;
      width: 10px; /* 矩形的宽度 */
      height: 30px; /* 矩形的高度 */
      background-color: #1890FF; /* 矩形的背景颜色 */
      margin-right: 10px;
      border-radius: 8px;
    }
   .search-input{
    display: flex;
    width: 400px;
    margin-right: 10px;
   }
   .add-but{
    position: absolute;
    display: flex;
    top: 30px;
    right: 20px;
   }
   .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: 300px;
        cursor: pointer;
        position: relative;
      }
    }
   }
   .cleartitle{
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
  }
  .backcolor{
    border-radius: 10px;
    background-image: linear-gradient(to right, #6f86d6 0%, #48c6ef 100%);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
</style>

