<!--教育培训-->
<template>
  <div class="educate">
    <van-nav-bar
      title="教育培训"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-form>
      <van-field
        v-model="form.deptName"
        name="当前机构"
        label="当前机构"
        placeholder="当前机构"
        readonly
      />
      <van-field
        v-model="form.title"
        name="标题"
        label="标题"
        placeholder="标题"
        readonly
      />
      <van-field
        v-model="form.script"
        name="简要描述"
        label="简要描述"
        type="textarea"
        placeholder="简要描述"
        readonly
      />
      <van-field name="uploader" label="相关照片">
        <template #input>
          <van-uploader capture="camera" v-model="form.imgUrl" ref="upload" />
        </template>
      </van-field>
    </van-form>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="danger"
        native-type="submit"
        @click="submit()"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import { getDetail, save } from "../api";
export default {
  name: "educate",
  data() {
    return {
      form: {
        id: "",
        deptName: "",
        title: "",
        script: "",
        imgUrl: [],
      },
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    //获取详情数据
    getData() {
      const id = this.$route.params.dataId;
      getDetail(id).then((res) => {
        if (res.data.code !== 200) {
          return this.$message.error(res.data.msg);
        }
        this.form = res.data.data;
      });
    },
    //提交表单
    submit() {
      const formData = new FormData();
      this.$refs["upload"].value.forEach(element => {
        formData.append("imgUrl", element.file);
      });
      formData.append("id", this.$route.params.dataId);
      let data = formData;
      save(data).then((res) => {
        if (res.data.code !== 200) {
          return this.$message.error(res.data.msg);
        }
        this.$router.push({ name: "educate-list" });
      });
    },
  },
};
</script>

<style scoped>
.educate {
  width: 100%;
  height: 400px;
}
</style>
