<template>
  <view class="out-box">
    <form @reset="formReset">
      <view class="uni-form-item">
        <view class="title">类型：</view>
        <view class="uni-form-item-content">
          <uv-radio-group v-model="FormData.opinionType" labelColor="#808080">
            <uv-radio
              :customStyle="{ margin: '8px' }"
              v-for="(item, index) in radioList"
              :key="index"
              :label="item.dictLabel"
              :name="item.dictValue"
            >
            </uv-radio>
          </uv-radio-group>
        </view>
      </view>
      <view class="uni-form-item">
        <view class="title">问题描述：</view>
        <uv-textarea
          v-model="FormData.opinionContent"
          autoHeight
          placeholder="请输入"
          maxlength="300"
          :customStyle="customStyle"
        ></uv-textarea>
      </view>
      <view class="uni-form-item">
        <view class="title">上传凭证：</view>
        <uploadImg v-model="FormData.opinionImgs" :imgCount="6"></uploadImg>
      </view>
    </form>
  </view>

  <view class="footer">
    <view class="history" @click="toHistory">历史记录</view>
    <uv-button
      type="error"
      color="#EB5153"
      text="确认提交"
      shape="circle"
      @tap="formSubmit"
      :loading="btnLoading"
    ></uv-button>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { userOpinionAdd } from "@/api/complaints";
import { dataType } from "@/api/common";

const radioList = ref([]);
const FormData = ref({
  opinionType: undefined,
  opinionContent: "",
  opinionImgs: [],
});
const customStyle = {
  minHeight: "200rpx",
  fontSize: "26rpx",
  borderColor: "#e6e6e6",
};
const btnLoading = ref(false);
const toHistory = () => {
  uni.navigateTo({
    url: "/pages/set/feedback/history",
  });
};
const formSubmit = (e) => {
  // console.log("formSubmit", FormData.value);
  if (!FormData.value.opinionType) {
    uni.$uv.toast("请选择类型");
    return;
  }
  if (!FormData.value.opinionContent) {
    uni.$uv.toast("请输入问题描述");
    return;
  }
  btnLoading.value = true;
  userOpinionAdd(FormData.value)
    .then((res) => {
      uni.$uv.toast("提交成功");
      btnLoading.value = false;
      FormData.value = {
        opinionType: undefined,
        opinionContent: "",
        opinionImgs: [],
      };
    })
    .catch((err) => {
      uni.$uv.toast("提交失败");
      btnLoading.value = false;
    });
};
const formReset = (e) => {};

onMounted(() => {
  dataType("user_opinion_type").then((res) => {
    if (res.code == 200) {
      radioList.value = res.data || [];
    }
  });
});
</script>

<style lang="scss" scoped>
.out-box {
  padding: 30rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: normal;

  .uni-form-item {
    width: 100%;
    margin-bottom: 30rpx;

    &:first-child {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;

      .title {
        margin-bottom: 0;
      }

      .uni-form-item-content {
        margin-left: auto;

        label {
          margin-left: 20rpx;

          uni-text {
            font-size: 28rpx;
            color: #808080;
          }
        }

        :deep(.uni-radio-input) {
          width: 35rpx;
          height: 35rpx;
        }
      }
    }

    .title {
      margin-bottom: 20rpx;
      font-size: 28rpx;
      color: #1a1a1a;
    }

    // :deep(uni-textarea) {
    //   width: 100%;
    //   min-height: 200rpx;
    //   padding: 14rpx 20rpx;
    //   font-size: 26rpx;
    //   border: 1rpx solid #e6e6e6;
    //   background-color: #E6E6E6;
    //   border-radius: 10rpx;
    //   box-sizing: border-box;

    //   .uni-textarea-placeholder {
    //     color: #cccccc;
    //   }
    // }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 20rpx 54rpx;
  text-align: center;
  box-sizing: border-box;
  background-color: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  margin-bottom: 30rpx;
  :deep(.uv-button) {
    height: 90rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: normal;
    text-align: center;
    color: #ffffff;
  }

  .history {
    display: inline-block;
    margin: 0 auto 40rpx;
    padding-bottom: 5rpx;
    font-size: 32rpx;
    color: #0090ff;
    border-bottom: 1rpx solid #0090ff;
  }
}
</style>
