<!-- 选择医院药店商业公司 -->
<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 class="tabs" v-if="showTab">
        <view class="tabs-item" @click="tabClick(1)">
          <text :class="params.type === 1 ? 'active-tab' : ''">医院</text>
        </view>
        <view class="tabs-item" @click="tabClick(2)">
          <text :class="params.type === 2 ? 'active-tab' : ''">药店</text>
        </view>
        <view class="tabs-item" @click="tabClick(3)">
          <text :class="params.type === 3 ? 'active-tab' : ''">商业公司</text>
        </view>
      </view>
    </view>
    <view class="line" :style="{ 'margin-top': showTab ? '155rpx' : '115rpx' }"></view>
    <view>
      <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.yymc || item.gsmc || item.pharmacyName"
            :name="item.id"
          >
          </uv-radio>
        </uv-radio-group>
      </view>
      <noData v-else />
    </view>
  </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 {
  getListHospitalByNameApi,
  getListDrugstoreByNameApi,
  getListCompanyByNameApi
} from '@/service/modules/getTask'

const useTaskStore = useTask()

const sendParamsKey = ref()
const showTab = ref(true)

const oldRadioValue = ref('')
const oldActiveType = ref()

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

onLoad((e) => {
  sendParamsKey.value = e?.sendParamsKey
  // 首次调查 - 只显示医院
  if (e?.sendParamsKey === 'temp26' && e.firstInvestigation === 'first') {
    showTab.value = false
  }
  params.value.type = Number(e?.activeId) || 1
  oldActiveType.value = Number(e?.activeId)
  radioValue.value = e?.sendVal || null
  oldRadioValue.value = e?.sendVal || null
})
const resetParams = () => {
  params.value = new Params()
}
const dataList = ref<any[]>([])

async function getList() {
  uni.showLoading({
    title: '加载中...'
  })
  let res
  if (params.value.type === 1) {
    res = await getListHospitalByNameApi(params.value)
  } else if (params.value.type === 2) {
    res = await getListDrugstoreByNameApi(params.value)
  } else if (params.value.type === 3) {
    res = await getListCompanyByNameApi(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'
}

// tab切换
const tabClick = (act: number) => {
  if (params.value.type === act) return
  resetParams()
  dataList.value = []
  if (act === oldActiveType.value) {
    radioValue.value = oldRadioValue.value
  } else {
    radioValue.value = ''
  }
  params.value.type = act
  getList()
}

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.yymc || item.gsmc || item.pharmacyName,
    value: e,
    sendParamsKey: sendParamsKey.value,
    activeId: params.value.type
  }
  useTaskStore.setAutoSelect(obj)
  uni.navigateBack()
}
</script>

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

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

    .search {
      padding: 0 30rpx;
    }

    .tabs {
      margin-top: 8rpx;
      height: 80rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      flex: 1;
      display: flex;
      justify-content: space-between;

      .tabs-item {
        flex: 1;
        text-align: center;
        color: #666;
        font-size: 28rpx;
        font-weight: 400;
        text {
          display: inline-block;
          &.active-tab {
            color: #333;
            font-weight: 600;
            position: relative;
            &::after {
              content: '';
              display: block;
              position: absolute;
              width: 50%;
              height: 6rpx;
              background-color: #6eb657;
              left: 50%;
              top: 50rpx;
              transform: translateX(-50%);
            }
          }
        }
      }
    }
  }
  .line {
    margin-top: 80rpx;
    height: 20rpx;
    background: #f2f2f2;
    width: 100%;
  }
  .content {
    padding: 0 30rpx;
  }
}
</style>
