<template>
  <!-- tables -->
  <div class="tables_grid">
    <el-table class="table-style" :data="tableData" style="width: 100%" :border="border">
      <template v-for="(item,index) in tableList">
        <el-table-column :fixed="suspension ? 'right' : false" :label="item.label" :width="item.colWidth" align="center"
          v-if="item.field == 'action'">
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;justify-content: center;">
              <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"
                  :disabled="jurisdiction(scope.row,disk.type)" @click="buttonData(scope.row,disk.type)">
                  {{ disk.label }}
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="item.label" :align="item.align" :width="item.colWidth"
          v-else-if="item.field == 'nickName'">
          <template slot-scope="scope">
            <div class="operator_title">{{scope.row.user.nickName}}</div>
          </template>
        </el-table-column>
        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-else-if="['provUser.isorders','provUser.userType','customer.type','tbFillData.productMediaId'].includes(item.field)">
          <template slot-scope="scope">
            <div>{{initDictvalue(scope.row,item.options,item.field)}}</div>
          </template>
        </el-table-column>
        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-else-if="['isShow', 'type', 'state', 'storeId', 'personCode', 'optType', 'corrosion', 'crackle', 'deform', 'damage', 'safeAnnex', 'gasPressure', 'bodyDeform', 'fillingLeak', 'bodyTemperature', 'filledLeak', 'warnSign', 'fillLabel', 'seal'].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 :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-else-if="item.field == 'city' || item.field == 'area'">
          <template slot-scope="scope">
            <div>{{cityScreening(scope.row,item.options,item.field)}}</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>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
  import {
    orderStatus,
    rectificationState
  } from '@/assets/js/blockSort'
  export default {
    props: {
      // 表格边框
      border: {
        type: Boolean,
        default: () => false,
      },
      // 表格数据
      tableList: {
        type: Array,
        default: () => [],
      },
      // 表格label数据
      tableData: {
        type: Array,
        default: () => [],
      },
      // 网关数据
      detailGateway: {
        type: Array,
        default: () => [],
      },
      // 语言数据
      detailLanguage: {
        type: Array,
        default: () => [],
      },
      // 是否悬浮
      suspension: {
        type: Boolean,
        default: () => false,
      }
    },
    data() {
      return {
        orderStatusList: orderStatus(),
      }
    },
    methods: {
      // 文字匹配
      initDictvalue(value, list, type) {
        let propertyName = type.split(".")
        let name = ''
        if (list) {
          list.forEach(item => {
            if (value[propertyName[0]][propertyName[1]] == item.value) {
              name = item.label
            }
          })
        }
        return name
      },
      // 普通类型文字匹配
      initDictvalueil(value, list, type) {
        let name = ''
        if (list) {
          list.forEach(item => {
            if (value[type] === item.value) {
              name = item.label
            }
          })
        }
        return name
      },
      // 城市筛选
      cityScreening(value, list, type) {
        function getChildById(parentArray, id) {
          for (let i = 0; i < parentArray.length; i++) {
            if (parentArray[i].value === id) { // 如果当前元素的ID与目标ID相等，则返回该元素
              return parentArray[i];
            } else if (parentArray[i].children && Array.isArray(parentArray[i].children)) { // 判断当前元素是否有子节点且类型为数组
              const result = getChildById(parentArray[i].children, id); // 对子节点进行递归调用
              if (result !== null) { // 若子节点存在结果，则返回该结果
                return result;
              }
            }
          }
          return null; // 没有找到符合条件的元素时返回null
        }
        var name = getChildById(list, value[type])
        if (name != null) {
          return name.label
        }
      },
      // tag颜色获取
      filterColor(value, list, type) {
        let color = ''
        if (list) {
          list.forEach(item => {
            if (value[type] === item.value) {
              color = item.bgcolor
            }
          })
        }
        return color
      },
      // 权限按钮
      jurisdiction(row, type) {
        if (row.roleKey) {
          if (row.roleKey == 'admin') {
            return true
          } else {
            return false
          }
        }
        if (row.source) {
          if (type == 'edit' && row.state != 1) {
            return true
          } else if (type == 'del' && row.state != 1) {
            return true
          } else {
            return false
          }
        } else if (row.inspectExpandList) {
          if (type == 'edit' && row.state < 0) {
            return true
          } else {
            return false
          }
        }
      },
      // 操作按钮
      buttonData(row, type) {
        this.$emit("buttonData", row, type);
      },
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep .el-table__body .el-table__row.hover-row td {
    background-color: rgba(255, 255, 255, .2) !important;
  }

  ::v-deep .el-table--border {
    border: 1px solid #0171b9;
    border-right: 1px solid #0171b9
  }

  ::v-deep .el-table--border .el-table__cell {
    border: 1px solid #0171b9;
  }

  .btn_table:nth-of-type(n+2) {
    margin-left: 10px;
  }

  .el-button--mini {
    padding: 5px;
    border-color: rgba(102, 177, 255, 1);
    color: #fff;
  }

  .el-button:focus,
  .el-button:hover {
    color: #fff;
    background: transparent;
  }

  .deleteBtn {
    color: #ff6665;
  }

  .icon_play {
    font-size: 25px;
    color: #83FF00;
  }

  .icon_pause {
    font-size: 25px;
    color: #FF9494;
  }

  .title_play {
    font-size: 15px;
    color: #83FF00;
    margin-left: 10px;
  }

  .title_pause {
    font-size: 15px;
    color: #FF9494;
    margin-left: 10px;
  }

  .card_operation {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .gateway_title {
    color: #59fe6d;
  }

  .gateway_title1 {
    color: #34d9f4;
  }

  .operator_title {
    color: #fff;
  }
</style>
