<template>
  <div>
    <el-dialog title="视频通道选择" width="1400px" v-model="props.modelValue" :before-close="closed">
      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 960px;">
        <el-form-item label="模糊查询：" style="width: 300px;">
          <el-input placeholder="请输入名称或摄像头编号" v-model="listQuery.keywords" clearable style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="设备类型：" prop="cameraType">
          <el-select v-model="listQuery.cameraType" placeholder="请选择设备类型" clearable style="width: 220px">
            <el-option v-for="item in D_BZ_SXTLX" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 144px;">
          <el-button type="success" @click="handleFilter">查询</el-button>
          <el-button type="success" @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
      <div class="flex just-between treeBox2 ww100">
        <div class="tabBox table-box-radio" style="margin-top: 0px;height: 100%;">
          <el-table stripe ref="sbssRef" v-loading="tableloading" @selection-change="handleSelectionChange"
            @row-click="changecoose" :data="tableData" border :row-key="keyid" v-model="currentRow" height="540">
            <el-table-column width="55" #default="{ row }">
              <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
            </el-table-column>
            <el-table-column prop="sitename" align="center" label="场所/部位" width="350">
              <template #default="{ row }">
                {{ row.sitename + '->' + row.buildingname + (row.floorname ? '->' + row.floorname : '') + '->' +
                  row.partname }}
              </template>
            </el-table-column>
            <el-table-column prop="name" align="center" label="设备名称"></el-table-column>
            <el-table-column prop="sbbh" align="center" label="内部编号"></el-table-column>
            <el-table-column prop="cameraType" align="center" label="摄像头类型">
              <template #default="{ row }">
                <dict-tag v-if="row.cameraType" :options="D_BZ_SXTLX" :value="row.cameraType" :tag="false" />
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <div class="flex just-between">
          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listQuery.pageCurrent" :page-sizes="[4, 8]" :page-size="listQuery.pageSize"
            layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          <span class="dialog-footer">
            <el-button type="primary" @click="handleSave">
              <el-icon>
                <DocumentChecked />
              </el-icon>
              <span>确定</span>
            </el-button>
            <el-button @click="closed" type="primary">
              <el-icon>
                <DocumentDelete />
              </el-icon>
              <span>关闭</span>
            </el-button>
          </span>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineProps, watch, ref, defineEmits, getCurrentInstance } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
const total = ref(0);
const tableData = ref([]);
const ridioIndex = ref(null);
const sbssRef = ref(null);
const tableloading = ref(false);
const rightData = ref([])
const selectData = ref([])
const { D_BZ_SXTLX } = proxy.$dict("D_BZ_SXTLX")
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 8,
});
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  // 查询当前部门下的人员
  orgcode: {
    type: String,
    default: () => getItem("deptId").ssdwid
  },
});
const currentRow = ref(-1); //选中的数据
const emits = defineEmits(["update:modelValue", "chooseSpList"]);
const closed = () => {
  sbssRef.value.clearSelection();
  currentRow.value = [];
  listQuery.value.keywords = ''
  emits("update:modelValue", false);
};
const keyid = (row) => {
  return row.id;
};
watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      sbssRef.value = null
      ridioIndex.value = null
      listQuery.value.orgcode = props.orgcode;
      listQuery.value.sblx = props.sblx;
      handleFilter();
    }
  }
);
watch(
  () => props.sbid,
  (val) => {
    multipleUser(val);
  }
);
function reset() {
  listQuery.value.keywords = ''
  listQuery.value.cameraType = ''
  listQuery.value.orgcode = props.orgcode;
  listQuery.value.pageCurrent = 1;
  getListData();
}
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getListData();
};
const getListData = async () => {
  tableData.value = [];
  tableloading.value = true;
  const params = listQuery.value;
  getApi(params, "/mosty-jcgl/aqsbssZb/getSpPage").then((res) => {
    if (res) {
      tableData.value = res?.records;
      total.value = Number(res.total);
      tableloading.value = false;
    }
    if (selectData.value && selectData.value.length > 0 && rightData.value.length == 0) {
      multipleUser(selectData.value);
    }
  })
};
// 列表回显
function multipleUser(row) {
  tableData.value.forEach((val) => {
    sbssRef.value.toggleRowSelection(val, false);
  });
  if (row) {
    ridioIndex.value = row;
  } else {
    ridioIndex.value = null;
  }
}
const handleSelectionChange = (val) => {
  currentRow.value = val;
};
//每一项点击事件
function changecoose(val) {
  ridioIndex.value = val.id
}
const handleSave = () => {
  const info = tableData.value.find((item) => {
    return item.id === ridioIndex.value;
  });
  emits("chooseSpList", info);
  closed();
  sbssRef.value.clearSelection();
};

const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};

const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

::v-deep .el-radio__label {
  display: none !important;
}
</style>
