<template>
  <t-card :bordered="false">
    <div class="form-step-container">
      <t-row>
        <t-col :span="6" :offset="3">
          <t-form>
            <t-form-item label="协会头像" name="association_image">
              <t-upload
                :action="$store.state.user.apiUrl+'/api/common/upload'"
                v-model="addForm.association_image_show"
                theme="image"
                tips="请选择比例为（1：1）单张图片文件上传"
                accept="image/*"
                :format-response="(response) => formatResponse(response, 0)"
              ></t-upload>
            </t-form-item>
            <t-form-item label="协会ico" name="ico_image">
              <t-upload
                :action="$store.state.user.apiUrl+'/api/common/upload'"
                v-model="addForm.ico_image_show"
                theme="image"
                tips="请选择比例为（1：1）ICO图片文件上传，用于后台页面标题小图标"
                accept=".ico"
                :format-response="(response) => formatResponse(response, 1)"
              ></t-upload>
            </t-form-item>
            <t-form-item label="协会名称" name="association_name">
              <t-input placeholder="请输入协会名称" v-model="addForm.association_name"/>
            </t-form-item>
            <t-form-item label="协会地址" name="association_dizhi">
              <t-input placeholder="请输入协会地址" v-model="addForm.association_dizhi"/>
            </t-form-item>
            <t-form-item label="协会邮箱" name="association_emal">
              <t-input placeholder="请输入协会邮箱" v-model="addForm.association_emal"/>
            </t-form-item>
            <t-form-item label="联系方式" name="association_phone">
              <t-input placeholder="请输入联系方式" v-model="addForm.association_phone"/>
            </t-form-item>
            <t-form-item label="协会简介" name="association_desc">
              <div style="border: 1px solid #ccc;">
                <!-- 工具栏 -->
                <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  mode="default"
                  :editor="editor"
                  :defaultConfig="toolbarConfig"
                />

                <Editor
                  style="height: 200px"
                  v-model="addForm.association_desc"
                  :defaultConfig="editorConfig"
                  mode="default"
                  @onCreated="(e) => onCreated(e)"
                />
              </div>
            </t-form-item>
            <t-form-item label="协会规章制度" name="association_guizhang">
              <div style="border: 1px solid #ccc;">
                <!-- 工具栏 -->
                <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  mode="default"
                  :editor="editorGuiZhang"
                  :defaultConfig="toolbarConfig"
                />

                <Editor
                  style="height: 200px"
                  v-model="addForm.association_guizhang"
                  :defaultConfig="editorConfig"
                  mode="default"
                  @onCreated="(e) => onCreatedGuiZhang(e)"
                />
              </div>
            </t-form-item>
            <t-form-item label="入会须知" name="ruhuixizhu">
              <div style="border: 1px solid #ccc;">
                <!-- 工具栏 -->
                <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  mode="default"
                  :editor="editorRuHui"
                  :defaultConfig="toolbarConfig"
                />

                <Editor
                  style="height: 200px"
                  v-model="addForm.ruhuixizhu"
                  :defaultConfig="editorConfig"
                  mode="default"
                  @onCreated="(e) => onCreatedRuHui(e)"
                />
              </div>
            </t-form-item>

          </t-form>
        </t-col>
      </t-row>
      <t-row justify="center">
      <t-col>
        <div style="padding: 30px">
          <t-button theme="primary" @click="onSubmit()" style="width: 150px" size="large">保存</t-button>
        </div>
      </t-col>
      </t-row>
    </div>
  </t-card>

</template>
<script lang="ts">
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
import store from "@/store";
export default {
  components: {Editor, Toolbar},
  data() {
    return {
      info:{},
      addForm:{
        association_name:'',
        association_phone:'',
        association_guizhang:'',
        association_emal:'',
        association_dizhi:'',
        association_desc:'',
        association_image:'',
        association_image_show:[],
        ico_image:'',
        ico_image_show:[],
        ruhuixizhu:''
      },
      editor: null,
      editorGuiZhang:null,
      editorRuHui:null,
      toolbarConfig: {
        showLinkImg: false,
        uploadImgShowBase64: true,
        excludeKeys: [
          'insertVideo', // 删除视频
          'uploadVideo',
          'group-video',
          'insertImage',// 删除网络图片上传
          'insertLink',// 删除链接
          'insertTable',// 删除表格
          'codeBlock',// 删除代码块
        ]
      },
      editorConfig: {
        placeholder: '',
        readOnly: false, // 是否只允许阅读，不可编辑
        autoFocus: true,
        MENU_CONF: {
          uploadImage: {
            server: store.state.user.apiUrl + '/api/common/upload',
            fieldName: 'file',
            meta:{
              association_id: 0,
            },
            customInsert(res: any, insertFn: InsertFnType) {  // TS 语法
              // customInsert(res, insertFn) {                  // JS 语法
              // res 即服务端的返回结果
              console.log(res);
              // 从 res 中找到 url alt href ，然后插入图片
              insertFn(res.data.fullurl, '', '')
            },
          }
        }
      },
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  mounted() {
    //this.member_id=this.$route.query.id;
    if(typeof (store.state.user.association)=='object'){
      this.association=store.state.user.association;
    }else{
      this.association=JSON.parse(store.state.user.association);
    }
    this.editorConfig.MENU_CONF.uploadImage.meta.association_id=this.association.association_id;
    this.getList();
  },
  methods: {
    formatResponse(res,type) {
      console.log(res);
      if(type==0){
        this.addForm.association_image = res.data.url;
      }else{
        this.addForm.ico_image = res.data.url;
      }

      return {url: res.data.fullurl};
    },
    getList() {
      this.$request
        .post("/association/find")
        .then((res) => {
          console.log(res);
          this.info = res.data;
          this.addForm.id=res.data.id;
          this.addForm.association_name=res.data.association_name;
          this.addForm.ico_image=res.data.ico_image;
          if(res.data.ico_image==''){
            this.addForm.ico_image_show=[];
          }else{
            this.addForm.ico_image_show=[{url:store.state.user.apiUrl+res.data.ico_image}];
          }
          this.addForm.association_phone=res.data.association_phone;
          this.addForm.association_emal=res.data.association_emal;
          this.addForm.association_dizhi=res.data.association_dizhi;
          this.addForm.association_desc=res.data.association_desc;
          this.addForm.association_guizhang=res.data.association_guizhang;
          this.addForm.association_image=res.data.association_image;
          this.addForm.association_image_show=[{url:store.state.user.apiUrl+res.data.association_image}];
          this.addForm.ruhuixizhu=res.data.ruhuixizhu;

        })
        .catch((e) => {
          console.log(e);
        });
    },
    onSubmit() {
      if (this.association_name == '') {
        this.$message.error('协会名称不能为空');
        return;
      }
      if (this.association_phone == '') {
        this.$message.error('协会联系方式不能为空');
        return;
      }
      if (this.association_emal == '') {
        this.$message.error('协会邮箱不能为空');
        return;
      }
      if (this.association_dizhi == '') {
        this.$message.error('协会地址不能为空');
        return;
      }
      if (this.association_desc == '') {
        this.$message.error('协会简介不能为空');
        return;
      }
      if (this.association_guizhang == '') {
        this.$message.error('协会规章制度不能为空');
        return;
      }
      if (this.association_image == '') {
        this.$message.error('协会头像不能为空');
        return;
      }
      if (this.ruhuixizhu == '') {
        this.$message.error('入会须知不能为空');
        return;
      }
      this.$request
        .post('/association/update',this.addForm)
        .then((res) => {
          if(res.code==1){
            this.$message.success(res.msg);
            //localStorage.setItem('associationInfo',  JSON.stringify(this.addForm) );
            this.getList();
          }else {
            this.$message.error(res.msg);
          }
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
    onCreatedGuiZhang(editor) {
      this.editorGuiZhang = Object.seal(editor);
    },
    onCreatedRuHui(editor){
      this.editorRuHui = Object.seal(editor);
    }
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
