<template>
  <view>
    <view v-if="!isCustomExpress" style="color: #606266;">
      <text>{{ lastUpdateTime || '-' }}</text>
      <view v-if="lastStatus" class="ellipsis" style="max-width: 400rpx; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: 26rpx;">
        {{ lastStatus }}
      </view>
      <view v-else style="font-size: 26rpx; color: #999; display: inline-block;">未发货或无法获取</view>
    </view>
    <view v-else>
      <text @click="openDialog" style="color:#409EFF;text-decoration:underline;">{{ lastUpdateTime || '点击填写' }}</text>
      <text @click="openDialog" style="color:#409EFF;text-decoration:underline; margin-left: 16rpx;">{{ lastStatus || '点击填写' }}</text>
    </view>
    <uni-popup ref="statusPopup" type="bottom">
      <view class="popup-content popup-bottom">
        <view class="form-row">
          <text>物流状态</text>
          <uni-easyinput v-model="form.lastStatus" placeholder="请输入物流状态" />
        </view>
        <view class="form-row">
          <text>更新时间</text>
          <uni-datetime-picker v-model="form.lastUpdateTime" type="datetime" :clear-icon="false" placeholder="请选择更新时间" />
        </view>
        <view class="popup-actions">
          <uni-button @click="closeDialog">取消</uni-button>
          <uni-button type="primary" @click="handleSave">确定</uni-button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { EExpressType } from '@/util/enums';
export default {
  name: 'ExpressStatusEditor',
  props: {
    lastStatus: String,
    lastUpdateTime: String,
    expressType: String
  },
  data() {
    return {
      form: {
        lastStatus: '',
        lastUpdateTime: ''
      },
      EExpressType
    }
  },
  computed: {
    isCustomExpress() {
      if (!this.EExpressType || typeof this.EExpressType !== 'object') {
        return true;
      }
      const expressTypeList = Object.values(this.EExpressType);
      return !expressTypeList.includes(this.expressType);
    }
  },
  methods: {
    openDialog() {
      this.form.lastStatus = this.lastStatus || '';
      this.form.lastUpdateTime = this.lastUpdateTime || '';
      this.$refs.statusPopup.open();
    },
    closeDialog() {
      this.$refs.statusPopup.close();
    },
    handleSave() {
      if (!this.form.lastStatus || !this.form.lastUpdateTime) {
        uni.showToast({ title: '请填写完整物流状态和更新时间', icon: 'none' });
        return;
      }
      this.$emit('update:lastStatus', this.form.lastStatus);
      this.$emit('update:lastUpdateTime', this.form.lastUpdateTime);
      this.$emit('save', {
        lastStatus: this.form.lastStatus,
        lastUpdateTime: this.form.lastUpdateTime
      });
      this.closeDialog();
    }
  }
}
</script>

<style scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-content { padding: 20rpx; }
.popup-bottom {
  width: 100vw;
  background: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  box-sizing: border-box;
}
.form-row { display: flex; align-items: center; margin-bottom: 16rpx; }
.form-row text { width: 120rpx; }
.popup-actions { display: flex; justify-content: flex-end; gap: 20rpx; margin-top: 20rpx; }
</style>
