<template>
  <div class="app-container">
    <el-tabs>
      <el-tab-pane label="基础信息" lazy>
        <el-row :gutter="48">
          <el-col :offset="6" :span="12">
            <el-form
              ref="deviceRef"
              :model="form"
              :rules="rules"
              label-position="left"
              label-width="140px"
            >
              <el-form-item label="设备名称" prop="deviceName">
                <el-input
                  v-model="form.deviceName"
                  placeholder="请输入设备名称"
                />
              </el-form-item>
              <el-form-item label="产品" prop="productId">
                <!--              <el-input v-model="form.productId" placeholder="请输入产品ID" />-->
                <el-select
                  v-model="form.productId"
                  :remote-method="getProductOptions"
                  clearable
                  filterable
                  placeholder="请选择产品"
                  remote
                  remote-show-suffix
                >
                  <el-option
                    v-for="item in productOptions"
                    :key="item.productId"
                    :label="item.productName"
                    :value="item.productId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="设备编号" prop="serialNumber">
                <el-input
                  v-model="form.serialNumber"
                  placeholder="请输入设备编号"
                />
              </el-form-item>
              <el-form-item label="固件版本" prop="firmwareVersion">
                <el-input
                  v-model="form.firmwareVersion"
                  placeholder="请输入固件版本"
                />
              </el-form-item>
              <el-form-item label="激活时间" prop="activeTime">
                <el-date-picker
                  v-model="form.activeTime"
                  clearable
                  placeholder="请选择激活时间"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="启用设备影子" prop="isShadow">
                <el-switch
                  v-model="form.isShadow"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
              <el-form-item label="定位方式" prop="locationWay">
                <el-select
                  v-model="form.locationWay"
                  placeholder="请输入定位方式"
                >
                  <el-option :value="1" label="ip自动定位" />
                  <el-option :value="2" label="设备定位" />
                  <el-option :value="3" label="自定义" />
                </el-select>
              </el-form-item>
              <el-form-item label="设备所在地址" prop="networkAddress">
                <el-input
                  v-model="form.networkAddress"
                  placeholder="请输入设备所在地址"
                />
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-form-item label="设备经度" prop="longitude">
                    <el-input
                      v-model="form.longitude"
                      placeholder="请输入设备经度"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="设备纬度" prop="latitude">
                    <el-input
                      v-model="form.latitude"
                      placeholder="请输入设备纬度"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <map-select
                  :lat="form.latitude"
                  :lng="form.longitude"
                  :lnglat="[form.longitude, form.latitude]"
                  @selected="handleMapSelected"
                />
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="设备入网IP" prop="networkIp">
                    <el-input
                      v-model="form.networkIp"
                      placeholder="请输入设备入网IP"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="图片地址" prop="imgUrl">
                <image-upload v-model="form.imgUrl" />
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="form.remark"
                  placeholder="请输入内容"
                  type="textarea"
                />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-button color="#010ef2" round type="primary" @click="submitForm"
              >编辑</el-button
            >
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="运行状态" lazy>
        <operating-status
          :device-sn="form.serialNumber"
          :product-id="form.productId"
        />
      </el-tab-pane>
      <el-tab-pane label="设备日志" lazy>
        <device-log />
      </el-tab-pane>
      <el-tab-pane label="升级日志" lazy>
        <upgrade-log />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import ImageUpload from "@/components/ImageUpload/index.vue";
import { onMounted, reactive, ref, toRefs } from "vue";
import { listProduct } from "@/api/product/product";
import OperatingStatus from "@/views/iot/device/detail-panes/OperatingStatus.vue";
import { addDevice, getDevice, updateDevice } from "@/api/iot/device";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import DeviceLog from "@/views/iot/device/detail-panes/DeviceLog.vue";
import UpgradeLog from "@/views/iot/device/detail-panes/UpgradeLog.vue";
import MapSelect from "@/components/MapSelect/index.vue";

const route = useRoute();

const productOptions = ref([]);
const deviceRef = ref();
const data = reactive({
  form: {},
  rules: {
    deviceName: [
      { required: true, message: "设备名称不能为空", trigger: "blur" },
    ],
    productId: [{ required: true, message: "产品ID不能为空", trigger: "blur" }],
  },
});
const { form, rules } = toRefs(data);

// 表单重置
function reset() {
  form.value = {
    deviceId: null,
    deviceName: null,
    productId: null,
    userId: null,
    tenantId: null,
    serialNumber: null,
    firmwareVersion: null,
    status: null,
    rssi: null,
    isShadow: null,
    locationWay: null,
    thingsModelValue: null,
    networkAddress: null,
    networkIp: null,
    longitude: null,
    latitude: null,
    activeTime: null,
    summary: null,
    imgUrl: null,
    createBy: null,
    createTime: null,
    remark: null,
  };
  if (deviceRef.value) {
    deviceRef.value.resetFields();
  }
}

/** 提交按钮 */
function submitForm() {
  deviceRef.value.validate((valid) => {
    if (valid) {
      if (form.value.deviceId != null) {
        updateDevice(form.value).then((response) => {
          ElMessage.success("修改成功");
          getDeviceDetail();
        });
      } else {
        addDevice(form.value).then((response) => {
          ElMessage.success("新增成功");
        });
      }
    }
  });
}

function getProductOptions(keyword) {
  listProduct({
    productName: keyword,
    pageNum: 1,
    pageSize: 20,
  }).then((resp) => {
    productOptions.value = resp.rows;
  });
}

/*获取设备详情*/
function getDeviceDetail() {
  getDevice(route.query.id).then((resp) => {
    form.value = resp.data;
  });
}

const handleMapSelected = (lnglat) => {
  form.value.latitude = lnglat.lat;
  form.value.longitude = lnglat.lng;
};

onMounted(async () => {
  getDeviceDetail();
  // AMap.value = await loadMap(["AMap.PlaceSearch"]);
  // map.value = new AMap.value.Map("map-container", { zoom: 11 });
  // map.value.on("click", handleMapClick);
  // map.value.clearMap();
  // if (form.value.longitude && form.value.latitude) {
  //   const marker = new AMap.value.Marker({
  //     position: [form.value.longitude, form.value.latitude]
  //   });
  //   map.value.add(marker);
  //   map.value.setFitView([marker]);
  // }
});
reset();

getProductOptions();
</script>

<style lang="scss" scoped>
.form-container {
  padding: 0 20%;
}

:deep(.el-tabs__nav-wrap) {
  &::after {
    display: none;
  }

  .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
  }
}

//#map-container {
//  width: calc(100% - 140px);
//  height: 300px;
//  margin-left: 140px;
//  margin-bottom: 18px;
//  position: relative;
//
//  .search-bar {
//    display: none;
//    position: absolute;
//    left: 0;
//    top: 10px;
//    padding: 0 10px;
//    z-index: 2023;
//  }
//}
</style>
