<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig">
     
    </LayoutTable>
   
  </div>
</template>

<script>
import table from "@/assets/mixins/table";
export default {
  components: {},
  mixins: [table],
  created() {},
  methods: {
    /** 申报 */
    toApply(row) {
      this.$router.push({
        path: "/doc/baseinfo/index",
        query: {
          docId: row.id,
          templateId: row.docTemplateEntity.id,
        },
      });
    },
    /** 模板配置 */
    toTemplate(row) {
      this.$router.push({
        path: "/doc/template/list",
        query: {
          docId: row.id,
        },
      });
    },
    
    renderTable(obj) {
      let tableData = [];
      tableData.push(obj);
      return (
        <el-table stripe data={tableData} class="total-table">
          {this.columnSet.map((item) => this.renderTableColumn(item))}
        </el-table>
      );
    },
    renderTableColumn(options) {
      return (
        <el-table-column
          prop={options.prop}
          label={options.label}
           width={options.width}
        ></el-table-column>
      );
    },
  },
  data() {
    return {
      
      // 用户导入参数
      upload: {
        // 是否显示弹出层（doc基础信息导入）
        open: false,
        // 弹出层标题（doc基础信息导入）
        title: "导入doc基础信息数据",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 上传的地址
        url: "/m/doc/baseinfo/importData",
      },
      isExport: false,
      columnSet: [
        { prop: "name", label: "模板名称" ,width:200},
        { prop: "templatePath", label: "模板地址",width:200 },
        { prop: "remark", label: "备注" },
        { prop: "createUser", label: "创建用户" },
      ],
      config: {
        search: [
          {
            name: "name",
            type: "text",
            label: "业务名称",
            fuzzy: true,
          },
          {
            name: "platformSn ",
            type: "select",
            label: "所属平台",
            fuzzy: true,
          },
        ],
        columns: [
          { type: "selection", width: 60 },
          { label: "业务名称", prop: "name" },
          { label: "备注", prop: "remark" },

          { label: "所属平台", prop: "platformSn" , formatter: this.formatter},

          {
            label: "创建时间",
            prop: "createTime",
            formatter: this.formatterDate,
          },
          { label: "创建用户", prop: "createUser" },
          {
            label: "doc模板",
            width: 120,
            prop: "subColumns",
            formatter: (row) => {
              let widthsize = this.columnSet.reduce((pre, cur) => {
                                    return pre + Number(cur.width);
                                }, 50);
              return (
                <el-popover placement="right" width={widthsize} trigger="click">
                  {this.renderTable(row.docTemplateEntity)}
                  <el-button type="text" slot="reference">
                    详细
                  </el-button>
                </el-popover>
              );
            },
          },
          {
            label: "操作",
            width: 240,
            formatter: (row) => {
              return (
                <div>
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    size="mini"
                    onClick={() => {
                      this.toEdit(row);
                    }}
                  >
                    编辑
                  </el-button>

                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    size="mini"
                    onClick={() => {
                      this.toTemplate(row);
                    }}
                  >
                    文档模板
                  </el-button>

                  
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>