<!--  -->
<template>
  <div class="xxx">
    <!-- <a-range-picker
      :placeholder="['Start month', 'End month']"
      format="YYYY-MM"
      :value="value"
      :mode="mode2"
      :open="open_"
      @panelChange="handlePanelChange2"
      @change="handleChange"
    /> -->
    <br/>
    <p-QueryCard :eventPool="eventPool" :formDataList="QueryCardConfig.formDataList" :tableConfig="tableConfig" :config="QueryCardConfig.config" :queryBtnList="QueryCardConfig.queryBtnList">
      <template v-slot:titleIcon>标题图标插槽</template>
      <template v-slot:table>dddddddd</template>
      <span slot="esContent" slot-scope="{data}">
        <!-- {{data.text}}--{{data}} -->
        {{data.text}}
      </span>
      
      <template slot="title" slot-scope="{data}">{{data}}</template>
      <template slot="footer" slot-scope="{data}">{{data}}</template>
    </p-QueryCard>

   
  </div>
</template>

<script>
 

import Pbutton from './component1/test.vue'

export default {
  name: 'index',
  components: {},
  props: {
    // handA: {
    //   type: String,
    //   required: true,
    //   default: '100'
    // }
  },
  data() {
    // 这里存放数据
    return {
      mode1: 'time',
      mode2: ['month', 'month'],
      value: [],
      open_:true,
      QueryCardConfig:{
        config:{
          /**
           * 整个组件的最外层设置  包括 外围样式 等 
           */
           PageCardConfig: {
            // 表示是否显示外围边框
            isCardBorder: true,
            // 头部下的边框
            isHeadBottomBorder: true,
            // card-body 的样式 class
            bodyClass: "",
            // card-body 的样式 style
            bodyStyle: {
              width: "100%",
              display: "flex",
              "justify-content": "center",
              "align-items": "center",
              "margin-top":"10px",
            },
            // 表示是否显示阴影  always 表示一直显示  hover 表示鼠标移动上面时显示  never 表示不显示
            shadow: "never",
            style: { margin: "10px", width: "95%" },
          },
          /**
           * 顶部标题设置
           */
          headerConfig:{
            show:true,
            // 是否显示查询条件的分割线
            isDefaultHeadBottomBorder: false,
            // title:{
            //   icon:'', // bars
            //   label:'这是标题',
            //   labelClass:'',
            //   labelStyle:{ color: '#000000','font-size':'20px'},
            // },
            // backBtn:{
            //   show:true,
            //   icon:'left',
            //   btnType:'',
            //   label:'返回'
            // }
          },
          // xs <576px    sm ≥576px    md	≥768px     lg	≥992px    xl ≥1200px      xxl	≥1600px
          layouttDefault:{ rowNum: 1, 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}},
          
          layouttOther:{
            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}
          }
        },
        queryBtnList:[{btnKey:'cloudDownload',label:'下载',icon:'cloud-download',btnType:'',disabled:false}],
        formDataList:[
          { enName:'userName1', cnName:'用户名1', type:'input',value:'默认值1',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName2', cnName:'用户名2', type:'select',value:'',optionList:[{label:'测试1',value:'1'},{label:'测试2',value:'2'},{label:'测试3',value:'3'},],numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},isChangeEvent:true},
          { enName:'userName3', cnName:'选择月份', type:'rangePicker',value:[],numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{format:'YYYY-MM',mode:['month', 'month']},},
          { enName:'userName4', cnName:'选择日期', type:'rangePicker',value:[],numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName5', cnName:'用户名5', type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName6', cnName:'用户名6', type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName7', cnName:'用户名7', type:'custom',value:'userName7', componentName:'Pbutton', componentItem:Pbutton,numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName8', cnName:'用户名8', type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName9', cnName:'用户名9', type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName10',cnName:'用户名10',type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName11',cnName:'用户名11',type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName12',cnName:'用户名12',type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
        ]
      },
      tableConfig:{
        showTableFooter:false,
        showTableHeader:true,
        otherAttr:{
          scroll:{ y: 300}
        },
        // pagination:false,
        columns:[
        {
          title: '合同编号',
          align: 'center',
          width: 230,
          dataIndex: 'agreeNo',
        },
        {
          title: '合同名称',
          dataIndex: 'agreeName',
          scopedSlots: { customRender: 'esContent' },
          align: 'center',
          width: 140
        },
        {
          title: '生效状态',
          dataIndex: 'effectiveStatus',
          align: 'center',
          width: 110,
        },
        {
          title: '渠道名称',
          align: 'center',
          dataIndex: 'channelName',
          scopedSlots: { customRender: 'esContent1' },
          // width: 150,
        },
        {
          title: '客户类型',
          align: 'center',
          // width: 100,
          dataIndex: 'channelType',
          scopedSlots: { customRender: 'channelType' },
        },
        {
          title: '到期时间',
          dataIndex: 'agreeExpireTime',
          align: 'center',
          // width: 150
        },
        {
          title: '是否标准合同',
          dataIndex: 'agreeProcess',
          key: 'agreeProcess',
          align: 'center',
          scopedSlots: {customRender: 'agreeProcess'},
          // width: 120
        },
        {
          title: '合同类型',
          align: 'center',
          // width: 100,
          dataIndex: 'agreeType',
          scopedSlots: { customRender: 'agreeType' },
        },
        {
          title: '签约状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' },
          // width: 140
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 180,
          fixed: 'right'
        }
        ],
        data:[
          {agreeNo:' 1',agreeName:'合同名称 1'},
          {agreeNo:' 2',agreeName:'合同名称 2'},
          {agreeNo:' 3',agreeName:'合同名称 3'},
          {agreeNo:' 4',agreeName:'合同名称 4'},
          {agreeNo:' 5',agreeName:'合同名称 5'},
          {agreeNo:' 6',agreeName:'合同名称 6'},
          {agreeNo:' 7',agreeName:'合同名称 7'},
          {agreeNo:' 8',agreeName:'合同名称 8'},
          {agreeNo:' 9',agreeName:'合同名称 9'},
          {agreeNo:'10',agreeName:'合同名称10'},
          {agreeNo:'11',agreeName:'合同名称11'},
          {agreeNo:'12',agreeName:'合同名称12'},
          {agreeNo:'13',agreeName:'合同名称13'},
          {agreeNo:'14',agreeName:'合同名称14'},
          {agreeNo:'15',agreeName:'合同名称15'},
          {agreeNo:'16',agreeName:'合同名称16'},
          {agreeNo:'17',agreeName:'合同名称17'},
          {agreeNo:'18',agreeName:'合同名称18'},
          {agreeNo:'19',agreeName:'合同名称19'},
          {agreeNo:'20',agreeName:'合同名称20'},
          {agreeNo:'21',agreeName:'合同名称21'},
        ],
      }
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    eventPool(type,data){
      console.log('eventPool项变化事件===>',type,data);
    },
    handleOpenChange1(open) {
      if (open) {
        this.mode1 = 'time';
      }
    },
    handleChange(value) {
      this.value = value;
    },
    handlePanelChange1(value, mode) {
      this.mode1 = mode;
    },
    handlePanelChange2(value, mode) {
      this.value = value;
      this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
      this.open_ = false
    },
  },
  }
</script>
<style lang='less' scoped>
</style>