<template>
  <div class="bodyBoxs">
    <!-- 引入 css -->
    <!-- <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"> -->

    <div class="boxs">
      <!-- <div style="margin-bottom: 15px;width: 700px;float: left">
        <el-input v-model="search" placeholder="请输入奖品名称" class="input-with-select">
          <el-button slot="append" style="width: 70px;" icon="el-icon-search" @click="getData(1)" />
          <el-button slot="append" style="border-left: rgb(220,223,230) solid 1px" icon="el-icon-download"
            @click="userExport"></el-button>
        </el-input>
      </div> -->
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column label="序号" prop="id" width="50"> </el-table-column>
        <!-- <el-table-column label="状态" prop="state" width="100">
          <template #default="{ row }">
            <el-tag :type="row.state == 0 ? 'info' : row.state == 1 ? 'warning' : 'success'" effect="dark">
              {{ row.state == 0 ? '待生成' : row.state == 1 ? '生成中' : '已完成' }}
            </el-tag>
          </template>
        </el-table-column> -->
        <el-table-column prop="name" label="标题" show-overflow-tooltip />
        <el-table-column prop="content" label="变量">
          <template #default="{ row }">
            <el-tag v-for="item in row.key">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="模板内容">
          <template #default="{ row }">
            <span class="content"> {{ row.model_data }}</span>
            <!-- <el-button v-if="row.state == 2" type="success" plain @click="preview(row.content)">详情预览</el-button> -->
          </template>
        </el-table-column>

        <el-table-column
          prop="created_at"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" @click="delTask(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      width="750px"
      title="编辑"
      :visible.sync="showContent"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="模板内容">
          <el-input
            type="textarea"
            rows="20"
            v-model="form.model_data"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleDialogOk(curId == -1 ? 0 : 1)">复制</el-button>
        </span> -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="determine()">确定</el-button>
      </span>
    </el-dialog>
    <!-- <img src="../../assets/404_images/404.png" alt="" > -->
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";

import { getTaskList } from "@/api/api";

import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      dialogVisible: false,
      form: {
        model_data: "",
        id:0
      },
      // html: '<p>hello123</p><p>hello666</p><img style="width:100%" src="https://source.unsplash.com/1280x720/?32322技巧大公开，让你事半功倍！"/><p>hello666</p> <img src="https://img04.sogoucdn.com/app/a/100520021/c0d197ccee07b022a0200315cc554124" alt="" >',
      html: "",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'

      isExchange: "2",
      isAward: "2",
      tableData: [],
      loading: false,
      awardId: "",
      page: 1,
      isAddr: "2",
      pageSize: 10,
      total: 0,
      currentPage4: 1,
      search: "",

      showContent: false,
      //   contentTxt: `<p>这是一个富文本内容示例</p>
      // <img src="../../assets/404_images/404.png" alt="" >`
    };
  },
  async created() {
    this.getData1();
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    // setTimeout(() => {
    //   this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    // }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    determine() {
      this.loading = true;

      this.$api
        .updateModel({
          id:this.form.id,
          model_data:this.form.model_data
        })
        .then((res) => {
          if (res.code == 0) {
            console.log("生成内容列表返回值：", res);
            this.showContent = false;
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    handleEdit(row) {
      console.log("row---edit", row);
      this.showContent = true;
      this.form = row;
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    // 关闭弹框
    handleClose() {
      // this.$refs['ruleForm'].resetFields();
      this.showContent = false;
    },
    preview(content) {
      this.showContent = true;
      this.html = content;
      this.$refs.editor.editor.disable();
    },
    getData1() {
      this.loading = true;

      this.$api
        .getModelList({
          page: this.page,
          size: this.pageSize,
        })
        .then((res) => {
          if (res.code == 0) {
            console.log("生成内容列表返回值：", res);
            this.tableData = res.data.data;
            this.loading = false;

            this.total = res.data.total;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getData1();
    },
    handleCurrentChange(val) {
      console.log("点击了");
      this.page = val;
      this.getData1();
    },

    userExport() {
      console.log(getToken());
      window.location.href =
        "https://jingji-h5.ecps.com.cn/index.php?s=admin/getAwardList&isExport=1&token=" +
        getToken();
    },
  },
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
.bodyBoxs {
  padding: 40px;
}

.boxs {
  width: 100%;
  background: #fff;
  border-radius: 15px;
  padding: 10px;
  min-height: 700px;
}

.content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#editor—wrapper {
  border: 1px solid #ccc;
  z-index: 100;
  /* 按需定义 */
}

#toolbar-container {
  border-bottom: 1px solid #ccc;
}

#editor-container {
  height: 500px;
}
</style>
