<template>
  <div class="apass_table">
    <el-table :data="data">
      <el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10"></el-table-column>
      <el-table-column
        v-for="(item, index) in header"
        :label="item.label"
        :align="item.align || 'left'"
        :width="item.width"
        :key="'head_' + index"
      >
        <template slot-scope="scope">
          <div v-if="item.type === 'buttons'" class="row_action">
            <template v-for="(v, i) in item.actionList">
              <span
                v-if="v.disabledRule && v.disabledRule(scope.row)"
                class="btn disabled"
                :key="'btn_' + index + '_' + i"
                v-text="v.getLabel ? v.getLabel(scope.row) : v.label"
              >
              </span>
              <a
                v-else
                class="btn"
                :class="v.class || ''"
                :key="'btn_' + index + '_' + i"
                @click="v.callback && v.callback(scope.row)"
                v-text="v.getLabel ? v.getLabel(scope.row) : v.label"
              >
              </a>
              <span
                v-if="i < item.actionList.length - 1"
                class="interval_line"
                :key="'line_' + index + '_' + i"
                >|</span
              >
            </template>
          </div>
          <div v-else-if="item.type === 'button'" class="row_action">
            <a
              class="btn"
              v-text="scope.row[item.prop]"
              @click="item.callback && item.callback(scope.row)"
            ></a>
          </div>
          <div v-else-if="item.type === 'icon'">
            <img src="../assets/imgs/ic_true.png" alt="" v-if="scope.row[item.prop]==1" style="width:100%;height:100%;">
            <img src="../assets/imgs/ic_yiwancheng.png" alt="" v-if="scope.row[item.prop]==2" style="width:100%;height:100%;">
            <img src="../assets/imgs/ic_restart.png" alt="" v-if="scope.row[item.prop]==3" style="width:100%;height:100%;">
            <img src="../assets/imgs/ic_failed.png" alt="" v-if="scope.row[item.prop]==4" style="width:100%;height:100%;">
          </div>
          <div v-else-if="item.type === 'tag'" class="table_tag">
            <el-tag
              v-for="(item,index) in scope.row[item.prop]" v-if="index<=1||tag_flag_arr[scope.$index]==1"
              :key="index+5515">
              {{ item }}
            </el-tag>
            <div class="tagclo btn_down" v-if="tag_flag_arr[scope.$index]==0&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,1)"></div>
            <div class="tagclo btn_up" v-if="tag_flag_arr[scope.$index]==1&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,0)"></div>
          </div>
          <div v-else-if="item.type === 'chart'" class="charts">
            <sparkline :indicatorStyles="spIndicatorStyles1">
              <sparklineCurve :refLineStyles="spRefLineStyles3" :refLineType="false" :data="scope.row[item.prop]" :limit="scope.row[item.prop].length" :styles="item.prop=='cpu'?spCurveStyles2:spCurveStyles3" />
            </sparkline>
            <span class="use" v-if="item.prop=='cpu'">{{scope.row['cpu_use']}}.00mm</span>
            <span class="use" v-if="item.prop=='mermoy'">{{scope.row['memory_use']}}.00Mi</span>
          </div>  
          <div v-else-if="item.type === 'image'" class="img_content">
            <img
              :src="item.getImage && item.getImage(scope.row)"
              :width="item.size"
            />
          </div>
          <div
            v-else-if="
              item.type === 'tooltip' &&
                item.getLength &&
                item.getLength(scope.row) > 1
            "
          >
            <el-tooltip
              placement="right-start"
              popper-class="apass_table_tooltip"
            >
              <div
                slot="content"
                v-html="item.getContent && item.getContent(scope.row)"
              ></div>
              <span
                v-text="(item.getText && item.getText(scope.row)) + '..'"
                style="text-decoration: underline;color: #515fe7;"
              ></span>
            </el-tooltip>
          </div>
          <span
            v-else
            v-text="
              item.getText ? item.getText(scope.row) : scope.row[item.prop]
            "
          ></span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    header: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    paddingLeft: {
      type: [Number, String],
      default: () => 50,
    },
    height:{
      type: Number,
      default: null,
    },
  },
  data(){
    return{
      tag_flag_arr:[],
      spCurveStyles2: {
        stroke: '#515fe7',
        fill: '#d2d6f8'
      },
      spCurveStyles3: {
        stroke: '#37c299',
        fill: '#c8ebe4'
      },
      // 指示器样式
      spIndicatorStyles1: false,
      spRefLineStyles3:{
        stroke: '#d14',
        strokeOpacity: 0,
        strokeDasharray: '2, 2'
      },
    }
  },
  mounted(){
    this.tag_flag_arr = Array.from({length: this.data.length},(item,index)=>item = 0)
    
  },
  methods:{
    change_tag(index,val){
      this.$set(this.tag_flag_arr,index,val)
    }
  }
};
</script>

<style>
.table_tag .el-tag{
  background-color: #58617a;
  color: #fff;
  display: inline-block;
  height: 22px;
  padding: 0 5px;
  line-height: 22px;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 3px;
  margin-bottom: 3px;
}
.tagclo{
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
  background-size: contain;
  margin-top: -3px;
}
.btn_down{
  background-image: url('../assets/imgs/btn_expand.png');
}
.btn_up{
  background-image: url('../assets/imgs/btn_fold.png');
}
.charts{
  position: relative;
}
.charts .use{
  position: absolute;
  bottom:0;
  right: -10px;
  font-size: 12px;
  color: rgba(26, 34, 54, 1);
}
.apass_table_tooltip {
  font-size: 12px;
  line-height: 20px;
}
</style>

<style scoped>
.img_content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
