<template>
  <div class="flex" style="height: calc(100vh - 84px)">
    <scrollContainer style="width: 180px; height: 100%; overflow-x: hidden">
      <el-menu
        default-active="1-1"
        @open="handleOpen"
        @close="handleClose"
        style="min-height: 100%"
      >
        <el-sub-menu index="1">
          <template #title>
            <span>行为告警</span>
          </template>
          <el-menu-item index="leave">离岗检测</el-menu-item>
          <el-menu-item index="area">区域警戒</el-menu-item>
          <el-menu-item index="yawn">哈欠检测</el-menu-item>
          <el-menu-item index="doze">瞌睡检测</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <span>物品检测</span>
          </template>
          <el-menu-item index="mask">口罩检测</el-menu-item>
          <el-menu-item index="helmet">安全帽检测</el-menu-item>
          <el-menu-item index="fire">烟火检测</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </scrollContainer>
    <div class="flex-sub padding-lr" style="overflow-y: auto">
      <div class="solid-bottom padding-tb margin-bottom">
        <span class="text-bold">基本配置</span>
      </div>
      <el-form ref="cameraRef" :model="form" :rules="rules" label-width="120px">
        <div v-loading="loading">
          <el-form-item label="算法名称" prop="algorithm_configuration_name">
            <el-input v-model="form.algorithm_configuration_name" disabled />
          </el-form-item>
          <el-form-item label="任务类型" prop="algorithm_configuration_type">
            <el-select
              v-model="form.algorithm_configuration_type"
              placeholder="选择任务类型"
            >
              <el-option label="常驻任务" :value="0" />
              <el-option label="单次任务" :value="10" />
              <el-option label="周期任务" :value="20" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="灵敏程度"
            prop="algorithm_configuration_sensitivity"
          >
            <el-radio-group v-model="form.algorithm_configuration_sensitivity">
              <el-radio :label="0">低</el-radio>
              <el-radio :label="10">中</el-radio>
              <el-radio :label="20">高</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="触发间隔"
            prop="algorithm_configuration_interval"
          >
            <el-input
              v-model="form.algorithm_configuration_interval"
              type="number"
              min="0"
              @input="isBiggerThanZero('algorithm_configuration_interval')"
              @change="isBiggerThanZero('algorithm_configuration_interval')"
            >
              <template #append>秒</template>
            </el-input>
          </el-form-item>
          <el-form-item label="检测周期" prop="algorithm_configuration_cycle">
            <el-input
              v-model="form.algorithm_configuration_cycle"
              type="number"
              min="0"
              @input="isBiggerThanZero('algorithm_configuration_cycle')"
              @change="isBiggerThanZero('algorithm_configuration_cycle')"
            >
              <template #append>秒</template>
            </el-input>
          </el-form-item>
          <el-form-item label="同时报警" prop="algorithm_configuration_alarm">
            <el-input
              v-model="form.algorithm_configuration_alarm"
              type="number"
              min="0"
              @input="isBiggerThanZero('algorithm_configuration_alarm')"
              @change="isBiggerThanZero('algorithm_configuration_alarm')"
            >
              <template #append>次</template>
            </el-input>
          </el-form-item>
          <el-form-item label="报警航速" prop="algorithm_configuration_speed">
            <el-input
              v-model="form.algorithm_configuration_speed"
              type="number"
              min="0"
              @input="isBiggerThanZero('algorithm_configuration_speed')"
              @change="isBiggerThanZero('algorithm_configuration_speed')"
            >
              <template #append>km/h</template>
            </el-input>
          </el-form-item>
          <el-form-item label="启用状态" prop="status">
            <el-switch
              v-model="form.status"
              active-value="0"
              inactive-value="1"
            />
          </el-form-item>
        </div>

        <div v-loading="loading">
          <el-form-item label="配置摄像机">
            <!-- <div class="solid">
             <scroll-container style="height: 900px"> -->
            <el-checkbox-group
              v-model="form.type"
              class="grid col-4"
              style="width: 100%"
            >
              <div class="padding-xs" v-for="(item, i) in 12" :key="i">
                <el-card :body-style="{ padding: '0px' }" shadow="hover">
                  <img
                     :src="baseUrl+'/alarm_folder/html_images/asd.png'"
                    style="height: 130px; width: 100%"
                  />
                 <div class="padding-sm">
                    <div class="flex justify-between">
                    <!-- <div>camera_name</div> -->
                    <el-checkbox label="camera_id" name="type"
                      >camera_name</el-checkbox
                    >
                  </div>
                  <div>
                    <el-button @click="handleDrawDialog(item)" text bg
                      >绘制监控区域</el-button
                    >
                  </div>
                 </div>
                </el-card>
              </div>
            </el-checkbox-group>
            <!-- </scroll-container> 
            </div>-->
          </el-form-item>
        </div>

        <el-form-item>
          <el-button type="primary" @click="submitForm">保存配置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <canvasDrawDialog ref="canvasDrawDialogRef" />
  </div>
</template>

<script setup>
import canvasDrawDialog from "@/views/components/canvasDraw/dialog";
import { listAlgorithmConfiguration } from "@/api/algorithmConfiguration";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
const algorithList = ref([]);
const data = reactive({
  form: {
	 
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    remarks: null,
	value: ""
  },
  rules: {
    algorithm_configuration_name: [
      {
        required: true,
        message: "算法名称不能为空",
        trigger: "blur",
      },
    ],
    algorithm_configuration_type: [
      {
        required: true,
        message: "任务类型不能为空",
        trigger: "blur",
      },
    ],
    algorithm_configuration_sensitivity: [
      {
        required: true,
        message: "灵敏程度不能为空",
        trigger: "blur",
      },
    ],
    algorithm_configuration_interval: [
      {
        required: true,
        message: "触发间隔不能为空",
        trigger: "blur",
      },
    ],
    algorithm_configuration_cycle: [
      {
        required: true,
        message: "检测周期不能为空",
        trigger: "blur",
      },
    ],
    algorithm_configuration_alarm: [
      {
        required: true,
        message: "同时报警不能为空",
        trigger: "blur",
      },
    ],
    algorithm_configuration_speed: [
      {
        required: true,
        message: "报警航速不能为空",
        trigger: "blur",
      },
    ],
    status: [
      {
        required: true,
        message: "启用状态不能为空",
        trigger: "blur",
      },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

const submitForm = () => {
  proxy.$refs["cameraRef"].validate((valid) => {
    if (valid) {
      loading.value = true;
      if (form.value.id != null) {
        updateCamera(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          loading.value = false;
        });
      } else {
        addCamera(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          loading.value = false;
        });
      }
    }
  });
  console.log("submit!");
  console.log(form.value);
};

function isBiggerThanZero(key) {
  // console.log(form.value[key]);
  // console.log(form.value[key] == null);
  // console.log(typeof form.value[key]);
  form.value[key] = Number(form.value[key]);
  if (form.value[key] < 0) {
    form.value[key] = 0;
  }
}

function handleDrawDialog(id) {
  proxy.$refs["canvasDrawDialogRef"].show();
}

function getList() {
  loading.value = true;
  listAlgorithmConfiguration({"algorithm_configuration_name":"mask"}).then((response) => {
    algorithList.value = response.data;
	form.value =  algorithList.value[0];
	loading.value = false;
  });
}
getList()
</script>

<style>
</style>
