<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card">
        <div class="org_header">
          <span class="subject">组织架构</span>
          <div class="header_btn_box">
            <el-button type="primary">刷新列表</el-button>
            <h-select
              :data="options"
              :settings="settings"
              @select="handleSelect"
            />
          </div>
        </div>

        <h-table
          height="460"
          :table-list="tableData"
          :header="header"
          :loading="loading"
          :select="true"
          @selectionChange="selectionChange"
          :total="dataTotal"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        >
        </h-table>
        <dia-log
          ref="dialog"
          :config="config"
          :beforeClose="beforeClose"
          @close="resetForm"
        >
          <span ref="span">this is a dialog</span>
        </dia-log>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import HSelect from "@/components/Select/index.vue";
import DiaLog from "@/components/Dialog/index.vue";
import HTable from "@/components/Table/index.vue";
export default {
  components: {
    HSelect,
    DiaLog,
    HTable,
  },
  data() {
    return {
      value: "",
      config: {
        top: "40vh",
        width: "500px",
        title: "温馨提示",
        center: true,
        btnTxt: ["取消", "提交"],
      },
      options: [
        {
          value: "单个添加",
          id: 1,
        },
        {
          value: "批量添加",
          id: 2,
        },
      ],
      settings: {
        placeholder: "添加一级组织",
        width: "140px",
      },
      header: [
        {
          prop: "w",
          label: "名称三行",
          // render: (h, data) => {
          //   return (
          //     <div>
          //       <p>第一行</p>

          //     </div>
          //   )
          // }
        },
        { prop: "x", label: "x" },
        { prop: "d", label: "d" },
        {
          prop: "input",
          label: "input",
          render: (h, data) => {
            return h("el-input", {
              props: {
                value: this.inputValue,
              },
              attrs: {
                personalbar: "输入内容",
              },
              on: {
                input: this.inputChange,
              },
            });
          },
        },
        {
          label: "操作",
          render: (h, data) => {
            return (
              <div>
                <el-button
                  type="text"
                  onClick={() => {
                    this.handleClick(data.row);
                  }}
                >
                  编辑
                </el-button>
                <el-button
                  type="text"
                  onClick={() => {
                    this.handleClick(data.row);
                  }}
                >
                  删除
                </el-button>
              </div>
            );
          },
        },
      ],
      tableData: [
        { id: "1", w: "1", x: 99.25123, d: 0.23892 },
        { id: "2", w: "2", x: 255.6666, d: 0.99134 },
      ],
      loading: true,
      inputValue: "2",
      dataTotal: 100,
    };
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  },
  methods: {
    handleSelect(e) {
      this.config.title = e.value;
      console.log(this.config.title);
      this.$refs.dialog.open((cancel) => {
        // cancel();
        console.log("点击提交按钮了");
      });
    },
    selectionChange(selection) {
      console.log(selection, "selection");
    },
    beforeClose() {
      console.log("关闭前");
    },
    /** 修改每行input  */
    inputChange(value) {
      console.log(value);
    },
    handleSizeChange(current) {
      console.log(current, "handleSizeChange");
    },
    handleCurrentChange(current) {
      console.log(current, "handleCurrentChange");
    },
  },
};
</script>

<style lang="scss" scoped>
.org_header {
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.subject {
  color: rgb(24, 144, 255);
  font-weight: bold;
}
.header_btn_box {
  padding: 10px 0 10px;
  display: flex;
}
</style>
