<!-- 选择药品 -->
<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 class="add-btn" @click="showModal">新增</view>
      </view>
    </view>
    <view class="line"></view>
    <view class="content" v-if="params.total != 0">
      <uv-radio-group v-model="radioValue" placement="column ">
        <uv-radio
          @change="radioGroupChange(item)"
          size="18"
          :customStyle="{ margin: '8px' }"
          v-for="item in dataList"
          :key="item.id"
          :label="item.pharmacyName"
          :name="item.id"
        >
        </uv-radio>
      </uv-radio-group>
    </view>
    <noData v-else />
    <uv-modal
      ref="modalRef"
      :title="`新增药店`"
      show-cancel-button
      @confirm="onConfirm"
      @cancel="onCancel"
    >
      <view class="slot-content">
        <uv-input
          border="surround"
          v-model="newName"
          :customStyle="inputCustomStyle"
          clearable
          placeholder="请输入药店名称"
        />
      </view>
    </uv-modal>
  </view>
</template>

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

const useTaskStore = useTask()

const sendParamsKey = ref()
const taskTypeId = ref()

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

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

const dataList = ref<any[]>([])
async function getList() {
  uni.showLoading({
    title: '加载中...'
  })
  const res = await getListDrugstoreByNameApi(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 = (item: any) => {
  const area = `${item.province}${item.city ? '-' + item.city : ''}${
    item.area ? '-' + item.area : ''
  }`
  let obj = {
    sendParamsKey: sendParamsKey.value,
    taskTypeId: taskTypeId.value,
    address: item.address,
    area: area,
    id: item.id,
    pharmacyName: item.pharmacyName
  }
  useTaskStore.setpPharmacySelect(obj)
  uni.navigateBack()
}

const inputCustomStyle = {
  width: '550rpx'
}
const modalRef = ref()
const newName = ref('')
const showModal = () => {
  modalRef.value.open()
}
const onCancel = () => {
  newName.value = ''
  modalRef.value.close()
}
const onConfirm = async () => {
  const res = await getPharmacyByNameApi({ name: newName.value })
  if (res.data) {
    uni.showToast({
      title: '药店已存在',
      icon: 'none'
    })
    setTimeout(() => {
      radioGroupChange(res.data)
    }, 1200)
  } else {
    sendInfoByAdd()
  }
}

const sendInfoByAdd = () => {
  let obj = {
    sendParamsKey: sendParamsKey.value,
    taskTypeId: taskTypeId.value,
    name: newName.value
  }
  useTaskStore.setSingleSelectByAdd(obj)
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.get-list {
  min-height: 85vh;
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;

    .search {
      padding: 0 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .add-btn {
        margin-left: 20rpx;
        text-align: center;
        width: 150rpx;
        height: 56rpx;
        line-height: 56rpx;
        background: #6eb657;
        border-radius: 50rpx;
        color: #fff;
      }
    }
  }
  .line {
    margin-top: 80rpx;
    height: 20rpx;
    background: #f2f2f2;
    width: 100%;
  }

  .content {
    padding: 0 30rpx;
    background-color: #fff;
  }
}
</style>
