<template>
  <view>
    <!-- #ifdef MP-WEIXIN -->
    <page-container
      v-if="show"
      :show="show"
      :overlay="false"
      @leave="handleClose"
    />
    <!-- #endif -->
    <u-popup
      v-model="show"
      mode="bottom"
      :closeable="true"
      @close="handleClose"
      :safe-area-inset-bottom="true"
      :mask-close-able="true"
      z-index="10078"
      height="75%"
    >
      <view class="transfer-patient-drawer page-bg">
        <view class="modal-header white">
          <d-text text="收货信息" className="fs-32 font-bold color-title"></d-text>
        </view>
        <scroll-view class="scroll-container" scroll-y>
          <view class="form-body">
            <view class="field">
              <d-text text="收货人" className="fs-28 font-bold color-title m-b-12"></d-text>
              <u-input v-model="form.patient_name" placeholder="请输入收货人姓名" border="surround" />
            </view>
            <view class="field">
              <d-text text="手机号" className="fs-28 font-bold color-title m-b-12"></d-text>
              <u-input v-model="form.patient_mobile" placeholder="请输入手机号" type="number" border="surround" />
            </view>
            <view class="field">
              <d-text text="收货地址" className="fs-28 font-bold color-title m-b-12"></d-text>
              <u-input v-model="form.patient_address" placeholder="请输入收货地址" border="surround" />
            </view>
            <view class="field">
              <d-text
                :text="photoMode ? '处方图片（必填）' : '处方图片（可选）'"
                className="fs-28 font-bold color-title m-b-12"
              ></d-text>
              <view class="img-list">
                <view v-for="(img, idx) in form.prescription_images" :key="idx" class="img-item">
                  <image :src="img" mode="aspectFill" />
                  <u-icon name="close-circle-fill" color="#999" size="36" class="img-remove" @click="removeImage(idx)" />
                </view>
                <view class="img-add" @click="chooseImage" v-if="form.prescription_images.length < 6">
                  <u-icon name="plus" size="40" color="#B0B6C2"></u-icon>
                </view>
              </view>
            </view>
            <view class="field">
              <d-text text="备注（选填）" className="fs-28 font-bold color-title m-b-12"></d-text>
              <u-input
                v-model="form.remark"
                type="textarea"
                placeholder="可填写补充说明"
                border="surround"
                :height="120"
              />
            </view>
          </view>
        </scroll-view>
        <view class="modal-footer flex-row flex-jus-between flex-ali-center white shadow-up">
          <u-button
            :throttle-time="0"
            @click="handleClose"
            shape="circle"
            :custom-style="cancelBtnStyle"
          >取消</u-button>
          <u-button
            :throttle-time="0"
            :loading="submitting"
            @click="handleConfirm"
            shape="circle"
            :custom-style="confirmBtnStyle"
          >确认提交</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { uploadLegacyAdminImage } from '@/api/upload.js';

export default {
  name: 'TransferPatientDrawer',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    submitting: {
      type: Boolean,
      default: false,
    },
    /** 拍照传方模式：处方图片必填 */
    photoMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {
        patient_name: '',
        patient_mobile: '',
        patient_address: '',
        prescription_images: [],
        remark: '',
      },
      cancelBtnStyle: {
        backgroundColor: '#F4F6F8',
        color: '#2A2E35',
        height: '88rpx',
        width: '320rpx',
        fontWeight: 'bold',
        fontSize: '30rpx',
        border: 'none',
      },
      confirmBtnStyle: {
        backgroundColor: '#00A88A',
        color: '#fff',
        height: '88rpx',
        width: '320rpx',
        fontWeight: 'bold',
        fontSize: '30rpx',
        boxShadow: '0 8rpx 20rpx rgba(0, 168, 138, 0.25)',
        border: 'none',
      },
    };
  },
  computed: {
    /** 与父级 v-model 双向绑定，避免 data+watch 双状态不同步 */
    show: {
      get() { return this.value; },
      set(v) { this.$emit('input', v); },
    },
  },
  methods: {
    handleClose() {
      this.show = false;
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: async (res) => {
          const path = res.tempFilePaths[0];
          try {
            uni.showLoading({ title: '上传中' });
            const url = await uploadLegacyAdminImage({ filePath: path });
            this.form.prescription_images.push(url);
          } catch (e) {
            uni.showToast({ title: '上传失败', icon: 'none' });
          } finally {
            uni.hideLoading();
          }
        },
      });
    },
    removeImage(idx) {
      this.form.prescription_images.splice(idx, 1);
    },
    handleConfirm() {
      const name = (this.form.patient_name || '').trim();
      const mobile = (this.form.patient_mobile || '').trim();
      const address = (this.form.patient_address || '').trim();
      const remark = (this.form.remark || '').trim();
      if (!name || !mobile || !address) {
        uni.showToast({ title: '请填写收货人、手机号和地址', icon: 'none' });
        return;
      }
      if (this.photoMode && this.form.prescription_images.length === 0) {
        uni.showToast({ title: '请上传至少一张处方图片', icon: 'none' });
        return;
      }
      this.$emit('confirm', {
        patient_name: name,
        patient_mobile: mobile,
        patient_address: address,
        prescription_images: [...this.form.prescription_images],
        remark,
      });
    },
    resetForm() {
      this.form = {
        patient_name: '',
        patient_mobile: '',
        patient_address: '',
        prescription_images: [],
        remark: '',
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.page-bg { background-color: #F4F6F8; }
.transfer-patient-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.modal-header {
  padding: 32rpx;
  border-bottom: 1px solid #f0f0f0;
}
.scroll-container {
  flex: 1;
  height: 0;
}
.form-body {
  padding: 32rpx;
}
.field {
  margin-bottom: 32rpx;
}
.img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.img-item, .img-add {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  position: relative;
}
.img-item image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}
.img-remove {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
}
.img-add {
  border: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.modal-footer {
  padding: 24rpx 32rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}
.shadow-up {
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
}
</style>
