<template>
  <div>

    <el-table border v-loading="loading" :data="tableData" max-height="500px" tooltip-effect="dark">
      <el-table-column show-overflow-tooltip prop="title" align="center" label="标题">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="subjectName" align="center" label="主题分类">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="createdBy" align="center" label="创建人">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="createdDate" align="center" label="创建时间">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="state" align="center" label="状态">
        <template slot-scope="scope">
          <el-tag size="mini" :type="scope.row.state | statusFilter" effect="dark">
            {{ scope.row.state | statusName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button type="text" v-if="showButtons.look" @click="look(scope.row)" style="color: #67c23a;font-weight:700">查看文档
          </el-button>
          |
          <el-button type="text" v-if="showButtons.submit" style="color: #409eff; font-weight:700" @click="onConfirm(scope.row)">完成编写
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
      layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
      :current-page="pagination.pageNum" :total="pagination.total">
    </el-pagination>
    <el-dialog v-dialogDrag width="65%" ref="dia" title="查看文档" :visible.sync="dialogVisible" append-to-body
      :close-on-click-modal="false">
      <div v-if="htmlValue" v-html="htmlValue" style="min-height: 300px"></div>
      <div v-if="!htmlValue" style="min-height: 300px">null</div>
      <div class="sub-btnsub-btn">
        <el-button type="info" size="mini" @click="dialogVisible = false"><i class="iconfont icon-error"></i>关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getConten,
    updateStateTwo
  } from "@/api/archiveUtilize/compilationResearch/documentView";
  import {
    message,
    clearObjValue
  } from "@/utils/common";
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          0: "success",
          1: "success",
          2: "warning",
          3: "warning",
        };
        return statusMap[status];
      },
      statusName(status) {
        const statusMap = {
          0: "新建目录",
          // 1: "内容编写中",
          2: "文案排版中",
          3: "内容编写中",
          5: "",
        };
        return statusMap[status];
      },
    },
    props: {
      loading: {
        type: Boolean,
        default: () => true,
      },
      tableData: {
        type: Array,
        default: () => [],
      },
      pagination: {
        type: Object,
        default: () => {},
      },
      showButtons: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        htmlValue: "",
        dialogVisible: false,
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.$emit("refreshTable");
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.$emit("refreshTable");
      },
      //查看
      look(val) {
        this.htmlValue = "";
        let data = {
          dataId: val.id,
        };
        getConten(data).then((res) => {
          res.body.list.forEach((item) => {
            if (item.contents) {
              this.htmlValue += item.contents;
            }
          });
          this.dialogVisible = true;
        });
      },
      onConfirm(val) {
        this.$confirm('此操作将完成编写, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateStateTwo({
            id: val.id
          }).then((res) => {
            message("success", "完成编写成功", 2000);
            this.$emit("refreshTable");
          });
        }).catch(() => {});

      }
    }
  }

</script>
<style lang="scss" scoped>
  .sub-btnsub-btn {
    text-align: right;
  }

</style>
