<!--
 * @Date: 2022-08-29 14:31:20
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-11-21 10:25:09
 * @FilePath: /data-table/src/components/TableField/index.vue
 * @Description: 表格组件
-->
<template>
  <div v-if="HideShow" class="table-field-page">
    <div class="label">
      <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span>
      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
    </div>
    <div v-if="!item.component_props.readonly" class="tinymce-box">
      <TEditor ref="refEdit" @blur="onBlur" :table_html="table_html" :readonly="item.component_props.readonly"></TEditor>
    </div>
    <!-- <div @click="getValue">获取内容</div>
    <div @click="setValue">设置内容</div> -->
    <div v-if="item.component_props.readonly" style="padding: 1rem;">
      <div v-html="table_html" class="table-wrapper"></div>
    </div>
    <div
      v-if="show_empty"
      class="van-field__error-message"
      style="padding: 1rem"
    >
      表格不能为空
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { showSuccessToast, showFailToast, showToast } from 'vant';
// 初始化WX环境
import wx from 'weixin-js-sdk'
import $ from 'jquery'
import TEditor from "@/components/TEditor/index.vue";
import Cookies from 'js-cookie';

const $route = useRoute();
const props = defineProps({
  item: Object,
});
const emit = defineEmits(["active"]);

// 隐藏显示
const HideShow = computed(() => {
  return !props.item.component_props.disabled
});

// 只读显示-流程模式
const ReadonlyShow = computed(() => {
  return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly;
});

onMounted(() => {
  //
  table_html.value = props.item.component_props?.default ? props.item.component_props.default : props.item.component_props.note;
  //
  props.item.value = {
    key: "table_editor",
    filed_name: props.item.key,
    value: props.item.component_props?.default ? props.item.component_props.default : props.item.component_props.note,
  };
  emit("active", props.item.value);
  // 设置表格显示宽度
  nextTick(() => {
    setTimeout(() => {
      $('.tinymce-box').width($('.table-field-page').width() + 'px');
    }, 100);
  })
});

const refEdit = ref(null);

// refEdit.value.handleGetContent()
const getValue = () => {
  console.warn(refEdit.value.handleGetContent());
}

// const setValue = () => {
//   refEdit.value.handleSetContent(table)
// }

const table_html = ref('');
// const setHtml = () => {
//   table_html.value = table
// }

const onBlur = (html) => {
  table_html.value = html;
  props.item.value = {
    key: "table_editor",
    filed_name: props.item.key,
    value: html,
  };
  emit("active", props.item.value);
  // 适配cookie保存未完成表单
  const currentValue = html;
  const existingCookie = Cookies.get($route.query.code);

  if (existingCookie) {
    // 如果Cookie存在，更新它
    let obj = JSON.parse(existingCookie);
    obj[props.item.key] = currentValue; // 替换掉旧值
    Cookies.set($route.query.code, JSON.stringify(obj), { expires: 1 });
  } else {
    // 如果Cookie不存在，新增它
    Cookies.set($route.query.code, JSON.stringify({ [props.item.key]: currentValue }), { expires: 1 });
  }
}

// const table = `
// <table>
//   <thead>
//     <tr>
//       <th>姓名</th>
//       <th>年龄</th>
//       <th>城市</th>
//       <th>姓名</th>
//       <th>年龄</th>
//       <th>城市</th>
//       <th>姓名</th>
//       <th>年龄</th>
//       <th>城市</th>
//       <th>姓名</th>
//       <th>年龄</th>
//       <th>城市</th>
//     </tr>
//   </thead>
//   <tbody>
//     <tr>
//       <td>张三</td>
//       <td>28</td>
//       <td>北京</td>
//       <td>张三</td>
//       <td>28</td>
//       <td>北京</td>
//       <td>张三</td>
//       <td>28</td>
//       <td>北京</td>
//       <td>张三</td>
//       <td>28</td>
//       <td>北京</td>
//     </tr>
//     <tr>
//       <td>李四</td>
//       <td>34</td>
//       <td>上海</td>
//       <td>李四</td>
//       <td>34</td>
//       <td>上海</td>
//       <td>李四</td>
//       <td>34</td>
//       <td>上海</td>
//       <td>李四</td>
//       <td>34</td>
//       <td>上海</td>
//     </tr>
//     <tr>
//       <td>王五</td>
//       <td>22</td>
//       <td>广州</td>
//       <td>王五</td>
//       <td>22</td>
//       <td>广州</td>
//       <td>王五</td>
//       <td>22</td>
//       <td>广州</td>
//       <td>王五</td>
//       <td>22</td>
//       <td>广州</td>
//     </tr>
//   </tbody>
// </table>
// `
const show_empty = ref(false);
// 校验模块
const validTableEditor = () => {
  if (props.item.component_props.disabled) { // 通过规则隐藏的属性，不校验
    show_empty.value = false;
  } else {
    // 必填项
    if (props.item.component_props.required && !refEdit.value.handleGetContent()) {
      show_empty.value = true;
      showToast(props.item.component_props.label + "必填项未填写");
    } else {
      show_empty.value = false;
    }
  }
  return !show_empty.value;
};

defineExpose({ validTableEditor });
</script>

<style lang="less" scoped>
.table-field-page {
  .label {
    padding: 1rem 1rem 0 1rem;
    font-size: 0.9rem;
    font-weight: bold;
  }
  // padding: 1rem;
}

.tinymce-box {
  // width: 100%;
  display: block;
  // margin-top: 1rem;
}

:deep(.table-wrapper) {
  overflow: auto;
  font-size: 14px;
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f4f4f4;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tr:hover {
    background-color: #f1f1f1;
  }
}
</style>