<template>
  <div>
    <el-dialog append-to-body :title="this.title" :visible.sync="dialogVisible" width="950px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column :label="$t('须知类型')" align="center" prop="knowType">
          <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.NEED_KNOW_TYPE" :value="scope.row.knowType" />
          </template>
        </el-table-column>
        <el-table-column prop="titleZh" :label="$t('标题中文')"></el-table-column>
        <el-table-column prop="titleEn" :label="$t('标题英文')"></el-table-column>
        <el-table-column prop="titleFr" :label="$t('标题法文')"></el-table-column>
        <el-table-column prop="version" :label="$t('版本号')">
          <template slot-scope="scope">
            <span>{{ 'V' + parseInt(scope.row.version) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" width="180px" :label="$t('修改时间')">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updaterName" :label="$t('修改人')"></el-table-column>
        <el-table-column prop="type" :label="$t('版本内容')">
          <template slot-scope="scope">
            <el-button type="text" @click="handleShow(scope.row)" >{{ $t('查看') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 查看版本内容 -->
    <el-dialog :title="$t('须知内容')" :visible.sync="showContent" width="700px" style="height: 900px" append-to-body>
      <div class="content-container">
        <!-- 中文内容 -->
        <div class="language-section">
          <div class="language-title">{{ $t('中文内容') }}</div>
          <ueditor v-model="currentContent.contentZh" :min-height="192" :disabled="true" :config="editorConfig" class="readonly-editor" />
        </div>
        <!-- 英文内容 -->
        <div class="language-section">
          <div class="language-title">{{ $t('英文内容') }}</div>
          <ueditor v-model="currentContent.contentEn" :min-height="192" :disabled="true" :config="editorConfig" class="readonly-editor" />
        </div>
        <!-- 法文内容 -->
        <div class="language-section">
          <div class="language-title">{{ $t('法文内容') }}</div>
          <ueditor v-model="currentContent.contentFr" :min-height="192" :disabled="true" :config="editorConfig" class="readonly-editor" />
        </div>
      </div>
    </el-dialog>
  </div>

</template>


<script>
import { getDictDataLabel } from '@/utils/dict'
import { getNeedKnowVersionList, getNeedKnowVersionPage } from '@/api/system/needKnow'
import NeedKnow from '@/components/NeedKnow/index.vue'
import Ueditor from '@/components/Ueditor/index.vue'

export default {
  name: 'VersionNotes',
  components: { Ueditor, NeedKnow },

  data() {
    return {
      dialogVisible: false,
      // 须知id
      needKnowId: null,
      // 须知版本日志内容
      tableData: [],
      // 弹窗标题
      title: '',
      // 类型
      type: '',
      // 须知版本内容
      currentContent: {
        contentZh: '',
        contentEn: '',
        contentFr: ''
      },
      // 显示内容
      showContent:false,
      // 设置查看内容的编辑器的配置
      editorConfig: {
        // 禁用所有工具栏按钮
        toolbars: [[]],
        // 禁用编辑功能
        enableContextMenu: false,
        autoHeightEnabled: false,
        // 其他只读配置
        readonly: true
      }
    }
  },

  computed: {
    isChinese() {
      return this.$i18n.locale === 'zh_CN'
    }
  },

  methods: {
    init(needKnow) {
      // 设置标题内容
      const title = this.isChinese ? needKnow.titleZh : needKnow.titleEn
      // 获取类型值
      this.type = this.getDictDataLabel(this.DICT_TYPE.NEED_KNOW_TYPE, needKnow.knowType)
      this.title = this.type + '-' + title
      // 设置须知id值
      this.needKnowId = needKnow.id

      this.getList()
    },

    getList() {
      getNeedKnowVersionList(this.needKnowId).then(response => {
        this.tableData = response.data
      })
    },

    /**
     * 查看内容详情
     * @param row
     */
    handleShow(row) {
      this.currentContent = {
        contentZh: row.contentZh,
        contentEn: row.contentEn,
        contentFr: row.contentFr
      };
      this.showContent = true;
    }
  }

}
</script>


<style scoped>
.content-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.language-section {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.language-title {
  padding: 8px 16px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  color: #606266;
  font-size: 16px;
  font-weight: bold;
}

</style>
