<!--  -->
<template>
  <P-PageCard v-bind="PageCardConfig">
    <!-- 此块内容暂不开启  s -->
    <div v-if="headerConfig.show" slot="header" class="pc-header">
      <div class="pc-header-con">
        <div class="pc-header-title">
          <a-icon v-if="headerConfig.title.icon" :type="headerConfig.title.icon" class="pc-header-title-icon" />
          <slot v-if="!headerConfig.title.icon" name="titleIcon"></slot>
          <span :class="['pc-header-title-label',headerConfig.title.labelClass]" :style="headerConfig.title.labelStyle">{{headerConfig.title.label}}</span>
        </div>
        <div v-if="headerConfig.backBtn.show" class="pc-header-btn">
          <a-button :type="headerConfig.backBtn.btnType" :icon="headerConfig.backBtn.icon" @click="btnEvent('backBtn')" class="header-btn-item">{{headerConfig.backBtn.label}}</a-button>
        </div>
      </div>
    </div>
     <!-- 此块内容暂不开启  e -->
    <div class="pc-body-con">
      <div class="pc-body-query">
        <div class="pc-query">
          <!-- <slot name="default"></slot> -->
          <p-PageForm ref="PPageFormDefault" :PEvent="formEvent" :formDataList="formConfig.formDataListDefault" :layout="formConfig.layouttDefault" :showHelp="showHelp">
            <!-- <slot name="defaultForm"></slot> -->
            <!-- <template v-slot:userName7="{value, itemData}" ></template> -->
          </p-PageForm>
        </div>
        <div class="pc-body-btn">
          <a-button type="primary" icon="search" class="body-btn-item" @click="btnEvent('query')">查询</a-button>
          <a-button icon="reload" class="body-btn-item" @click="btnEvent('reset')">重置</a-button>
          <a-button :key="btnItem.btnKey" v-for="(btnItem,index) in btnList" v-has="btnItem.vhas" @click="btnEvent(btnItem.btnKey,index,btnItem)" :type="btnItem.btnType" :disabled="btnItem.disabled" :icon="btnItem.icon" class="body-btn-item"  v-bind="btnItem.otherAttr">{{btnItem.label}}</a-button>
          <a-button type="link" class="body-btn-item" @click="showPanel" v-if="formConfig.formDataListOther.length>0">
            更多<a-icon type="down" class="tb"/>
          </a-button>
        </div>
      </div>
      <div :class="['pc-body-panel',headerConfig.isDefaultHeadBottomBorder == true&&'show-border-top']">
        <!-- <slot name="other"></slot> -->
        <p-PageForm ref="PPageFormOther" v-if="formConfig.formDataListOther.length>0" :PEvent="formEvent" :formDataList="formConfig.formDataListOther" :layout="formConfig.layouttOther" :showHelp="showHelp">
          <!-- <template v-slot:userName7="{value, itemData}" >
            <component :is="'Pbutton'"></component>
          </template>  -->
        </p-PageForm>
      </div>
      <div class="pc-body-table">
        <slot v-if="showTableSlot==true" name="table"></slot>

        <a-table v-if="showTableSlot==false" :columns="columns" :data-source="dataSource" :pagination="pagination" @change="tableChangeEvent" v-bind="otherAttr">
          <template v-for="(item) in customRenderList" :slot="item.keyName" slot-scope="text, record,index">
            <slot :name="item.keyName" :data="{ text, record, index, indent: { [item.keyName]: text ,[item.title]:item.dataIndex} }"></slot>
          </template>
        </a-table>
        <!-- <span v-if="showTableHeader==true" >
          <template slot="title" slot-scope="currentPageData">
            <slot name="title" :data="currentPageData"></slot>
          </template>
        </span>
          <span v-if="showTableFooter==true" slot="footer" slot-scope="currentPageData">
            <slot name="footer" :data="currentPageData"></slot>
         </span> -->

      </div>
    </div>
  </P-PageCard>
</template>

<script>
import IS from './../utils/is'
import UUID from './../utils/uuid'
import anime from "animejs/lib/anime.js";
import PPageCard from './../Card'
// import Vue from 'Vue';
export default {
  // import引入的组件需要注入到对象中才能使用
  name: "PQueryCard",
  components: {PPageCard},
  props: {
    // 事件池
    eventPool: {
      type: Function,  // backBtn  query  reset  form-Panel   【queryBtnList按钮事件 btnKey = cloudDownload】
    },
    config:{
      type:Object,
      default: ()=>{
        return {
          /**
           * 整个组件的最外层设置  包括 外围样式 等 
           */
          PageCardConfig: {
            // 表示是否显示外围边框
            isCardBorder: false,
            // 头部下的边框
            isHeadBottomBorder: true,
            // card-body 的样式 class
            bodyClass: "",
            // card-body 的样式 style
            bodyStyle: {
              width: "100%",
              display: "flex",
              "justify-content": "center",
              "align-items": "center",
              "margin-top":"40px",
            },
            // 表示是否显示阴影  always 表示一直显示  hover 表示鼠标移动上面时显示  never 表示不显示
            shadow: "never",
            style: { margin: "10px", width: "100%" },
          },
          /**
           * 顶部标题设置
           */
          headerConfig:{
            show:true,
            title:{
              icon:'bars', // 支持 插槽  插槽名称【titleIcon】 当icon 的值为空时启用插槽
              label:'这是标题',
              labelClass:'',
              labelStyle:{},
            },
            backBtn:{
              show:true,
              icon:'left',
              btnType:'', //  组件库 Button 的 type 类型值
              label:'返回'
            },
            // 是否显示查询条件的分割线
            isDefaultHeadBottomBorder: false,
          },
          // 查询表单的布局设置  rowNum 表示行数  columnNum 表示列数     rowGap 行间距  rowHeight 行高  coliumnGap 列间距   labelCol 表单label的自适应设置   wrapperCol 表单的值部分的自适应设置
          // xs <576px    sm ≥576px    md	≥768px     lg	≥992px    xl ≥1200px      xxl	≥1600px
          layouttDefault:{ rowNum: 1, columnNum: 3, rowGap: "1px",rowHeight:'50px',  coliumnGap: "10px", labelCol: { xs: 12, sm: 12, md: 10, lg: 10, xl:10, xxl:10 }, wrapperCol: { xs: 12, sm: 12, md: 12, lg: 12, xl:12, xxl:12}},
          layouttOther:{ rowNum: 4, columnNum: 4, rowGap: "1px",rowHeight:'50px',  coliumnGap: "10px", labelCol: { xs: 12, sm: 12, md: 10, lg: 10, xl:10, xxl:10 }, wrapperCol: { xs: 12, sm: 12, md: 12, lg: 12, xl:12, xxl:12}},
        }
      },
    },
    // 和查询按钮并排放的按钮集合 如 下载  {btnKey:'11',label:'下载',icon:'cloud-download',btnType:'',vhas:'', disabled:false, otherAttr:{}}
    queryBtnList:{type:Array},
    // 查询表单集合 具体 参照表单属性   新增 componentName:'Pbutton', componentItem:Pbutton
    formDataList:{type:Array},
    // table 表设置  支持插槽 插槽名称 table
    tableConfig:{type:Object,default:()=>{
      return {
        // 用于控制是否启用自定义table的插槽， false 表示不起用 使用默认table    true 表示启用自定义table插槽
        showTableSlot:false,
        // 是否显示table  title ； 默认为false,不显示  true 表示显示 
        showTableHeader:false,
        // 是否显示table  footer ； 默认为false,不显示  true 表示显示 
        showTableFooter:false,
        columns:[],
        data:[],
        pagination:{ 
          current: 1,
          pageSize: 10,
          total: 0,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return " 共" + total + "条"
          },
          showSizeChanger: true
        },
        // table 的其他属性
        otherAttr:{}
      }
    }},
    showHelp:{type:Boolean, default: () => { return false }}
  },
  data() {
    // 这里存放数据
    return {
      animeSwitch: false,
      configKey:'',
      /**
       * 此块内容暂不开启
       */
      PageCardConfig: {
        // 表示是否显示外围边框
        isCardBorder: false,
        // 头部下的边框
        isHeadBottomBorder: true,
        // card-body 的样式 class
        bodyClass: "",
        // card-body 的样式 style
        bodyStyle: {
          width: "100%",
          display: "flex",
          "justify-content": "center",
          "align-items": "center",
          "margin-top":"40px",
        },
        // 表示是否显示阴影  always 表示一直显示  hover 表示鼠标移动上面时显示  never 表示不显示
        shadow: "never",
        style: { padding: "10px", width: "100%" },
      },
      /**
       * 此块内容暂不开启
       */
      headerConfig:{
        show:true,
        // 是否显示查询条件的分割线
        isDefaultHeadBottomBorder: false,
        title:{
          icon:'bars',
          label:'这是标题',
          labelClass:'',
          labelStyle:{},
        },
        backBtn:{
          show:true,
          icon:'left',
          btnType:'',
          label:'返回'
        }
      },

      btnList:[
        // {btnKey:'cloudDownload',label:'下载',icon:'cloud-download',btnType:'',disabled:false}
      ],
      formConfig:{
        layouttDefault:{ rowNum: 1, columnNum: 3, rowGap: "1px",rowHeight:'50px',  coliumnGap: "10px",labelCol: { xs: 12, sm: 12, md: 10, lg: 10, xl:10, xxl:10 }, wrapperCol: { xs: 12, sm: 12, md: 12, lg: 12, xl:12, xxl:12}},
        layouttOther:{ rowNum: 4, columnNum: 4, rowGap: "1px",rowHeight:'50px',  coliumnGap: "10px",   labelCol: { xs: 12, sm: 12, md: 10, lg: 10, xl:10, xxl:10 }, wrapperCol: { xs: 12, sm: 12, md: 12, lg: 12, xl:12, xxl:12}},
        formDataListDefault:[],
        formDataListOther:[],
      },
      formData:{},
      formData_:{},

      // 用于处理值是否发生变化的key
      tableConfigKey:'',
      showTableSlot:true,
      // 是否显示table  title ； 默认为false,不显示  true 表示显示 
      showTableHeader:false,
      // 是否显示table  footer ； 默认为false,不显示  true 表示显示 
      showTableFooter:false,
      columns:[],
      dataSource:[],
      // table 的其他属性
      otherAttr:{
        bordered:true,
      },
      pagination:{
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return " 共" + total + "条"
        },
        showSizeChanger: true
      },
      customRenderList:[],
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    queryBtnList: {
      handler(val) {
        if(IS.isArray(val)){
          this.btnList = val
        }
      },
      deep: true,
      immediate: true,
    },
    formDataList: {
      handler(val) {
        if(IS.isArray(val)){
          this.setFormData(val)
        }
      },
      deep: true,
      immediate: true,
    },
    config: {
      handler(val) {
        const newKey = UUID('MDUUID',JSON.stringify(val))
        if(!IS.isNullOrUnDef(val) && IS.isObject(val) && newKey != this.configKey){
          this.setConfig(val)
          this.configKey = newKey
        }
      },
      deep: true,
      immediate: true,
    },
    tableConfig: {
      handler(val) {
        const newKey = UUID('MDUUID',JSON.stringify(val))
        if(!IS.isNullOrUnDef(val) && IS.isObject(val) && newKey!=this.tableConfigKey){
          this.setTable(val)
          this.tableConfigKey = newKey
        }
      },
      deep: true,
      immediate: true,
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(()=>{
      this.showPanel()
    })
    if(this.$isShowHelp == true &&  this.showHelp==true){
        console.log(`
        组件名称：
        PQueryCard
        使用方法：样式【swiper-slide】必填
            <p-SwiperCon :onChange="onSWChange"> 
              <div class="swiper-slide">插槽1</div> 
              <div class="swiper-slide">插槽2</div> 
              <div class="swiper-slide">插槽3</div> 
            </p-SwiperCon>
        props参数说明：
            props:{
              // 此参数可选  用于相应组件的变化事件  此事件的参数为 当前切换的索引值，索引从0开始  
              onChange: {type: Function},
            },
        `)
      }
   
  },
  // 方法集合
  methods: {
    showPanel() {
      const {formConfig:{formDataListOther,layouttOther},animeSwitch,eventPool,formData} = this
      let height_ = "0px";
      let rotate_ = 0;
      let padding_ = ''
      // rowInfo
      const ys = formDataListOther.length % layouttOther.columnNum >0 ? 1 : 0;
      const rowSize = Math.floor(formDataListOther.length / layouttOther.columnNum)+ys;
      const btnSize = 3;
      const tempHeight = rowSize * 40 + 20 // rowSize * 65 + 20 + (btnSize > 0 ? 54 : 0);
      // 54

      if (animeSwitch) {
        height_ = tempHeight + "px"; // '180px'
        rotate_ = 180;
        padding_ = '10px 20px'
      }
      if (!animeSwitch) {
        height_ = "0px";
        rotate_ = 0;
        padding_ = '0px'
      }
      // console.log(rowSize,height_,this.formConfig.formDataListOther.length, this.formConfig.layouttOther.columnNum)
      anime({
        targets: ".pc-body-panel",
        height: height_,
        duration: 400,
        // backgroundColor: '#A4FF4F',
        padding:padding_,
        easing: "easeInOutQuad",
      });
      anime({
        targets: ".tb",
        rotate: {
          value: rotate_,
          duration: 400,
          easing: "easeInOutSine",
        },
      });
      this.getFormData()
      this.animeSwitch = !animeSwitch;
      eventPool && eventPool(`form-Panel`,{ItemData:null,formData:formData})
    },
    setConfig(config_){
      const {formConfig:{layouttDefault,layouttOther},headerConfig,PageCardConfig} = this
      const {PageCardConfig:PageCardConfig_={},headerConfig:headerConfig_={},layouttDefault:layouttDefault_={},layouttOther:layouttOther_={}} = config_
      
      if(!IS.isEmpty(PageCardConfig_)){
        this.PageCardConfig =Object.assign({},PageCardConfig,PageCardConfig_)
      }else{
        this.PageCardConfig =Object.assign({},PageCardConfig)
      }
      if(!IS.isEmpty(headerConfig_)){
        this.headerConfig = Object.assign({},headerConfig,headerConfig_)
      }else{
        this.headerConfig = Object.assign({},headerConfig)
      }
      if(!IS.isEmpty(layouttDefault_)){
        this.formConfig.layouttDefault = Object.assign({},layouttDefault,layouttDefault_)
      }else{
        this.formConfig.layouttDefault = Object.assign({},layouttDefault)
      }
      if(!IS.isEmpty(layouttOther_)){
        this.formConfig.layouttOther = Object.assign({},layouttOther,layouttOther_)
      }else{
        this.formConfig.layouttOther = Object.assign({},layouttOther)
      }
      // console.log('@@@@@@@@@@@@@@',config_,this.formConfig);

    },
    setFormData(formList){
      if(formList.length==0){
        return false
      }
      let defaultListArr = [], otherListArr = []
      formList.forEach(item=>{
        const {isDefault,component,...args} = item
        if(isDefault===true){
          defaultListArr.push({...args})
        }else{
          otherListArr.push({...args})
        }
      })
      // 当没有设置 isDefault 属性时，从otherListArr中选择前三个方进去
      const tempotherListArr = []
      if(defaultListArr.length==0){
        otherListArr.forEach((item,index)=>{
          if(index<3){
            defaultListArr.push(item)
          }else{
            tempotherListArr.push(item)
          }
        })
        otherListArr = tempotherListArr
      }

      this.formConfig.formDataListDefault = defaultListArr
      this.formConfig.formDataListOther = otherListArr
    },
    setCustomRender(columns){
      const tempArr = []
      if(!IS.isNullOrUnDef(columns) && IS.isArray(columns)){
        columns.forEach(item=>{
          const { scopedSlots,dataIndex,title } = item
          if (scopedSlots && scopedSlots.customRender) {
            tempArr.push({keyName:scopedSlots.customRender,dataIndex,title})
          }
        })
      }
      this.customRenderList = tempArr
    },
    setTable(config_){
      const {showTableSlot,columns,data,pagination,otherAttr,showTableHeader,showTableFooter} = config_
      this.showTableSlot = showTableSlot || false
      this.columns = columns
      this.dataSource = data
      this.showTableHeader = showTableHeader || false
      this.showTableFooter = showTableFooter || false
      this.setCustomRender(columns)
      if(!IS.isEmpty(otherAttr)){
        this.otherAttr = Object.assign({},this.otherAttr,otherAttr)
      }else{
        this.otherAttr = Object.assign({},this.otherAttr)
      }
      
      if(!IS.isEmpty(pagination)){
        this.pagination =  Object.assign({},this.pagination,pagination)
      }else{
        this.pagination =  Object.assign({},this.pagination)
      }
      if(IS.isBoolean(pagination) && pagination==false){
        this.pagination = pagination
      }
    },
    async getFormData(){
     const formRes = await this.$refs.PPageFormDefault.onSubmit()
     this.formData = {...this.formData,...formRes}
     this.formData_ = {...this.formData_,...this.$refs.PPageFormDefault.form}
     if(this.$refs.PPageFormOther){
       const formRes1 = await this.$refs.PPageFormOther.onSubmit()
       this.formData = {...this.formData,...formRes1} 
       this.formData_ = {...this.formData_,...this.$refs.PPageFormOther.form}
     }
      // this.$refs.PPageFormDefault.onSubmit((formRes)=>{
      //   this.formData = {...this.formData,...formRes}
      // })
      // this.$refs.PPageFormOther && this.$refs.PPageFormOther.onSubmit((formRes)=>{
      //   this.formData = {...this.formData,...formRes}
      // })
    },
    resetFormData(){
      this.formConfig.formDataListDefault.forEach(item=>{
        // item.value = 
      })
    },
    formEvent(...param){
      this.getFormData().then(item=>{
        this.eventPool && this.eventPool(`form-${param[0]}`,{ItemData:param,formData:{...this.formData,[param[1]]:param[2]}})
      })
    },
    btnEvent(key,item,data){
      // console.log('btnEvent 111===>',key,item,data);
      const queryAction = ()=>{
        this.getFormData().then((data)=>{
          this.eventPool && this.eventPool(key,{ItemData:data,formData:this.formData})
        })
      }

      const actionList={
        'query':(item_,data_)=>{
          queryAction()
        },
        'reset':()=>{
          this.$refs.PPageFormDefault && this.$refs.PPageFormDefault.resetForm()
          this.$refs.PPageFormOther && this.$refs.PPageFormOther.resetForm()
          this.getFormData().then(res=>{
            this.$nextTick().then(()=>{
              console.log('**********************reset**********************',JSON.stringify(this.formData),JSON.stringify(res));
              this.eventPool && this.eventPool('reset',{ItemData:data,formData:this.formData})
            })
          })
        }
      }
      actionList[key] && actionList[key](item,data)
      if(!actionList[key]){
        queryAction()
      }
    },
    tableChangeEvent(pagination, filters, sorter, { currentDataSource }){
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getFormData().then(res=>{
        this.eventPool && this.eventPool(`table-change`,{ItemData:{pagination, filters, sorter,currentDataSource},formData:{...this.formData}})
      })
    },
  },
}
</script>
<style lang="less" scoped>
.pc-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  .pc-header-con {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pc-header-title {
      .pc-header-title-icon {
        margin-right: 5px;
      }
      .pc-header-title-label {
        font-weight: 600;
        color: rgba(48, 49, 51, 0.5);
      }
    }
    .pc-header-btn {
      .header-btn-item {
        margin: 0 3px;
      }
    }
  }
  .pc-header-panel {
    width: 100%;
    border: 1px solid #c3c3c3;
  }
}
.pc-body-con{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  .pc-body-query {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pc-query {
      height: 100%;
      flex: 1;
      display: flex;
      justify-content:flex-start;
      align-items: center;
      /deep/.ant-form-item{
        margin-bottom: 0px;
      }
    }
    .pc-body-btn {
      .body-btn-item {
        margin: 0 3px;
      }
    }
  }
  .pc-body-panel {
    width: 100%;
    // border: 1px solid #c3c3c3;
    
    overflow: auto;
    margin: 10px 0;
    padding: 10px 20px;
    box-sizing: border-box;
    /deep/.ant-form-item{
        margin-bottom: 0px;
      }
    &.show-border-top{
      border-top: 1px solid #c3c3c3;
    }
    &.show-border{
      border: 1px solid #c3c3c3;
    }
  }
  .pc-body-table{
    width: 100%;
    // min-height: 500px;
    // border: 1px solid #c3c3c3;
  }
}
</style>
