""" @author: yy @desc：联动视频配置列表 @date: 2025-07-27 07:25:53 """
<template>
  <MOSTY.Modal v-model:visible="visible" v-model:loading="loading" title="联动视频配置" width="80%" @ok="handleSubmit">
    <div class="container">
      <div class="item" v-for="item in list" :key="item.spsxtid">
        <div class="video-wrapper">
          <SvgIcon :icon="'play'" style="color: var(--el-color-primary) !important; font-size: 30px; cursor: pointer"></SvgIcon>
          <SvgIcon :icon="'delete'" class="delete-icon" @click="handleDelete(item)"></SvgIcon>
        </div>
        <div class="footer">
          <label>{{ item.videoName }}监控画面</label>
          <div class="footer-content">
            <label>设置为主画面</label>
            <el-switch v-model="item.sfzsxt" active-value="1" inactive-value="2" @change="handleChange(item)" />
          </div>
        </div>
      </div>
      <div class="add" @click="handleClick">
        <el-icon :size="20"><CirclePlus /></el-icon>
        <div style="text-align: center; margin-top: 10px">添加更多</div>
      </div>
    </div>

    <!-- 视频配置弹窗 -->
    <videoConfig
      v-model:visible="show"
      :place-name="placeName"
      :confId="confId"
      :placeid="placeid"
      :subset-id="subsetId"
      :data="list"
      :methodApi="methodApiObj.listVideo"
      @submit="handleConfigSubmit"
    />
  </MOSTY.Modal>
</template>
<script setup>
import { ref, watchEffect } from "vue"
import { ElMessage } from "element-plus"
import * as MOSTY from "@/components/MyComponents/index"
import SvgIcon from "@/components/SvgIcon/index.vue"
import videoConfig from "./videoConfig.vue"
import { getApi2, postApi2 } from "@/api/tobAcco_api.js"

const props = defineProps({
  // 主设备ID
  confId: {
    type: String,
    required: true
  },
  // 子设备ID
  subsetId: {
    type: String,
    required: true
  },
  // 场所ID
  placeid: {
    type: String,
    required: true
  },
  // 场所名称
  placeName: {
    type: String,
    default: ""
  },
  methodApiObj: {
    type: Object,
    required: true,
    validator: value => {
      const requiredKeys = ["linkVideo", "saveVideo", "listVideo"]
      return requiredKeys.every(key => key in value)
    }
  }
})
const emits = defineEmits(["success"])

// 移除无效的name选项，prop名称由变量名自动推断
const visible = defineModel("visible", {
  type: Boolean,
  default: false
})

// 控制视频配置弹窗是否展示
const show = ref(false)
const loading = ref(false)
const list = ref([])

// 点击添加更多
const handleClick = () => {
  show.value = true
}

// 更改主画面设置
const handleChange = item => {
  const othStatus = item.sfzsxt === "1" ? "2" : "1"
  list.value = list.value.map(t => {
    t.sfzsxt = t.spsxtid == item.spsxtid ? item.sfzsxt : othStatus
    return t
  })
}

// 保存
const handleSubmit = async () => {
  try {
    loading.value = true
    const data = [...list.value]
    const len = data.filter(t => t.sfzsxt === "1").length
    if (len === 0 && data.length) {
      ElMessage.error("请选择主画面")
      return
    }
    await postApi2([...list.value], `${props.methodApiObj.saveVideo}?subsetId=${props.subsetId}`)
    ElMessage.success("保存成功")
    emits("success")
    visible.value = false
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

const handleDelete = item => {
  list.value = list.value.filter(t => t.spsxtid !== item.spsxtid)
}

const getList = async () => {
  try {
    if (!props.subsetId) return
    const ret = await getApi2({ subsetId: props.subsetId }, props.methodApiObj.linkVideo)
    list.value = ret.map(t => {
      return {
        ...t,
        sfzsxt: t.sfzsxt || "2",
        subsetId: props.subsetId,
        sbssId: props.confId
      }
    })
  } catch (error) {
    console.log("-----===finally=-----", error)
  }
}

// 配置弹窗提交
const handleConfigSubmit = data => {
  list.value = data.map(t => {
    return {
      ...t,
      sfzsxt: "sfzsxt" in t ? t.sfzsxt : "2", // 是否主摄像头（1是 2否）
      sbssId: props.confId,
      subsetId: props.subsetId
    }
  })
  // getList()
}

watchEffect(() => {
  if (visible.value) {
    getList()
  }
})
</script>
<style lang="scss" scoped>
.constainer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
}
.item {
  width: 240px;
  height: 260px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #048086;
  margin-right: 12px;
  margin-bottom: 12px;
  .video-wrapper {
    width: 100%;
    height: 180px;
    background: #b7eeff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .delete-icon {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .footer {
    box-sizing: border-box;
    padding: 0 10px;
    margin-top: 10px;
    overflow: hidden;
    > label {
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
    .footer-content {
      display: flex;
      align-items: center;
      margin-top: 6px;
      > label {
        font-weight: 300;
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
.add {
  width: 96px;
  height: 260px;
  background: #017359;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
}
</style>
