<!--  -->
<template>
  <div class="">
    
    你好，Vite + Vue2
    <a-cascader
      :options="options11"
      :load-data="loadData"
      placeholder="Please select"
      
      @change="onChange11"
    />
    <p-Tips
      :tips="'少时诵诗书少时诵诗书少时诵诗书'"
      iconType="exclamation-circle"
      :isShowIcon="true"
      :isShowIconBorder="true"
      :showBorder="true"
      :type="'error'"
      :showHelp="false"
      >123</p-Tips
    >
    <p-SwiperCon>
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </p-SwiperCon>

    <a-result
      status="warning"
      sub-title="当前文件不支持在线预览，可下载后查看！"
    ></a-result>
    <a-button type="primary" @click="showPreview"> 显示</a-button>
    <a-button type="primary" @click="jy"> 校验</a-button>

    <p-PreviewShow
      :config="previewShowConfig.config"
      :url="previewShowConfig.url"
      :name="previewShowConfig.name"
      :event="closePreview"
      :showHelp="false"
    ></p-PreviewShow>
    <p-UpLoadFile
      :showHelp="false"
      ref="UpLoadFile"
      :config="UpLoadFileConfig.config"
      v-model="UpLoadFileConfig.vmodel"
      :customRequestEvent="customRequestEvent"
      :extendedFileVerification="UpLoadFileConfig.extendedFileVerification"
    ></p-UpLoadFile>
    <br />
    <br />
    <P-PageCard v-bind="PageCardConfig">
      <p-ImgGroup
        :showHelp="false"
        :value="ImgGroupConfig.value"
        style="width: auto"
      ></p-ImgGroup>
      <div slot="header">
        <a-icon
          type="check-circle"
          theme="twoTone"
          two-tone-color="#52c41a"
        />ceshi
      </div>
    </P-PageCard>
    <br />
    <br />
    <p-QueryCard :eventPool="eventPool" :formDataList="QueryCardConfig.formDataList" :config="QueryCardConfig.config" :queryBtnList="QueryCardConfig.queryBtnList">
      <template v-slot:table>dddddddd</template>
    </p-QueryCard>
    <br />
    <br />
    <p-PageForm ref="lll" :formRules="formRules" :layout="{ rowNum: 8, columnNum: 2, rowGap: '1px', coliumnGap: '10px', labelCol: { span: 4 }, wrapperCol: { span: 14 } }" :formDataList="formDataList" :PEvent="PFormEvent" :showHelp="true">
    
      <template v-slot:userName7="{value, itemData}" >
        <!-- <a-date-picker :format="'YYYY-MM-DD'" @change="(...args)=>{onChange(...args,itemData)}"/> -->
          <div style="height: 300px;"> {{value}}</div>
      </template>

    </p-PageForm>
    <br />
    <br />
    <a-button type="primary" @click="onSubmit"> Primary </a-button>
    <br />
    <br />
    <br />
    <br />
    <div class="tzd" id="tzd">
      <!-- <canvas id="canvasOne" width="1910" height="800" style="border: 1px solid #d51a1a;"></canvas> -->
      <!-- <canvas id="canvasTwo" width="500" height="300" ></canvas>
      <canvas id="canvasThree" width="500" height="300" style="position: absolute; left:0px;"></canvas> -->
    </div>
    <br />
    <br />
    <br />
    <a-button type="primary" @click="onSubmit1"> Primary </a-button>  
    <br />
    <br />
    <br />
    <br />
    <div style="width:100%; height: 200px; position: relative;">
      <div id="lk" style="position: absolute; width: 100%; height:50px; bottom: -50px; transition: bottom .3s ease-in-out; ">这是提示信息</div>
    </div>
    <a-button type="primary" @click="onSubmit2"> Primary </a-button>
    <!-- <div class="move" id="moves">
      <img :src="imgsrc" alt="">
    </div> -->
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p-InputRange v-model="inputGroupVal" :showHelp="false"> </p-InputRange>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p-TextGroup :showHelp="false" v-model="inputGroupVal1" @textGroupEvent="textGroupEvent"></p-TextGroup>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

  </div>
</template>

<script>
// const fs = require('fs')
// const path = require('path')
// import fs from 'fs'
// import path from 'path'
// import fileAction from './fileAction'
import OSS from "ali-oss";
import Vertify from './../Vertify'
// import moment from 'moment';

// import Tips_ from "./../packages/tips";
// import SwiperCon_ from "./../packages/SwiperCon";
// import PreviewShow_ from "./../packages/PreviewShow";
// import UpLoadFile from "./../packages/UpLoadFile";
// import ImgGroup from "./../packages/ImgGroup";
// console.log('@@@@@@@@@@@@@1111',SwiperCon_);
const options= [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ]
const options1= [
        {
          value: 'zhejiang',
          label: '浙江',
       
        },
        {
          value: 'jiangsu',
          label: '江苏',
         
        },
      ]
const jyFunction=(rule, value, callback)=>{
  console.log('jyFunction====>',rule, value, callback);
  if(value[0] && value[1]){
    callback()
    return false
  }
  callback(new Error("请输入大于0的数字"))
}
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'index',
  components: {},
  props: {
    // handA: {
    //   type: String,
    //   required: true,
    //   default: '100'
    // }
  },
  data() {
    // 这里存放数据
    return {
        options11: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          isLeaf: false,
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          isLeaf: false,
        },
      ],
      QueryCardConfig:{
        config:{
          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:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName2', cnName:'用户名2', type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName3', cnName:'用户名3', type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName4', cnName:'用户名4', type:'input',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:'custom',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
          { enName:'userName7', cnName:'用户名7', type:'input',value:'userName7',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:{},},
        ]
      },
    //   locale,
      inputGroupVal1:[{ type: 'text', label: '待定', border: true, isEvent: true }, { type: 'link', label: '查看核定通知书', border: true, isEvent: true }],
      inputGroupVal:['测试值1','测试值2'],
      formRules:{
        userName3: [
          { required: true, message: '请填写范围值', trigger: 'blur' },
          {validator: (rule, value, callback)=>{jyFunction(rule, value, callback) }, trigger: 'blur' },
        ],
      },
      formDataList:[
        { enName:'userName2', cnName:'用户名2', type:'imgGroup',
          value:[{status:'success' ,statusTitle:'已签署电子合同'},{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540243642_%E5%8A%9E%E5%85%AC.png'}],
          // value:[],
          numRowsOccupied: 2, numColumnOccupied: 2 ,
          formItemAttr:{labelCol:{span: 2},wrapperCol:{span: 16}},
          itemAttr:{vhas:'ceshi'},
        },
        
        { enName:'userName5', cnName:'上传文件1111', type:'UpLoad',value:{},
          numRowsOccupied: 2, numColumnOccupied: 2, 
          formItemAttr:{labelCol:{span: 2},wrapperCol:{span: 16}},
          itemAttr:{
            config: {
              model: "all", //   单文件  多文件 身份证
              showBG: true, // 可选 表示是否需要显示身份证背景
              required: true, // 是否校验
              tips: {
                card1: "这是提示<span style='color:#eb0606'>信息</span>",
                card2: "这是提示信息",
                card3: "",
              },
              defaultFileList: {
                card1: {url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540243642_%E5%8A%9E%E5%85%AC.png',name:''},
                // card1:{},
                card2: {url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540248058_%E5%8C%97%E4%BA%AC2.png',name:''},
                card3: [{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/task/settlementDocument/1687748548983_1234567890.xlsx',name:'1687748548983_1234567890.xlsx'},{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540248058_%E5%8C%97%E4%BA%AC2.png',name:''},{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540243642_%E5%8A%9E%E5%85%AC.png',name:''}],
              },
              fielConfig: {
                type: { card1: "图片", card2: "图片", card3: "" }, // 允许上传的文件类型 当为空时表示不限制  默认为空   可供选择类型： 图片  文档  压缩包  发票  eg: 当值为string类型时，对所有（card1,card2,card3）的有效； 当值为对象（{"card1":'图片',"card2":'文档', "card3":'PDF'}）时，可指定每个（card1/card2/card3）所对应的类型
                size: 30, // 允许上传的文件个数  默认值为1    eg: 1 表示只允许上传1个文件；  当值为对象（{"card1":1,"card2":2, "card3":3}）时，可指定每个（card1/card2/card3）所对应的类型
                singleFileSize: 1, //上传的单个文件大小 单位为 MB  默认值为1 eg: 当值为 number 时，对所有（card1,card2,card3）的有效； 当值为对象（{"pdf":5,"xlsx":10, "zip":100}）时,可指定对应的文件类型的大小（单位：MB）
              },
            },
            // 扩展文件校验 { 'groupName':'文档', suffixArr:['xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt'],errorMsg:'只允许上传 PDF,DOC,DOCX,XLS,XLSX 类型文件' }
            extendedFileVerification: [
              {
                groupName: "文本",
                suffixArr: ["txt"],
                errorMsg: "只允许上传 txt 类型文件",
              },
            ],
            customRequestEvent:this.customRequestEvent
          },
          
        },
        { enName:'userName1', cnName:'用户名1', type:'cascader',value:[],optionList:options,formItemAttr:{},itemAttr:{},},
        { enName:'userName3', cnName:'用户名3', type:'inputRange',value:[],numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
        { enName:'userName4', cnName:'单选4', type:'radioGroup',value:'jiangsu',optionList:options1,numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
        { enName:'userName13', cnName:'单选13', type:'radioGroup',value:'jiangsu',optionList:options1,numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{type:'button'},},
        { enName:'userName6', cnName:'用户名6', type:'TextGroup',value:[{ type: 'text', label: '待定', border: true, isEvent: true },{ type: 'link', label: '查看核定通知书', isEvent: true },],numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
        { enName:'userName7', cnName:'用户名7', type:'custom',value:'2023-08-19',numRowsOccupied: 1, numColumnOccupied: 2 ,formItemAttr:{},itemAttr:{type:'date',placeholder:'选择时间',valueFormat:'YYYY-MM-DD',format:'YYYY-MM-DD'},},
        // { enName:'userName8', cnName:'用户名8', type:'custom',value:['2023-08-19','2023-08-30'],numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{type:'date',placeholder:'选择时间',valueFormat:'YYYY-MM-DD',format:'YYYY-MM-DD'}},
        { 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:'select',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},optionList:[{label:'测试',value:'1',disabled:true}]},
      ],
      tempVertify:null,
      imgsrc:'',
      ImgGroupConfig: {
        value: [
          // "https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/task/settlementDocument/1687748548983_1234567890.xlsx",
          // 'https://zxcloud.oss-cn-hangzhou.aliyuncs.com/user/license/1676545929009_%E4%B8%AD%E9%9B%84.png'
          // "http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/card/1688714761643_042002200111_88374661.ofd",
          // {
          //   url: "https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/task/settlementDocument/1673258505370_1234567890%E7%9A%84%E5%89%AF%E6%9C%AC.xlsx",
          //   isShowWatermark: false,
          // },
          // {
          //   url: "https://zxcloud.oss-cn-hangzhou.aliyuncs.com/user/task/deliverables/1695801131195_2023.8月灵活用工验收确认单%2B清单.docx",
          //   isShowWatermark: true,
          // },
          // {
          //   url: "https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/contract/2023-04/16817270442092.委托代征协议（个体、个独注册）.pdf",
          //   isShowWatermark: true,
          // },
          // {
          //   url: "https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/contract/2023-04/16817270442092.委托代征协议（个体、个独注册）.pdf",
          //   isShowWatermark: false,
          // },
          // {
          //   url: "http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/card/1743041487794_1742898474611_00da3ed9fe3f476f4baf58d7147042c.jpg",
          //   isShowWatermark: true,
          // },
          // {
          //   url: "http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/card/1743041465785_1742972619058_1742898465672_%E5%96%9C%E8%AF%9A-%E4%BC%97%E9%93%AD%E5%90%88%E5%90%8C.pdf",
          //   isShowWatermark: true,
          // },
          "http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/card/1743041487794_1742898474611_00da3ed9fe3f476f4baf58d7147042c.jpg",
          "http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/card/1743041465785_1742972619058_1742898465672_%E5%96%9C%E8%AF%9A-%E4%BC%97%E9%93%AD%E5%90%88%E5%90%8C.pdf",
        ],
      },
      UpLoadFileConfig: {
        vmodel: {}, // v-model  的值  单文件：{card1:{name:'',url:''}}   多文件: {card3:[{name:'',url:''}]}   身份证:{card1:{name:'',url:''},card2:{name:'',url:''}}
        config: {
          model: "多文件", //   单文件  多文件 身份证
          showBG: true, // 可选 表示是否需要显示身份证背景
          required: true, // 是否校验
          tips: {
            card1: "这是提示<span style='color:#eb0606'>信息</span>",
            card2: "这是提示信息",
            card3: "",
          },
          defaultFileList: {
            card1:{},
            card2:{},
            card3:[],
            // card1: {url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540243642_%E5%8A%9E%E5%85%AC.png',name:''},
            // card2:{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540248058_%E5%8C%97%E4%BA%AC2.png',name:''},
            card3: [
              {url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540248058_%E5%8C%97%E4%BA%AC2.png',name:'cccc'},
              {url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540248058_%E5%8C%97%E4%BA%AC2.png',name:'fffff'},
              {url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540243642_%E5%8A%9E%E5%85%AC.png',name:''}
            ],
          },
          fielConfig: {
            type: { card1: "图片", card2: "图片", card3: "" }, // 允许上传的文件类型 当为空时表示不限制  默认为空   可供选择类型： 图片  文档  压缩包  发票  eg: 当值为string类型时，对所有（card1,card2,card3）的有效； 当值为对象（{"card1":'图片',"card2":'文档', "card3":'PDF'}）时，可指定每个（card1/card2/card3）所对应的类型
            size: 5, // 允许上传的文件个数  默认值为1    eg: 1 表示只允许上传1个文件；  当值为对象（{"card1":1,"card2":2, "card3":3}）时，可指定每个（card1/card2/card3）所对应的类型
            singleFileSize: 1, //上传的单个文件大小 单位为 MB  默认值为1 eg: 当值为 number 时，对所有（card1,card2,card3）的有效； 当值为对象（{"pdf":5,"xlsx":10, "zip":100}）时,可指定对应的文件类型的大小（单位：MB）
          },
        },
        // 扩展文件校验 { 'groupName':'文档', suffixArr:['xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt'],errorMsg:'只允许上传 PDF,DOC,DOCX,XLS,XLSX 类型文件' }
        extendedFileVerification: [
          {
            groupName: "文本",
            suffixArr: ["txt"],
            errorMsg: "只允许上传 txt 类型文件",
          },
        ],
      },
      previewShowConfig: {
        config: {
          title: "dddd5.xlsx",
          visible: false,
          loading: false,
          width: "50vw",
          height: "60vh",
        },
        url1: "http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688461333251_%E6%96%B0%E5%BB%BA%20Microsoft%20Excel%20%E5%B7%A5%E4%BD%9C%E8%A1%A8.xlsx",
        name1: "dddd5.xlsx",
        url: [
          "https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1665366376389_44145877a3e156f07eeab276e8d4ba1(1).jpg",
          "https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1665366376389_44145877a3e156f07eeab276e8d4ba1(1).jpg",
          "https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1665366376389_44145877a3e156f07eeab276e8d4ba1(1).jpg",
          "http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688461328187_TASK101027941-2.pdf",
          "http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688461333251_%E6%96%B0%E5%BB%BA%20Microsoft%20Excel%20%E5%B7%A5%E4%BD%9C%E8%A1%A8.xlsx",
        ],
        name: [
          "dddd1.jpg",
          "dddd2.jpg",
          "dddd3.jpg",
          "dddd4.pdf",
          "dddd5.xlsx",
        ],
        suffix: "jpg",
      },
      PageCardConfig: {
        // 表示是否显示外围边框
        isCardBorder: true,
        // 头部下的边框
        isHeadBottomBorder: true,
        // card-body 的样式 class
        bodyClass: "",
        // card-body 的样式 style
        bodyStyle: {
          width: "100%",
          display: "flex",
          "justify-content": "center",
          "align-items": "center",
        },
        // 表示是否显示阴影  always 表示一直显示  hover 表示鼠标移动上面时显示  never 表示不显示
        shadow: "always",
        style: { margin: "10px", width: "70%" },
      },
      form: {
        layout: "horizontal",
        fieldA: "",
        fieldB: "",
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {
    formItemLayout() {
      const { layout } = this.form;
      return layout === "horizontal"
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
    buttonItemLayout() {
      const { layout } = this.form;
      return layout === "horizontal"
        ? {
            wrapperCol: { span: 14, offset: 4 },
          }
        : {};
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.tempVertify = new Vertify('tzd')

    console.log('this.$IS==========================>',this.$IS, this.$addWatermark);
    
  },
  // 方法集合
  methods: {
    onChange11(value) {
      console.log(value);
    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      console.log('@@@@@@@@@@@@@111111',targetOption,selectedOptions);
      // load options lazily
      setTimeout(() => {
        targetOption.loading = false;
        targetOption.children = [
          {
            label: `${targetOption.label} Dynamic 1`,
            value: 'dynamic1',
          },
          {
            label: `${targetOption.label} Dynamic 2`,
            value: 'dynamic2',
          },
        ];
        this.options11 = [...this.options11];
      }, 1000);
    },

    readFile(){
      // fileAction()
    },
    // moment,
    onDateChange(...args){
      console.log('时间组件==》',args);
    },
    textGroupEvent(label){
      console.log('textGroupEvent===>',label);
    },
    eventPool(type,data){
      console.log('eventPool项变化事件===>',type,data);
    },
    PFormEvent(type,item,data){
      console.log('表单项变化事件===>',type,item,data);
    },
    onSubmit2(){
      document.getElementById('lk').style.bottom = '20px'
      document.getElementById('lk').style.background ='rgba(135, 208, 104,0.3)' // #87d068  f3fdec
      document.getElementById('lk').style.color ='rgb(57, 197, 34)' 
      document.getElementById('lk').style.border ='1px solid rgb(57, 197, 34)'
      // border: 1px solid rgb(57, 197, 34)
      setTimeout(()=>{
        document.getElementById('lk').style.bottom = '-50px'
        document.getElementById('lk').style.background =''
        document.getElementById('lk').style.border ='1px solid #f50'
      },1000)
    },
    onSubmit() {
      this.$refs["lll"].onSubmit((res) => {
        console.log("表单结果==》",res);
      });
    },
    onSubmit1() {
      this.tempVertify.reset()
    },
    showPanel() {
      let height_ = "0px";
      let rotate_ = 0;
      // rowInfo
      const rowSize = 2;
      const btnSize = 3;
      const tempHeight = rowSize * 65 + 20 + (btnSize > 0 ? 54 : 0);
      // 54

      if (this.animeSwitch) {
        height_ = tempHeight + "px"; // '180px'
        rotate_ = 180;
      }
      if (!this.animeSwitch) {
        height_ = "0px";
        rotate_ = 0;
      }

      anime({
        targets: ".pc-body-panel",
        height: height_,
        duration: 400,
        // backgroundColor: '#A4FF4F',
        easing: "easeInOutQuad",
      });
      anime({
        targets: ".tb",
        rotate: {
          value: rotate_,
          duration: 400,
          easing: "easeInOutSine",
        },
      });

      this.animeSwitch = !this.animeSwitch;
    },
    jy() {
      const res = this.$refs.UpLoadFile.getDataCheckRes({
        card1: "请上传身份证正面",
        card2: "请上传身份证反面",
        card3: "请上传附件",
      });
      console.log("校验结果", res);
    },
    closePreview() {
      this.previewShowConfig.config.visible = false;
    },
    showPreview() {
      this.previewShowConfig.config.visible = true;
    },
    async customRequestEvent(action, dir_, that) {
      // https://webapitest.zxjztech.com/cloud/third/oss/getOssTemporaryToken?_t=1688552078
      // adminapitest-k8s.zxjztech.com
      const url = `https://adminapitest-k8s.zxjztech.com/cloud/third/oss/getOssTemporaryToken?_t=${Date.now()}`;
      const kk = () => {
        const date_ = new Date();
        const year = date_.getFullYear();
        let month = date_.getMonth() + 1;
        let day = date_.getDate();
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        let hours = date_.getHours();
        let mins = date_.getMinutes();
        let secs = date_.getSeconds();
        const msecs = date_.getMilliseconds();
        if (hours < 10) hours = "0" + hours;
        if (mins < 10) mins = "0" + mins;
        if (secs < 10) secs = "0" + secs;
        if (msecs < 10) secs = "0" + msecs;
        return (
          year + "" + month + "" + day + "" + hours + "" + mins + "" + secs
        );
      };
      let options = {
        method: "GET",
        headers: {
          "Content-Type": "application/json;charset=utf-8",
          "X-Access-Token":
            "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NDQ0MjgyNzIsInVzZXJuYW1lIjoiMTAwMDAwMDAwMSJ9.fvYuNLP0DWCB0pMdphOLtJMroSlQcP8UcF3MWcNZl8Y",
          "X-Sign": "E19D6243CB1945AB4F7202A1B00F77D5",
          "X-Timestamp": kk(),
        },
      };

      const file = action.file;
      let name =
        new Date().valueOf() +
        parseInt(Math.random() * 10000) +
        "_" +
        file.name;
      let dir = "/user/card/";
      const bucket = "zxcloud-test";
      // accessKeyId

      let progress = { percent: 1 };
      let speed = 100 / (action.file.size / 65000); //上传速度
      const intervalId = setInterval(() => {
        // 控制进度条防止在未上传成功时进度条达到100
        if (progress.percent < 99 && progress.percent + speed < 100) {
          progress.percent += speed; //控制进度条速度
          action.onProgress(progress); //onProgress接收一个对象{ percent: 进度 }在进度条上显示
        } else if ((progress.percent = 99)) {
          progress.percent++;
        } else if ((progress.percent = 100)) {
          clearInterval(intervalId);
        }
      }, 100);
      // console.log("stsInfo 1====>", url, options);
      const stsInfo = await fetch(url, options).then((res) => res.json());
      // console.log("stsInfo====>", stsInfo);
      const tempParam = {
        region: "oss-cn-hangzhou",
        accessKeyId: stsInfo.result.accessKeyId,
        accessKeySecret: stsInfo.result.accessKeySecret,
        bucket: bucket,
        stsToken: stsInfo.result.securityToken,
      };
      // console.log("+++++++++>", stsInfo, tempParam);
      const client = new OSS(tempParam);
      const resFile = await client.put(dir + name, file);
      // console.log("上传结果=======>", resFile);
      action.onSuccess(resFile, action.file);
      action.loading = false;
      progress.percent = 99;
      return { ...resFile, name: file.name };
    },

    createImg() {
      // var canvas = document.getElementById("canvasOne");
      // var ctx = canvas.getContext("2d");
      var canvas1 = document.getElementById("canvasTwo");
      var ctx1 = canvas1.getContext("2d");

      var canvas2 = document.getElementById("canvasThree");
      var ctx2 = canvas2.getContext("2d");

      // var w = (canvas.width = 1910);
      // var h = (canvas.height = 800);

      var w1 = (canvas1.width = 500);
      var h1 = (canvas1.height = 300);

      var w2 = (canvas2.width = 500);
      var h2 = (canvas2.height = 300);
      const  l= 42, r= 9;
      const PI = Math.PI;

      const getimg = (bc)=>{
        var image = new Image();
        // image.crossOrigin = ''
        image.src ="./1.jpg"
        image.onload=function(){
          bc(image)
        }
      }
        // "https://farm3.staticflickr.com/2908/32764885503_1a04915b11_k.jpg";
      // canvas2.addEventListener("mousemove", mouseMove, false);

      const getRandomNumberByRange =  (start, end)=> {
        return Math.round(Math.random() * (end - start) + start);
      }

      const drawPath = (ctx, x, y, operation) => {
      // const drawPath = (ctx: any, x: number, y: number, operation: "fill" | "clip") => {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
        ctx.lineTo(x + l, y);
        ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
        ctx.lineTo(x + l, y + l);
        ctx.lineTo(x, y + l);
        ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
        ctx.lineTo(x, y);
        ctx.lineWidth = 2;
        ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
        ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
        ctx.stroke();
        ctx.globalCompositeOperation = "destination-over";
        operation === "fill" ? ctx.fill() : ctx.clip();
      };

      // function draw(cx, cy, radius) {
      //   ctx.clearRect(0, 0, w, h);
      //   ctx.save();
      //   ctx.beginPath();
      //   ctx.fillStyle = "#FFF";
      //   ctx.fillRect(0, 0, w, h);
      //   ctx.fill();
      //   ctx.save();

      //   ctx.beginPath();
      //   ctx.fillStyle = "#FFF";

      //   ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
      //   ctx.fill();
      //   // 将上面的区域作为剪辑区域
      //   ctx.clip();
      //   // 由于使用clip()，画布背景图片会出现在clip()区域内
      //   ctx.drawImage(image, 0, 0);
      //   ctx.restore();
      // }
      // function mouseMove(e) {
      //   e.preventDefault();
      //   e.stopPropagation();

      //   const mouseX = parseInt(e.clientX);
      //   const mouseY = parseInt(e.clientY);
      //   draw(mouseX, mouseY, 100);
      // }
      // draw(w / 2, h / 2, 100);

      getimg((image)=>{
        // 切割形状的大小
        const L = l + r * 2 + 3; // 滑块实际边长
        let xRef = getRandomNumberByRange(L + 10, w1 - (L + 10));
        let yRef = getRandomNumberByRange(10 + r * 2, h1 - (L + 10));
        drawPath(ctx1, xRef, yRef, 'fill')
        drawPath(ctx2, xRef, yRef, 'clip')
  
        ctx1.drawImage(image, 0, 0, w1, h1);
        ctx2.drawImage(image, 0, 0, w2, h2);
  
        // 提取滑块并放到最左边
        const y1 = yRef - r * 2 - 1;
        const ImageData = ctx2.getImageData(xRef - 3, y1, L, L); 
        canvas2.width = L;
        ctx2.putImageData(ImageData, 0, y1);
        console.log(xRef-3,yRef);
      })



      // var move = document.getElementById('moves')

      canvas2.addEventListener('mousedown', function (event) {
          let disx = event.clientX - canvas2.offsetLeft;
          // let disy = event.clientY - move.offsetTop

          document.onmousemove = function (event) {
            canvas2.style.left = event.clientX - disx + 'px'
              // move.style.top = event.clientY - disy + 'px'
          }

          document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
            return false
          }

      })
    },
  },
  }
</script>
<style  >
.tzd {
  /* background: url("https://farm3.staticflickr.com/2908/32764885503_1a04915b11_k.jpg")
    no-repeat center; */
  /* width: 100vw; */
  width: 50%;
  height: 300px;
  position: relative;
  margin: 0 30px;
  /* height: 800px; */
  /* min-height: 100%; */

}

.move {
            width: 100px;

            height: 100px;

            background-color: rgb(59, 149, 227);

            position: absolute;

        }
</style>