<template>
  <div>
    <el-dialog title="" v-model="dialogVisible">
      <div>
        <el-form ref="formRef" :model="form" label-position="top">
          <el-form-item
            prop="subsidyTargetId"
            label="选择该笔订单民政补贴对象类别"
            :rules="{
              required: true,
              message: '请选择该笔订单民政补贴对象类别',
              trigger: 'blur'
            }"
            v-if="subsidyDetail"
          >
            <div>
              <el-select
                filterable
                v-model="form.subsidyTargetId"
                placeholder="请选择补贴对象类别"
              >
                <el-option
                  v-for="item in subsidyDetail.targets"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <div class="mb-8px">
                <el-text class="text-yellow-600">{{
                  subsidyDetail.comment
                }}</el-text>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            label="填写交易成功备注信息"
            prop="comment"
            :rules="{
              required: true,
              message: '请填写交易成功备注信息',
              trigger: 'blur'
            }"
          >
            <el-input
              type="textarea"
              :autosize="{
                minRows: 6
              }"
              v-model="form.comment"
              placeholder="输入的订单交易成功备注信息用户可见，请谨慎填写"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="上传至少3张（交易前、中、后）线下交易成功照片凭证"
            prop="images"
            :rules="{
              required: true,
              trigger: 'blur',
              validator: validateImages
            }"
          >
            <UploadOnlyImage
              v-model:url="form.images"
              :key="Date.now()"
              type="image"
            />
          </el-form-item>
          <el-form-item label="">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </div>
      </template> -->
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
import UploadOnlyImage from "@/components/UploadOnlyImage.vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  orderId: {},
  rowData: {
    type: Object
  },
  type: {
    type: String,
    default: "handle"
  }
});
const emits = defineEmits(["update:show", "success"]);
const form = reactive({
  subsidyTargetId: undefined,
  comment: undefined,
  images: []
});
const formRef = ref();
const subsidyDetail = ref(null);

const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      getOrderSubsidy();
      if (props.rowData?.subsidyTargetId) {
        let { subsidyTargetId, comment, images } = props.rowData;
        form.subsidyTargetId = subsidyTargetId;
        form.comment = comment;
        form.images = images;
      }
    } else {
      resetForm();
    }
  }
);
const getOrderSubsidy = () => {
  if (!props.orderId) return;
  request
    .get(`mallService/mechanism/order/subsidy?orderId=${props.orderId}`)
    .then(resp => {
      subsidyDetail.value = resp.data;
    });
};
const validateImages = (rule: any, value: any, callback: any) => {
  if (!value.length || value.length < 3) {
    callback(new Error("请上传至少3张（交易前、中、后）线下交易成功照片凭证"));
  } else {
    callback();
  }
};
const handleSubmit = () => {
  formRef.value.validate(valid => {
    if (!valid) return;
    request
      .put(
        props.type == "handle"
          ? "/mallService/mechanism/orders/complete"
          : "/mallService/mechanism/orders/comment",
        {
          ids: [props.orderId],
          ...form,
          images: form.images.map(v => v.url)
        }
      )
      .then(resp => {
        ElMessage.success(resp.message);
        emits("success");
        dialogVisible.value = false;
      });
  });
};

const resetForm = () => {
  formRef.value.resetFields();
  form.images = [];
};
</script>
