<!-- 接单弹窗 -->
<template>
  <el-dialog
    title="接单"
    :visible.sync="visible"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleDialogClose"
    custom-class="accept-dialog"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="接单人" prop="acceptorId">
        <el-input v-model="currentUser.name" disabled placeholder="当前用户" />
      </el-form-item>

      <el-form-item label="接单时间" prop="acceptTime">
        <el-date-picker
          v-model="form.acceptTime"
          type="datetime"
          placeholder="选择接单时间"
          style="width: 100%"
          disabled
        />
      </el-form-item>
      <el-form-item label="预计完成时间" prop="estimatedCompleteTime">
        <el-date-picker
          v-model="form.estimatedCompleteTime"
          type="date"
          placeholder="选择日期"
          style="width: 100%"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          clearable
          :picker-options="{
            disabledDate: (time) => {
              const todayStart = new Date();
              todayStart.setHours(0, 0, 0, 0); // 获取当天 00:00:00.000
              return time.getTime() < todayStart.getTime();
            },
          }"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="handleSubmit"
        :loading="submitting"
        class="submit-btn"
        >确 定</el-button
      >
      <el-button @click="handleCancel" class="cancel-btn">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AcceptDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: () => ({}),
    },
    currentUser: {
      type: Object,
      default: () => ({
        id: "",
        name: "",
      }),
    },
  },
  data() {
    return {
      submitting: false,
      form: {
        acceptorId: "",
        acceptTime: new Date(),
        estimatedCompleteTime: "",
      },
      rules: {
        acceptorId: [
          { required: true, message: "请选择接单人", trigger: "change" },
        ],
        acceptTime: [
          { required: true, message: "请选择接单时间", trigger: "change" },
        ],
        estimatedCompleteTime: [
          { required: true, message: "请选择预计完成时间", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.initForm();
      }
    },
  },
  methods: {
    // 初始化表单
    initForm() {
      this.form.acceptorId = this.currentUser.id;
      this.form.acceptTime = new Date();
      this.form.estimatedCompleteTime = "";
    },
    // 提交表单
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.submitting = true;
          try {
            await this.$emit("confirm", {
              orderId: this.rowData.id,
              acceptorId: this.form.acceptorId,
              acceptTime: this.formatDateTime(this.form.acceptTime),
              estimatedCompleteTime: this.form.estimatedCompleteTime,
            });
          } finally {
            this.submitting = false;
          }
        }
      });
    },
    // 取消
    handleCancel() {
      this.$emit("update:visible", false);
    },
    // 关闭弹窗
    handleDialogClose() {
      this.$refs.form.resetFields();
      this.handleCancel();
    },
    // 格式化日期时间
    formatDateTime(date) {
      if (!date) return "";
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      const hour = String(d.getHours()).padStart(2, "0");
      const minute = String(d.getMinutes()).padStart(2, "0");
      const second = String(d.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.accept-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 20px 10px 20px;
  }

  :deep(.el-input.is-disabled .el-input__inner) {
    color: #606266;
    background-color: #f5f7fa;
    border-color: #dcdfe6;
  }

  :deep(.el-date-editor.is-disabled) {
    .el-input__inner {
      color: #606266;
      background-color: #f5f7fa;
      border-color: #dcdfe6;
    }
  }

  .dialog-footer {
    text-align: right;
    padding-top: 10px;

    .submit-btn {
      padding: 9px 20px;
      font-size: 14px;
      border-radius: 4px;
      margin-left: 10px;
      transition: all 0.3s;

      &:hover {
        opacity: 0.8;
        transform: translateY(-1px);
      }

      &:active {
        transform: translateY(0);
      }
    }

    .cancel-btn {
      padding: 9px 20px;
      font-size: 14px;
      border-radius: 4px;
      transition: all 0.3s;
      border: 1px solid #dcdfe6;

      &:hover {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
        transform: translateY(-1px);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }
}
</style>
