<!--
 * @Date: 2022-08-29 14:31:20
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-08-01 17:57:49
 * @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.required" style="color: red">&nbsp;*</span>
      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
    </div>
    <div 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>
      <div v-html="table_html" class="table-wrapper"></div>
      <div @click="setHtml">设置内容</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";

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' && !props.item.component_props.readonly;
});

onMounted(() => {
  $('.tinymce-box').width($('.table-field-page').width() + 'px');
  //
  table_html.value = props.item.component_props.default;
  //
  props.item.value = {
    key: "table_editor",
    filed_name: props.item.key,
    value: props.item.component_props.default,
  };
  emit("active", props.item.value);
  // setTimeout(() => {
  // }, 1000);
  // nextTick(() => {
  //   if (refEdit.value) {
  //     refEdit.value.handleSetContent(props.item.component_props.default)
  //   }
  // })
});

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);
}

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;
  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>