<template>
  <view class="view-bg min-page">
    <view class="u-p-t-24">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="uForm">
        <u-cell-group class="bg-white" :border="false">
          <u-cell
            :border="false"
            class="complain-cell"
            isLink
            @click="showBuild = true"
            size="large"
          >
            <view slot="title">
              反馈类型
              <text class="text-error u-m-l-10">*</text>
            </view>
            <template slot="value">
              <view v-if="form.feedbackType" class="nowrap">{{ form.feedbackTypeNeme }}</view>
              <view class="text-tip" v-else>请选择反馈类型</view>
            </template>
          </u-cell>
          <u-cell :border="false" class="complain-cell" :isLink="false" size="large">
            <view slot="title" style="width: 150rpx"> 联系电话 </view>
            <view slot="value">
              <u--input
                v-model="form.createUserPhone"
                type="number"
                maxlength="11"
                inputAlign="right"
                placeholder="联系电话"
                border="none"
                confirmType="done"
                suffixIcon="edit-pen"
                suffixIconStyle="color:#86909C;font-size:44rpx;"
              />
            </view>
          </u-cell>
        </u-cell-group>
        <u-cell-group class="bg-white u-m-t-24 u-p-t-30" :border="false">
          <u-cell :border="false">
            <view slot="title">
              问题描述
              <text class="text-error u-m-l-10">*</text>
            </view>
          </u-cell>
          <view>
            <view class="u-p-lr-20">
              <u--textarea
                v-model="form.feedbackContent"
                placeholder="请描述你的问题或上传图片"
                count
                maxlength="300"
                height="140"
                style="background: #f7f8fa"
                border="none"
                confirmType="done"
              />
            </view>
            <view class="u-m-tb-32 u-p-lr-16">
              <upload-img
                ref="uploadImgRef"
                :limit="5"
                :type="['image']"
                :option="uploadImgValue"
                @change="changeImg"
              />
            </view>
          </view>
        </u-cell-group>
        <!-- 隐藏验证内容 -->
        <view v-show="false">
          <u-form-item prop="feedbackContent" labelWidth="0"></u-form-item>
          <u-form-item prop="sericeType" labelWidth="0"></u-form-item>
          <u-form-item prop="address" labelWidth="0"></u-form-item>
        </view>
      </u-form>

      <view style="height: 280rpx"></view>
      <view class="flex justify-center align-center bg-white u-p-40 footer">
        <u-button
          type="primary"
          class="u-p-tb-20 jane-btn"
          style="height: 88rpx"
          @click="handleSubmit"
          >提 交</u-button
        >
      </view>
      <u-action-sheet
        class="jane-model"
        :actions="feedbackTypeList"
        title="选择反馈类型"
        :show="showBuild"
        cancelText="取消"
        @close="showBuild = false"
        @select="selectBuild"
      ></u-action-sheet>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        complaintAdviceId: '', //投诉建议ID
        fileIdArr: [], //反馈文件id集合
        createUserPhone: '', //联系电话
        feedbackType: '', // 反馈类型
        feedbackTypeNeme: '', //反馈类型 页面渲染
        feedbackContent: '', // 反馈内容
      },
      rules: {
        feedbackType: {
          type: 'string',
          required: true,
          message: '请选择反馈类型',
          trigger: ['change'],
        },
        feedbackContent: {
          type: 'string',
          required: true,
          message: '请填写问题描述',
          trigger: ['change', 'blur'],
        },
      },
      showBuild: false,
      feedbackTypeList: [],
      uploadImgValue: {
        imageList: [],
        videoList: [],
      },
    };
  },
  onShow() {
    this.handleGet();
    const user = this.UserInfo;
    if (user && user.mobile) {
      this.form.createUserPhone = user.mobile;
    }
  },
  methods: {
    // 获取反馈类型
    async handleGet() {
      const data = await this.$API.SYS.getDictList('-130');
      this.feedbackTypeList = data.map(item => {
        return {
          name: item.value,
          key: item.key,
        };
      });
    },
    selectBuild(e) {
      const { name, key } = e;
      this.form.feedbackType = key;
      this.form.feedbackTypeNeme = name;
      this.showBuild = false;
    },
    // 选择图片
    changeImg({ imageList = [] }) {
      this.form.fileIdArr = imageList.map(item => item.sFid);
    },
    handleSubmit() {
      this.$refs.uForm
        .validate()
        .then(res => {
          if (this.form.feedbackType) {
            this.$API.COMPLAIN_API.edit(this.form).then(res => {
              uni.y.showToast('提交成功');
              setTimeout(() => {
                uni.redirectTo({
                  url: '/pages/my/complain/index',
                });
              }, 2000);
            });
          } else {
            uni.$u.toast('请选择反馈类型');
          }
        })
        .catch(errors => {
          if (errors && errors[0]) {
            const msg = errors[0]['message'] || '';
            uni.y.toast(msg);
          }
        });
    },
  },
};
</script>

<style>
.complain-cell {
  .u-cell__body {
    padding: 40rpx 32rpx 44rpx 32rpx;
  }
}
</style>