<!-- 引用自 https://github.com/layui/layui/issues/1815 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="../src/css/layui.css" href2="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.6/css/layui.css" />
</head>

<body>
  <table class="layui-table" id="MianTable" lay-filter="MianTable" lay-data="{id: 'MianTable'}"></table>
  <script type="text/html" id="toolbar">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="AddRowButton">
          新增主件
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="InitTableButton">
          初始化数据
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="SubmitButton">
          保存
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="expandAll-true">
          expandAll-true
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="expandAll-false">
          expandAll-false
        </button>
      </div>
    </script>
  <script type="text/html" id="TableItemTools">
      <div class="layui-btn-container">
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild"
          >新增子件</a
        >
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="delChild"
          >删除</a
        >
      </div>
    </script>
  <script type="text/html" id="TableItemTools">
      <div class="layui-btn-container">
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild"
          >新增子件</a
        >
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="delChild"
          >删除</a
        >
      </div>
    </script>

  <script type="text/html" id="sexTpl">
      <select name="select-sex" class="layui-border select-sex" lay-ignore lay-filter="sex_{{d.rowid}}" id="sex_{{d.rowid}}">
        <option value="">请选择</option>
        <option value="男" {{d.sex=="男"?"selected":""}}>男</option>
        <option value="女" {{d.sex=="女"?"selected":""}}>女</option>
      </select>
    </script>
  <script type="text/html" id="provinceTpl">
      <select name="select-province" class="layui-border select-province" lay-ignore lay-filter="province_{{d.rowid}}" id="province_{{d.rowid}}">
        <option value="">请选择</option>
        {{# layui.each(d.provinceList, function(i, v){ }}
          <option value="{{v.id}}" {{d.province==v.id?"selected":""}}>{{v.name}}</option>
          {{# }); }}
      </select>
    </script>
  <script type="text/html" id="cityTpl">
      <select name="select-city" class="layui-border select-city" lay-ignore lay-filter="city_{{d.rowid}}" id="city_{{d.rowid}}">
        <option value="">请选择</option>
        {{# layui.each(d.cityList, function(i, v){ }}
          <option value="{{v.id}}" {{d.city==v.id?"selected":""}}>{{v.name}}</option>
          {{# }); }}
      </select>
    </script>
  <script type="text/html" id="districtTpl">
      <select name="select-district" class="layui-border select-district" lay-ignore lay-filter="district_{{d.rowid}}" id="district_{{d.rowid}}">
        <option value="">请选择</option>
        {{# layui.each(d.districtList, function(i, v){ }}
          <option value="{{v.id}}" {{d.district==v.id?"selected":""}}>{{v.name}}</option>
          {{# }); }}
      </select>
    </script>
  <script src="../src/layui.js" src1="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.9/layui.js"></script>
  <script>
    layui.use(["jquery", "treeTable", "form"], function () {
      var $ = layui.jquery;
      var table = layui.table;
      var treeTable = layui.treeTable;
      var form = layui.form;

      var provinceList = [
        { id: "01", name: "湖北省" },
        { id: "02", name: "湖南省" },
        { id: "03", name: "广东省" },
      ];
      var cityList = [
        { id: "01.01", name: "武汉市" },
        { id: "01.02", name: "黄石市" },

        { id: "02.01", name: "长沙市" },
        { id: "02.02", name: "株洲市" },

        { id: "03.01", name: "广州市" },
      ];
      var districtList = [
        { id: "01.01.01", name: "江岸区" },
        { id: "01.01.02", name: "江汉区" },
        { id: "01.01.03", name: "武昌区" },
        { id: "01.02.01", name: "下陆区" },
        { id: "01.02.02", name: "铁山区" },

        { id: "02.01.01", name: "天心区" },
        { id: "02.01.02", name: "芙蓉区" },
        { id: "02.01.03", name: "浏阳市" },
        { id: "02.02.01", name: "天元区" },
        { id: "02.02.02", name: "石峰区" },

        { id: "03.01.01", name: "越秀区" },
        { id: "03.01.02", name: "海珠区" },
      ];

      var isHtmlIcon = false;
      var genIcon = function (str, isHtml) {
        return isHtml ? normalizedIcon(str) : str
      }
      var icons = {
        flexIconClose: genIcon('layui-icon layui-icon-addition', isHtmlIcon),
        flexIconOpen: genIcon('layui-icon layui-icon-subtraction', isHtmlIcon),
        iconClose: genIcon('layui-icon layui-icon-add-circle', isHtmlIcon),
        iconOpen: genIcon('layui-icon layui-icon-reduce-circle', isHtmlIcon),
        iconLeaf: genIcon('layui-icon layui-icon-snowflake', isHtmlIcon),
        icon: genIcon('layui-icon layui-icon-addition', isHtmlIcon),
      }

      treeTable.render({
        elem: "#MianTable",
        toolbar: "#toolbar",
        limit: 100,
        tree: {
          // customName: {
          //   id: "id",
          //   name: "id",
          // },
          view: {
            // showFlexIconIfNotParent: true,
            // flexIconClose: icons.flexIconClose,
            // flexIconOpen: icons.flexIconOpen,
            // iconClose: icons.iconClose,
            // iconOpen: icons.iconOpen,
            // iconLeaf: icons.iconLeaf,
            // icon: icons.icon
          },
        },
        cols: [
          [
            //标题栏
            { checkbox: true, fixed: "left" },
            { field: "id", title: "ID", width: 150 },
            {
              title: "操作",
              width: 150,
              align: "center",
              toolbar: "#TableItemTools",
            },
            { field: "name", title: "用户名", width: 180, edit: "text" },
            { field: "sex", title: "性别", templet: "#sexTpl" },
            { field: "province", title: "省", templet: "#provinceTpl" },
            { field: "city", title: "市", templet: "#cityTpl" },
            { field: "district", title: "区", templet: "#districtTpl" },
          ],
        ],
        data: [],
        done: function () {
          var options = this;

          // 获取当前行数据
          table.getRowData = function (tableId, elem) {
            var index = $(elem).closest("tr").data("index");
            return table.cache[tableId][index] || {};
          };

          var tableViewElem = this.elem.next();
          tableViewElem.off("change.tbSelect");
          tableViewElem.on("change.tbSelect", ".select-sex", function () {
            var value = this.value; // 获取选中项 value
            var data = table.getRowData(options.id, this);
            data.sex = value;

            var DATA_INDEX = data.LAY_DATA_INDEX; //此处需要内部字段更新行数据
            treeTable.updateNode("MianTable", DATA_INDEX, {
              province: "01",
            });
          });
        },
      });

      treeTable.on("toolbar(MianTable)", function (obj) {
        var id = obj.config.id;
        var checkStatus = treeTable.checkStatus(id);

        switch (obj.event) {
          case "AddRowButton":
            treeTable.addNodes(id, {
              parentIndex: null,
              index: -1,
              //index: 0,
              data: {
                id: Date.now(),
                provinceList: $.extend(true, [], provinceList),
                //  icon: 'layui-icon layui-icon-github'
              },
            });
            console.log("add", table.cache["MianTable"]);

            break;

          case "InitTableButton":
            treeTable.reloadData("MianTable", {
              data: [
                {
                  name: 1,
                  provinceList: provinceList,
                  children: [{ name: 2, provinceList: provinceList }],
                },
                { name: 3, provinceList: provinceList },
              ],
            });
            break;
          case "SubmitButton":
            console.log(treeTable.getData("MianTable"));
          case 'expandAll-true':
            treeTable.expandAll('MianTable', true);
            break;
          case 'expandAll-false':
            treeTable.expandAll('MianTable', false);
            break;
            break;
          default:
        }
      });
      treeTable.on("tool(MianTable)", function (obj) {
        var data = obj.data;
        var id = obj.config.id;
        var trElem = obj.tr;
        switch (obj.event) {
          case "addChild":
            let json = {
              id: Date.now(),
              provinceList: $.extend(true, [], provinceList),
            };

            treeTable.addNodes(id, {
              parentIndex: data["LAY_DATA_INDEX"],
              index: -1,
              data: json,
            });

            console.log("addChild", table.cache["MianTable"]);

            break;
          case "delChild":
            // obj.del();
            // treeTable.removeNode(id, data["LAY_DATA_INDEX"]);
            treeTable.removeNode(id, trElem.attr("data-index"));
            console.log("del", table.cache["MianTable"]);

            break;

          default:
        }
      });

      function normalizedIcon(iconStr) {
        return iconStr
          ? /<[^>]+?>/.test(iconStr) ? iconStr : '<i class="' + iconStr + '"></i>'
          : ''
      }
    });
  </script>
</body>

</html>
