<!--
 * @Description: 新加坡CAC-table
 * @Version: 2.0
 * @Author: Viborder
 * @Date: 2023-07-17 10:40:59
 * @LastEditors: miyuan
 * @LastEditTime: 2026-01-29 14:19:47
 * @company: NUCTECH
 * @Mailbox: nuctech@nuctech.com
 * @FilePath: \sgp-web\sgp-ias-web\src\components\common\table.vue
-->
<template>
  <div class="tableComp">
    <el-table
      :border="tableData.isBorder"
      :stripe="tableData.isStripe"
      :ref="tableData.refName"
      @selection-change="selectChange"
      :data="tableData.data"
      :empty-text="tableData.emptyText ? tableData.emptyText : 'No Data'"
      style="width: 100%"
      :max-height="tableData.MaxHeight"
      :row-class-name="tableData.tableRowClassName ? tableData.tableRowClassName : tableRowClassName"
      :id="tableData.id"
      :header-cell-style="{
        background: type === 'scb' ? '#f9f9f9' : '#6a9abf',
        color: type === 'scb' ? '#333' : 'white',
        'font-weight': type === 'scb' ? '0' : 'bold',
        'word-break': 'break-all'
      }"
      :fit="true"
      @sort-change="tableData.sortMethod"
    >
      <template v-for="(item, index) in tableGroup">
        <template v-if="!item.hidden">
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-if="item.type == 'img'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <img :src="scope.row[item.model]" :style="{ height: item.height }" />
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-if="item.type == 'link'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <span
                class="link-text"
                :data-row-id="scope.row.id || index"
                :style="scope.row[item.model].style"
                :title="scope.row[item.model].title"
                @click.prevent="scope.row[item.model].func(scope)"
              >{{ scope.row[item.model].label }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-if="item.type == 'statusText'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <!-- <p :style="{color:scope.row[item.model].color,background:scope.row[item.model].background}">{{scope.row[item.model].label}}</p> -->
              <el-tag :type="scope.row[item.model].type">{{ scope.row[item.model].label }}</el-tag>
            </template>
          </el-table-column>
          <!-- color -->
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-if="item.type == 'color'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <div
                :style="{
                  background: scope.row[item.model],
                  height: '24px',
                  width: '40px',
                  margin: '0 auto'
                }"
              ></div>
            </template>
          </el-table-column>
          <!-- audio -->
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-if="item.type == 'audio'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              {{ scope.row[item.model].label }}
              <el-button
                type="info"
                icon="el-icon-service"
                circle
                class="selectAudioButton"
                @click="play(scope.row[item.model].value)"
              ></el-button>
              <audio :id="scope.row[item.model].value" :src="scope.row[item.model].path"></audio>
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-if="item.type == 'editInput'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <el-popover trigger="click" placement="top" v-model="item.click">
                <el-input v-model="editModel" style="width: 60%"></el-input>
                <el-button
                  type="primary"
                  @click="
                    scope.row[item.model] = editModel
                    item.click = false
                  "
                >
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button @click="item.click = false">
                  <i class="el-icon-close"></i>
                </el-button>
                <div
                  slot="reference"
                  class="name-wrapper"
                  @click="editModel = scope.row[item.model]"
                >{{ scope.row[item.model] }}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-if="item.type == 'editNumber'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <el-popover trigger="click" placement="top" v-model="item.click">
                <el-input-number v-model="editModel" controls-position="right"></el-input-number>
                <el-button
                  type="primary"
                  @click="
                    scope.row[item.model] = editModel
                    item.click = false
                  "
                >
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button @click="item.click = false">
                  <i class="el-icon-close"></i>
                </el-button>
                <div
                  slot="reference"
                  class="name-wrapper"
                  @click="editModel = scope.row[item.model]"
                >{{ scope.row[item.model] }}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-if="item.type == 'editTime'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <el-popover trigger="click" placement="top" v-model="item.click">
                <el-date-picker
                  v-model="editModel"
                  type="datetime"
                  :format="$t('ViBorder.language.format')"
                ></el-date-picker>
                <el-button
                  type="primary"
                  @click="
                    scope.row[item.model] = editModel
                    item.click = false
                  "
                >
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button @click="item.click = false">
                  <i class="el-icon-close"></i>
                </el-button>
                <div
                  slot="reference"
                  class="name-wrapper"
                  @click="editModel = scope.row[item.model]"
                >{{ scope.row[item.model] | formatDate($t('ViBorder.language.format')) }}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-if="item.type == 'editSelect'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <el-popover trigger="click" placement="top" v-model="item.click">
                <el-select v-model="editModel">
                  <el-option
                    v-for="choose in item.option"
                    :key="choose.value"
                    :label="choose.label"
                    :value="choose.value"
                  ></el-option>
                </el-select>
                <el-button
                  type="primary"
                  @click="
                    scope.row[item.model] = editModel
                    item.click = false
                  "
                >
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button @click="item.click = false">
                  <i class="el-icon-close"></i>
                </el-button>
                <div
                  slot="reference"
                  class="name-wrapper"
                  @click="editModel = scope.row[item.model]"
                >{{ scope.row[item.model] }}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-else-if="item.type == 'colorText'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <div
                :style="{ color: scope.row[item.model].color }"
                class="colorText"
              >{{ scope.row[item.model].model }}</div>
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-else-if="item.type == 'text'"
            :formatter="item.formatter"
            :fixed="item.fixed"
            :key="index"
          ></el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-else-if="item.type == 'time'"
            :formatter="item.formatter"
            :fixed="item.fixed"
            :key="index"
          ></el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-else-if="item.type == 'emptyText'"
            :formatter="item.formatter"
            :fixed="item.fixed"
            :key="index"
          ></el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-else-if="item.type == 'locale'"
            :formatter="item.formatter"
            :fixed="item.fixed"
            :key="index"
          ></el-table-column>
          <el-table-column
            :render-header="renderHeader"
            type="selection"
            v-else-if="item.type == 'selection'"
            :selectable="checkboxT"
            :width="item.width"
            :fixed="item.fixed"
            :key="index"
          ></el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-else-if="item.type == 'operation'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <span
                v-for="(operate, index) in scope.row[item.model]"
                @click="operate.func(scope)"
                v-html="operate.label"
                :title="operate.title"
                v-show="operate.show"
                :key="index"
              ></span>
            </template>
          </el-table-column>
          <!-- 文字和悬浮图片 -->
          <el-table-column
            :render-header="renderHeader"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-else-if="item.type == 'imgText'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <el-popover
                placement="right"
                width="600"
                trigger="hover"
                v-if="scope.row[item.model].show"
                :popper-class="popperClass"
              >
                <div class="tablePopoverImg" v-if="scope.row[item.model].img">
                  <img class="popoverImg" :src="scope.row[item.model].img" @error="$setPic" />
                </div>
                <i class="iconfont" v-else>&#xe900;</i>
                <span
                  class="operationText"
                  slot="reference"
                  :title="scope.row[item.model].label"
                >{{ scope.row[item.model].label }}</span>
              </el-popover>
              <span
                v-else
                class="operationText"
                slot="reference"
                :title="scope.row[item.model].label"
              >{{ scope.row[item.model].label }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="true"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-else-if="item.type == 'hover'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <el-popover
                trigger="hover"
                :placement="scope.row[item.model].position"
                :class="scope.row[item.model].class"
              >
                <p v-html="scope.row[item.model].hoverText"></p>
                <div slot="reference" class="name-wrapper" v-html="scope.row[item.model].title"></div>
              </el-popover>
            </template>
          </el-table-column>
          <!-- 下标 -->
          <el-table-column
            :render-header="renderHeader"
            type="index"
            :index="indexMethod"
            :label="item.label"
            :width="item.width"
            v-else-if="item.type == 'index'"
            :fixed="item.fixed"
            :key="index"
          ></el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :resizable="false"
            :show-overflow-tooltip="false"
            :sortable="item.sortable ? item.sortable : false"
            :label="item.label"
            :prop="item.model"
            :width="item.width"
            v-if="item.type == 'imgPopper'"
            :fixed="item.fixed"
            :key="index"
          >
            <template slot-scope="scope">
              <el-popover placement="left" width="500" trigger="hover" class="popover">
                <div>
                  <img
                    :src="scope.row[item.model]"
                    style="display: block; position: relative; width: 100%; margin-right: 10px"
                  />
                </div>
                <img :src="scope.row[item.model]" slot="reference" />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderHeader"
            :label="item.label"
            v-if="item.type == 'tableFormPopper'"
            :key="index"
          >
            <template slot-scope="scope">
              <el-popover placement="left" width="580" trigger="hover">
                <div v-if="Object.keys(scope.row.jsonObject).length !== 0" class="popover-wrap">
                  <ul class="tableFormPopper-wrap">
                    <li
                      v-for="(oKey, index) in scope.row.jsonObject"
                      :key="index"
                      class="tableFormPopper"
                    >
                      <span>{{ index }}</span>
                      <span>{{ oKey }}</span>
                    </li>
                  </ul>
                </div>
                <span v-else class="noData">{{ $t('ViBorder.IC.common.noData') }}</span>
                <div slot="reference" class="name-wrapper">
                  <span class="operation" v-html="item.icon"></span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
    <div class="exportFor" v-if="tableData.isPage">
      <el-pagination
        v-on:size-change="tableData.page.handleSizeChange"
        v-on:current-change="tableData.page.handleCurrentChange"
        v-bind:current-page="tableData.page.CurrentPage ? tableData.page.CurrentPage : 1"
        v-bind:page-sizes="[10, 20, 50, 100]"
        v-bind:page-size="tableData.page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        v-bind:total="tableData.page.Allpage"
        v-if="tableData.isPage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SgpTable',
  data () {
    return {
      editModel: '',
      selectedData: [],
      playFlag: false,
      popperClass: 'imgText-popover'
    }
  },
  methods: {
    indexMethod (index) {
      //    下标
      return index * 1 + 1
    },
    none () {
      return false
    },
    selectChange (row) {
      this.selectedData = row
      this.$emit('listenToSelectDataEvent', this.selectedData)
    },
    tableRowClassName ({ row, rowIndex }) {
      //    设置表格行颜色
      var getType = Object.prototype.toString.call(this.$props.tableData.RowNum)
      if (getType === '[object Number]' && rowIndex === this.$props.tableData.RowNum) {
        return 'success-row'
      } else if (getType === '[object Array]') {
        for (var i = 0; i < this.$props.tableData.RowNum.length; i++) {
          if (rowIndex === this.$props.tableData.RowNum[i]) {
            return 'success-row'
          }
        }
      }
      return ''
    },
    play (id) {
      let dom = document.getElementById(id)
      if (this.$data.playFlag) {
        this.$data.playFlag = false
        dom.pause()
      } else {
        this.$data.playFlag = true
        dom.play()
      }
    },
    renderHeader (h, { column }) {
      if (column.label) {
        return (
          <el-tooltip class='item' effect='dark' content={column.label} placement='top'>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    }
  },
  props: ['tableData', 'tableGroup', 'type']
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@media screen and (max-width: 1500px) {
  .popover-wrap {
    max-height: 600px;
    overflow-y: auto;
  }
}

@media screen and (min-width: 1500px) {
  .popover-wrap {
    max-height: 800px;
    overflow-y: auto;
  }
}

.tableComp {
  width: 100%;
}
.tableComp .link-text {
  color: #1782d4;
  font-weight: bold;
  cursor: pointer;
}
.tableComp .el-table th,
.tableComp .el-table th div {
  height: 40px;
  line-height: 40px;

  /* background: #6a9abf;
  color: #fff;
  font-weight: bold; */
  text-align: center;
}

.tableComp .el-table .cell {
  padding: 0;
  text-align: center;
}

.tableComp .el-table .danger {
  color: red;
}

.tableComp .el-pagination {
  display: flex;
  justify-content: flex-end;
}

.tableComp .el-table .red-row td .cell {
  background-color: rgb(255 0 0 / 100%);
}

.el-table .success-row {
  background: red;
}

.tableComp .exportFor {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
}

.tableComp .popover img {
  display: inline-block;
  width: 55px;
}

.tableComp .exportFor .excels {
  width: 32px;
  height: 32px;
  margin-right: 0.3rem;
  cursor: pointer;
}

.tableComp .el-button.is-circle {
  padding: 3px;
}

.tableFormPopper-wrap {
  box-sizing: border-box !important;
  overflow: hidden;
  border: 1px #ccc solid;
}

.tableFormPopper-wrap li {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.tableFormPopper-wrap li:last-child span {
  border-bottom: none;
}

.tableFormPopper span {
  box-sizing: border-box;
  padding: 0 20px;
  padding-left: 10px;
  line-height: 35px;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.tableFormPopper span:first-child {
  width: 25%;
  border-right: 1px #ccc solid;
  border-bottom: 1px #fff solid;
  background-color: #ccc;
}

.tableFormPopper span:last-child {
  width: 75%;
  border-bottom: 1px #ccc solid;
  word-break: break-all;
}

.noData {
  display: block;
  padding: 10px;
  text-align: center;
}

.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
  padding-left: 0;
}

.el-popover .lpnImg {
  width: 100%;
  height: auto;
}
.el-popover .iconfont {
  font-size: 41px;
}
.imgText-popover {
  line-height: unset;
}
.tableComp .operationText {
  color: #00a3cf;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.tablePopoverImg .popoverImg {
  width: 100%;
  height: auto;
  min-height: 35px;
}

.el-table .el-table__cell {
  padding: 8px 0;
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #f5f5f5;
}

.el-table .colorText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-table .cell a {
  color: #1782d4;
  font-weight: bold;
}

/* .el-table--border td:first-child .cell {
    padding-left: 0;
  } */
</style>
