<template>
  <uv-popup ref="shrePopupRef" mode="bottom" round="15" @change="popupChange">
    <view class="share-popup">
      <view class="btns">
        <button class="btn" plain="true" @click="close">取消</button>
        <button
          :disabled="disabled"
          class="btn confirm"
          plain="true"
          :data-title="shareTitle"
          :data-id="sharePopupId"
          :data-packageId="packageId"
          :data-remark="remark || ''"
          open-type="share"
        >
          确定
        </button>
      </view>
      <view class="tips"> 注意：不能针对非医疗专业人员转发处方药相关宣传信息。 </view>
      <view class="remark">
        <view class="title">备注</view>
        <uv-input v-model="remark" />
      </view>
      <view class="picker">
        <view class="title">选择执行包</view>
        <picker-view @change="pickerChange" @pickstart="pickStart" @pickend="pickEnd">
          <picker-view-column class="picker-view-column">
            <view class="picker-item" v-for="item in packageList" :key="item.packageList">{{
              item.label
            }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
import { getPackageListByTaskTypeApi } from '@/service/modules/getTask'
import { ref, watch } from 'vue'
import { defineEmits } from 'vue'

const emit = defineEmits(['initInfo'])

const props = defineProps({
  sharePopupType: String,
  sharePopupId: String,
  shareTitle: String
})

watch(
  () => props.sharePopupId,
  () => {
    shrePopupRef.value.open()
    getPackageListByTaskType()
  }
)

const remark = ref()
const disabled = ref(false)

const shrePopupRef = ref()

const packageId = ref('')
const packageList = ref()
const getPackageListByTaskType = async () => {
  if (props.sharePopupType) {
    const res = await getPackageListByTaskTypeApi(props.sharePopupType)
    packageList.value = res.data
    if (res.data.length) {
      packageId.value = res.data[0].value
    }
  }
}

const pickerChange = (e: any) => {
  const val = e.detail.value[0]
  packageId.value = packageList.value[val].value
}

const pickStart = () => {
  disabled.value = true
}
const pickEnd = () => {
  disabled.value = false
}

const close = () => {
  shrePopupRef.value.close()
}

const popupChange = (e: any) => {
  if (!e.show) {
    emit('initInfo')
  }
}
defineExpose({
  close
})
</script>

<style lang="scss" scoped>
.share-popup {
  height: 65vh;
  padding: 30rpx;
  .btns {
    height: 80rpx;
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btn {
      margin: 0;
      height: 80rpx;
      font-size: 30rpx;
      border: none;
    }
    .confirm {
      color: #6eb657;
    }
  }
  .tips {
    margin-top: 30rpx;
    color: #f91f1f;
    font-size: 24rpx;
    line-height: 30rpx;
  }
  .remark {
    margin-top: 30rpx;
    .title {
      margin-bottom: 20rpx;
    }
  }
  .picker {
    margin-top: 30rpx;
    .picker-view-column {
      margin-top: 30rpx;
      height: 25vh;
      .picker-item {
        text-align: center;
        line-height: 68rpx;
      }
    }
  }
}
</style>
