<template>
  <div>
    <!-- v-if="[4, 7].includes(state.data.orderStatus)" -->
    <el-card title="交易备注" class="mt-6">
      <template #header>
        <div class="flex justify-between">
          <span>交易备注</span>
          <el-button plain @click="onSaveComment">保存</el-button>
        </div>
      </template>
      <div>
        <el-input
          v-model="state.data.comment"
          type="textarea"
          :rows="5"
          placeholder="请输入交易备注"
          clearable
        />
        <div class="mt-4">
          <div class="mb-4">上传交易图片</div>
          <UploadOnlyImage
            v-model:url="state.images"
            :key="coverKey"
            :limit="3"
            type="image"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script  setup>
import { onMounted, reactive, ref, defineProps, watch, defineEmits } from "vue";
import { request } from "@/utils/index";
import UploadImage from "@/components/UploadImage.vue";
import UploadOnlyImage from "@/components/UploadOnlyImage.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  id: {
    type: [Number, String],
    default: ""
  }
});
const emits = defineEmits(["onSave"]);

const state = reactive({
  data: {},
  tableData: [],
  images: []
});

const onSaveComment = () => {
  if (!state.data.comment) {
    return ElMessage.error("请输入备注");
  }
  if (state.images?.length < 3) {
    return ElMessage.error("至少上传3张交易图片");
  }
  emits("onSave");
  request
    .put("/mallService/mechanism/orders/comment", {
      ids: [state.data.orderId],
      comment: state.data.comment,
      images: state.images?.map(v => v.url)
    })
    .then(resp => {
      // ElMessage.success(resp.message);
      getOrderDetail();
    });
};
const getOrderDetail = () => {
  request.get(`/mallService/mechanism/orders/${props.id}`).then(res => {
    state.data = res.data;
    state.images = res.data.images?.map((v, i) => {
      return {
        url: v,
        name: "images" + i,
        status: "success",
        uid: new Date().getTime()
      };
    });
    if (!state.images) {
      state.images = [];
    }
  });
};

watch(
  () => props.id,
  n => {
    if (n) {
      getOrderDetail();
    }
  },
  {
    deep: true,
    immediate: true
  }
);
</script>
