<!--
 * @Author: Mm
 * @Date: 2025-05-16 10:07:50
 * @LastEditors: Mm
 * @LastEditTime: 2025-06-18 11:41:42
 * 不写bug的程序员不是一个好程序员!
-->
<!--
使用antd原生Form生成 详细用法参考ant-design-vue Form组件文档
vscode默认配置文件会自动格式化/移除未使用依赖
-->
<script setup lang="ts">
import type { RuleObject } from 'ant-design-vue/es/form';
import { computed, onMounted, ref } from 'vue';

import {
  Input,
  Textarea,
  Select,
  RadioGroup,
  CheckboxGroup,
  DatePicker,
  Form,
  FormItem,
  Tag,
  ImagePreviewGroup,
  Image,
  Radio,
  Table,
  message,
  TreeSelect,
} from 'ant-design-vue';
import {
  InfoCircleOutlined,
  FormOutlined,
  CloudDownloadOutlined,
} from '@ant-design/icons-vue';

import { getDictOptions } from '#/utils/dict';
import { getFeedBackDetail } from '#/api/tasks/index';

import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { DictTag } from '#/components/dict';
const dictInfo = getDictOptions('tasks_type');
const dictStatus = getDictOptions('biz_task_status');

import { useVbenForm } from '#/adapter/form';

import { useUserStore } from '@vben/stores';

const userStore = useUserStore();

const userName = computed(() => {
  return userStore.userInfo?.username;
});

const emit = defineEmits<{ reload: [] }>();

/**
 * 定义默认值 用于reset
 */
const defaultValues = {
  content: undefined,
  zxrwfj: undefined,
  ossId: undefined,
};

/**
 * 表单数据ref
 */
const formData = ref(defaultValues);

/**
 * 表单校验规则
 */
const formRules = ref({
  content: [{ required: true, message: '协作任务描述不能为空' }],
  text: [{ required: true, message: '审批意见不能为空' }],
});

/**
 * useForm解构出表单方法
 */
const { validate, validateInfos, resetFields } = Form.useForm(
  formData,
  formRules,
);
const detailValue = ref<any>({
  bizTaskFeedback:{
    "createDept": null,
    "createBy": null,
    "createTime": null,
    "taskNo": "",
    "workId": 75,
    "userId": 191696,
    "userName": "",
    "content": "",
    "file": "",
    "image": "",
    "status": null
  }
});
const [BasicModal, modalApi] = useVbenModal({
  class: 'w-[1050px]',
  fullscreenButton: true,
  closeOnClickModal: false,
  onClosed: handleCancel,
  showConfirmButton: false,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);
    formData.value = defaultValues;

    const { taskNo, feedbackId } = modalApi.getData();
    detailValue.value = await getFeedBackDetail({ taskNo, id:feedbackId });
    // const record = await policeCapacityInfo(id);
    // 只赋值存在的字段
    // const filterRecord = pick(record, Object.keys(defaultValues));
    // formData.value = filterRecord;

    modalApi.modalLoading(false);
  },
});

async function handleCancel() {
  modalApi.close();
  formData.value = defaultValues;
  resetFields();
}
</script>

<template>
  <BasicModal title="反馈详情">
    <div class="card bg-blue">
      <!-- <div class="title">
        <InfoCircleOutlined />
        <span>协作单基本信息</span>
      </div> -->
      <div class="itemWrap">
        <div class="item">
          <div class="item-label">反馈人:</div>
          <div class="item-value">
            {{ detailValue.bizTaskFeedback.userName }}
          </div>
        </div>
        <div class="item">
          <div class="item-label">反馈单位:</div>
          <div class="item-value">
            {{ detailValue.bizTaskFeedback.deptName }}
          </div>
        </div>
        <div class="item">
          <div class="item-label">反馈时间:</div>
          <div class="item-value">
            {{ detailValue.bizTaskFeedback.createTime }}
          </div>
        </div>
        <div style="color: rgb(107 114 128); margin-bottom: 7px">反馈内容:</div>
        <Textarea
          readonly
          v-model:value="detailValue.bizTaskFeedback.content"
          placeholder="协作内容"
          :auto-size="{ minRows: 2, maxRows: 6 }"
        />

        <div style="display: flex; flex-direction: column">
          <div
            v-if="detailValue.bizTaskFeedback.file||detailValue.bizTaskFeedback.image"
            style="color: rgb(107 114 128); margin: 15px 0 10px 0"
          >
            任务附件:
          </div>
          <div
            class="imgs"
            v-if="detailValue.bizTaskFeedback.image"
          >
            <ImagePreviewGroup>
              <Image
                v-for="(imgs, i) in detailValue.bizTaskFeedback.image.split(',')"
                :key="i"
                :height="100"
                :src="imgs"
              />
            </ImagePreviewGroup>
          </div>
          <div
            class="files"
            v-if="detailValue.bizTaskFeedback.file"
          >
            <a
              :href="item"
              v-for="(item, index) in detailValue.bizTaskFeedback.file.split(',')"
              :key="index"
              style="margin-right: 10px; font-style: italic; font-size: 14px"
              ><CloudDownloadOutlined />附件{{ index + 1 }}</a
            >
          </div>
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<style lang="scss" scoped>
.card {
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgb(229 231 235);
  &:last-child {
    margin-top: 20px;
  }
  .title {
    font-size: 16px;
    margin-bottom: 15px;
    span:last-child {
      margin-left: 6px;
      letter-spacing: 1px;
    }
  }
}
.bg-yellow {
  background-color: rgb(255 249 239);
}
.bg-pink {
  background-color: rgb(239 253 245);
}

.bg-blue {
  background-color: rgb(239 246 255);
  border: 1px solid rgb(219 234 254);
  .title {
    color: rgb(30 64 175);
    font-size: 16px;
    margin-bottom: 15px;
    span:last-child {
      margin-left: 6px;
      letter-spacing: 1px;
    }
  }
}
.itemWrap {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  .item {
    width: 33%;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .item-label {
      width: 80px;
      color: rgb(107 114 128);
    }
    .item-value {
      flex: 1;
      color: rgb(17 24 39);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.fkItem {
  margin-bottom: 20px;
  border: 1px solid #d6d6d6;
  padding: 20px;
  border-radius: 10px;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.imgs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.files {
  // margin-top: 10px;
  a {
    font-size: 14px;
    margin-bottom: 5px;
    &:hover {
      color: #409eff;
    }
  }
}

.action-content {
  margin-top: 20px;
  img {
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 20px;
    &:hover {
      border: 1px dashed #409eff;
    }
  }
  :deep(.el-upload__input) {
    display: none;
  }
  :deep(.image-upload) {
    margin-bottom: 20px;
    .el-upload-list__item,
    .el-upload--picture-card {
      height: 65px;
      width: 65px;
    }
    .el-upload--picture-card {
      line-height: 70px;
    }
  }
}
</style>
