<template>
  <div class="page">
    <LayoutTable ref="layoutTable" :data="tableData" :config="tableConfig"  />
    <dialog-show ref="dialogform" @ok="getData" />
  </div>
</template>

<script>
import dialogShow from "./dialogshow";
import { handleTree } from "@/assets/utils/table";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import table from "@/assets/mixins/table";
export default {
  name: "Site",
  mixins: [table],
  components: { Treeselect, dialogShow },
  data() {
    return {
      config: {
        expand:true,
        search: [
          {
            name: "name",
            type: "text",
            label: "参数名称",
          },
        ],
        columns: [
          {
            prop: "siteName",
            label: "siteName",
          },

          {
            prop: "number",
            label: "站点编号",
            width: 200,
          },

          {
            prop: "address",
            label: "站点地址",
            width: 200,
          },
          {
            prop: "status",
            label: "状态",
            width: 100,
            formatter: this.formatter,
          },
          {
            label: "创建时间",
            prop: "createTime",
            formatter: this.formatterDate,
          },
          {
            label: "操作",
            width: 280,
            formatter: (row) => {
              return (
              
                <div>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    onClick={() => {
                      this.toEdit(row);
                    }}
                  >
                    修改
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-plus"
                    onClick={() => {
                      this.toAdd(row);
                    }}
                  >
                    新增
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    onClick={() => {
                      this.handleDelete(row);
                    }}
                  >
                    删除
                  </el-button>
                </div>
              );
            },
          },
        ],
      },
    };
  },
  created() {
    
  },
  methods: {
    afterRender(data) {
      data.result = handleTree(data.result, "id","parentId");
      this.siteOptions = data.result;
      this.$refs.layoutTable.showType="treetable"
      console.log(this.$refs.layoutTable)
    },

    // 新增
    toAdd(row) {
      this.$refs.dialogform.add(row, this.siteOptions);
    },
    // 编辑
    toEdit(row,query) {
      this.loading = true;
      this.$post(this.pageInfo.exclude, { id: [row.id] })
        .then((res) => {
          if (res && res.code && res.code == 1) {
            this.siteOptions = handleTree(res.data.result);
            this.$refs.dialogform.edit(row, this.siteOptions);
            this.loading = false;
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    // 查看
    toView(row,) {
       this.$refs.dialogform.view(row, this.siteOptions);
    },

  },
};
</script>