<!--
 * @Author: Fly
 * @Date: 2025-12-10 16:44:11
 * @LastEditTime: 2025-12-20 09:19:55
 * @Description: 
-->
<template>
  <Drawer :title="DrawerTitle" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
    :size="$drawerWidth(800)" :wrapperClosable="true">
    <el-form :model="formData" :rules="formRules" inline-message ref="FormEditRef" label-width="120px"
      class="form-edit-content">
      <div class="form-headline">提交信息</div>
      <div class="form-content">
        <el-form-item label="类型：">
          <dict-tag :options="dict.type.user_opinion_type" :value="formData.opinionType" />
          <!-- {{ formData.opinionType | TableItemEmpty }} -->
        </el-form-item>
        <el-form-item label="提交时间：">
          {{ formData.submitTime | TableItemEmpty }}
        </el-form-item>
        <el-form-item label="问题描述：">
          {{ formData.opinionContent | TableItemEmpty }}
        </el-form-item>
        <el-form-item label="上传凭证：">
          <template v-if="formData.opinionImgs && formData.opinionImgs.length > 0">
            <div class="opinion-box">
              <el-image v-for="(url, index) in formData.opinionImgs" :key="url" :src="url" lazy
                :preview-src-list="formData.opinionImgs" :initial-index="index" />
            </div>
          </template>
        </el-form-item>
      </div>


      <div class="form-headline">回复</div>
      <template v-if="!formData.opinionStatus">
        <el-form-item label-width="0" prop="operateContent">
          <el-input type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入内容" v-model="formData.operateContent" />
        </el-form-item>
      </template>
      <template v-else>
        <div class="form-content">
          <el-form-item label="回复时间：">
            {{ formData.operateTime | TableItemEmpty }}
          </el-form-item>
          <el-form-item label="回复内容：">
            {{ formData.operateContent | TableItemEmpty }}
          </el-form-item>
        </div>
      </template>
    </el-form>
    <template v-slot:footer>
      <template v-if="!formData.opinionStatus">
        <el-button type="primary" @click.stop="submitForm()" :loading="submitLoading">回复</el-button>
      </template>
      <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
    </template>
  </Drawer>
</template>

<script>
import { getOpinionDetail, handleOpinion } from "@/api/feedback.js";
export default {
  name: '',
  dicts: ['user_opinion_type'],
  data() {
    return {
      DrawerTitle: '',
      DrawerVisible: false,
      skeletonLoading: false,

      formRules: {
        operateContent: [{ required: true, trigger: ['blur', 'change'], message: '请输入回复内容' }]
      },
      formData: {
        operateContent: ''
      },
      submitLoading: false,
    };
  },
  created() {
    // setTimeout(() => { this.openHandle({ opinionId: 5 }) }, 100);
  },

  methods: {
    async openHandle(row) {
      const { opinionId } = row
      this.skeletonLoading = true;
      this.DrawerVisible = true;
      try {
        if (opinionId) {
          const { data } = await getOpinionDetail(opinionId);
          this.formData = data;
        } else {
          throw new Error('');
        }
      } catch (error) {
        this.formData = row;
      } finally {
        this.DrawerTitle = this.formData.opinionStatus ? '回复详情' : '回复';
        this.skeletonLoading = false;
      }
    },
    // 


    submitForm() {
      this.$refs.FormEditRef.validate(async (valid) => {
        if (valid) {
          this.submitLoading = true;
          try {
            await handleOpinion(this.formData);
            this.$successMsg('回复成功');
            setTimeout(() => {
              this.$refs.FormEditRef.resetFields();
              this.DrawerVisible = false;
              this.$emit('success');
            }, 1000);
          } catch (error) {

          } finally {
            this.submitLoading = false;
          }
        } else {
          this.$warningMsg('请填写回复内容');
        }
      });
    },

  },
};
</script>
<style lang="scss" scoped>
.opinion-box {
  display: flex;
  flex-wrap: wrap;

  .el-image {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
