<template lang="html">
  <div class="page-custom-manage">
    <div class="page-custom-header">
      <div class="fr">
        <el-button type="primary" @click="backInfo">返回</el-button>
      </div>
    </div>
    <div class="page-custom-main">
      <div class="page-custom-left fl">
        <el-tree :data="pageCustomTreeData" :props="idDefaultProps" @node-click="handleNodeClick" :default-expand-all="true" :highlight-current="true"></el-tree>
      </div>
      <div class="page-custom-right fl">
        <div class="page-content-header">
            <p>每种业务类型可以管理多个布局，通过布局管理不同的页面配置，以适应不同的场景</p>
            <el-button type="primary" @click="pageLayoutCreate"><i class="el-icon-plus">新增页面布局</i></el-button>
        </div>
        <div class="page-content-info">
          <el-table :data="pageTableData" @expand="pageExpand"style="width: 100%" :show-header="false" ref="pageCustomTable" id="pageCustomTable">
            <el-table-column type="expand">
              <template scope="props">
                <ifbp-template
                :ref="'subPage'+props.row.id"
                :tpl-id="props.row.id"
                :funnode="pageFunnode"
                :nexuskey="pageNexuskey"
                :tpl-data="subPageTableData"
                form-position="behind"
                show-type="table-form"
                :tpl-reset-fun="subPageResetFun"
                :methods="subPageMethods"
                @edit-table-click="function(scope){subPageEditClick(props.row.id,scope)}"
                @delete-table-click="function(scope){subPageDeleteClick(props.row.id, scope)}"
                @form-confirm-click="function(type){subPageFormConfirm(props.row.id, type)}"
                @form-cancel-click="function(type){subPageFormCancel(props.row.id, type)}"
                >
                </ifbp-template>
                <div class="addPageSubTable" v-if="!plusShow[props.row.id]">
                  <i class="el-icon-plus" @click="subPageCreate(props.row.id)"></i>
                </div>
                <el-dialog
                  title="提示"
                  v-model="subPageDelDialogVisible"
                  :modal="true"
                  size="tiny">
                  <span>确认删除？删除后无法恢复。</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="subPageDelDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="subPageDeleteFun(props.row.id)">确 定</el-button>
                  </span>
                </el-dialog>
              </template>
            </el-table-column>
            <el-table-column
            label="布局编码"
            prop="code">
            <template scope="scope">
              <span>布局编码:{{scope.row.code}}</span>
            </template>
            </el-table-column>
            <el-table-column
              label="布局名称"
              prop="name">
              <template scope="scope">
                <span>布局名称:{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template scope="scope">
                <i class="el-icon-edit" @click="pageEdit(scope)"></i>
                <i class="el-icon-delete" @click="pageDel(scope)"></i>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            id="staff-pagination"
            @size-change="pageHandleSizeChange"
            @current-change="pageHandleCurrentChange"
            :current-page="pageCurrentPage"
            :page-sizes="[5, 10]"
            :page-size="pagePageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotalElements">
          </el-pagination>
          <el-dialog
            title="提示"
            v-model="pageDelDialogVisible"
            :modal="true"
            size="tiny">
            <span>确认删除？删除后无法恢复。</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="pageDelDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="pageDeleteFun">确 定</el-button>
            </span>
          </el-dialog>
          <pageCustomLayout
          @pageLayoutSubmit="onpageLayoutSubmit"
          :pageCustomLayoutData="pageCustomLayoutData"
          :pageEditRowIndex="pageEditRowIndex"
          :pageEditFormVisible="pageEditFormVisible"
          :pageTreeCode="pageTreeCode"
          @changeVisible="pageC"
          >
        </pageCustomLayout>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import pageCustomLayout from './pageCustomLayout.vue';
import subPage from './subPage.js';
// import selectJson from './1.json';
export default {
  mixins: [subPage],
  data() {
    return {
      pageCustomTreeData: [],//左侧的树的值
      pageCustomLayoutData: [], //新增页面布局显示的对话框的值
      pageEditRowIndex: -1, //新增页面布局判断是新增还是修改
      pageEditFormVisible: false,//新增页面布局控制对话框显示隐藏的值
      pageDelDialogVisible: false, //页面布局的删除
      pageTreeCode: '',
      pageCurrentPage: 1,
      pagePageSize: 5,
      pageCustomId:'',
      pId:'',
      pageTotalElements: 0,

      pageTableData: [],
      idDefaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  components: {
    pageCustomLayout
  },
  methods: {
    pageExpand(row,expanded) {
      // console.log(row,expanded);
      this.pageCustomId = row.id;

      if(expanded) {
        // debugger;
        this.subPageREquest(row.id);
        this.$nextTick(() => {
          var pid = row.id;
          this.$refs['subPage'+pid].setData('pid', pid);
        });

      }

    },
    pageC(value) {
      this.pageEditFormVisible= value;
    },

    getPageDataItem: function(index) {
      return this.pageTableData[index];
    },
    //主表编辑
    pageEdit(scope) {
      // debugger;
      // console.log(selectJson);
      this.pageEditRowIndex = scope.$index;
      this.pageEditFormVisible = true;
      const pageRowData = this.getPageDataItem(this.pageEditRowIndex);
      this.pageCustomLayoutData = $.extend(true, {}, pageRowData);
    },
    //主表删除
    pageDel(scope) {
      // debugger;
      this.pageDelDialogVisible = true;
      this.pageDelId = scope.row.id;
    },
    pageDeleteFun() {
      var url = '/ifbp-app-sm-infoset-web/page_layout/deleteById';
      var data = this.pageDelId;
      this.$http({
        url: url,
        method: 'post',
        data: data,
        dataType: 'json',
        headers:{
          'Content-Type':'application/json'
        }
      }).then((res) => {
        if (res.data.success === true) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.pageDelDialogVisible = false;
          this.pageLayoutRequest();
        } else {
          this.$message({
            message: res.data.error.errorMessage,
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          message: '删除失败',
          type: 'error'
        });
      });

    },
    pageHandleSizeChange(val) {
      this.pageCurrentPage = 1;
      this.pagePageSize = val;
      this.pageLayoutRequest();

    },
    pageHandleCurrentChange(val) {
      this.pageCurrentPage = val;
      this.pageLayoutRequest();

    },

    onpageLayoutSubmit(pageFormData) {
      // debugger;
      if(this.pageEditRowIndex > -1){
        this.pageTableData.splice(this.pageEditRowIndex, 1, pageFormData);
      } else {
        this.pageTableData.push(pageFormData);
      }
      this.pageLayoutRequest();
    },
    //新增页面布局
    pageLayoutCreate() {
      // debugger;
      this.pageEditRowIndex = -1;
      const createPageLayoutFormData ={
        name:'',
        code:''
      };
      this.pageEditFormVisible = true;
      // this.editFormVisible = true;
      this.pageCustomLayoutData = createPageLayoutFormData;

    },
    backInfo() {

    },
    pageLayoutRequest() {
      // debugger;
      var data = {
        "searchParams": {
          "searchMap": {
            "busitype":this.pageTreeCode
          }
        },
        pageNum: this.pageCurrentPage-1,
        pageSize: this.pagePageSize
      }
      this.$http({
        url: "/ifbp-app-sm-infoset-web/page_layout/page",
        method: 'POST',
        data: data,
        dataType: 'json',
        contentType: 'application/json',
      }).then((res) => {
        if (res.data.success === true) {
          // this.pageCustomTreeData = res.data.data;
          this.pageTableData = res.data.data.content;
          this.pageTotalElements = res.data.data.totalElements ;       // 总条数
          this.pagePageSize= res.data.data.size;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          message: 'Network error',
          type: 'error'
        });
      });

    },
    pageCustomTreeRequest() {
      this.$http({
        url: "/ifbp-app-sm/buz/display",
        method: 'GET',
        dataType: 'json',
        contentType: 'application/json',
      }).then((res) => {
        if (res.data.success === true) {
          this.pageCustomTreeData = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          message: 'Network error',
          type: 'error'
        });
      });

    },
    handleNodeClick(data) {
      // debugger;
      this.pageTreeCode = data.code;
      this.pageLayoutRequest();
    }

  },
  mounted() {
    this.pageCustomTreeRequest();
    // this.pageLayoutRequest();

  }
}
</script>

<style>
.page-custom-manage {
  /*width:100%;*/
  height:100%;
  padding:20px 30px;
}
.page-custom-header {
  height:56px;
  background: #fff;
  line-height: 56px;
  padding:0 0.5rem;
}
.page-custom-manage .page-custom-main {
  margin-top: 0.5rem;
  height:calc(100% - 60px);
}
.page-custom-manage .page-custom-left{
  width: 20%;
  height:100%;
  background: #fff;
  overflow-y: scroll;
}
.page-custom-manage .page-custom-left .el-tree{
  border: none !important;
}
.page-custom-manage .page-custom-right{
  width: calc(80% - 10px);
  height:100%;
  margin-left: 10px;
}
.page-content-header{
  height: 100px;
  background: #fff;
  padding: 15px;
}
.page-content-header p{
  color: #5E5E5E;
  font-size: 13px;
  margin-bottom: 15px
}
.page-content-info {
  margin-top: 10px;
}
.page-custom-manage #pageCustomTable .el-table__expanded-cell{
  padding:5px !important;
}
.addPageSubTable {
  height:32px;
  background: #fff;
  border: 1px solid #cecece;
  text-align: center;
  line-height: 32px;
}
</style>
