<template>
  <!-- 树形表格 -->
  <div class="tree_card">
    <el-table class="tree_table" default-expand-all :data="treeDataList" row-key="id" style="width: 100%;"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @row-click="handleRowClick">
      <template v-for="(item,index) in treeData">
        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-if="item.field == 'action'">
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;justify-content: space-evenly;">
              <div v-for="disk in item.labelButton" :key="disk.key" class="btn_table">
                <el-button :class="disk.modality" :type="disk.style" :icon="disk.icon" size="mini"
                  @click="buttonData(scope.row,disk.type)">
                  {{ disk.label }}
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" :fixed="item.boxhead ? true : false" width="80px" :label="item.label"
          :align="item.align" v-else-if="item.field == 'index'">
        </el-table-column>
        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-else-if="['isIceReleaseCold','isCoolerReleaseCold','isOutStorage','iceRaftManage'].includes(item.field)">
          <template slot-scope="scope">
            <div :style="{color: filterColor(scope.row,item.options,item.field)}">
              {{initDictvalueil(scope.row,item.options,item.field)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :prop="item.field" :label="item.label" :width="item.colWidth"
          :align="item.align" v-else>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  export default {
    name: "treeTable",
    props: {
      // 表格数据
      treeDataList: {
        type: Array,
        default: () => [],
      },
      // 表格label数据
      treeData: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {}
    },
    methods: {
      // 普通类型文字匹配
      initDictvalueil(value, list, type) {
        let name = ''
        if (list) {
          list.forEach(item => {
            if (value[type] === item.value) {
              name = item.label
            }
          })
        }
        return name
      },
      // tag颜色获取
      filterColor(value, list, type) {
        let color = ''
        if (list) {
          list.forEach(item => {
            if (value[type] === item.value) {
              color = item.bgcolor
            }
          })
        }
        return color
      },
      // 操作按钮
      buttonData(row, type) {
        this.$emit("buttonData", row, type);
      },
      handleRowClick($event) {
        // console.log($event,2545)
      }
    },
  }
</script>
<style scoped lang="scss">
  .title_blue {
    color: #83FF00;
  }

  .title_red {
    color: #FF9494;
  }

  .title_blue1 {
    color: #409eff;
  }

  .title_yellow {
    color: #e6a23c;
  }
</style>
