<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="合同名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="合同时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="合同性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="线上合同" name="type"></el-checkbox>
      <el-checkbox label="地推合同" name="type"></el-checkbox>
      <el-checkbox label="线下合同" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="品牌商赞助"></el-radio>
      <el-radio label="场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="合同备注">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
</el-form>
</template>

<script>

 // 监听 message 的变化

 // 监听 message 的变化
 window.addEventListener('message', function (e) {
	// document.getElementById('span1').innerHTML = JSON.stringify(e.data) // 作为第一个参数传递给postMessage的数据
	// document.getElementById('span2').innerHTML = e.origin // 发送消息的来源，可以根据origin来确保期望的发送者
    var parentWin = e.source // 发送消息的window代理对象  
	var data = e.data;
	switch (data.cmd) {
	case 'Save':
	  Save(data.params);
	  break;
	}
	parentWin.postMessage(
	  {
		cmd: 'Save',
		params: {'data':true},
	  },
	  e.origin,
	);

});

  // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
 const Save = () => {
   debugger
  return true;
 };
// eslint-disable-next-line @typescript-eslint/no-unused-vars
//  function Save(){
//    return true;
//  }
// eslint-disable-next-line vue/no-export-in-script-setup
//   export function Save() {
//    return true;
//   };
// eslint-disable-next-line vue/no-export-in-script-setup
// export default defineComponent({
//   methods: {
//     Save() {
//       // 方法逻辑
//       console.log('Hello, Vue 3 with TypeScript!');
//       return true;
//     },
//   },
// });
// export default defineComponent({
//   setup() {
//     const myMethod = () => {
//       // 方法逻辑
//       console.log('Hello, Vue 3 with TypeScript!');
//     };
//
//     return { myMethod };
//   },
// });
window.Save = Save;


//保存按钮跨域的情况下使用这个方法试试
// const frameRef = shallowRef<
//     HTMLIFrameElement & {
//       contentWindow: {
//         window: {
//           Save: Function;
//         };
//       };
//     }
//   >();
// const Save = async (isOnlySend, isOnlySaveWorkCheck, callback) => {
//     try {
//       //判断iframe是否跨域
//       // let isCross = false;
//       // if (!!iframeHost.value && iframeHost.value != VITE_GLOB_API_URL) isCross = true;
//       // 应该使用当前页面的url和iframe地址比较，不应该比较接口地址 wanglu修改
//       // const isCross = sameOriginCheck(iframeUrl.value);
//       // if (!!iframeHost.value && iframeHost.value != window.location.origin) isCross = true;
//       // if (!!instance) {
//         const frameWin = frameRef.value?.contentWindow;
//         if (!!frameWin) {
//             window.addEventListener('Save', function (event) {
//               // 根据上面制定的结构来解析iframe内部发回来的数据
//               const data = event.data;
//               switch (data.cmd) {
//                 case 'Save':
//                   if (typeof callback == 'function') callback(data.params.data);
//                   break;
//               }
//             });
//             frameWin.postMessage(
//               {
//                 cmd: 'message',
//                 params: {},
//               },
//               '*',
//             );
//         }
//         return;
//       // } 
//     } catch (e:any) {
//       message.error(e)
//       if (typeof callback == 'function') callback(false);
//     } 
//   };

    export default {
      data() {
        return {
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          }
        }
      },
      methods: {
        onSubmit() {
          console.log('submit!');
        }
      }
    }
</script>

<style>
body {
  margin-top: -30vh;
}
</style>
