<script lang="ts" setup>
import { getRegionPageAPI } from '@/api/map'
import { deleteSiteAPI } from '@/api/operator'
import { useOperatorStore } from '@/store'

definePage({
  style: {
    navigationBarTitleText: '站点列表',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})

const operatorStore = useOperatorStore()
const list = ref([])
const paging = ref(null)
const popoverRef = ref(null)
const operatorAllList = ref<any>([])
const query = ref({
  siteName: '',
})
const actions = ref([
  { text: '编辑' },
  { text: '删除' },
])
async function queryList(pageNum: number, pageSize: number) {
  uni.showLoading({
    title: '加载中...',
  })
  try {
    const { records } = await getRegionPageAPI({
      ...query.value,
      pageNum,
      pageSize,
    })
    paging.value.complete(records)
  }
  catch (e) {
    paging.value.complete(false)
  }
  finally {
    uni.hideLoading()
  }
}

function actionAction(item: any, action: any) {
  if (action.text === '编辑') {
    uni.navigateTo({
      url: `/pages-sub/map/siteManagement/editSite?data=${encodeURIComponent(JSON.stringify(item))}`,
    })
  }

  if (action.text === '删除') {
    uni.showModal({
      title: '提示',
      content: '确定要删除吗？',
      success: async (res) => {
        if (res.confirm) {
          await deleteSiteAPI({
            siteId: item.siteId,
          })
          paging.value.reload()
        }
      },
    })
  }
}

function goToAddSite() {
  uni.navigateTo({
    url: '/pages-sub/map/siteManagement/editSite',
  })
}

function handleSearch() {
  paging.value.reload()
}

onLoad(async () => {
  operatorAllList.value = await operatorStore.getOperatorList()
})

onShow(() => {
  paging.value?.reload()
})
</script>

<template>
  <z-paging
    ref="paging"
    v-model="list"
    :default-page-no="Number('1')"
    :default-page-size="Number('10')"
    :auto-show-back-to-top="Boolean(true)"
    bg-color="#f3f3f3"
    @query="queryList"
  >
    <template #top>
      <view class="search_bar">
        <uv-search
          v-model="query.siteName"
          :show-action="false"
          placeholder="请输入站点名称"
          @search="handleSearch"
        />
        <view class="addSite">
          <uv-icon
            name="foller"
            custom-prefix="custom-icon"
            size="25"
            color="#1488f5"
            @click="goToAddSite"
          />
        </view>
      </view>
    </template>

    <view
      v-for="(item) in list"
      :key="item.siteId"
      class="list_item"
    >
      <view class="title_bar">
        <view class="siteName">
          <uv-icon
            name="tingchechang"
            custom-prefix="custom-icon"
            size="25"
            color="red"
          />
          <view class="text">
            {{ item.siteName }}
          </view>
        </view>
        <view class="icon_bar">
          <zb-popover
            ref="popoverRef"
            placement="bottom-end"
            :options="actions"
            @select="(action) => actionAction(item, action)"
          >
            <uv-icon
              name="plus-circle-add"
              custom-prefix="custom-icon"
              size="25"
            />
          </zb-popover>
        </view>
      </view>
      <view class="row">
        <view class="key">
          创建时间
        </view>
        <view class="value">
          {{ item.createAt }}
        </view>
      </view>
      <view class="row">
        <view class="key">
          运营商：
        </view>
        <view class="value">
          {{ operatorStore.translateOperatorId(item.operatorId, operatorAllList) }}
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
.search_bar {
  width: calc(100% - 40rpx);
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;

  .addSite {
    margin-left: 30rpx;
  }
}
.list_item {
  width: calc(100% - 40rpx);
  padding: 30rpx 20rpx;
  background-color: white;
  margin-top: 20rpx;

  .title_bar {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .siteName {
      width: 85%;
      display: flex;
      align-items: center;

      .text {
        margin-left: 8rpx;
        font-size: 32rpx;
        width: 100%;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .row {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin: 20rpx 0;

    .key {
      padding-left: 10rpx;
      width: 150rpx;
      color: #a3a3a3;
    }

    .value {
      color: #676767;
    }
  }
}
</style>
