<!-- 意见建议处理 -->
<template>
  <scroll-view class="bs-page" scroll-y="true">
    <!-- 页面标题 -->

    <!-- 问题详情卡片 -->
    <view class="conItem">
      <view class="conItemTitle">
        <image src="/static/img/维修列表里.png" class="titleImg"></image>
        <text class="titleName"
          >{{ detail.apartmentName }}{{ detail.position }}</text
        >
      </view>
      <view class="contBg">
        <view class="info-row">
          <view class="info-label">问题描述：</view>
          <view class="info-value">
            {{detail.faultDescribe}}
          </view>
        </view>

         <view class="info-row">
          <text class="info-label">图片/视频：</text>
          <view
            class="image-preview-item"
            v-for="(u, t) in detail.images"
            :key="t"
            @click="previewImage(detail.images, t)"
          >
            <image :src="u.url" class="problem-image" mode="aspectFill"></image>
          </view>
        </view>

        <view class="info-row">
          <text class="info-label">报事人：</text>
          <text class="info-value">张军</text>
        </view>

        <view class="info-row">
          <text class="info-label">报事人电话：</text>
          <text class="info-value">13365001010</text>
        </view>

        <view class="info-row">
          <text class="info-label">上报时间：</text>
          <text class="info-value">2025-05-06 15:30:20</text>
        </view>
      </view>
    </view>

    <!-- 处理状态卡片 -->
    <view class="conItem">
      <view class="conHead">
        <u-cell-group :border="false">
          <u-cell
            title="处理状态"
            :isLink="true"
            :border="true"
            :value="form.stateName||'请选择'"
            @click="statusShow = true"
          >
            <view slot="icon" style="color: #f93838">*</view>
          </u-cell>
        </u-cell-group>
      </view>

      <view class="form-section">
        <view class="form-label" style="margin-top: 20rpx">处理说明</view>
        <u--textarea
          v-model="form.handleDescribe"
          placeholder="请输入详细说明"
          border="none"
          height="200rpx"
          custom-style="background:#f7f7f7;border:none;border-radius:12rpx;padding:16rpx;margin-top:16rpx;"
        ></u--textarea>
      </view>

      <view class="form-section">
        <view class="form-label">上传图片/视频</view>
        <u-upload
          :max-count="10"
          :multiple="true"
          :preview-full-image="true"
          :deletable="true"
          :show-upload-list="true"
          :fileList="fileList"
          :auto-upload="false"
          accept="all"
          :maxSize="10 * 1024 * 1024"
          @oversize="oversize"
          @delete="onDelete"
          :disabled="true"
        >
          <view class="custom-upload-btn" @click.stop="chooseMedia">
            <view class="icon-box">
              <image
                class="camera-icon"
                src="/static/img/camera-icon.png"
                mode="aspectFill"
              ></image>
            </view>
            <view class="upload-tips">点击上传</view>
          </view>
        </u-upload>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="btn" @click="handleSubmit">提交</view>

    <!-- 状态选择器 -->
    <u-action-sheet
      :show="statusShow"
      :actions="statusList"
      title="请选择处理状态"
      @close="statusShow = false"
      @select="handleStatusSelect"
    >
    </u-action-sheet>
  </scroll-view>
</template>

<script>
import { uploadImage, getRepair, handleRepair } from "@/pages/api";

export default {
  data() {
    return {
      statusShow: false,
      statusList: [
        { dictValue: "1", name: "未维修" },
        { dictValue: "2", name: "维修中" },
        { dictValue: "3", name: "已维修" },
        { dictValue: "4", name: "已报废" },
        { dictValue: "5", name: "无需维修" },
      ],
      form: {
        stateName: "",
        state: "",
        handleDescribe: "",
        imageList: [],
      },
      fileList: [],
      detail: {},

    };
  },
  onLoad(options) {
    this.getReportData(options.id);
  },
  computed: {
  },
  methods: {
    getReportData(id) {
      getRepair(id).then((res) => {
        this.detail = res.data;
        this.form = {
          stateName: this.statusList.find(
            (item) => item.dictValue == res.data.state
          ).name,
          state: res.data.state,
          handleDescribe: res.data.handleDescribe,
        };
        this.fileList = res.data.handleImages;
      });
    },
    chooseMedia() {
      uni.chooseMedia({
        count: 10 - this.fileList.length,
        mediaType: ["image", "video"],
        sourceType: ["album", "camera"],
        maxDuration: 60,
        camera: "back",
        success: async (res) => {
          const files = res.tempFiles;
          const oversizeFiles = files.filter(
            (file) => file.size > 10 * 1024 * 1024
          );
          if (oversizeFiles.length > 0) {
            this.$u.toast("请选择10MB以内大小的图片/视频！");
            return;
          }
          uni.showLoading({ title: "上传中...", mask: true });
          try {
            const files = res.tempFiles;
            for (let i = 0; i < files.length; i++) {
              const file = files[i];
              const filePath = file.tempFilePath;
              const type =
                file.fileType ||
                (filePath.match(/\.(mp4|mov|avi|wmv|flv|mkv)$/i)
                  ? "video"
                  : "image");
              const uploadRes = await uploadImage(filePath);
              this.fileList.push({
                url: uploadRes.data?.url || uploadRes.url || uploadRes.path,
                name: uploadRes.data?.name || uploadRes.name || "",
                type: type,
                status: "success",
              });
            }
            this.form.imageList = this.fileList.map((v) => ({
              name: v.name || "",
              format: v.type,
              url: v.url,
            }));
          } catch (e) {
            uni.showToast({ title: "上传失败", icon: "none" });
          } finally {
            uni.hideLoading();
          }
        },
        fail: () => {
          uni.hideLoading();
        },
      });
    },

    oversize(e) {
      this.$u.toast("请传10MB以内大小的图片/视频！");
      return false;
    },

    onDelete(event) {
      this.fileList.splice(event.index, 1);
      var arry = [];
      this.fileList.filter((v, i) => {
        arry.push({
          name: v.name || "",
          format: v.type,
          url: v.url,
        });
      });
      this.form.imageList = arry;
    },
      previewImage(item, index) {
      uni.previewImage({
        current: index,
        urls: item.map((item) => item.url),
        success: (res) => {
          console.log("预览成功");
        },
        fail: (err) => {
          console.log("预览失败", err);
        },
      });
    },

   async handleSubmit() {
      if (!this.form.state) {
        uni.showToast({
          icon: "none",
          title: "请选择处理状态",
        });
        return;
      }

     let parmas = {
        id: this.detail.id,
        state: Number(this.form.state),
        handleDescribe: this.form.handleDescribe,
        handleImages: this.form.imageList,
      };

       const response = await handleRepair(parmas);
      if (response.code === 200) {
        uni.showToast({
          icon: "success",
          title: "提交成功!",
          success: () => {
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/tabBar/work/index",
                success: () => {
                  this.fileList = [];
                },
              });
            }, 1000);
          },
        });
      }
    },

    handleStatusSelect(e) {
      this.form.stateName = e.name;
      this.form.state = e.dictValue;
    },
  },
};
</script>

<style lang="scss" scoped>
.bs-page {
  width: 100%;
  height: 100vh;
  padding-bottom: 50rpx;
  box-sizing: border-box;
  background: #fafafa;
  position: relative;
}

.contentImg {
  position: absolute;
  left: 0rpx;
  top: 0rpx;
  width: 100%;
  height: 280rpx;
  z-index: 0;
}

.conItemTitle {
  display: flex;
  width: 100%;
  margin-bottom: 20rpx;
  align-items: center;
}

.titleImg {
  width: 38rpx;
  height: 38rpx;
}

.titleName {
  color: rgba(0, 0, 0, 1);
  font-size: 28rpx;
  text-align: left;
  margin-left: 10rpx;
  font-weight: bold;
}

.header-icon {
  width: 32rpx;
  height: 32rpx;
  background: #4caf50;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  font-size: 20rpx;
  color: white;
}

.header-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.conItem {
  width: calc(100% - 40rpx);
  border-radius: 16rpx;
  margin-left: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  margin-top: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.contBg {
  background: #f8f8f8;
  padding: 30rpx 20rpx;
  border-radius: 20rpx;
  margin-top: 20rpx;
}

.section-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 16rpx;
  margin-top: 24rpx;
}

.section-title:first-child {
  margin-top: 0;
}

.problem-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.image-section {
  margin-bottom: 20rpx;
}

.problem-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-top: 5rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.info-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15rpx;
  line-height: 1.5;
  flex-wrap: wrap;
}

.info-label {
  color: #a9afba;
  font-size: 28rpx;
  min-width: 156rpx;
  flex-shrink: 0;
  text-align: right;
}

.info-value {
  color: black;
  font-size: 26rpx;
  flex: 1;
}

.form-section {
  margin-bottom: 30rpx;
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-label {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.required {
  color: #ff4444;
  margin-right: 8rpx;
  font-size: 30rpx;
}

.picker-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #f0f0f0;
  cursor: pointer;
}

.picker-placeholder {
  color: #cccccc;
  font-size: 28rpx;
}

.picker-arrow {
  color: #cccccc;
  font-size: 28rpx;
}

.custom-upload-btn {
  width: 160rpx;
  height: 160rpx;
  background: #fafafa;
  border: 2rpx solid #f0f0f0;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20rpx 16rpx 0 0;
}

.icon-box {
  width: 60rpx;
  height: 60rpx;
  background: #ceeced;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-icon {
  width: 36rpx;
  height: 36rpx;
}

.upload-tips {
  color: #bbb;
  font-size: 24rpx;
  margin-top: 8rpx;
}

.u-upload__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20rpx;
}

.u-upload__preview {
  border-radius: 16rpx;
  overflow: hidden;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
}

.u-upload__preview {
  border-radius: 16rpx;
  overflow: hidden;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
}

.btn {
  width: 414rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 600rpx;
  background: linear-gradient(
    86.25deg,
    rgba(13, 198, 198, 1) 3.03%,
    rgba(19, 194, 194, 1) 3.03%,
    rgba(70, 219, 213, 1) 96.43%
  );
  color: rgba(255, 255, 255, 1);
  font-size: 34rpx;
  text-align: center;
  margin: auto;
  margin-top: 40rpx;
  position: relative;
  z-index: 1;
}
::v-deep .u-cell__body {
  padding: 20rpx 0 !important;
}
</style>
