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

    </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 },
  created() {},
  methods: {
    afterRender(data) {
      data.result = handleTree(data.result, "id", "parentId");
      this.siteOptions = data.result;
      this.$refs.layoutTable.showType = "treetable";
    },

    // 新增
    toAdd(row) {
      this.$refs.dialogform.add(row, this.siteOptions);
    },
    // 编辑
    toEdit(row) {
      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);
    },
  },
  data() {
    return {
      /** 树表是否默认展开 */
      expand: true,

      config: {
        search: [
          {
            name: "siteName",
            type: "text",
            label: "站点名",
            fuzzy: true,
          },
          {
            name: "parentId",
            type: "text",
            label: "父级id",
            fuzzy: true,
          },
          {
            name: "ancestors",
            type: "text",
            label: "祖级列表，逗号分隔",
            fuzzy: true,
          },
          {
            name: "address",
            type: "text",
            label: "地址",
            fuzzy: true,
          },
          {
            name: "mobile",
            type: "text",
            label: "电话",
            fuzzy: true,
          },
          {
            name: "workday1",
            type: "text",
            label: "周一 1上班 0不上",
            fuzzy: true,
          },
          {
            name: "workday2",
            type: "text",
            label: "周二 1上班 0不上",
            fuzzy: true,
          },
          {
            name: "workday3",
            type: "text",
            label: "周三 1上班 0不上",
            fuzzy: true,
          },
          {
            name: "workday4",
            type: "text",
            label: "周四 1上班 0不上",
            fuzzy: true,
          },
          {
            name: "workday5",
            type: "text",
            label: "周五 1上班 0不上",
            fuzzy: true,
          },
          {
            name: "workday6",
            type: "text",
            label: "周六 1上班 0不上",
            fuzzy: true,
          },
          {
            name: "workday7",
            type: "text",
            label: "周日 1上班 0不上",
            fuzzy: true,
          },
          {
            name: "number",
            type: "text",
            label: "站点编号",
            fuzzy: true,
          },
          {
            name: "orderNum",
            type: "text",
            label: "排序字段",
            fuzzy: true,
          },
          {
            name: "status",
            type: "checkbox",
            label: "站点状态 ，0，停用，1，正常 默认1",
            fuzzy: true,
          },
        ],
        columns: [
          { label: "站点名", prop: "siteName" },
          {
            label: "父级id",
            prop: "parentId",
            formatter: this.formatterString,
          },
          { label: "祖级列表，逗号分隔", prop: "ancestors" },
          { label: "地址", prop: "address" },
          { label: "电话", prop: "mobile" },
          { label: "单位介绍", prop: "introduce" },
          { label: "周一 1上班 0不上", prop: "workday1" },
          { label: "周二 1上班 0不上", prop: "workday2" },
          { label: "周三 1上班 0不上", prop: "workday3" },
          { label: "周四 1上班 0不上", prop: "workday4" },
          { label: "周五 1上班 0不上", prop: "workday5" },
          { label: "周六 1上班 0不上", prop: "workday6" },
          { label: "周日 1上班 0不上", prop: "workday7" },
          { label: "站点编号", prop: "number" },
          { label: "中心介绍", prop: "summary" },
          { label: "排序字段", prop: "orderNum" },
          { label: "站点状态 ，0，停用，1，正常 默认1", prop: "status" },

          {
            label: "操作",
            width: 280,
            formatter: (row) => {
              return (
                <div>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit-outline"
                    onClick={() => {
                      this.handleAdd(row);
                    }}
                  >
                    新增
                  </el-button>
                  <table-buttons
                    noAdd
                    row={row}
                    onEdit={this.toEdit}
                    onView={this.toView}
                    onDel={this.toDel}
                  />
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>