<template>
  <div class="agreemant">
    <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '0 20px' }">
      <div>
        <el-tabs v-model="currentTab" @tab-click="changeTab">
          <el-tab-pane :label="item.label" :name="item.value.toString()" v-for="(item, index) in headerList" :key="index" />
        </el-tabs>
      </div>
    </el-card>

    <el-row class="content">
      <el-col :span="16">
        <WangEditor style="width: 100%" :height="500" :value="formValidate.content" @input="getEditorContent"></WangEditor>
      </el-col>
      <el-col :span="6" style="width: 33%">
        <div class="ifam">
          <div class="content" v-html="formValidate.content"></div>
        </div>
      </el-col>
    </el-row>
    <!-- <el-row class="mb10 content">
      <el-button class="bnt" type="primary" v-db-click @click="save" :loading="loadingExist"
        >保存</el-button
      >
    </el-row> -->

    <el-card :bordered="false" shadow="never" class="fixed-card" :style="{ left: `${fixBottomWidth}` }">
      <div class="acea-row row-center">
        <el-button class="bnt" type="primary" @click="save" :loading="loadingExist">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import WangEditor from '@/components/wangEditor/index.vue';
import { getAgreements, setAgreements } from "@/api/system/setting";
import { listDocument, getDocument, delDocument, addDocument, updateDocument, updateDocumentStatus, getDocumentByCode } from '@/api/system/document'
export default {
  components: { WangEditor },
  data() {
    return {
      loadingExist: false,
      currentTab: '1',
      //0：用户协议，1：隐私政策，2：服务约定
      headerList: [
        { label: '用户协议', value: '0' },
        { label: '隐私政策', value: '1' },
        { label: '充值须知', value: '7' },
        { label: '商城服务', value: '2' },
        { label: '积分协议', value: '3' },
        { label: '注销协议', value: '9' },
        { label: '关于我们', value: '6' },
      ],
      id: 0,
      formValidate: {
        content: '',
      },
      content: '',
      spinShow: false,
    };
  },
  computed: {
    // 设置是否显示 tagsView
    fixBottomWidth() {
      let isCollapse = true;
      let w;
      if (isCollapse) {
        w = '64px';
      } else {
        w = '180px';
      }
      return w;
    },
  },
  created() {
    this.changeTab(this.currentTab);
  },
  methods: {
    save() {
      updateDocument(this.formValidate).then((response) => {
        this.$message.success(response.msg);
      })
    },
    getEditorContent(content) {
      this.formValidate.content = content;
    },
    changeTab() {
      this.formValidate.content = '';
      getDocumentByCode({ code: this.currentTab }).then(res => {
        this.formValidate.id = res.data.id || 0;
        this.formValidate.content = res.data.content;
        this.content = res.data.content;
      })
    },
    closeDialog(done) {
      try {
        // 先将状态设置为关闭中，防止重复操作
        this.isClosing = true

        // 重置所有状态
        this.loading = false
        this.processing = false
        this.activeTab = 'basic'

        // 延迟执行销毁和关闭操作，确保组件状态已更新
        this.$nextTick(() => {
          // 销毁编辑器实例（如果存在）
          if (this.$refs.form?.$refs.editor?.editor) {
            this.$refs.form.$refs.editor.editor.destroy()
          }

          // 清空表单数据
          this.reset()

          // 关闭弹窗
          this.open = false

          if (typeof done === 'function') {
            done()
          }

          // 重置关闭状态
          this.isClosing = false
        })
      } catch (error) {
        console.error('关闭弹窗出错:', error)
        this.isClosing = false
      }
    },
  },
};
</script>

<style  scoped>
::v-deep .el-tabs__item {
    height: 54px !important;
    line-height: 54px !important;
}
.agreemant {
    background-color: #fff;
}

.content {
    padding: 10px 16px;
}

.ifam {
    width: 344px;
    height: 644px;
    background: url('../../../assets/images/ag-phone.png') no-repeat center top;
    background-size: 344px 644px;
    padding: 40px 20px;
    padding-top: 50px;
    margin: 0 auto 0 20px;

    .content {
        height: 560px;
        overflow: hidden;
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        overflow-x: hidden;
        overflow-y: auto;
    }

    .content::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }
}

.new_tab {
    ::v-deep .ivu-tabs-nav .ivu-tabs-tab {
        padding: 4px 16px 20px !important;
        font-weight: 500;
    }
}
</style>
