<!-- 
 * @Description: 客流查询
 * @Author: yxq 
 * @Date: 2023-12-17 15:45:50
-->
<template>
  <div>
    <div>
      <el-row :gutter="16">
        <el-col :span="24">
          <s-form-item label="查询时间段" prop="timeSlot">
            <el-date-picker
              v-model="formInfo.timeSlot"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </s-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="24">
          <s-form-item label="摄像头" prop="cameraIds">
            <el-select v-model="formInfo.cameraIds" @change="cameraldsChange" filterable multiple placeholder="摄像头">
              <el-option v-for="item in cameraldsOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </s-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="24">
          <s-form-item label="分片类型(天/小时)" prop="split">
            <s-radio-group v-model="formInfo.split" :options="splitOptions" button />
          </s-form-item>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { AttendancePassenger, monitorLIVEApi } from "@/api";
// props
interface FormProps {
  modelValue: Partial<AttendancePassenger.PassengerInfo>;
}
const emit = defineEmits(["update:modelValue"]); //定义emit
const props = defineProps<FormProps>(); //定义props
// 客流查询表单
const formInfo = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});
console.log(props.modelValue);
// 分片类型
const splitOptions = ref([
  {
    label: "天",
    value: false
  },
  {
    label: "小时",
    value: true
  }
]);
// 摄像头
let cameraldsOptions = ref([]);
monitorLIVEApi.list({ pageSize: 1000, pageNum: 1 }).then((res: any) => {
  if (res.code == 200) {
    cameraldsOptions.value = res.data.list.map(e => {
      return {
        value: e.sensorId,
        label: e.sensorName
      };
    });
  }
});
const cameraldsChange = value => {
  let value_ = value.map(e => {
    let obj = cameraldsOptions.value.find(e1 => e1.value == e);
    return obj.label;
  });
  formInfo.value.cameraNames = value_;
};

onMounted(() => {
  // 初始化
  formInfo.value.split = formInfo.value.split ? formInfo.value.split : splitOptions.value[0].value;
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  width: 100% !important;
}
</style>
