<!--
 * @Author: your name
 * @Date: 
 * @LastEditTime: 2022-09-16 16:30:15
 * @LastEditors: xiaofengzhou
 * @Description: 
 * @FilePath: 
-->
<template>
  <a-card :bordered="false" class="card-area">
    <a-button @click="createData">options样式的modal</a-button>
    <a-button @click="test">旧modal自定义footer</a-button>
    <a-button @click="test2">旧modal自定义body</a-button>
    <a-spin size="large" :spinning="loading">
      <k-form-build
        :value="jsonData"
        :defaultValue="defaultValue"
        ref="kfb"
        @logEvent="logEvent"
        @change="handleChange"
        :dynamicData="dynamicData"/>
        <!-- 操作面板 -->
        <SearchPanel
          ref="searchPanel"
          v-if="searchConfigJson.showSearchPanel"
          :pageId="searchConfigJson.searchPageId"
          :searchDialogWidth="searchConfigJson.searchWidth"
          :title="searchConfigJson.searchTitle"
          :defaultFilter="defaultFilter"
          :isDeafaultSearch="false"
          @handleQuery="searchQuery"
        />
    </a-spin>
		<DragModal ref="testModal2" :options="options1" :dragId="dragId"/>
		<DragModal ref="testModal4" :options="options2" :dragId="dragId2"/>
     
     <DxPopup
      :width="660"
      :height="540"
      :show-title="true"
      :drag-enabled="true"
      :hide-on-outside-click="true"
      :visible="popupVisible"
			:onHidden="onHidden"
      :showCloseButton="true"
    >
    <template #title="{data}">
    <div class="modal-title-header-div">
      <div class="modal-title-div">直接调用Dxpopup</div>
       <DxButton
        class="modal-close-div"
        @click="closeModal"
        styling-mode="text"
          text="X"/>
      <!-- <div class="modal-close-div" @click="closeModal">X</div> -->
    </div>
    </template>
      <template #content="{ data }">
      <div class="modal-body-div">dfafas
      <div class="modal-footer-div">
        <DxButton
          class="modal-foot-button"
          @click="closeModal"
          text="确定"/>
        <DxButton
          @click="closeModal"
          type="normal"
          styling-mode="outlined"
           class="modal-foot-button"
          text="取消"/>
      </div>
      </div>
      </template>
      
      </DxPopup>
      <drag-modal
      :title="dialogTitle"
      :width="dialogWidth"
      :visible="dragModalVisible2"
      :confirmLoading="confirmLoading"
      @ok="handleOk2"
      @cancel="handleCancel2"
      okText="保存"
      cancelText="关闭"
    >
      <a-spin :spinning="confirmLoading" size="large">
        <k-form-build
          ref="kfb2"
          :value="jsonData"
          :defaultValue="defaultValue"
          :dynamicData="dynamicData"
          @logEvent="logEvent"
          @change="handleChange"
        />
      </a-spin>
    </drag-modal>
      <drag-modal
      :title="dialogTitle"
      :width="dialogWidth"
      :visible="dragModalVisible"
      :isFooter="operateBizBtn.length > 0 ? true : false"
      :confirmLoading="confirmLoading"
      @ok="handleOk2"
      @cancel="handleCancel2"
      okText="保存"
      cancelText="关闭"
    >
      <a-spin :spinning="confirmLoading" size="large">
        <k-form-build
          ref="kfb2"
          :value="jsonData"
          :defaultValue="defaultValue"
          :dynamicData="dynamicData"
          @logEvent="logEvent"
          @change="handleChange"
        />
      </a-spin>
      <template v-for="(item, index) in operateBizBtn" slot="footer">
        <a-button
          :key="index"
          :type="item.type ? item.type : 'primary'"
          :icon="item.icon"
          @click="handleBusiness(item.operation, item)"
          >{{ item.label }}</a-button
        >
      </template>
    </drag-modal>
  
 </a-card>
</template>
<script>
import { getFormConfig } from '../../../packages/api/manage.js'
import DragModal from '../../../packages/components/DragModal/index.vue'
import { EventBus } from '@/eventBus'
import SearchPanel from '../../../packages/components/SearchPanel/index'
export default {
	components: {
		DragModal,
    SearchPanel,

	},
  data () {
    return {
      // 配置到数据库的pageId，根据业务需要进行修改
      pageId: 'TEST_DEMO',
      // 后台接口，根据业务需要进行修改
      serviceName: 'codeService',
      //弹窗标题
      title: '',
      loading: false,
      url: {
        // 以下方法，根据业务需要进行修改
        detail: 'getUnique',
        insert: 'save',
        edit: 'updateById'
      },
      pageType: 'form',
      selectedRowslist: [],
      defaultFilter: {},
      defaultValue: {},
      dynamicData: {
        commonFunc: this.buttonClick
      },
      jsonData: {
       
      },

      dialogTitle: 'dialogTitle',
      dialogWidth: '800',
      confirmLoading:false,
      dragModalVisible: false,
      dragModalVisible2:false,
      operateBizBtn:[
        {
          operation: 'handleChangePassword',
          icon: 'edit',
          label: '修改密码'
        },
        {
          operation: 'handleChangeAdd',
          icon: 'add',
          label: '添加'
        }
      ],
      searchConfigJson:{},
			options1: {
				title:  '直接调用Drag Modal',
				width: '80%',
				height: 'auto', // 高
				pageId: 'TEST_052581',  // pageId
				dragEnable: true, // 可拖拽
				shading: false, // 有遮罩层
				shadingColor: '#ccccccc',  // 遮罩层颜色
				showTitle: true, // title 显示与否
				position: 'top', // 位置
				hideOnOutsideClick: false,  
			},
      popupVisible: false,
			dragId: 'dddddaadc_adfasf',
			options2: {
				title:  '直接调用Drag Modal',
				width: '80%',
				height: 'auto', // 高
				pageId: 'TEST_05252',  // pageId
				dragEnable: true, // 可拖拽
				shading: false, // 有遮罩层
				shadingColor: '#ccccccc',  // 遮罩层颜色
				showTitle: true, // title 显示与否
				position: 'top', // 位置
				hideOnOutsideClick: false,  
			},
			dragId2: 'dddddaadc_adfasf2',
       buttonOptions: {
                text: 'Refresh',
                onClick: function(e) { /* ... */ }
            }
    }
  },
  created () {
    // this.createData()
    this.init()
  },
  methods: {
		onHidden(e){
this.popupVisible = false
		},
   // 该方法由父组件发起调用打开弹窗
    init (search) {
      this.visible = true
      this.loading = true
      getFormConfig(this.pageId).then((response) => {
        this.loading = false
        if (response.responseData.statusCode === 0) {
          let result = response.responseData.resultData
          this.jsonData = JSON.parse(result.configJson)
          this.searchConfigJson = JSON.parse(result.searchConfigJson)
          this.$refs.kfb.reset()
          let valueData = { time1: '12:46:00',
                            time2: '20-21',
                            baseTable:[
                              {id: 1, ctnNo: 'AA', ctnSize: '50'},
                              {id: 2, ctnNo: 'BB', ctnSize: '10'}
                            ],
                            datagrideTest: [
                              {
                                id: 1,
                                ctnNo: 'SD', 
                                ctnSize: '40', 
                                test:'aa', 
                                childTestData: [{id:1,ctnNo: '2SDC', ctnSize: '401'},{id:2,ctnNo: '1SDC', ctnSize: '402'}]},
                              {
                                id: 2,
                                ctnNo: 'S2D',
                                ctnSize: '140', 
                                childTestData: [{id:3,ctnNo: '2SDC', ctnSize: '401'},{id: 1,ctnNo: '1SDC', ctnSize: '402'}]
                              }
                            ]
                          }
          this.$refs.kfb.setData(valueData)
        } else {
          this.$message.error('加载动态表单失败!')
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // kform batch value change event
    logEvent (value, key) {
       if (value.event === 'onSelectionChanged') {
        this.selectedRowslist = value.selectedRowsData
       }else if (value.event === 'onRowDblClick') {

       }
      // console.log(value + key)
    },
    handleChange(e) {
      console.log('change'+ e)
    },
    buttonClick(a,b){
      if (a === 'modal1') {
				EventBus.$emit('setPopupVisible', ['modal_1658976467237',true])
			// this.$refs.kfb.$refs.buildBlocks[0].$refs.nestedComponents.handlePopupVisible(true)
				//  jQuery( '#modal_1658976467237' ).handlePopupVisible(true)
				// jQuery('#modal_1658976467237' ).show()
      } else if(a === 'modal2') {
        this.popupVisible = true
      } else if(a === 'modal3') {
				
				// jQuery('#dddddaadc_adfasf').handlePopupVisible(true)
				this.$refs.testModal2.handlePopupVisible(true)
				// jQuery('#'+this.dragId).show()
			} else if (a=== 'modal4') {
				// 
				// this.$refs.kfb.$emit('handlePopupVisible', true)
					// this.$refs.kfb.$refs.buildBlocks[1].handlePopupVisible(true)
					EventBus.$emit('setPopupVisible', ['modal_1659586192874',true])
			} else if (a === 'modal5'){
				this.$refs.testModal4.handlePopupVisible(true)
			}else if(a==='modal6') {
        this.dragModalVisible = true
        // this.$refs.modalForm.edit(jsonData);
      } else if(a === 'button21') {
        sessionStorage.setItem("SYS_BUTTON_AUTH", '[{"webPerms":"sys:menu:testSearch"}]')
      } else if(a == 'button22') {
        sessionStorage.removeItem("SYS_BUTTON_AUTH")
      }
    },
    createData(){
      this.popupVisible = true
    },
    searchQuery(e){

    },
    closeModal(){
      this.popupVisible = false
    },
    handleOk2(e){
 this.dragModalVisible = false
 this.dragModalVisible2 = false
    },
    handleCancel2(){
 this.dragModalVisible = false
 this.dragModalVisible2 = false
    },
    test(){
       this.dragModalVisible = true
    },
    test2(){
      this.dragModalVisible2 = true
    }
  }
}
</script>

<style scoped>
.modal-title-header-div {
  padding: 16px 24px;
    color: rgba(0,0,0,.65);
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 4px 4px 0 0;
    position: relative;
}
.modal-title-div {
  margin: 0;
  color: rgba(0,0,0,.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  word-wrap: break-word;
}
.modal-close-div{
  float: right;
  font-size: 16px;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal-body-div {
  position: relative;
}
.modal-footer-div{
  position: absolute;
  bottom: 0;
  padding: 16px 24px 10px 24px;
  right: 0;
  border-top: 1px solid #e8e8e8;
  width: 100%;
}
.modal-foot-button{
  float: right;
  padding: 3px 10px;
  margin-left: 10px;
}
</style>