<template lang="html">
  <ifbp-page>
    <ifbp-button-area>
        <el-button type="primary" @click="addPage">新增</el-button>
    </ifbp-button-area>
    <ifbp-main-area >
      <div class="config-page" v-for="(item, index) in pageTableData">
        <el-row type="flex" >
          <el-col :span="2"><div class="grid-content" @click="pageExpand(item,index)"><i class="el-icon-arrow-down" v-if="pageFlag[item.pk]"></i><i class="el-icon-arrow-up" v-if="!pageFlag[item.pk]"></i></div></el-col>
          <el-col :span="9"><div class="grid-content"><span>页面Url:</span><span>{{item.route}}</span></div></el-col>
          <el-col :span="9"><div class="grid-content"><span>code:</span><span>{{item.code}}</span></div></el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-button type="text" size="small" @click ="pageDistribution(item,index)">分配</el-button>
              <el-button type="text" size="small" @click="pageEdit(item,index)">编辑</el-button>
              <el-button type="text" size="small" @click="pageDelete(item,index)">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <!-- div -->
          <ifbp-grandson-page
              :ref="'grandsonPage'+ item.pk"
              title="分配信息"
              width="800"
              @close="handleClose(item)">
              <layout-distribution :page-config-head-id="item.pk"></layout-distribution>
          </ifbp-grandson-page>
        <div class="" v-if="pageConfigFlag[item.pk]">
          <ifbp-template
          :ref="'pageConfig'+item.pk"
          :tpl-id="'pageConfig'+item.pk"
          :pk-temp="pageConfigPkTemp"
          :tpl-data="pageConfigTableData"
          form-position="behind"
          show-type="table-form"
          :row-click-expend-row="false"
          :tpl-reset-fun="pageConfigResetFun"
          :methods="pageConfigMethods"
          @form-confirm-click="function(type){pageConfigFormConfirm(item.pk, type)}"
          @form-cancel-click="function(type){pageConfigFormCancel(item.pk, type)}"
          >
          </ifbp-template>
          <ifbp-del-dialog
            v-model="pageConfigDelDialogVisible"
            message="确认删除该数据？删除后无法恢复。"
            @click="pageConfigDeleteClick"
            >
          </ifbp-del-dialog>
          <div class="addPageSubTable" v-if="pagePlusShow[item.pk]" @click="pageConfigCreate(item.pk)">
            <i class="el-icon-plus"></i>
          </div>
        </div>
      </div>
      <page
      @pageSubmit="onpageSubmit"
      :pageData="pageData"
      :pageEditRowIndex="pageEditRowIndex"
      :pageEditFormVisible="pageEditFormVisible"
      :pageTreeCode="busicode"
      @changeVisible="pageC"
      >
    </page>
    <ifbp-del-dialog
      v-model="delPageDialogVisible"
      message="确认删除该数据？删除后无法恢复。"
      @click="deletePageClick"
      >
    </ifbp-del-dialog>
    </ifbp-main-area>
  </ifbp-page>
</template>

<script>
import page from './page.vue';
import pageConfig from './pageConfig.js';
import layoutDistribution from './layoutDistribution.vue';
export default {
  mixins: [pageConfig],
  data() {
    return {
      pageData: [],
      pageFlag: {},
      pageConfigFlag: {},
      deletePageId: '',
      pk: '',
      pagePlusShow: {},
      busicodelocal: '',
      pageConfigTableData: {
        issysvar: [{
            label: "是",
            value: true
          },
          {
            label: "否",
            value: false
          }
        ]
      },
      pageEditRowIndex: -1,
      pageTableData: [],
      delPageDialogVisible: false,
      pageEditFormVisible: false,
      pageTreeCode: '',

    };
  },
  components: {
    page,
    layoutDistribution
  },
  props: ['busicode'],
  methods: {
    // afterCreate(item) {
    //   this.pageConfigRequest(item.pk);
    // },
    pageRequest() {
      this.pageTableData = [];
      this.pageFlag= {};
      this.pageConfigFlag={};
      // debugger;;
      var data = {
        "searchParams": {
          "searchMap": {
            "busicode": this.busicode
          }
        }
        // pageNum: this.pageCurrentPage-1,
        // pageSize: this.pagePageSize
      };
      this.$http({
        url: "/ifbp-app-sm-infoset-web/page_config_head/page",
        method: 'POST',
        data: data,
        dataType: 'json',
        contentType: 'application/json',
      }).then((res) => {
        if (res.data.success === true) {
          // debugger;
          // this.$nextTick(() => {
          this.pageTableData = res.data.data.content;
          // })
          // 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.error.errorMessage,
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          message: 'Network error',
          type: 'error'
        });
      });
    },
    onpageSubmit(pageFormData) {
      // debugger;
      if (this.pageEditRowIndex > -1) {
        this.pageTableData.splice(this.pageEditRowIndex, 1, pageFormData);
      } else {
        this.pageTableData.push(pageFormData);
      }
      this.pageRequest();
    },
    // pageConfigFunnode
    addPage() {
      this.pageEditRowIndex = -1;
      const createPageFormData = {
        route: '',
        code: ''
      };
      this.pageEditFormVisible = true;
      // this.editFormVisible = true;
      this.pageData = createPageFormData;
    },
    pageExpand(item) {
      this.pk = item.pk;
      // debugger;
      this.$set(this.pageFlag, item.pk, !this.pageFlag[item.pk]);
      this.$set(this.pageConfigFlag, item.pk, !this.pageConfigFlag[item.pk]);
      this.$set(this.pagePlusShow, item.pk, !this.pagePlusShow[item.pk]);
      if (this.pageFlag[item.pk]) {
        // this.$refs['pageConfig'+item.pk].pageConfigRequest(item.pk);
        this.pageConfigRequest(item.pk);
      }
    },
    getPageDataItem: function(index) {
      return this.pageTableData[index];
    },
    pageEdit(item, index) {
      this.pageEditRowIndex = index;
      this.pageEditFormVisible = true;
      const pageRowData = this.getPageDataItem(this.pageEditRowIndex);
      this.pageData = $.extend(true, {}, pageRowData);
    },
    pageDelete(item, index) {
      // debugger;
      this.deletePageId = item.pk;
      this.delPageDialogVisible = true;
      // console.log(item);
    },
    pageC(val) {
      this.pageEditFormVisible = val;
    },
    deletePageClick() {
      var url = '/ifbp-app-sm-infoset-web/page_config_head/deleteById';
      var data = this.deletePageId;
      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.delPageDialogVisible = false;
          this.pageRequest();
        } else {
          this.$message({
            message: res.data.error.errorMessage,
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          message: '删除失败',
          type: 'error'
        });
      });
    }
  },
  mounted() {
    // this.pageRequest();
  },
  created() {

  },
  watch: {
    busicode(val) {
      this.busicodelocal = val;
      this.pageRequest();
    }
  }
}
</script>

<style lang="css">
</style>
