""" @author: yy @desc：视频配置 @date: 2025-07-27 11:59:35 """
<template>
  <MOSTY.Modal v-model:visible="visible" :loading="loading" :hide-header="true" width="80%" okTitle="确定" @ok="handleSave">
    <div class="wrapper">
      <div class="left">
        <div class="title">监控画面配置</div>
        <el-form :inline="true" :model="form" class="form-inline">
          <el-form-item label="场所名称：" label-width="82px" style="align-items: center; margin-bottom: 10px" :show-message="false">
            <MOSTY.DictRidioAndSelectV2 v-model="form.placeid" disabled :dict-data="csmclist" selectType="select" :field-names="{ label: 'placename', value: 'id' }" />
          </el-form-item>
          <el-form-item :label="`${othData.areaLabel}：`" label-width="100px" style="align-items: center; margin-bottom: 10px" :show-message="false">
            <MOSTY.DictRidioAndSelectV2
              v-model="form.buildingid"
              :dict-data="jzwlist"
              :field-names="{ label: 'buildingname', value: 'id' }"
              selectType="select"
              @onChange="handleChange('buildingid')"
            />
          </el-form-item>
          <el-form-item v-if="othData.publicarea != '1'" label="楼层名称：" label-width="82px" style="align-items: center; margin-bottom: 10px" :show-message="false">
            <MOSTY.DictRidioAndSelectV2
              v-model="form.floorid"
              :dict-data="lclist"
              :field-names="{ label: 'floorname', value: 'id' }"
              selectType="select"
              @onChange="handleChange('floorid')"
            />
          </el-form-item>
          <el-form-item :label="`${othData.partLabel}：`" label-width="100px" style="align-items: center; margin-bottom: 10px" :show-message="false">
            <MOSTY.DictRidioAndSelectV2
              v-model="form.partid"
              :dict-data="bwlist"
              :field-names="{ label: 'partname', value: 'id' }"
              selectType="select"
              @onChange="handleChange('partid')"
            />
          </el-form-item>
        </el-form>
        <el-divider />
        <div class="container">
          <div class="item" v-for="(item, index) in pageData.sourceData" :key="index">
            <div class="bg">
              <SvgIcon icon="play" style="font-size: 30px; cursor: pointer" @click="handlePlay(item)"></SvgIcon>
              <el-icon class="custom-circle" @click="handleAdd(item)"><CirclePlus /></el-icon>
            </div>
            <div class="name">{{ item.videoName }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title" style="margin-bottom: 30px">已选择摄像头</div>
        <MOSTY.Table :table-columns="tableConfig" :tableData="pageData.tableData" :isSort="true" actionsW="120">
          <template #actions="{ row }">
            <span class="operesee" @click="handlePlay(row)"> 播放 </span>
            <span class="operedit" @click="handleDelete(row)"> 移出 </span>
          </template>
        </MOSTY.Table>
      </div>
    </div>
  </MOSTY.Modal>
</template>
<script setup>
import { reactive, ref, watch } from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import SvgIcon from "@/components/SvgIcon/index.vue"
import { getApi2 } from "@/api/tobAcco_api.js"
import { usePosition } from "@/hooks/usePosition"
import { tableConfig } from "./models/videoConfig"

const props = defineProps({
  // 主设备ID
  confId: {
    type: String,
    default: ""
  },
  // 子设备ID
  subsetId: {
    type: String,
    required: true
  },
  // 场所ID
  placeid: {
    type: String,
    required: true
  },
  // 场所名称
  placeName: {
    type: String,
    default: ""
  },
  // 方法api
  methodApi: {
    type: String,
    required: true
  },
  data: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(["submit"])

const visible = defineModel("visible", {
  default: false,
  type: Boolean
})
const loading = ref(false)

const { form, othData, csmclist, jzwlist, lclist, bwlist, changeJzwmc, changeLcmc, changeBw } = usePosition(props)

// const form = ref({
//   placeid: "", // 场所ID
//   buildingid: "", // 建筑物编号
//   floorid: "", // 楼层编号
//   partid: "" // 部位编号号
// })

const pageData = reactive({
  sourceData: [],
  tableData: []
})

// 播放
const handlePlay = item => {
  // TODO
  console.log(item)
}

// 添加
const handleAdd = row => {
  pageData.tableData.push(row)
  pageData.sourceData = pageData.sourceData.filter(t => t.spsxtid !== row.spsxtid)
}

// 删除
const handleDelete = row => {
  pageData.tableData = pageData.tableData.filter(t => t.spsxtid !== row.spsxtid)
  pageData.sourceData.push(row)
}

// 保存
const handleSave = async () => {
  try {
    loading.value = true
    // const params = [
    //   // ...pageData.tableData.map(t => {
    //   //   // t.confId = props.confId
    //   //   // t.subsetId = props.subsetId
    //   //   // return t
    //   // })
    // ]
    // await postApi2(params, "/mosty-wljc/sbglXfbj/saveChooseSubsetVideo")
    emits("submit", [...pageData.tableData])
    visible.value = false
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

const getList = async () => {
  try {
    const res = await getApi2({ ...form.value, subsetId: props.subsetId }, props.methodApi)
    const tableDataIds = pageData.tableData.map(t => t.spsxtid)
    pageData.sourceData = res.filter(t => !tableDataIds.includes(t.spsxtid))
  } catch (error) {
    console.log(error)
  }
}

// 下拉框改变
const handleChange = key => {
  if (key === "buildingid") {
    changeJzwmc(form.value.buildingid)
  } else if (key === "floorid") {
    changeLcmc(form.value.floorid)
  } else {
    changeBw(form.value.partid)
  }
  getList()
}

watch(
  () => props.visible,
  val => {
    if (val) {
      form.value.placeid = props.placeid
      pageData.tableData = [...props.data]
      getList()
    }
  }
)
</script>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: flex-start;

  .title {
    font-weight: 400;
    font-size: 20px;
    color: #000000;
  }
  .left {
    width: 55%;
    .form-inline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 30px;
    }
    .container {
      .item {
        width: 160px;
        height: 120px;
        background: #b7eeff;
        border-radius: 8px;
        .bg {
          position: relative;
          height: 96px;
          display: flex;
          align-items: center;
          justify-content: center;
          .custom-circle {
            position: absolute;
            right: 6px;
            top: 6px;
            font-size: 20px;
            color: #ffffff;
            cursor: pointer;
          }
        }
        .name {
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          height: 24px;
          background: rgba(51, 51, 51, 0.3);
          overflow: hidden;
          text-align: center;
          line-height: 24px;
        }
      }
    }
  }
  .right {
    flex: 1;
  }
}
</style>
