<template>
  <div>
    <el-form-item label="设备">
      <el-select v-model="form.deviceId" placeholder="请选择" @change="setDeviceId">
        <el-option
          v-for="item in deviceList"
          :key="item.deviceId"
          :label="item.deviceName"
          :value="item.deviceId">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="deviceModeId" v-show="false">
      <el-input
        v-model="form.deviceModeId">
      </el-input>
    </el-form-item>
    <el-form-item label="设备属性">
      <el-select v-model="form.functionIdentifier" placeholder="请选择">
        <el-option
          v-for="item in deviceFunList"
          :key="item.functionIdentifier"
          :label="item.functionName"
          :value="item.functionIdentifier">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="数据间隔">
      <el-select v-model="form.interval" placeholder="请选择" @change="changeInterval">
        <el-option
          v-for="item in intervalOption"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="时间周期">
      <el-date-picker
        @change="timeChange"
        v-model="time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
  </div>
</template>

<script setup>
import { getDeviceFunctions, getDeviceList } from '@/api/configure/configuration/equipment';
import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg.js';

const props = defineProps({
  form: Object
});

const { form } = toRefs(props);
const time = ref([]);
const deviceList = ref([]);
const deviceFunList = ref([]);
const intervalOption = ref([
  {
    label: '时',
    value: '1',
    default: 1
  },
  {
    label: '日',
    value: '2',
    default: 24
  },
  {
    label: '周',
    value: '3',
    default: 7
  },
  {
    label: '月',
    value: '4',
    default: 30
  },
  {
    label: '年',
    value: '5',
    default: 12
  }
]);
const $parseTime = inject('$parseTime');

onMounted(async () => {
  getDeviceList().then(e => {
    deviceList.value = e.rows;
  });
});
const setDeviceId = (e) => {
  let modelId = deviceList.value.find(v => v.deviceId === e).deviceModeId;
  form.value['deviceModeId'] = modelId;
  getDeviceFunctions(modelId).then(v => {
    deviceFunList.value = v.data;
  });
};
const timeChange = () => {
  form.value['startTime'] = new Date(time.value[0]).getTime();
  form.value['endTime'] = new Date(time.value[1]).getTime();
};
const changeInterval = (e) => {
  let data = intervalOption.value.find(v => v.value === e);
  form.value['intervalType'] = data.default;
  if (e === '1') {
    time.value = [$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), $parseTime(new Date())];
  }
  if (e === '2') {
    time.value = [$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), $parseTime(new Date())];
  }
  if (e === '3') {
    time.value = [$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 7)), $parseTime(new Date())];
  }
  if (e === '4') {
    time.value = [$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 30)), $parseTime(new Date())];
  }
  if (e === '5') {
    time.value = [$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 365)), $parseTime(new Date())];
  }
  form.value['startTime'] = new Date(time.value[0]).getTime();
  form.value['endTime'] = new Date(time.value[1]).getTime();
};
</script>


<style>
</style>
