<!--
 * @Date: 2022-08-29 14:31:20
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-08-01 13:17:05
 * @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" ></TEditor>
      <div @click="getValue">获取内容</div>
      <div @click="setValue">设置内容</div>
    </div>
    <div>
      <div v-html="table_html" class="table-wrapper"></div>
      <div @click="setHtml">设置内容</div>
    </div>
  </div>
</template>

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

const $route = useRoute();
const props = defineProps({
  item: Object,
});

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

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

onMounted(() => {
  props.item.value = 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 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>
`
</script>

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

.tinymce-box {
  // width: 100%;
}

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