<!--
  Description: h5-新装设备
  Author: 李亚光
  Date: 2024-12-27
 -->
<script lang="ts" setup name="H5DeviceAdd">
import { getProductListPage } from '@/api/home/device/product'
import { getDeviceTypeListPage } from '@/api/home/device/type'
import { showToast, showLoadingToast, closeToast, showConfirmDialog } from 'vant'
import { getWellListPage } from '@/api/home/well/well'
import { getStationListPage } from '@/api/home/station/station'
const deciceInfo = ref({
  productId: '',
  productName: '',
  devcode: '',
  tagNumber: '',
  watchObject: '',
})

// 产品相关
const showProduct = ref(false)
const productValue = ref([])
const productColumns = ref([])
const onConfirm = ({ selectedValues, selectedOptions }) => {
  deciceInfo.value.productId = selectedOptions[0]?.value
  deciceInfo.value.productName = selectedOptions[0]?.text
  productValue.value = selectedValues
  showProduct.value = false
}
// 安装位置 -- 闸井/场站
const searchForWell = ref(false)
const searchForInput = ref('')
const resultForWell = ref(false)
// 搜索安装位置
const searchTagNumber = (action: string) => {
  if (!action) {
    return true
  }
  showLoadingToast({
    duration: 0,
    message: '加载中...',
    forbidClick: true,
    loadingType: 'spinner',
  });
  // 搜索场站或闸井
  (deciceInfo.value.watchObject === '1' ? getWellListPage : getStationListPage)({ offset: 1, limit: 1, tagNumber: searchForInput.value }).then(res => {
    closeToast()
    searchForWell.value = false
    let message = ''
    if(!res.data.rows.length) {
      message = `未找到位号为 ${searchForInput.value} ${deciceInfo.value.watchObject === '1'  ? '闸井' : '场站'} ，请确认位号后重新搜索`
    }
    else {
      // 判断位置
      // 存在同类设备
      // 正常
    }
    // 展示查询结果
    showConfirmDialog({
      title: '搜索位置',
      message: '123123123232121'
    })
      .then(() => {

      })
      .catch(() => {

      })
  })

}
// 选择安装位置
const selectTagNumber = () => {
  if (!deciceInfo.value.productId) {
    showToast('请先选择产品')
    return
  }
  //1闸井 2场站 3管线
  if (deciceInfo.value.watchObject == '1' || deciceInfo.value.watchObject == '2') {
    searchForWell.value = true
    searchForInput.value = ''
  }
  else {

  }
}
// const
// 获取字典
const deviceTypeList = ref<any[]>([]) // 设备类型列表
const fetchDict = () => {
  getProductListPage({ offset: 1, limit: 9999 }).then(res => {
    console.log(res.data.rows, '产品列表')
    productColumns.value = res.data.rows.map((item: any) => ({
      text: `${item.productName}-${item.productCode}`,
      value: item.id,
      deviceType: item.deviceType,
    }))
  })
  getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
    deviceTypeList.value = res.data.rows
  })
}
fetchDict()
// 监听产品变化，判断该设备的 监测对象
watch(() => deciceInfo.value.productId, (newVal) => {
  if (newVal) {
    const select = productColumns.value.filter((item: any) => item.value === newVal) as any
    const watchObject = deviceTypeList.value.filter((item: any) => item.id === select[0].deviceType)
    deciceInfo.value.watchObject = watchObject[0].watchObject

  }
  else {
    deciceInfo.value.tagNumber = ''
    deciceInfo.value.watchObject = ''
  }
})

</script>

<template>
  <div class="device-container">
    <!-- 设备信息 -->
    <div class="device-info">
      <span class="title">设备信息</span>
      <van-form>
        <van-cell-group>
          <!-- 产品 -->
          <van-field v-model="deciceInfo.productName" is-link readonly label="产品" name="productId" placeholder="选择产品"
            required @click="showProduct = true">
          </van-field>
          <van-popup v-model:show="showProduct" destroy-on-close position="bottom">
            <van-picker :columns="productColumns" title="产品" :model-value="productValue" @confirm="onConfirm"
              @cancel="showProduct = false" />
          </van-popup>
          <!-- 设备编号 -->
          <van-field v-model="deciceInfo.devcode" label="设备编号" name="devcode" placeholder="输入设备编号" required />
          <!-- 安装位置 -->
          <van-field v-model="deciceInfo.tagNumber" is-link readonly label="安装位置" name="tagNumber" placeholder="去搜索"
            required @click="selectTagNumber" />
          <!-- 安装位置  闸井/场站查询-->
          <van-dialog v-model:show="searchForWell" title="搜索位置" confirm-button-text="搜索" :closeOnClickOverlay="true"
            :before-close="searchTagNumber">
            <van-field v-model="searchForInput" placeholder="请输入安装位号" />
          </van-dialog>
        </van-cell-group>
      </van-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$primary: #0D76D4;
$--van-primary-color: #0D76D4;

::v-deep(.van-picker-column__item--selected) {
  color: $primary !important;
}

.device-container {
  width: 100%;
  height: calc(100vh - 40px);
  overflow: hidden;

  .device-info {
    background-color: #fff;
    width: 96%;
    margin: 0 auto;
    margin-top: 1vh;
    border-radius: 6px;
    padding: 4px;

    .title {
      font-weight: 700;
      font-size: 1.2rem;
      padding-left: 0.5rem;
      margin-top: 0.5rem;
    }

    ::v-deep(.van-cell__title) {
      font-weight: 700;
    }
  }
}
</style>