<template>
  <div>
    <el-dialog title="申请须知设置" v-model="dialogVisible">
      <div>
        <Editor v-model:value="content"></Editor>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, defineProps, defineEmits, watch } from "vue";
import Editor from "@/components/Editor.vue";
import { ElMessage } from "element-plus";
import { request } from "@/utils";

import { useUserStoreHook } from "@/store/modules/user";
const channelId = useUserStoreHook()?.profile.id;

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["update:show"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});
const content = ref("");
watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      getGuide();
    } else {
    }
  }
);

const getGuide = () => {
  request
    .get("/articleService/open/serviceProvider", {
      params: {
        mechanismId: channelId
      }
    })
    .then(resp => {
      content.value = resp.data.guide;
    });
};
const handleSubmit = () => {
  if (!content.value) {
    return ElMessage.error("申请须知不能为空");
  }
  request
    .post("/articleService/serviceProvider/guide", {
      guide: content.value
    })
    .then(resp => {
      ElMessage.success(resp.message);
      dialogVisible.value = false;
    });
};
</script>
