<template>
  <u-navbar :titleStyle="{ color: '#fff' }" :autoBack="true" title="处置内容" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
    <template #left>
      <view class="u-navbar__content__left__item">
        <u-icon name="arrow-left" size="20" color="#fff"></u-icon>
      </view>
    </template>
  </u-navbar>

  <oa-scroll
    customClass="errorDisposition-container scroll-height"
    :customStyle="{ height: `calc(100vh - (44px + ${proxy.$settingStore.StatusBarHeight} + ${proxy.$settingStore.tabBarHeight}))` }"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <u--form ref="uForm" :model="form" :rules="rules" labelWidth="90">
        <view style="padding: 10px 10px 20px 20px; background: #ffffff">
          <u-form-item label="事件名称" prop="eventName" :borderBottom="true" required>
            <view style="color: #666666">{{ form.eventName }}</view>
          </u-form-item>
          <u-form-item label="处置图片" :borderBottom="true">
            <oa-upload :uploadCount="5" :uploadList="form.imageList" :uploadListSrc="'url'" @uploadSuccessChange="uploadSuccessChange" @uploadDeleteChange="uploadDeleteChange"></oa-upload>
          </u-form-item>
          <u-form-item label="备注" prop="remark" :borderBottom="true">
            <u--textarea v-model="form.handleContent" placeholder="备注信息，最多可输入50个字" :count="true" border="none" maxlength="50"></u--textarea>
          </u-form-item>
        </view>
      </u--form>

      <view class="app-button">
        <view class="app-button-padding"></view>
        <view class="app-button-fixed">
          <u-button class="app-buttom" type="primary" @click="handleSubmit()" shape="circle"> 提交 </u-button>
        </view>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow } from "@dcloudio/uni-app";
import { reactive, toRefs, getCurrentInstance } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { errorApi } from "@/api/business/zhaf/xunJian/index.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  form: {
    eventName: "", //事件名称
    imageList: [],
    handleImage: "",
    handleContent: "",
    id: undefined,
  },
});

const { form } = toRefs(state);

/**
 * @按钮点击事件
 */
function handleSubmit() {
  if (!proxy.$common.isNetwork()) {
    return false;
  }

  var param = {
    eventName: state.form.eventName, //事件名称
    handleImage: JSON.stringify(state.form.imageList),
    handleContent: state.form.handleContent,
    id: state.form.id,
  };
  errorApi()
    .Update(param)
    .then(() => {
      proxy.$modal.msg("提交成功");
      proxy.$tab.navigateBack(2);
    })
    .catch((err) => {
      proxy.$modal.msg(err);
    });
}

/**
 * @图片上传成功回调
 */
function uploadSuccessChange(e) {
  state.form.imageList.push({
    name: e.name,
    url: e.url,
  });
}

/**
 * @图片删除回调
 */
function uploadDeleteChange(e) {
  state.form.imageList = e;
}

onLoad((options) => {
  state.form.id = options.id;
  state.form.eventName = options.eventName;
});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>

<style lang="scss"></style>