<template>
  <div class="machine-list-container">
    <lu-table
      stripe
      style="margin-top: 14px;clear: both"
      ref="accountTable"
      :data="tableData"
      :header-cell-style="getRowStyle"
    >
      <lu-table-column v-if="indexColumn" type="index" width="60" label="序号">
      </lu-table-column>
      <lu-table-column
        :min-width="item.width || 180"
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :fixed="item.fixed"
      >
        <template slot-scope="params">
          <div class="overflow-style" v-if="item.type === 'default'">
            {{ params.row[item.prop] }}
          </div>
          <div class="overflow-style" v-if="item.type === 'choice'">
            {{
              dictionary[item.prop]
                ? dictionary[item.prop][params.row[item.prop]]
                : params.row[item.prop]
            }}
          </div>
          <div v-if="item.type === 'image'">
            <lu-button
              v-if="!item.showImage"
              @click="viewPreview(params.row[item.prop])"
              class="table-button"
              type="text"
              >点击查看图片</lu-button
            >
            <img
              v-if="item.showImage"
              @click="viewPreview(params.row[item.prop])"
              :width="item.width || 100"
              :height="item.height || 100"
              :src="params.row[item.prop]"
              alt=""
            />
          </div>
          <div v-if="item.type === 'custom'">
            <slot
              :name="item.custom_name || null"
              :index="params.$index"
              :data="params.row"
            ></slot>
          </div>
        </template>
      </lu-table-column>
    </lu-table>
    <lu-preview @hide="hidePreview" :src="imgUrl" :isShow="isShow"></lu-preview>
  </div>
</template>

<script>
import luPreview from "../lu-image-preview";
export default {
  name: "luSaasTable",
  data() {
    return {
      imgUrl: "",
      isShow: false
    };
  },
  components: {
    luPreview
  },
  // computed:{
  //   inSort: function(){
  //     if(this.defaultSort.prop){
  //       return `{ prop: '${this.defaultSort.prop}', order: '${this.defaultSort.order}'}`
  //     }else{
  //       return `{}`
  //     }
  //   }
  // },
  props: {
    indexColumn: {
      type: Boolean,
      default: true
    },
    // defaultSort:{
    //   type: Array,
    //   default: () => {
    //     return {};
    //   }
    // },
    tableLoading: {
      type: Boolean,
      default: false
    },
    dictionary: {
      type: Object,
      default: () => {
        return {};
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableColumns: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  methods: {
    getRowStyle({ rowIndex }) {
      if (rowIndex === 0) {
        return "background: #EBECF0";
      }
    },
    hidePreview() {
      this.isShow = false;
    },
    viewPreview(url) {
      this.imgUrl = url;
      this.isShow = true;
    }
  }
};
</script>

<style>
.machine-list-container .el-table thead {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #303030;
  letter-spacing: 0;
}
.machine-list-container .el-table__row {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #303030;
  letter-spacing: 0;
}
.machine-list-container .table-button {
  font-size: 12px;
}
.machine-list-container .overflow-style {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
