<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import {
    Button,
    Card,
    Descriptions,
    DescriptionsItem,
    Form,
    FormItem,
    Image,
    Input,
    message,
    Radio,
    RadioGroup,
    Table,
  } from 'ant-design-vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { arbitrateCommitApi, arbitrateDetailApi, arbitrateLogsApi } from '/@/api/arbitration';
  import { useRoute, useRouter } from 'vue-router';
  import {
    ArbitrationCommitParams,
    ArbitrationData,
  } from '/@/api/arbitration/model/arbitrationModel';
  import { PictureUpload } from '/@/components/Upload';
  import { FileItem } from '/@/components/Upload/src/upload';
  import { useUpload } from '/@/hooks/data/useUpload';
  import moment from 'moment/moment';
  import { ComplainCloseData } from '/@/api/complaints/modal/complaintsModal';
  import { busTypeMap } from '/@/views/arbitration/options';
  import { useValueToLabel } from '/@/hooks/data/useValueToLabel';

  const route = useRoute();
  const router = useRouter();

  const { valueToLabel } = useValueToLabel();

  const Textarea = Input.TextArea;

  const form = ref<ArbitrationData>();

  const rules = reactive({
    busType: [{ required: true, message: '仲裁分类不能为空', trigger: ['change', 'blur'] }],
    busText: [
      { required: true, message: '仲裁回复不能为空', trigger: ['change', 'blur'] },
      { max: 500, message: '仲裁回复不能超过500字', trigger: ['change', 'blur'] },
    ],
  });

  const submitForm = ref<ArbitrationCommitParams>({
    busType: undefined,
    busText: '',
    id: 0,
  });

  const fileList = ref<FileItem[]>([]);

  const columns1 = [
    {
      title: '操作时间',
      dataIndex: 'operTime',
      key: 'operTime',
      slots: { customRender: 'operTime' },
    },
    { title: '操作人', dataIndex: 'name', key: 'name' },
    { title: '仲裁分类', dataIndex: 'busType', key: 'busType', slots: { customRender: 'busType' } },
    { title: '仲裁回复', dataIndex: 'busText', key: 'busText' },
    { title: '附件图片', key: 'attaches', slots: { customRender: 'attaches' } },
  ];

  const dataSource1 = ref<ComplainCloseData[]>([]);

  onMounted(() => {
    init();
  });

  const init = () => {
    initDetailData();
    initLogsData();
  };

  const initLogsData = async () => {
    try {
      dataSource1.value = await arbitrateLogsApi(submitForm.value.id);
    } catch (e) {
      console.log(e);
    }
  };

  const initDetailData = async () => {
    try {
      submitForm.value.id = Number(route.query.id);
      form.value = await arbitrateDetailApi(submitForm.value.id);
    } catch (e) {
      console.log(e);
    }
  };

  const cancelBtn = () => {
    router.go(-1);
  };
  const formRef = ref();

  const { validatorUpload } = useUpload();
  const submitBtn = async () => {
    try {
      await formRef.value.validate();
      await validatorUpload(fileList);
      const res = await arbitrateCommitApi({
        ...submitForm.value,
        attaches: fileList.value.map((item) => item.response),
      });
      console.log(res);
      message.success('提交成功');
      submitForm.value = {
        busType: undefined,
        busText: '',
        id: 0,
      };
      fileList.value = [];
      init();
    } catch (e) {
      console.log(e);
    }
  };
</script>

<template>
  <Card>
    <descriptions title="订单售后/退货" bordered>
      <descriptions-item label="订单取消发起时间">{{ form?.orderCancelDt }}</descriptions-item>
      <descriptions-item label="订单取消发起人员">{{ form?.orderCancelUser }}</descriptions-item>
      <descriptions-item label="订单取消原因">{{ form?.orderCancelReason }}</descriptions-item>
      <descriptions-item label="订单取消处理时间">{{ form?.orderCancelHandt }}</descriptions-item>
      <descriptions-item label="订单取消处理人员">{{ form?.orderCancelHanuser }}</descriptions-item>
      <descriptions-item label="订单取消操作">{{ form?.orderCancelOper }}</descriptions-item>
    </descriptions>
    <div v-if="form?.state != 2">
      <div class="ant-descriptions-title" style="margin: 20px 0">仲裁处理</div>
      <Form ref="formRef" layout="vertical" :model="submitForm" :rules="rules">
        <FormItem label="仲裁分类" name="busType">
          <RadioGroup v-model:value="submitForm.busType">
            <Radio v-for="item in busTypeMap" :key="item.value" :value="item.value">{{ item.label }}</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="仲裁回复" name="busText">
          <Textarea
            v-model:value="submitForm.busText"
            showCount
            :maxlength="500"
            :auto-size="{ minRows: 5 }"
          />
        </FormItem>
        <FormItem label="仲裁处理图片">
          <PictureUpload v-model:file-list="fileList">
            <div v-if="fileList.length < 9">
              <plus-outlined />
              <div class="ant-upload-text">上传</div>
            </div>
          </PictureUpload>
        </FormItem>
        <FormItem>
          <Button style="margin: 5px 0" type="primary" @click="submitBtn">确定</Button>
          <Button style="margin: 5px 0" @click="cancelBtn">取消</Button>
        </FormItem>
      </Form>
    </div>
    <div>
      <div class="ant-descriptions-title" style="margin: 20px 0">处理记录</div>
      <Table
        :columns="columns1"
        :dataSource="dataSource1"
        :scroll="{ x: 'max-content' }"
        :pagination="false"
        rowKey="id"
      >
        <template #operTime="{ record }">
          {{ moment(record.operTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template #busType="{ text }">
          {{ valueToLabel(busTypeMap, text) }}
        </template>
        <template #attaches="{ record }">
          <ImagePreviewGroup>
            <Image
              v-for="item in record.attaches"
              :key="item.uid"
              style="width: 50px; height: 50px"
              :width="50"
              :height="50"
              :src="item.src"
            />
          </ImagePreviewGroup>
        </template>
      </Table>
    </div>
  </Card>
</template>

<style lang="less" scoped>
  :deep(.ant-row) {
    flex-flow: column;
  }
  :deep(.ant-image) {
    margin: 0 5px;
    border-radius: 5px;
    overflow: hidden;
  }
</style>
