<template>
  <div>
    <table class="table">
      <colgroup>
        <col v-for="item in head" :key="item.field" :width="item.colgroup" />
      </colgroup>
      <thead>
        <tr>
          <th v-for="item in head" :key="item.field">{{ item.title }}</th>
        </tr>
      </thead>
      <tbody>
        <!-- 遍历列表 -->
        <tr v-for="(item, index) in list" :key="item.id">
          <!-- 遍历列表项 -->
          <td v-for="itemHead in head" :key="itemHead.field" :style="itemHead.type === 'image' ? 'width:15%' : ''">
            <!-- 文字项，是否popper -->
            <span
              v-if="itemHead.type === 'text' && !itemHead.isPopper"
              class="line-clamp"
              :class="item[itemHead.className]"
            >
              <!-- 链接与文字标签 -->
              <a
                v-if="typeof item[itemHead.field] === 'string' && item[itemHead.field].trim().slice(0, 4) === 'http'"
                :href="item[itemHead.field]"
                target="_blank"
              >
                {{ item[itemHead.field] }}
              </a>
              <span v-else>{{ item[itemHead.field] || '-' }}</span>
            </span>
            <span
              v-if="itemHead.type === 'text' && itemHead.isPopper"
              class="line-clamp"
              :class="item[itemHead.className]"
            >
              <a-tooltip placement="bottom">
                <template slot="title">{{ item[itemHead.field] }}</template>
                <a
                  v-if="typeof item[itemHead.field] === 'string' && item[itemHead.field].trim().slice(0, 4) === 'http'"
                  :href="item[itemHead.field]"
                  target="_blank"
                >
                  {{ item[itemHead.field] }}
                </a>
                <span v-else>{{ item[itemHead.field] || '-' }}</span>
              </a-tooltip>
            </span>

            <!-- 操作项 -->
            <span v-if="itemHead.type === 'operation'">
              <!-- 遍历操作项 -->
              <!-- XXX -->
              <span
                v-for="itemOperation in itemHead.opertions"
                :key="itemOperation.id"
                class="operation-item"
                :class="itemOperation.type"
                @click="
                  optionHandle(
                    itemOperation.handle,
                    item.id,
                    item.disabledStatus,
                    itemOperation.modalTitle,
                    itemOperation.modalText,
                    itemOperation.id
                  )
                "
              >
                <span v-if="item.disabledStatus === 0 && itemOperation.id === 'ban'">
                  {{ itemOperation.text }}
                </span>
                <span v-if="item.disabledStatus === 1 && itemOperation.id === 'unban'">
                  {{ itemOperation.text }}
                </span>
                <span v-if="item.status === 0 && itemOperation.id === 'ignore'">{{ itemOperation.text }}</span>
              </span>
            </span>
            <!-- 图片项 -->
            <div v-if="itemHead.type === 'image'" class="td-image">
              <div v-for="itemImage in item[itemHead.field]" :key="itemImage" class="td-image-box">
                <img :src="itemImage" :preview="index" />
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    head: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    optionHandle(type, id, status, modalTitle, modalText, operateType) {
      if (operateType === 'ignore') {
        this.$emit('optionHandle', type, id, status)
      } else {
        this.$emit('changeModalConfig', modalTitle, modalText, () => {
          this.$emit('optionHandle', type, id, status)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;

  th,
  td {
    line-height: 20px;
    padding: 15px 0;
  }

  thead {
    border: 0;
    background: #fafafa;

    th {
      font-size: 14px;
      text-align: center;
      color: #666;
    }
  }

  tbody {
    tr {
      border-top: 1px solid #ebedf0;

      &:hover {
        background-color: #fafafa;
      }

      td {
        font-size: 14px;
        text-align: center;
        word-break: break-word;
      }

      .success,
      .warning {
        font-size: 12px;
        height: 18px;
        display: inline-block;
        line-height: 18px;
      }

      .success {
        color: #1dc11d;
        padding: 0 6px;
        background-color: #e8f9e8;
      }

      .warning {
        color: #ff9419;
        padding: 0 6px;
        background-color: #ffece4;
      }
    }
  }
}
// 打包-webkit-box-orient
.line-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  a {
    color: #1677ff;
    &:hover {
      color: #1677ff;
    }
  }
}

.td-image {
  display: flex;
  flex-direction: row;
  justify-content: start;
  width: 168px;
  height: 52px;
  margin: 0 auto;
  &-box {
    width: 80px;
    margin-right: 7px;
    border: 1px solid #ebedf0;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}

.operation {
  &-item {
    color: #1677ff;
    span {
      padding: 0 10px;
      cursor: pointer;
    }
  }
  .primary {
    color: #1677ff;
    span {
      color: #1677ff;
    }
  }
}
</style>
