<template>
  <t-card :bordered="false">
    <div class="form-step-container">
      <t-button @click="add">新增商家</t-button>
      <t-table
        rowKey="index"
        :data="list"
        :columns="columns"
        :stripe="false"
        :bordered="false"
        :hover="true"
        size="large"
        table-layout="auto"
        cellEmptyContent="-"
      >
        <template #select="{ row }">
          <t-space size="24px" v-if="row.id!=0">
            <t-button theme="warning" @click="edit(row)">编辑</t-button>
            <t-popconfirm  content="确认删除吗，行业下的会员将归类为：其他行业" @confirm="del(row)">
              <t-button theme="danger" >删除</t-button>
            </t-popconfirm>
          </t-space>
        </template>
      </t-table>
    </div>
    <t-dialog :header="isEdit?'编辑商家':'新增商家'" :visible="addMode" :onClose="onCloseMy" @confirm="onSubmit"    width="40%" top="20px">
      <t-form  layout="inline">
        <t-form-item label="商家Logo">
          <t-upload
            :action="$store.state.user.apiUrl+'/api/common/upload'"
            v-model="addForm.news_image_show"
            theme="image"
            tips="请选择单张图片文件上传"
            accept="image/*"
            :format-response="formatResponse"
          ></t-upload>
        </t-form-item>
        <div style="width: 100%"></div>
        <t-form-item label="商家名称" name="name">
          <t-input placeholder="请输入商家名称"/>
        </t-form-item>
        <t-form-item label="商家电话" name="name">
          <t-input placeholder="请输入商家电话"/>
        </t-form-item>
        <t-form-item label="商家类别" name="name">
          <t-select :style="{ width: '170px' }">
            <t-option key="1" label="餐饮" value="1"/>
            <t-option key="2" label="服务" value="2"/>
            <t-option key="3" label="酒店" value="3"/>
            <t-option key="4" label="学习" value="4"/>
          </t-select>
        </t-form-item>
        <t-form-item label="商家地址" name="name">
          <t-input placeholder="请输入商家地址"/>
        </t-form-item>
        <t-form-item label="纬度" name="name">
          <t-input placeholder="请输入商家地址纬度"/>
        </t-form-item>
        <t-form-item label="经度" name="name">
          <t-input placeholder="请输入商家地址经度"/>
        </t-form-item>
        <t-form-item label="商家简介" name="association_desc">
          <div style="border: 1px solid #ccc;width: 467px;">
            <!-- 工具栏 -->
            <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_desc">
          <div style="border: 1px solid #ccc;width: 467px;">
            <!-- 工具栏 -->
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              mode="default"
              :editor="editorHd"
              :defaultConfig="toolbarConfig"
            />

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

</template>
<script lang="ts">
import store from "@/store";
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
export default {
  components: {Editor, Toolbar},
  data() {
    return {
      addForm:{},
      addMode: false,
      isEdit: false,
      editID:0,
      list: [],
      columns: [
        {colKey: 'a1', title: '商家LOGO'},
        {colKey: 'a2', title: '商家名称'},
        {colKey: 'a3', title: '商家电话'},
        {colKey: 'a4', title: '商家地址'},
        {colKey: 'a5', title: '商家简介'},
        {colKey: 'a6', title: '商家活动'},
        {colKey: 'select', title: '操作', width: 200},
      ],
      editor: null,
      editorHd: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() {
    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: {
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
    onCreatedHd(editor){
      this.editorHd = Object.seal(editor);
    },
    formatResponse(res) {
      console.log(res);
      this.addForm.news_image = res.data.url;
      return {url: res.data.fullurl};
    },
    del(d){
      console.log(d);
      this.$request
        .post('/industry/del',{id:d.id})
        .then((res) => {
          if(res.code==1){
            this.$message.success(res.msg);
            this.getList();
          }else {
            this.$message.error(res.msg);
          }
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    add(){
      this.industry_description='';
      this.industry_name= '';
      this.addMode=true;
      this.isEdit=false;
    },
    edit(d){
      this.editID=d.id;
      this.industry_name=d.industry_name;
      this.industry_description=d.industry_description;
      this.addMode=true;
      this.isEdit=true;
    },
    getList() {
      this.$request
        .post("/industry")
        .then((res) => {
          console.log(res);
          this.list = res.data;
          this.list.push({id:-1,industry_name:'其他行业'});
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onSubmit() {
      if (this.industry_name == '') {
        this.$message.error('行业名称不能为空');
        return;
      }
      var url='/industry/add';
      if(this.isEdit){
        url='/industry/update';
      }
      this.$request
        .post(url,{industry_name:this.industry_name,industry_description:this.industry_description,id:this.editID})
        .then((res) => {
          if(res.code==1){
            this.$message.success(res.msg);
            this.addMode=false;
            this.getList();
          }else {
            this.$message.error(res.msg);
          }
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onCloseMy() {
      this.addMode = false;
    }
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

