<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '意见反馈',
    // navigationBarBackgroundColor: '#f6d7a7',
  },
}
</route>

<template>
  <view class="container">
    <view class="top-box pt-10 pb-10 px-2">
      <wd-form ref="form" :model="model">
        <wd-textarea
          v-model="model.text"
          :maxlength="200"
          clearable
          show-word-limit
          placeholder="点击填写:我们想听听您的心声,您描述的问题越全,问题越可能有效的解决"
          :rules="[{ required: false, message: '请输入您的意见' }]"
        />

        <wd-upload
          :file-list="fileList"
          image-mode="aspectFill"
          :action="action"
          :limit="6"
          @change="handleChange"
          accept="all"
          multiple
        ></wd-upload>
        <view class="footer mt-20">
          <wd-button type="primary" size="large" @click="handleSubmit" block>提 交</wd-button>
        </view>
      </wd-form>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useMessage } from 'wot-design-uni'

defineOptions({
  name: 'Login',
})

const { loading, data, run } = useUpload({ user: '菲鸽' })
const fileList = ref<any[]>([
  {
    url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg',
  },
])

const action: string =
  'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload'

function handleChange({ fileList: files }) {
  fileList.value = files
}
// 用密码校验
const validatorPassword = (val) => {
  if (String(val).length < 6) {
    return Promise.reject('密码不能少于6个字符')
  } else {
    return Promise.resolve()
  }
}
const model = reactive<{
  text: string
}>({
  text: '',
})

const form = ref()
const message = useMessage()
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        console.log(model, fileList, '提交')
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>

<style lang="scss" scoped>
.container {
  width: 90%;
  padding: 0 10rpx;
  margin: 20rpx auto;
  background-color: #fff;
  // border: 1px solid red;
  border-radius: 4%;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
}

::v-deep .wd-icon-user:before,
.wd-icon-user[data-v-7f3ba649]:before {
  padding: 0 20rpx;
  font-size: 46rpx;
  color: #f99304;
}
::v-deep .wd-icon-lock-on:before,
.wd-icon-lock-on[data-v-7f3ba649]:before {
  padding: 0 20rpx;
  font-size: 46rpx;
  color: #f99304;
}
::v-deep .wd-icon-lock-off:before,
.wd-icon-lock-on[data-v-7f3ba649]:before {
  padding: 0 20rpx;
  font-size: 46rpx;
  color: #f99304;
}
</style>
