<template>
  <div>
    <!-- edit table -->
    <div
      v-if="
        text.rowEdit &&
        column.editConfig &&
        visibleFormItem(column.editConfig.show, text) &&
        calcVisible(column.editConfig.permission)
      "
    >
      <n-input
        v-if="column.editConfig.type === 'input'"
        v-model:value="text[column.field]"
        :placeholder="column.placeholder"
      />

      <n-input-number
        v-if="column.editConfig.type === 'number'"
        v-model:value="text[column.field]"
        :placeholder="column.placeholder"
      />

      <fl-select
        v-if="column.editConfig.type === 'select'"
        :config="column.editConfig"
        :defaultVal="text[column.field]"
        @triggerChangeVal="(e) => handleSelectChange(e, text, column.field)"
      ></fl-select>

      <fl-upload
        v-if="column.editConfig.type === 'upload'"
        :otherParams="{
          type: column.editConfig.fileType || 'image',
          source: column.editConfig.source,
          mask: fatherData
            ? fatherData[column.editConfig.mask]
            : text[column.editConfig.mask],
        }"
        class="fl-table-upload"
        :val="text[column.field]"
        :deletable="column.editConfig.deletable"
        :disabled="column.editConfig.disabled"
        height="100%"
        @triggerUpload="(e) => handleUpload(e, column.field, text, column)"
      />

      <fl-date-picker
        v-if="column.editConfig.type === 'date'"
        :defaultVal="text[column.field]"
        :format="column.format || 'YYYY-MM-DD'"
        @triggerChangeVal="(e) => handleDateChange(e, text, column.field)"
      />

      <div
        v-if="column.editConfig.type === 'text&date' && column.editConfig.field"
      >
        <div v-html="text[column.field]"></div>
        <fl-date-picker
          :defaultVal="text[column.editConfig.field]"
          :format="column.format || 'YYYY-MM-DD'"
          @triggerChangeVal="
            (e) => handleDateChange(e, text, column.editConfig.field)
          "
        />
      </div>

      <!-- calcImgOss(text[column.field], column, text) 仅为了计算field_oss值，实际上src绑的就是field_oss -->
      <img
        v-if="column.editConfig.type === 'image' && text[column.field]"
        :src="
          text[column.field + '_oss'] ||
          calcImgOss(text[column.field], column, text)
        "
        style="width: 50px; height: 50px"
      />

      <template v-if="column.editConfig.type === 'actions'">
        <n-button
          v-for="(act, actIdx) in column.editConfig.actions"
          v-permission="act.permission"
          :key="actIdx"
          :type="act.type"
          :round="act.shape === 'round'"
          :circle="act.shape === 'circle'"
          :text="act.isText || false"
          size="small"
          v-nloading="act.btnLoading || false"
          @click="handleRowEditActions(act, text)"
          >{{ act.label }}</n-button
        >
      </template>
    </div>

    <div v-else-if="column.type === 'oneRowEdit'" class="row justify-center">
      <div
        v-if="!text.rowEdit"
        class="fl-ma-xs cursor sf-link"
        @click="text.rowEdit = true"
      >
        编辑
      </div>

      <div
        v-if="text.rowEdit"
        class="fl-ma-xs cursor sf-link"
        @click="handleOneRowActions(column, text)"
      >
        <n-spin
          style="margin-right: 20px"
          v-show="calcRowBtnLoading(column, text)"
        />
        保存
      </div>
      <div
        v-if="text.rowEdit"
        class="fl-ma-xs cursor"
        style="color: #939393"
        @click="handleOneRowActionsCancel(text)"
      >
        取消
      </div>

      <div v-if="!text.rowEdit && column.actions" class="row justify-center">
        <template v-for="(act, actIdx) in column.actions" :key="actIdx">
          <template v-if="act.tooltip && calcVisible(act.permission)">
            <n-popconfirm
              positive-text="是的"
              negative-text="放弃"
              @positive-click="handleRowActions(act, text)"
            >
              <template #trigger>
                <div
                  v-if="act.type === 'label'"
                  v-show="visibleFormItem(act.show, text)"
                  :style="act.style"
                  class="fl-ma-xs cursor sf-link"
                  :class="act.class"
                >
                  <n-spin
                    style="margin-right: 20px"
                    v-show="calcRowBtnLoading(act, text) && act.hasLoading"
                  />
                  {{ act.label }}
                </div>
                <n-button
                  v-else
                  v-permission="act.permission"
                  v-show="visibleFormItem(act.show, text)"
                  :type="act.type"
                  :round="act.shape === 'round'"
                  :circle="act.shape === 'circle'"
                  :style="act.style"
                  :text="act.isText || false"
                  :class="act.class"
                  v-nloading="act.btnLoading || false"
                  size="small"
                >
                  <template v-if="act.icon === 'delete'" #icon>
                    <DeleteOutlined />
                  </template>
                  <template v-else-if="act.icon === 'edit'" #icon>
                    <EditOutlined />
                  </template>
                  {{ act.label }}
                </n-button>
              </template>
              确定?
            </n-popconfirm>
          </template>
          <template v-else-if="calcVisible(act.permission)">
            <div
              v-if="act.type === 'label'"
              v-show="visibleFormItem(act.show, text)"
              :style="act.style"
              class="fl-ma-xs cursor sf-link"
              :class="[
                act.class,
                act.disable && visibleFormItem(act.disable, text)
                  ? 'color-grey-disable'
                  : '',
              ]"
              @click="handleRowActions(act, text)"
            >
              <n-spin
                style="margin-right: 20px"
                v-show="calcRowBtnLoading(act, text) && act.hasLoading"
              />
              {{ act.label }}
            </div>

            <n-badge
              v-else-if="act.type === 'dot'"
              :value="text[act.countColoum]"
              v-show="visibleFormItem(act.show, text)"
              dot
            >
              <div
                :style="act.style"
                class="fl-ma-xs cursor sf-link"
                :class="act.class"
                @click="handleRowActions(act, text)"
              >
                <n-spin
                  style="margin-right: 20px"
                  v-show="calcRowBtnLoading(act, text) && act.hasLoading"
                />
                {{ act.label }}
              </div>
            </n-badge>
            <n-button
              v-else
              v-permission="act.permission"
              v-show="visibleFormItem(act.show, text)"
              :type="act.type"
              :round="act.shape === 'round'"
              :circle="act.shape === 'circle'"
              :style="act.style"
              :text="act.isText || false"
              :class="act.class"
              v-nloading="calcRowBtnLoading(act, text)"
              size="small"
              @click="handleRowActions(act, text)"
            >
              <template v-if="act.icon === 'delete'" #icon>
                <DeleteOutlined />
              </template>
              <template v-else-if="act.icon === 'edit'" #icon>
                <EditOutlined />
              </template>
              {{ act.label }}
            </n-button>
          </template>
        </template>
      </div>
    </div>

    <div v-else-if="!text.rowEdit && column.actions" class="row justify-center">
      <template v-for="(act, actIdx) in column.actions" :key="actIdx">
        <template v-if="act.tooltip && calcVisible(act.permission)">
          <n-popconfirm
            positive-text="是的"
            negative-text="放弃"
            @positive-click="handleRowActions(act, text)"
          >
            <template #trigger>
              <div
                v-if="act.type === 'label'"
                v-show="visibleFormItem(act.show, text)"
                :style="act.style"
                class="fl-ma-xs cursor sf-link"
                :class="act.class"
              >
                <n-spin
                  style="margin-right: 20px"
                  v-show="calcRowBtnLoading(act, text) && act.hasLoading"
                />
                {{ act.label }}
              </div>
              <n-button
                v-else
                v-permission="act.permission"
                v-show="visibleFormItem(act.show, text)"
                :type="act.type"
                :round="act.shape === 'round'"
                :circle="act.shape === 'circle'"
                :style="act.style"
                :text="act.isText || false"
                :class="act.class"
                v-nloading="act.btnLoading || false"
                size="small"
              >
                <template v-if="act.icon === 'delete'" #icon>
                  <DeleteOutlined />
                </template>
                <template v-else-if="act.icon === 'edit'" #icon>
                  <EditOutlined />
                </template>
                {{ act.label }}
              </n-button>
            </template>
            确定?
          </n-popconfirm>
        </template>
        <template v-else-if="calcVisible(act.permission)">
          <div
            v-if="act.type === 'label'"
            v-show="visibleFormItem(act.show, text)"
            :style="act.style"
            class="fl-ma-xs cursor sf-link"
            :class="[
              act.class,
              act.disable && visibleFormItem(act.disable, text)
                ? 'color-grey-disable'
                : '',
            ]"
            @click="handleRowActions(act, text)"
          >
            <n-spin
              style="margin-right: 20px"
              v-show="calcRowBtnLoading(act, text) && act.hasLoading"
            />
            {{ act.label }}
          </div>

          <n-badge
            v-else-if="act.type === 'dot'"
            :value="text[act.countColoum]"
            v-show="visibleFormItem(act.show, text)"
            dot
          >
            <div
              :style="act.style"
              class="fl-ma-xs cursor sf-link"
              :class="act.class"
              @click="handleRowActions(act, text)"
            >
              <n-spin
                style="margin-right: 20px"
                v-show="calcRowBtnLoading(act, text) && act.hasLoading"
              />
              {{ act.label }}
            </div>
          </n-badge>
          <n-button
            v-else
            v-permission="act.permission"
            v-show="visibleFormItem(act.show, text)"
            :type="act.type"
            :round="act.shape === 'round'"
            :circle="act.shape === 'circle'"
            :style="act.style"
            :text="act.isText || false"
            :class="act.class"
            v-nloading="calcRowBtnLoading(act, text)"
            size="small"
            @click="handleRowActions(act, text)"
          >
            <template #icon v-if="act.icon === 'delete'">
              <n-icon> </n-icon>
            </template>
            <template #icon v-else-if="act.icon === 'edit'">
              <n-icon> </n-icon>
            </template>
            {{ act.label }}
          </n-button>
        </template>
      </template>
    </div>

    <template
      v-else-if="column.type === 'slot' && calcVisible(column.permission)"
    >
      <slot
        :name="column.slotName"
        :data="state.tableData"
        :column="column"
        :text="text"
      ></slot>
    </template>

    <template v-else-if="column.type === 'orderIndex'">
      <div>{{ `${index + 1}` }}</div>
    </template>

    <template v-else-if="column.type === 'sfBgColor'">
      <n-tooltip :placement="'top-left'">
        <template #trigger>
          <div
            class="fl-px-sm sf-text-ellipsis"
            style="
              border-radius: 3px;
              max-width: 100%;
              border: 1px solid #ded7f1;
            "
            :style="{
              borderColor: text[column.bgConfig.bgColorField],
              color: text[column.bgConfig.bgColorField] || '#fff',
              width: '120px',
            }"
          >
            {{ text[column.field] }}
          </div>
        </template>
        <div v-html="text[column.field]"></div>
      </n-tooltip>
    </template>

    <template
      v-else-if="column.type === 'tags' && Array.isArray(text[column.field])"
    >
      <div
        v-if="text[column.field].length <= column.tagConfig.showLength"
        class="row"
      >
        <div
          v-for="(tag, idx) in text[column.field]"
          :key="idx"
          class="fl-mr-sm fl-px-sm fl-py-xs sf-text-ellipsis"
          style="border: solid 1px #ded7f1; border-radius: 3px; width: 80px"
          :style="{
            background: column.tagConfig.bgColor,
            color: tag[column.tagConfig.tagBgColorField] || '#000000FF',
            borderColor: tag[column.tagConfig.tagBgColorField] || '#000000FF',
            borderRadius: column.tagConfig.borderRadius,
          }"
          :class="column.tagConfig.class"
        >
          <n-popover :show-arrow="true" :scrollable="true">
            <template #trigger>
              {{ calcTagLabel(tag, column.tagConfig) }}
            </template>
            {{ calcTagLabel(tag, column.tagConfig) }}
          </n-popover>
        </div>
      </div>

      <div v-else class="row">
        <div
          v-for="(tag, idx) in text[column.field].slice(
            0,
            column.tagConfig.showLength
          )"
          :key="idx"
          class="fl-mr-sm fl-px-sm fl-py-xs sf-text-ellipsis"
          style="border: solid 1px #ded7f1; border-radius: 3px; width: 80px"
          :style="{
            background: column.tagConfig.bgColor,
            color: tag[column.tagConfig.tagBgColorField] || '#000000FF',
            borderColor: tag[column.tagConfig.tagBgColorField] || '#000000FF',
            borderRadius: column.tagConfig.borderRadius,
          }"
          :class="column.tagConfig.class"
        >
          <n-popover :show-arrow="true" :scrollable="true">
            <template #trigger>
              {{ calcTagLabel(tag, column.tagConfig) }}
            </template>
            {{ calcTagLabel(tag, column.tagConfig) }}
          </n-popover>
        </div>

        <n-popover :show-arrow="true" :scrollable="true" placement="top-left">
          <div
            class="row"
            style="
              min-width: 120px;
              max-width: 180px;
              max-height: 30vh;
              overflow-y: auto;
            "
          >
            <div
              v-for="(tag, idx) in text[column.field].slice(
                column.tagConfig.showLength,
                text[column.field].length
              )"
              :key="idx"
              class="col-12 row"
            >
              <span
                class="fl-mb-sm fl-px-sm fl-py-xs"
                style="
                  border: solid 1px #000000ff;
                  border-radius: 3px;
                  color: #000000ff;
                "
                :style="column.tagConfig.style"
                :class="column.tagConfig.class"
              >
                {{ calcTagLabel(tag, column.tagConfig) }}
              </span>
            </div>
          </div>

          <template #trigger>
            <div
              class="fl-mr-sm fl-px-sm fl-py-xs cursor sf-text-ellipsis"
              style="
                border: solid 1px #000000ff;
                border-radius: 3px;
                width: 40px;
              "
              :style="{
                background: column.tagConfig.bgColor,
                borderRadius: column.tagConfig.borderRadius,
              }"
            >
              ...
            </div>
          </template>
        </n-popover>
      </div>
    </template>

    <template v-else-if="column.type === 'assignField'">
      <div>{{ text[column.assignField][column.field] }}</div>
    </template>

    <template v-else-if="column.type === 'html'">
      <div v-html="text[column.field]"></div>
    </template>

    <div v-else-if="column.type === 'image' && calcVisible(column.permission)">
      <a-image
        v-if="text[column.field]?.endsWith('.pdf')"
        class="cursor"
        :height="column.height || '50px'"
        :src="staticpdf"
        fallback="data:image/png;base64,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"
      >
        <template #previewMask>
          <div
            class="color-primary fl-ma-sm"
            @click.stop="handleOpenLink(text[column.field])"
          >
            <eye-outlined />
          </div>
        </template>
      </a-image>
      <div v-else-if="calcImageVal(column.field, text) && column.popover">
        <n-popover :show-arrow="true" :scrollable="true" placement="left">
          <img
            :src="
              calcImageVal(column.field, text) +
              '?x-oss-process=image/resize,w_480,h_480'
            "
            style="width: 500px; height: auto"
            alt="file"
            fallback="data:image/png;base64,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"
          />

          <template #trigger>
            <div style="padding: 4px">
              <a-image
                :height="column.height || '50px'"
                style="object-fit: none"
                @click.stop=""
                :src="
                  text[column.field + '_oss'] ||
                  calcImgOss(calcImageVal(column.field, text), column, text)
                "
                :preview="{
                  src:
                    calcImageVal(column.field, text) +
                    '?x-oss-process=image/resize,w_'+(column.ossWitdh||2560)+',h_'+(column.ossHeight||2560),
                }"
                fallback="data:image/png;base64,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"
              >
              </a-image>
            </div>
          </template>
        </n-popover>
      </div>

      <n-image
        v-else-if="calcImageVal(column.field, text)"
        height="50"
        class="fln-table-cell-image"
        @click.stop=""
        :src="
          text[column.field + '_oss'] ||
          calcImgOss(calcImageVal(column.field, text), column, text)
        "
        :preview-src="
          calcImageVal(column.field, text) +
          '?x-oss-process=image/resize,w_2560,h_2560'
        "
        fallback-src="data:image/png;base64,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"
      >
      </n-image>

      <!-- <a-image
        v-else-if="calcImageVal(column.field, text)"
        :preview="{
          src:
            calcImageVal(column.field, text) +
            '?x-oss-process=image/resize,w_2560,h_2560',
        }"
        :src="
          text[column.field + '_oss'] ||
          calcImgOss(calcImageVal(column.field, text), column, text)
        "
        :height="column.height || '50px'"
        style="object-fit: none"
        fallback="data:image/png;base64,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"
      /> -->
    </div>

    <div v-else-if="column.type === 'avatar' && calcVisible(column.permission)">
      <a-image
        v-if="text[column.field]"
        class="cursor"
        style="height: 50px; width: 50px; border-radius: 50%"
        @click.stop=""
        :src="text[column.field]"
        :preview="{
          src: calcImageVal(column.field, text),
        }"
        fallback="data:image/png;base64,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"
      >
      </a-image>
    </div>
    <!-- not edit row -->
    <div v-else>
      <template
        v-if="
          column.type === 'arraydefault' &&
          text[column.field] &&
          Array.isArray(JSON.parse(text[column.field]))
        "
      >
        <div class="cursor sf-link">
          {{ JSON.parse(text[item.field])[0] }}
        </div>
      </template>

      <template
        v-else-if="column.type === 'array' && Array.isArray(text[column.field])"
      >
        {{ text[column.field].join(",") }}
      </template>

      <template v-else-if="column.type === 'href'">
        <div
          @click="handleHref(text[column.field])"
          class="theme-color cursor"
        >
          {{ text[column.field] ? column.title : "" }}
        </div>
      </template>

      <template v-else-if="column.type === 'down'">
        <div class="theme-color cursor" @click="handleDown(text, column)">
          {{ text[column.field] ? column.title : "" }}
        </div>
      </template>

      <div
        v-else-if="column.type === 'video' && calcVisible(column.permission)"
        :class="column.class"
        :style="column.style"
      >
        <video
          v-if="text[column.field]"
          :poster="text[column.posterField]"
          style="width: 100%; height: 100%"
          :style="column.videoStyle"
          :src="text[column.field]"
          controls="th"
        ></video>
      </div>

      <div
        v-else-if="column.type === 'tooltip' && calcVisible(column.permission)"
        :class="column.class"
        :style="{
          maxWidth: column.maxWidth || '200px',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        }"
      >
        <n-tooltip :placement="column.tooltipTo || 'top-left'">
          <template #trigger>
            <div
              :style="{
                maxWidth: column.maxWidth || '200px',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }"
              v-html="text[column.field]"
            ></div>
          </template>
          <div
            :style="{
              maxHeight: column.maxHeight || '600px',
              overflow: 'auto',
            }"
          >
            <div v-html="text[column.field]"></div>
          </div>
        </n-tooltip>
      </div>

      <div
        v-else-if="column.type === 'markdown' && calcVisible(column.permission)"
        class="cursor"
        :class="column.class"
        @click="handlePreMd(text[column.field])"
      >
        <div class="color-primary">查看</div>
      </div>

      <div v-else-if="column.type === 'select'" class="relative">
        <n-badge
          v-if="column.badge && visibleFormItem(column.badge, text)"
          style="display: block; line-height: inherit"
          :value="text[column.badgeField]"
        >
          <div
            :class="
              column.classExpression
                ? visibleFormItem(column.classExpression, text)
                  ? column.rowClass
                  : handleVerifyFormat(column, text)
                  ? column.class
                  : column.rowClass
                : column.class
            "
            v-html="
              getLabelByOptions(text[column.field], column.config?.options)
            "
            @click="handleRowClick(column, text)"
          ></div>
        </n-badge>

        <div
          v-else
          :class="
            column.classExpression
              ? visibleFormItem(column.classExpression, text)
                ? column.rowClass
                : handleVerifyFormat(column, text)
                ? column.class
                : column.rowClass
              : column.class
          "
          v-html="
            getLabelByOptions(
              text[column.field],
              column.config?.options,
              column.customEmpty
            )
          "
          @click="handleRowClick(column, text)"
        ></div>

        <!-- <n-popover v-if="visibleFormItem(column.tipRight?.show, text)" :show-arrow="true"
                   :title="column.tipRight?.title">
          <div v-if="calcTip(column, text).length > 0">
            <p v-for="(tp, tpIdx) in calcTip(column, text)"
               :key="tpIdx">
              {{ tp }}
            </p>
          </div>
          <p v-else
             style="text-align: center">暂无数据</p>
          <template #trigger>
            <ExclamationOutlined v-if="column.tipRight && visibleFormItem(column.tipRight?.show, text)"
                                 class="absolute"
                                 :style="column.tipRight.style" />
          </template>
        </n-popover> -->
      </div>

      <div v-else-if="column.format">
        {{ calcFormat(column, text[column.field]) }}
      </div>

      <div v-else-if="column.type === 'badge'" class="relative">
        <n-badge
          v-if="column.badge && visibleFormItem(column.badge, text)"
          :dot="column.badge && visibleFormItem(column.badge, text)"
          style="display: block; line-height: inherit"
        >
          <div
            :class="
              column.classExpression
                ? visibleFormItem(column.classExpression, text)
                  ? column.rowClass
                  : handleVerifyFormat(column, text)
                  ? column.class
                  : column.rowClass
                : column.class
            "
            v-html="text[column.field]"
          ></div>
        </n-badge>
        <div
          v-else
          :class="
            column.classExpression
              ? visibleFormItem(column.classExpression, text)
                ? column.rowClass
                : handleVerifyFormat(column, text)
                ? column.class
                : column.rowClass
              : column.class
          "
          v-html="text[column.field]"
        ></div>
      </div>

      <div
        v-else-if="calcVisible(column.permission)"
        :class="
          column.classExpression
            ? visibleFormItem(column.classExpression, text)
              ? column.rowClass
              : handleVerifyFormat(column, text)
              ? column.class
              : column.rowClass
            : column.class
        "
        :style="column.style"
      >
        {{
          text[column.field]
            ? text[column.field]
            : column.customEmpty
            ? column.customEmpty
            : text[column.field]
        }}

        <div
          v-if="column.remark && visibleFormItem(column.remark.show, text)"
          :class="column.remark.titleClass"
        >
          {{ column.remark.title }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import flUpload from "@/components/flnlayout/upload/flncommonUpload.vue";
import flDatePicker from "@/components/flnlayout/date/flndate.vue";
import flSelect from "@/components/flnlayout/select/flnselect.vue";
import flnFormItem from "@/components/flnlayout/form/flnformItem.vue";
import {
  NodeCollapseOutlined,
  SearchOutlined,
  CaretRightOutlined,
  PlusOutlined,
  DeleteOutlined,
  EditOutlined,
  EyeOutlined,
  ExclamationOutlined,
} from "@ant-design/icons-vue";
import {
  reactive,
  onBeforeMount,
  ref,
  watch,
  getCurrentInstance,
  computed,
} from "vue";
import {
  getParamsByObj,
  visibleFormItem,
  getLabelByOptions,
  calcFormat,
  verifyFormat,
} from "@/utils/helper/form";
import { calcImgOssEnable } from "@/utils/helper/image";
import { processError, processSuccess } from "@/utils/helper/message";
const currentInstance = getCurrentInstance();

const { $request, $hadRule } =
  currentInstance.appContext.config.globalProperties;

const emit = defineEmits([
  "triggerPreMd",
  "triggerRowActions",
  "triggerRowEditActions",
  "triggerGetTableData",
  "triggerRowClick",
  "triggerRowEditActSuccess",
  "triggerOneRowActionsSuccess",
  "triggerActionUrlSuccess",
]);
let props = defineProps({
  text: Object,
  column: Object,
  index: [Number, String],
  fatherData: Object,
});
const state = reactive({
  markdownVal: "",
  modalMdVisible: false,
  tableData: [],
});

onBeforeMount(() => {});

onMounted(() => {});
const calcTagLabel = (data, config) => {
  if (config.tagField) {
    return data[config.tagField];
  }
  return data;
};

const calcSfBgColorWidth = (val) => {
  if (val) {
    return val.length * 25 + 10 + "px !important";
  }
  return null;
};
const handleVerifyFormat = (config, rowData) => {
  if (config.verifyFormat) {
    return verifyFormat(config, rowData[config.field]);
  }
  return true;
};

// 处理image oss
const calcImgOss = (val, config, rowData) => {
  // 这里不要这么直接return  因为type image field 有可能是数组
  // if (!rowData[config.field]) {
  //   return (rowData[config.field + "_oss"] = "");
  // }
  calcImgOssEnable(val).then((res) => {
    rowData[config.field + "_oss"] = res;
  });
};
const calcTip = (config, rowData) => {
  let tipArr = [];
  if (Array.isArray(config.tipRight.tipRightField)) {
    config.tipRight.tipRightField.forEach((item) => {
      if (item?.type === "array" && rowData[item.field]) {
        rowData[item.field].split(",").forEach((str) => {
          tipArr.push(str);
        });
      } else if (rowData[item]) {
        tipArr.push(rowData[item]);
      }
    });
  }
  return tipArr;
};
const handlePreMd = (val) => {
  // state.markdownVal = val;
  // state.modalMdVisible = true;
  emit("triggerPreMd", {
    val,
  });
};
const calcRowBtnLoading = (btnConfig, rowData) => {
  if (rowData[btnConfig.actionLoadingField]) {
    return rowData[btnConfig.actionLoadingField];
  }
  return btnConfig.btnLoading || false;
};

const handleDown = (rowData, config) => {
  let aLink = document.createElement("a");
  let fileName = config.filename || "文件";
  if (Array.isArray(fileName)) {
    let newName = "";
    fileName.forEach((fi) => {
      newName = newName + " " + (rowData[fi] || fi);
    });
    fileName = newName;
  }
  aLink.download = fileName;
  aLink.href = rowData[config.field];
  aLink.click();
};

// 打开三方网页
const handleHref = (val) => {
  window.open(val);
};

const handleRowActions = async (btnConfig, rowData, itemConfig) => {
  if (calcRowBtnLoading(btnConfig, rowData)) {
    return;
  }
  if (btnConfig.disable && visibleFormItem(btnConfig.disable, rowData)) {
    return;
  }
  if (btnConfig.actionType === "edit") {
    rowData.rowEdit = true;
  } else if (btnConfig.actionUrl) {
    btnConfig.actionLoadingField !== undefined
      ? (rowData[btnConfig.actionLoadingField] = true)
      : (btnConfig.btnLoading = true);
    let urlConfig = btnConfig.actionUrl;
    let url = urlConfig.url;
    let params = getParamsByObj({}, urlConfig.params, rowData);
    if (urlConfig.fatherParams) {
      getParamsByObj(params, urlConfig.fatherParams, props.fatherData);
    }
    $request.HTTP.components.postDataByParams(url, params).then(
      (res) => {
        if (res.status === 0) {
          emit("triggerGetTableData", { refresh: true });
          emit("triggerActionUrlSuccess", { btnConfig, itemConfig });
          processSuccess("操作成功!");
        } else {
          processError(res.msg || "操作失败");
        }
        btnConfig.actionLoadingField !== undefined
          ? (rowData[btnConfig.actionLoadingField] = false)
          : (btnConfig.btnLoading = false);
      },
      (err) => {
        btnConfig.actionLoadingField !== undefined
          ? (rowData[btnConfig.actionLoadingField] = false)
          : (btnConfig.btnLoading = false);
        processError(err.message);
      }
    );
  }
  if (btnConfig.actionUrl && btnConfig.notemit) {
    return;
  }
  emit("triggerRowActions", { btnConfig, rowData, itemConfig });
};
const handleOneRowActionsCancel = (rowData) => {
  emit("triggerGetTableData", { refresh: false });
};
const handleOneRowActions = async (btnConfig, rowData) => {
  if (calcRowBtnLoading(btnConfig, rowData)) {
    return;
  }
  if (btnConfig.actionUrl) {
    btnConfig.actionLoadingField !== undefined
      ? (rowData[btnConfig.actionLoadingField] = true)
      : (btnConfig.btnLoading = true);
    let urlConfig = btnConfig.actionUrl;
    let url = urlConfig.url;
    let params = getParamsByObj({}, urlConfig.params, rowData);
    if (urlConfig.type === "array") {
      let obj = {};
      obj[urlConfig.paramsField] = [params];
      params = obj;
    }
    $request.HTTP.components.postDataByParams(url, params).then(
      (res) => {
        if (res.status === 0) {
          processSuccess("操作成功");
          emit("triggerOneRowActionsSuccess", { config: btnConfig, rowData });
        } else {
          processError(res.msg || "操作失败");
        }
        btnConfig.actionLoadingField !== undefined
          ? (rowData[btnConfig.actionLoadingField] = false)
          : (btnConfig.btnLoading = false);
        delete rowData.rowEdit;
      },
      (err) => {
        btnConfig.actionLoadingField !== undefined
          ? (rowData[btnConfig.actionLoadingField] = false)
          : (btnConfig.btnLoading = false);
        processError(err.message);
      }
    );
  }
};
const handleRowClick = (btnConfig, rowData) => {
  emit("triggerRowClick", { config: btnConfig, rowData });
};
const handleRowEditActions = (btnConfig, rowData) => {
  if (btnConfig.actionUrl) {
    btnConfig.btnLoading = true;
    let urlConfig = btnConfig.actionUrl;
    let url = urlConfig.url;
    let params = getParamsByObj({}, urlConfig.params, rowData);
    if (urlConfig.fatherParams) {
      getParamsByObj(params, urlConfig.fatherParams, props.fatherData);
    }
    delete rowData.rowEdit;
    params.Detail = JSON.stringify(rowData);
    $request.HTTP.components.putDataByParams(url, params).then(
      (res) => {
        if (res.status === 0 || res.status === 200) {
          processSuccess("操作成功!");
          emit("triggerRowEditActSuccess", {
            config: btnConfig,
            rowData,
            tableData: state.tableData,
            resData: res.data.Data,
          });
        } else {
          processError(res.msg || "操作失败!");
        }
        emit("triggerGetTableData", { refresh: true });
        btnConfig.btnLoading = false;
      },
      (err) => {
        btnConfig.btnLoading = false;
        processError(err.message);
      }
    );
  }
  emit("triggerRowEditActions", {
    config: btnConfig,
    rowData,
    tableData: state.tableData,
  });
};

const handleUpload = (val, field, rowData, col) => {
  if (col.type === "video" && col.editConfig.posterField) {
    rowData[field] = val.ori_url;

    rowData[col.editConfig.posterField] = val.cover_url;
  } else {
    rowData[field] = val;
  }
};

const handlePlayVideo = () => {};

const calcVisible = (ruleBtn) => {
  if (ruleBtn) {
    return $hadRule(ruleBtn);
  }
  return true;
};

const handleSelectChange = (val, rowData, field) => {
  rowData[field] = val.value;
};

const handleDateChange = (e, rowData, field) => {
  rowData[field] = e;
};

const calcImageVal = (field, rowData) => {
  let url = rowData[field] || "";
  if (Array.isArray(field)) {
    for (let fid in field) {
      if (rowData[field[fid]]) {
        url = rowData[field[fid]];
        break;
      }
    }
  }
  return url;
};

const handleOpenLink = (url) => {
  window.open(url);
};
</script>
<style lang="scss" scoped>
:deep(.fln-table-cell-image img) {
  height: 50px !important;
  object-fit: contain !important;
}
</style>
