<template>
  <div>
    <span v-if="!isCustomExpress" style="color: #606266;">
      <span>{{ lastUpdateTime || '-' }}</span>
      <el-tooltip v-if="lastStatus" :content="lastStatus" placement="top">
        <span class="ellipsis" style="max-width: 200px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: 13px;">
          {{ lastStatus }}
        </span>
      </el-tooltip>
      <span v-else style="font-size: 13px;">未发货或无法获取</span>
    </span>
    <span v-else>
      <span @click="openDialog" style="cursor:pointer;color:#409EFF;text-decoration:underline;">
        {{ lastUpdateTime || '点击填写' }}
      </span>
      <span @click="openDialog" style="cursor:pointer;color:#409EFF;text-decoration:underline;">
        {{ lastStatus || '点击填写' }}
      </span>
    </span>
    <el-dialog title="手动填写物流状态" :visible.sync="dialogVisible" width="400px" append-to-body>
      <el-form :model="form" label-width="100px">
        <el-form-item label="物流状态">
          <el-input v-model="form.lastStatus" placeholder="请输入物流状态" />
        </el-form-item>
        <el-form-item label="更新时间">
          <el-date-picker v-model="form.lastUpdateTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择更新时间" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { EExpressType } from '@/utils/enums';
export default {
  name: 'ExpressStatusEditor',
  props: {
    lastStatus: String,
    lastUpdateTime: String,
    expressType: String
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        lastStatus: '',
        lastUpdateTime: ''
      },
      EExpressType
    }
  },
  computed: {
    isCustomExpress() {
      console.log(this.EExpressType);
      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.dialogVisible = true;
    },
    handleSave() {
      if (!this.form.lastStatus || !this.form.lastUpdateTime) {
        this.$message.error('请填写完整物流状态和更新时间');
        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.dialogVisible = false;
    }
  }
}
</script>

<style scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
