<template lang="html">
  <ifbp-page>
    <ifbp-breadcrumb name="配置信息页面"></ifbp-breadcrumb>
    <ifbp-main-area>
      <ifbp-panel-group>
        <ifbp-panel id="basePanel" title="主UI模板" :icons="uiIcons">
          <div class="" style="overflow:hidden" v-if="elRefShow">
            <el-form ref="uiForm" :model="uiFormData" inline  :rules="uiRules" label-width="150px" >
              <el-form-item label="nodekey" prop="compid">
                 <!-- <el-input v-model="uiCompentId"></el-input> -->
                 <el-input v-model="uiFormData.compid" :disabled="(issysUiK === 'false')"></el-input>
              </el-form-item>
              <el-form-item label="UI模板名称" prop="pk">
                 <el-ref :disabled="(issysUiK ==='false')"
                :ref-code="refcode"
                :field="field"
                :template-value="uiFormData"
                :is-edit="isEdit">
                </el-ref>
              </el-form-item>
              <el-form-item label="UI模板类型" prop="show_type">
                <el-select v-model="uiFormData.show_type" placeholder="请选择" :disabled="(issysUiK === 'false')">
                  <el-option
                  v-for="item in uiTplOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="dynamicAdd" v-if="!(issysUiK === 'false')">
              <el-button type="primary" @click="onUiSubmit">提交</el-button>
              <el-button @click="onUiCancel">取消</el-button>
            </div>
          </div>
          <div class="uiBtnArea">
            <span>按钮区:</span>
            <el-button v-for="item in configUiBtnData ">{{item.operate_name}}</el-button>
            <span class="uiBtnAreaEdit" @click="uiBtnArea"><i class="el-icon-edit"></i> </span>
            <!-- <div class="fl">按钮区:</div>
            <div class="fl" v-for="item in configUiBtnData ">
              <el-button>{{item.operate_name}}</el-button>
            </div>
            <div class="fl uiBtnAreaEdit" @click="uiBtnArea">
              <i class="el-icon-edit"></i>
            </div> -->
          </div>
          <ifbp-template
          ref="configUi"
          tpl-id="configUi"
          :pk-temp= "uiTplPk"
          :tpl-data="uiTplData"
          :show-type="uiTplType"
          >
          </ifbp-template>
        </ifbp-panel>
        <ifbp-panel  title="其他UI模板" :icons="subUiTplIcons">
          <div class="" style="overflow:hidden" v-if="subElRefShow">
            <el-form ref="subUiFormData" :model="subUiFormData" :rules="subRules" inline label-width="150px" >
              <el-form-item label="nodekey" prop="compid">
                 <!-- <el-input v-model="uiCompentId"></el-input> -->
                 <el-input v-model="subUiFormData.compid"></el-input>
              </el-form-item>
              <el-form-item label="UI模板名称" prop='pk'>
                 <el-ref :is-muti-select="isSubMutiSelect"
                :ref-code="subRefcode"
                :field="subField"
                :template-value="subUiFormData"
                :is-edit="isEdit">
                </el-ref>
              </el-form-item>
              <el-form-item label="UI模板类型" prop="show_type" >
                <el-select v-model="subUiFormData.show_type" placeholder="请选择">
                  <el-option
                  v-for="item in subUiTplOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">{{item.label}}
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item>
                <el-button type="primary" @click="subOnUiSubmit">提交</el-button>
                <el-button @click="subOnUiCancel">取消</el-button>
              </el-form-item> -->
            </el-form>
            <div class="dynamicAdd">
              <el-button type="primary" @click="subOnUiSubmit">提交</el-button>
              <el-button @click="subOnUiCancel">取消</el-button>
            </div>
          </div>
          <div class="" v-for = "(item, index) in subUiTplAllData " style="position:relative">
            <div class="uiBtnArea ">
              <span>按钮区:</span>
              <el-button v-for="(item1,index1) in item.btnList ">{{item1.operate_name}}</el-button>
              <span class="uiBtnAreaEdit" @click="subUiBtnArea(item, index)"><i class="el-icon-edit"></i> </span>
              <!-- <div class="fl">按钮区:</div>
              <div class="fl" v-for="(item1,index1) in item.btnList">
                <el-button>{{item1.operate_name}}</el-button>
              </div>
              <div class="fl uiBtnAreaEdit" @click="subUiBtnArea(item, index)">
                <i class="el-icon-edit"></i>
              </div> -->
            </div>
            <div class="uiTitle">
              <span>{{item.name}}</span>
              <span>
                <i class ="el-icon-menu" @click="subMenu(item,index)" ></i>
                <i class ="el-icon-edit" @click="subEdit(item,index)"></i>
               <i class ="el-icon-delete"@click="subDelete(item,index)" v-if="!(issysUiK ==='false')"></i>
              </span>
            </div>
            <div class="" style="overflow:hidden" v-if="subEditElRefShow[item.id]">
              <el-form :ref="'subFormEdit'+ item.id" :model="subEditUiFormData[item.id]" :rules="subEditRules" inline label-width="150px" >
                <el-form-item label="UI模板组件Id" prop="compid">
                   <el-input v-model="subEditUiFormData[item.id].compid" :disabled="(issysUiK ==='false')"></el-input>
                </el-form-item>
                <el-form-item label="UI模板名称" prop="pk" >
                   <el-ref
                  :ref-code="subEditRefcode"
                  :field="subEditField"
                  :template-value="subEditUiFormData[item.id]"
                  :disabled="subIsEdit">
                  </el-ref>
                </el-form-item>
                <el-form-item label="UI模板类型" prop="show_type">
                  <el-select v-model="subEditUiFormData[item.id].show_type" placeholder="请选择" :disabled="(issysUiK ==='false')">
                    <el-option
                    v-for="item in subEditUiTplOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">{{item.label}}
                    </el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item>
                  <el-button type="primary" @click="subEditOnUiSubmit(item,index)">提交</el-button>
                  <el-button @click="subEditOnUiCancel(item)">取消</el-button>
                </el-form-item> -->
              </el-form>
              <div class="dynamicAdd" v-if="!(issysUiK ==='false')">
                <el-button type="primary" @click="subEditOnUiSubmit(item,index)">提交</el-button>
                <el-button @click="subEditOnUiCancel(item)">取消</el-button>
              </div>
            </div>

            <ifbp-template
            :ref="'subConfigUi'+item.pk"
            :tpl-id="'subConfigUi'+ item.pk"
            :pk-temp= "item.pk"
            :tpl-data="{}"
            :show-type="item.show_type"
            >
            </ifbp-template>
          </div>
        </ifbp-panel>
        <ifbp-panel title="布局动态扩展区" :icons="dynamicArea">
          <div class="" style="overflow:hidden" v-if="dynamicAreaShow">
            <el-form ref="dynamicAreaForm" :model="dynamicAreaFormData" inline :rules="dynamicRules" label-width="150px" >
              <el-form-item label="序号">
                <el-input-number v-model="dynamicAreaFormData.sequence" :min="1" :max="10"></el-input-number>
                <!-- <el-input v-model="sequenceD"></el-input> -->
              </el-form-item>
              <el-form-item label="类型" prop="style">
                <el-select v-model="dynamicAreaFormData.style" placeholder="请选择" @change="changeDynamicType">
                  <el-option
                  v-for="item in dynamicTypeOptions"
                  :key="item.styleName"
                  :label="item.styleName"
                  :value="item.styleName">{{item.styleName}}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="编码" prop="code">
                <el-input v-model="dynamicAreaFormData.code"></el-input>
              </el-form-item>
              <el-form-item label="编码名称" prop="codeName">
                <el-input v-model="dynamicAreaFormData.codeName"></el-input>
              </el-form-item>
              <el-form-item label="属性名称" prop="attributename">
                <el-select v-model="dynamicAreaFormData.attributename" placeholder="请选择" @change="changeDynamicAreaName">
                  <el-option
                  v-for="item in dynamicAreaNameOptions"
                  :key="item.name"
                  :label="item.displayname"
                  :value="item.name">{{item.displayname}}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="UI模板" prop="pk_template">
                <el-select v-model="dynamicAreaFormData.pk_template" placeholder="请选择">
                  <el-option
                  v-for="item in dynamicUiTplOptions"
                  :key="item.pk_temp"
                  :label="item.name"
                  :value="item.pk_temp">{{item.name}}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div  class="dynamicAdd">
              <el-button type="primary" @click="dynamicOnUiSubmit">提交</el-button>
              <el-button @click="dynamicOnUiCancel">取消</el-button>
            </div>
          </div>
          <div class="" v-for = "(item, index) in dynamicUiTplAllData " style="position:relative">
            <div class="uiTitle">
              <!-- <span>{{uiName[index].pkName}}</span> -->
              <span>
                <i class ="el-icon-menu" @click="dynamicMenu(item,index)"></i>
                <i class ="el-icon-edit" @click="dynamicEdit(item,index)"></i>
               <i class ="el-icon-delete"@click="dynamicDelete(item,index)"></i>
              </span>
            </div>
            <div class="" style="overflow:hidden" v-if="dynamicEditAreaShow[item.id]">
              <el-form :ref="'dynamicEditArea'+item.id" :model="item" inline label-width="150px" :rules="dynamicEditRules">
                <el-form-item label="序号" prop="sequence">
                  <el-input-number v-model="item.sequence" :min="1" :max="10"></el-input-number>
                </el-form-item>
                <el-form-item label="类型" prop="style">
                  <el-select disabled v-model="item.style" placeholder="请选择" @change="function(val){changeDynamicEditType(val,index,item)}">
                    <el-option
                    v-for="item1 in dynamicTypeEditOptions"
                    :key="item1.styleName"
                    :label="item1.styleName"
                    :value="item1.styleName">{{item1.styleName}}
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="编码" prop="code">
                  <el-input v-model="item.code"></el-input>
                </el-form-item>
                <el-form-item label="编码名称" prop="codeName">
                  <el-input v-model="item.displayname"></el-input>
                </el-form-item>
                <el-form-item label="属性名称" prop="attributename">
                  <el-select disabled v-model="item.attributename" placeholder="请选择" @change="function(val){changeDynamicEditName(val,index,item)}">
                    <el-option
                    v-for="item1 in dynamicAreaNameEditOptions"
                    :key="item1.name"
                    :label="item1.displayname"
                    :value="item1.name">{{item1.displayname}}
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="UI模板" prop="pk_template">
                  <el-select disabled v-model="item.pk_template" placeholder="请选择">
                    <el-option
                    v-for="item1 in dynamicUiTplEditOptions"
                    :key="item1.pk_temp"
                    :label="item1.name"
                    :value="item1.pk_temp">{{item1.name}}
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div class="dynamicAdd">
                <el-button type="primary" @click="dynamicEditOnUiSubmit(item, index)">提交</el-button>
                <el-button @click="dynamicEditOnUiCancel(item,index)">取消</el-button>
              </div>
            </div>
            <ifbp-template
            :ref="'dynamicUi'+item.id"
            :tpl-id="'dynamicUi'+ item.id"
            :pk-temp= "item.pk_template"
            :tpl-data="{}"
            :show-type="dynamicShowType[index]"
            >
            </ifbp-template>
          </div>
        </ifbp-panel>
      </ifbp-panel-group>
    </ifbp-main-area>
    <el-dialog
      v-model="issysUiVisible"
      @update:visible="val => issysUiVisible = val"
      :modal="true" size="large">
      <div class="configBtnAdd">
        <el-button @click="configIssysUiBtnAdd" type="primary">新增</el-button>
      </div>
      <div class="" style="overflow:hidden"  v-if="showIssysShow">
        <el-form :model="issysUiFormData" class="configPageTpl" inline label-width="150px">
          <el-form-item label="按钮名称"  label-width="80px">
            <el-input v-model="issysUiFormData.operate_name"></el-input>
          </el-form-item>
          <el-form-item label="按钮事件"  label-width="80px">
            <el-input v-model="issysUiFormData.event"></el-input>
          </el-form-item>
          <el-form-item label="按钮编码"  label-width="80px">
            <el-input v-model="issysUiFormData.code"></el-input>
          </el-form-item>
          <el-form-item label="按钮描述"  label-width="80px">
            <el-input v-model="issysUiFormData.memo"></el-input>
          </el-form-item>
          <el-form-item label="按钮分组"  label-width="80px">
            <el-input v-model="issysUiFormData.grouptag"></el-input>
          </el-form-item>
          <!-- <el-form-item style="float:right">
            <el-button type="primary" @click="btnUiIssysSubmit">确认</el-button>
            <el-button @click="btnUiIssysCancal">取消</el-button>
          </el-form-item> -->
        </el-form>
        <div class="fr subConfigBtn">
          <el-button type="primary" @click="btnUiIssysSubmit">确认</el-button>
          <el-button @click="btnUiIssysCancal">取消</el-button>
        </div>
      </div>

      <el-table
      :data="configIssysUiBtnData"
      style="width: 100%">
        <el-table-column
        prop="operate_name"
        label="按钮名称"
        width="120">
        </el-table-column>
        <el-table-column
        prop="event"
        label="按钮事件"
        width="100">
        </el-table-column>
        <el-table-column
        prop="memo"
        label="按钮描述"
        width="180">
        </el-table-column>
        <el-table-column
        prop="code"
        label="按钮编码"
        width="100">
        </el-table-column>
        <el-table-column
        prop="grouptag"
        label="按钮分组"
        width="100">
        </el-table-column>
        <el-table-column>
          <template scope = "scope">
            <el-tooltip placement="top" class="btnOper">
              <div slot="content">编辑</div>
              <i class="el-icon-edit" @click="btnIssEdit(scope)"></i>
            </el-tooltip>
            <el-tooltip placement="top" class="btnOper">
              <div slot="content">上移</div>
              <i class="el-icon-caret-top" @click="btnIssUp(scope)"></i>
            </el-tooltip>
            <el-tooltip placement="top" class="btnOper">
              <div slot="content">下移</div>
              <i class="el-icon-caret-bottom" @click="btnIssDown(scope)"></i>
            </el-tooltip>
            <el-tooltip placement="top" class="btnOper">
              <div slot="content">删除</div>
              <i class="el-icon-close" @click="btnIssDel(scope)"></i>
            </el-tooltip>
          </template>
       </el-table-column>
    </el-table>
    <div class="fr subConfigBtn">
      <el-button type="primary" @click="btnUiIssSubmit">提交</el-button>
      <el-button @click="btnUiIssCancal">取消</el-button>
    </div>

      <!-- <ifbp-panel id="buttonUi" title="主UI模板按钮区" :icons="buttonUiIcon">
      <ifbp-template ref="buttonUiRef"
                    tpl-id="buttonUiId"
                    :funnode="buttonUiFunnode"
                    :nexuskey="buttonUiNexuskey"
                    :tpl-data="buttonUiData"
                    show-type="table-form"
                    :editable="buttonUiEditable"
                    :tplResetFun="buttonUiResetFun"
                    @edit-table-click="buttonUIEditClick"
                    @form-confirm-click="buttonUiFormConfirm"
                    @form-edit-click="buttonUiFormEdit"
                    @form-cancel-click="buttonUiFormCancel">
      </ifbp-template> -->
    <!-- </ifbp-panel> -->

    </el-dialog>
    <el-dialog
      v-model="uiBtnDialogVisible"
      @update:visible="val => uiBtnDialogVisible = val"
      :modal="true">
      <div class="configBtnAdd">
        <el-button @click="configUiBtnAdd" type="primary">新增</el-button>
      </div>
      <el-form ref="form" :model="uiBtnFormData" class="configPageTpl" v-if="uiBtnShow">
        <el-form-item label="按钮名称" style="width:50%" label-width="80px">
          <el-select v-model="uiTplBtnValue" @change="addUiBtn" placeholder="请选择">
            <el-option
            v-for="item in uiTplBtnOptions"
            :key="item.pk"
            :label="item.operate_name"
            :value="item">{{item.operate_name}}
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item style="float:right">
          <el-button type="primary" @click="btnUiSubmit">提交</el-button>
          <el-button @click="btnUiCancal">取消</el-button>
        </el-form-item> -->
      </el-form>
        <el-table
        :data="configUiBtnData"
        style="width: 100%">
          <el-table-column
          prop="operate_name"
          label="按钮名称"
          width="180">
          </el-table-column>
          <el-table-column>
            <template scope = "scope">
              <el-tooltip placement="top" class="btnOper">
                <div slot="content">上移</div>
                <i class="el-icon-caret-top" @click="btnUp(scope)"></i>
              </el-tooltip>
              <el-tooltip placement="top" class="btnOper">
                <div slot="content">下移</div>
                <i class="el-icon-caret-bottom" @click="btnDown(scope)"></i>
              </el-tooltip>
              <el-tooltip placement="top" class="btnOper">
                <div slot="content">删除</div>
                <i class="el-icon-close" @click="btnDel(scope)"></i>
              </el-tooltip>
            </template>
         </el-table-column>
      </el-table>
      <div class="fr subConfigBtn">
        <el-button type="primary" @click="btnUiSubmit">提交</el-button>
        <el-button @click="btnUiCancal">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-model="subUiBtnDialogVisible"
      @update:visible="val => subUiBtnDialogVisible = val"
      :modal="true">
      <div class="configBtnAdd">
        <el-button @click="subConfigUiBtnAdd" type="primary">新增</el-button>
      </div>
      <el-form ref="form" :model="subUiBtnFormData" class="configPageTpl" v-if="subUiBtnShow">
        <el-form-item label="按钮名称" style="width:50%" label-width="80px">
          <el-select @change="addBtn" v-model="subUiTplBtnValue"  placeholder="请选择">
            <el-option v-for="item in subUiTplBtnOptions"
            :key="item.pk"
            :label="item.operate_name"
            :value="item">{{item.operate_name}}
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item style="float:right">
          <el-button type="primary" @click="subBtnUiSubmit()">提交</el-button>
          <el-button @click="subBtnUiCancal">取消</el-button>
        </el-form-item> -->
      </el-form>
      <el-table
        :data="subConfigUiBtnData"
        style="width: 100%">
          <el-table-column
          prop="operate_name"
          label="按钮名称"
          width="180">
          </el-table-column>
          <el-table-column>
            <template scope = "scope">
              <el-tooltip placement="top" class="btnOper">
                <div slot="content">上移</div>
                <i class="el-icon-caret-top" @click="subBtnUp(scope)"></i>
              </el-tooltip>
              <el-tooltip placement="top" class="btnOper">
                <div slot="content">下移</div>
                <i class="el-icon-caret-bottom" @click="subBtnDown(scope)"></i>
              </el-tooltip>
              <el-tooltip placement="top" class="btnOper">
                <div slot="content">删除</div>
                <i class="el-icon-close" @click="subBtnDel(scope)"></i>
              </el-tooltip>
            </template>
         </el-table-column>
      </el-table>
      <div class="fr subConfigBtn">
        <el-button type="primary" @click="subBtnUiSubmit">提交</el-button>
        <el-button @click="subBtnUiCancal">取消</el-button>
      </div>
    </el-dialog>
    <ifbp-del-dialog
      v-model="subDelDialogVisible"
      message="确认删除该数据？删除后无法恢复。"
      @click="subDeleteClick"
      >
    </ifbp-del-dialog>
    <ifbp-del-dialog
      v-model="dynamicDelDialogVisible"
      message="确认删除该数据？删除后无法恢复。"
      @click="dynamicDeleteClick"
      >
    </ifbp-del-dialog>
  </ifbp-page>
</template>

<script>
import subConfigUi from './subConfigUi.js';
import dynamicArea from './dynamicArea.js';
import issysUi from './issysUi.js';
export default {
  mixins: [subConfigUi, dynamicArea, issysUi],
  data() {
    // debugger;
    let vm = this;
    let configTplId = this.$root.$router.currentRoute.params.id;
    let configTplCode = this.$root.$router.currentRoute.params.busicode;
    let issysUiK = this.$root.$router.currentRoute.params.issys;
    let headPk = this.$root.$router.currentRoute.params.headpk;
    // var valiUiShowType = (rule, value, callback) => {
    //     debugger;
    //     if((value === ''|| value === null) && ((this.uiFormData.pk === '') || (this.uiFormData.pk === null))){
    //       callback(new Error('请输入UI模板的展示类型'));
    //     } else {
    //       callback();
    //     }
    // };
    return {
      // configIssysUiBtnData:[],
      uiCompentId: '',
      uiFormData: {
        "compid": '',
        "show_type":'',
        "pk":''
      },
      issysUiK: issysUiK,
      headPk: headPk,
      issysUiVisible:false, //处理主Ui模板的系统级按钮
      isMutiSelect: false,
      uiBtnDialogVisible: false,
      elRefShow: false,
      refcode: 'uitemplate_ref',
      field: 'pk',
      isEdit: true,
      btnUiPk: '',
      uiTplPk: '',
      uiTplType: '',
      uiTplData: {},
      uiBtnShow: false,
      uiTplBtnValue: {},
      uiBtnFormData: {},
      uiTplBtnOptions: [],
      configTplCode: configTplCode,
      configTplId: configTplId,
      configTplAllData: [],
      configUiBtnData: [],
      uiTplOptions: [{
        value: 'table',
        label: '表格',
      }, {
        value: 'form',
        label: '表单'
      }, {
        value: 'table-form',
        label: '表格和表单'
      }],
      uiRules:{
       // show_type: [{validator: valiUiShowType, trigger: 'change' }],
       compid: [{required: true, message: '请输入UI模板id', trigger: 'blur'}],
       // pk:[{required: true, message: '请选择ui模板类型', trigger: 'change'}]
     },
      uiIcons: [{
          icon: "edit",
          show: true,
          click: function() {
            vm.elRefShow = !vm.elRefShow;
            vm.isEdit = !vm.isEdit;
          }
        },
        {
          icon: "menu",
          show: true,
          click: function() {
            if (!vm.uiFormData.pk) {
              return;
            }
            window.open('/uitemplate_web/index.html?pk_temp=' + vm.uiFormData.pk);
          }
        },

      ],
      subUiTplAllData: [],
      dynamicShowType: [],
    };
  },
  methods: {
    getUiBtn(val) {
      // debugger;
      // var data = this.configTplCode;
      // var data = this.btnUiPk;
      var data = val;
      this.$http({
        url: "/ifbp-app-sm-infoset-web/page_operate/getButtonList",
        method: 'POST',
        data: data,
        dataType: 'json',
        contentType: 'application/json',
      }).then((res) => {
        if (res.data.success === true) {
          // debugger;
          this.uiTplBtnOptions = res.data.data;
          this.subUiTplBtnOptions = res.data.data;
        }
      }).catch(() => {
        this.$message({
          message: '请求失败',
          type: 'error'
        });
      });
    },
    configPageTplRequest() {
      var vm = this;
      var data = this.configTplId;
      // debugger;
      vm.$http({
        url: "/ifbp-app-sm-infoset-web/page_config/getPageConfig",
        method: 'POST',
        data: data,
        dataType: 'json',
        contentType: 'application/json',
      }).then((res) => {
        if (res.data.success === true) {
          // debugger;
          vm.$nextTick(() => {
            vm.configTplAllData = res.data.data;
            if(res.data.data.mainTpl) {
              vm.uiTplPk = res.data.data.mainTpl.pk;
              //主UI模板的showType类型
              vm.uiTplType = res.data.data.mainTpl.show_type;
              vm.uiFormData.compid = res.data.data.mainTpl.compid;
              vm.uiFormData.show_type = res.data.data.mainTpl.show_type;
              vm.btnUiPk = res.data.data.mainTpl.id;
              //主UI模板的编辑区的值
              vm.uiFormData = res.data.data.mainTpl;
              vm.uiFormData.pk = res.data.data.mainTpl.pk;
              vm.configUiBtnData = res.data.data.mainTpl.btnList;
            }
            // this.buttonUiData = res.data.data.mainTpl.btnList;
            vm.dynamicUiTplAllData = res.data.data.dynamicPageList;
            vm.subUiTplAllData = res.data.data.tplList;

          });
        } else {
          this.$message({
            message: '请求失败1',
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          message: '请求失败',
          type: 'error'
        });
      });

    },

    onUiSubmit() {
      // debugger;
      this.$refs.uiForm.validate((valid) => {
        // debugger;
        if(valid) {
          var url = "/ifbp-app-sm-infoset-web/page_config_tpl/create";
          var pkT;
          var tempalte_name;
          var show_type;
          if(this.uiFormData.pk && ((this.uiFormData.pk !== "") || (this.this.uiFormData.pk !== null))) {
            pkT = this.uiFormData.pk;
            tempalte_name = this.uiFormData.beanMap.pk_ref[this.uiFormData.pk].refname;
            show_type = this.uiFormData.show_type;
          } else {
            pkT = '';
            show_type = '';
            tempalte_name = '';
          }
          var data = {
            "isprimary": true,
            "pk_page_config": this.configTplId,
            "pk_template": pkT,
            "compid": this.uiFormData.compid,
            "sequence": 1,
            "tempalte_name": tempalte_name,
            "show_type": show_type
          };
          this.$http({
              url: url,
              method: "post",
              data: data,
              headers: {
                "Content-Type": "application/json"
              },
              dataType: "application/json"
            })
            .then(res => {
              if (res.data.success) {
                // debugger;
                this.$message({
                  message: "保存成功"
                });
                this.configPageTplRequest();
                this.elRefShow = false;
                // debugger;
              } else {
                vm.$message({
                  message: res.data.error.errorMessage,
                  type:'error'
                });
              }
            })
            .catch(() => {
              this.$message({
                message: "保存失败",
                type: "error"
              });
            });
        }
      });

    },
    addUiBtn() {
      // debugger;
      // console.log(val);
      this.configUiBtnData.push(this.uiTplBtnValue);
    },
    btnUiSubmit() {
      // debugger;
      var btnData = [];
      for (var i = 0 ; i < this.configUiBtnData.length; i ++){
        var btn = {
          "id": this.configUiBtnData[i].id,
          "operate_name":this.configUiBtnData[i].operate_name,
          "pk_page_operate":this.configUiBtnData[i].pk
        }
        btnData.push(btn);
      }
      var url = "/ifbp-app-sm-infoset-web/page_config_tpl_opt/createBatchMove";
      var data = {
        "pk_page_config_tpl": this.btnUiPk,
        "buttonList": btnData,
      };
      this.$http({
          url: url,
          method: "post",
          data: data,
          headers: {
            "Content-Type": "application/json"
          },
          dataType: "application/json"
        })
        .then(res => {
          if (res.data.success) {
            this.$message({
              message: "新增成功"
            });
            this.uiBtnDialogVisible = false;
            this.uiBtnShow = false;
          }
        })
        .catch(() => {
          this.$message({
            message: "保存失败",
            type: "error"
          });
        });
    },
    btnUiCancal() {
      this.uiBtnShow = false;
      this.uiBtnDialogVisible = false;
    },
    onUiCancel() {
      this.elRefShow = false;
    },
    uiBtnArea() {
      // debugger;
      //处理是否为系统级的按钮区的问题
      if(this.issysUiK === "true") {
        this.issysUiVisible = true;
        this.configIssysUiBtnData = this.configUiBtnData;
        // this.
      } else {
        this.uiBtnDialogVisible = true;
        this.getUiBtn(this.btnUiPk);
      }

    },
    btnUp(scope) {
      // debugger;
      var index = scope.$index;
      if (index === 0) {
        return;
      }
      var btnToUp = this.configUiBtnData.splice(index, 1)[0];
      this.configUiBtnData.splice(index - 1, 0, btnToUp);

    },
    btnDown(scope) {
      var index = scope.$index;
      var btnToDown = this.configUiBtnData.splice(index, 1)[0];
      this.configUiBtnData.splice(index + 1, 0, btnToDown);
    },
    btnDel(scope) {
      // debugger;
      var data = scope.row.id;
      this.$http({
          url: "/ifbp-app-sm-infoset-web/page_config_tpl_opt/deleteById",
          method: "post",
          data: data,
          headers: {
            "Content-Type": "application/json"
          },
          dataType: "application/json"
        })
        .then(res => {
          if (res.data.success === true) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.configPageTplRequest();
          } else {
            this.$message({
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(e => {
          this.$message({
            message: "删除失败",
            type: "error"
          });
        });
    },
    configUiBtnAdd() {
      this.uiBtnShow = true;
    }
  },
  watch: {
      dynamicUiTplAllData(val) {
        this.dynamicShowType = val.map((item) => {
          var type = "table-form";
          if(item.style === '参照') {
            type = "form";
          }
          return type;
        });
      },
  },
  computed: {
  },
  mounted() {
    this.configPageTplRequest();
    // if(this.issysUiK === "false") {
    //   this.uiIcons[0].show = false;
    // }
  },
  created() {
    // this.getUiBtn();
  }

}
</script>

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