<template>
  <div class="page">
    <div class="top">
      <div class="left">编研排版查看</div>
    </div>
    <el-table v-loading="loading" size="mini" border :data="tableData" style="width: 100%">
      <el-table-column prop="title" align="center" label="标题">
      </el-table-column>
      <el-table-column prop="subjectName" align="center" label="主题分类">
      </el-table-column>
      <el-table-column prop="createdBy" align="center" label="创建人">
      </el-table-column>
      <el-table-column prop="createdDate" min-width="120px" align="center" label="创建时间">
      </el-table-column>
      <el-table-column prop="state" align="center" label="状态">
        <template slot-scope="scope">
          <el-tag effect="dark" :type="scope.row.state | statusFilter">
            {{ 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" @click="look(scope.row)" v-if="showButtons.look" style="color: #67c23a;padding-right: 5px">查看文档</el-button>
          <!-- <el-popconfirm title="确定已完成编写？" v-if="showButtons.submit" @onConfirm="confirm(scope.row)">
            <el-button slot="reference" type="text"  style="color: #409eff; padding-right: 5px">完成编写</el-button>
          </el-popconfirm> -->
          <el-button type="text" @click="downLoad(scope.row)" style="color: #409eff;">下载文档</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="warning" size="mini" @click="dialogVisible = false"><i class="iconfont icon-error"></i>关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    lookType,
    updateStateThree,
    createWord
  } from "@/api/archiveUtilize/compilationResearch/typesettingView";
  import localStronge from "@/api/localData";
  import {
    message,
    clearObjValue
  } from "@/utils/common";

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          0: "success",
          1: "success",
          2: "success",
          3: "success",
          5: "success",
        };
        return statusMap[status];
      },
      statusName(status) {
        const statusMap = {
          0: "新建目录",
          // 1: "内容编写中",
          2: "文案排版中",
          3: "内容编写中",
          5: "文档排案中",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        htmlValue: "",
        treeData: [],
        dialogVisible: false,
        title: "新增主题",
        catalogueDia: false,
        rules: {
          title: [{
            required: true,
            message: "请输入主题标题",
            trigger: "blur"
          }],
          class: [{
            required: true,
            message: "请输入主题分类",
            trigger: "blur"
          }],
        },
      };
    },
    props: {
      loading: {
        type: Boolean,
        default: () => true,
      },
      tableData: {
        type: Array,
        default: () => [],
      },
      pagination: {
        type: Object,
        default: () => {},
      },
      ruleForm: {
        type: Object,
        default: () => {},
      },
      showButtons: {
        type: Object,
        default: () => {},
      },
    },
    methods: {
      // 下载文档
      downLoad(row){
        const prefix =
            process.env.NODE_ENV === "development"
                ? "http://" +
                localStronge.getServiceip().ip +
                ":" +
                localStronge.getServiceip().host
                : "http://" + window.location.host;
        let str = prefix +"/point-strategy/v/compilationData/createWord?id=" +
            row.id;
        window.location.href = str;
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.$emit("refreshTable");
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.$emit("refreshTable");
      },
      //查看
      look(val) {
        let data = {
          id: val.id,
        };
        lookType(data).then((res) => {
          this.htmlValue = res.body.data ? res.body.data.content : ""
          this.dialogVisible = true;
        });
      },
      onConfirm(val) {
        updateStateThree({
          id: val.id
        }).then((res) => {
          message("success", "完成编写成功", 2000);
          this.$emit("refreshTable");
        });
      },
    },
  };

</script>

<style lang="scss" scoped>
  .page {
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    ::v-deep.caret-wrapper {
      //  .sort-caret{}
      border-bottom-color: #000;
    }
  }

  .sub-btnsub-btn {
    text-align: right;
  }

</style>
