<!-- 选择药品 -->
<template>
  <view class="get-list">
    <view class="header">
      <view class="search">
        <uv-input
          placeholder="请输入内容"
          clearable
          border="surround"
          prefixIcon="search"
          prefixIconStyle="font-size: 32px;color: #909399"
          shape="circle"
          @input="searchValChange"
          :customStyle="customStyle"
          v-model="params.name"
        />
      </view>
    </view>
    <view :class="{ line: !hideLine }" />
    <view class="content" v-if="params.total != 0">
      <uv-radio-group v-model="radioValue" placement="column ">
        <uv-radio
          @change="radioGroupChange($event, item)"
          size="18"
          :customStyle="{ margin: '8px' }"
          v-for="item in dataList"
          :key="item.id"
          :label="item.drugname"
          :name="item.id"
        >
        </uv-radio>
      </uv-radio-group>
    </view>
    <noData v-else />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
import { debounce } from '@/utils/index'
import { useTask } from '@/store/task'
import { getListDrugsByNameApi } from '@/service/modules/getTask'

const props = defineProps(['hideLine'])

const useTaskStore = useTask()

const sendParamsKey = ref()

class Params {
  total = -1
  current = 1
  size = 20
  name = ''
  packageId = ''
}
const params = ref(new Params())
const radioValue = ref()
const investigateDrug = ref()

onLoad((e) => {
  sendParamsKey.value = e?.sendParamsKey
  radioValue.value = e?.sendVal || null
  params.value.packageId = e?.packageId
  investigateDrug.value = e?.investigateDrug || null
})

const dataList = ref<any[]>([])
async function getList() {
  uni.showLoading({
    title: '加载中...'
  })
  const res = await getListDrugsByNameApi(params.value)
  if (res.data) {
    params.value.total = res.data.total
    dataList.value = dataList.value.concat(res.data.records)
  }
  uni.hideLoading()
}

onShow(() => {
  dataList.value = []
  getList()
})

const customStyle = {
  background: '#f6f6f6',
  border: 'none',
  height: '40rpx'
}

const searchValChange = debounce(() => {
  params.value.current = 1
  dataList.value = []
  getList()
})

// 底部
onReachBottom(() => {
  if (dataList.value.length === params.value.total) return
  params.value.current++
  getList()
})

const radioGroupChange = (e: any, item: any) => {
  let obj = {
    label: item.drugname,
    value: e,
    sendParamsKey: sendParamsKey.value,
    activeId: 0
  }
  useTaskStore.setAutoSelect(obj)
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.get-list {
  min-height: 85vh;
  background-color: #fafafa;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;

    .search {
      padding: 0 30rpx;
    }
  }
  .line {
    margin-top: 80rpx;
    height: 20rpx;
    background: #f2f2f2;
    width: 100%;
  }
  .content {
    padding: 0 30rpx;
    padding-top: 24rpx;
  }
}
</style>
