<template>
  <view class="container">
    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
      <view class="search-view">
        <u--input 
          v-model="queryParams.name" 
          border="surround"
          @change="searchBlur"
          placeholder="请输入标签名称" 
          placeholderStyle="color: #909399"
          color="#333333"
          customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
          class="search-input" 
          suffixIcon="search" 
          suffixIconStyle="color: #667eea">
        </u--input>
        <view class="add-btn" v-show="auth.hasPermi('health:healthTags:add')" @click="handleAdd()">
          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
          <text>新增</text>
        </view>
      </view>
    </u-sticky>
    <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
      <u-list-item v-for="(item, index) in listData" :key="index">
        <view class="list-item">
          <view class="item-header">
            <view class="card-name-section">
              <view class="card-icon">
                <uni-icons type="tags" size="20" color="#ffffff"></uni-icons>
              </view>
              <view class="card-info">
                <text class="card-name">{{ item.name || '--' }}</text>
              </view>
            </view>
          </view>
          
          <view class="card-body">
            <view class="info-row">
              <view class="info-item">
                <text class="info-label">名称</text>
                <text class="info-value">{{ item.name || '--' }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">编码</text>
                <text class="info-value">{{ item.code || '--' }}</text>
              </view>
              <view class="info-item info-item-full" v-if="item.remark">
                <text class="info-label">备注</text>
                <text class="info-value">{{ item.remark }}</text>
              </view>
            </view>
          </view>
          
          <view class="operate" @click.stop>
            <view class="btn-edit" v-show="auth.hasPermi('health:healthTags:edit')" @click="handleEdit(item)">
              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
              <text>修改</text>
            </view>
            <view class="btn-delete" v-show="auth.hasPermi('health:healthTags:remove')" @click="handleDelete(item)">
              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
              <text>删除</text>
            </view>
          </view>
        </view>
      </u-list-item>
      <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
    </u-list>
    <suspend></suspend>
  </view>
</template>

<script setup>
import { listHealthTags, delHealthTags } from '@/api/health/healthTags'
import { onLoad, onShow } from "@dcloudio/uni-app"
import auth from "@/plugins/auth"
import { reactive, toRefs, ref } from "vue"

const pageNum = ref(1)
const listData = ref([])
const isShow = ref(false)
const status = ref('loadmore')

const data = reactive({
  queryParams: {
    name: null,
    code: null
  }
})
const { queryParams } = toRefs(data)

onLoad(() => {
  getList()
})

onShow(() => {
  if (isShow.value) {
    listData.value = []
    pageNum.value = 1
    getList()
    isShow.value = false
  }
})

function loadmore() {
  pageNum.value += 1
  if (status.value == 'loadmore') getList()
}

function getList() {
  status.value = 'loading'
  listHealthTags({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
    listData.value = listData.value.concat(res.rows || [])
    if (listData.value.length < res.total) {
      status.value = 'loadmore'
    } else {
      status.value = 'nomore'
    }
  }).catch(() => { status.value = 'nomore' })
}

function searchBlur() {
  pageNum.value = 1
  listData.value = []
  getList()
}

function handleAdd() {
  uni.navigateTo({ url: '/pages/health/healthTags/addEdit' })
  isShow.value = true
}

function handleEdit(item) {
  uni.navigateTo({ url: `/pages/health/healthTags/addEdit?id=${item.id}` })
  isShow.value = true
}

function handleDelete(item) {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条记录吗？',
    confirmText: '删除',
    confirmColor: '#f5576c',
    success: function (res) {
      if (res.confirm) {
        delHealthTags(item.id).then(() => {
          uni.showToast({ title: '删除成功', icon: 'success' })
          pageNum.value = 1
          listData.value = []
          getList()
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
@import '@/styles/health-common.scss';
</style>
