<template>
  <div class="custom-set-wrap">
    <common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top>
    <div class="custom-set-content boder-box">
      <div>
        <div class="title">模板列表（tableData.legnth）</div>
        <div>
          <el-button type="button">新建模板</el-button>
        </div>
      </div>
      <el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column label="模板名称" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="模板描述" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="address" label="门店类型" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// import navCrumb from '@/components/nav/nav.vue';
import appDetail from '@/components/app/app-detail.vue';
import commonDetailTop from '@/components/app/common-detail-top.vue';
export default {
  name: 'reviewed',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      tableH: window.screen.availHeight - 464 - 126 + 'px',
      topMenuData: [
        {
          id: '1',
          name: '自定义报表'
        }
      ],
      activeId: '1',
      activeTab: '1',
      activeBrand: '1', // 商户(品牌) id
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: []
    };
  },
  computed: {},
  methods: {
    /**
     * 返回 的 brandId
     */
    selectBrandId(id) {
      let that = this;
      that.activeBrand = id;
    },

    setSelectTab(item) {
      let that = this;
      that.activeTab = item.tabId;
    }
  },
  watch: {
    activeBrand: function(newData, oldData) {
      const that = this;
      that.activeBrand = newData;
    }
  },
  mounted() {
    document.documentElement.style.backgroundColor = '#f0f2f5';
    this.$emit('showTab', '212');
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {
    appDetail,
    commonDetailTop
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.bg-82C5FF {
  background: #82c5ff;
}

.color-508CEE {
  color: #508cee;
}

.color-FF585C {
  color: #ff585c;
}

.line-h-18 {
  line-height: 18px;
}

.tooltip-text {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
}

.right-content {
  /*width: 100%;*/
  padding: 24px;
  min-height: calc(100% - 240px);

  .my-customer-top {
    position: relative;
    height: 43px;
    line-height: 43px;
    .my-customer-return {
      position: absolute;
      left: 0px;
      bottom: 10px;
      width: 78px;
      height: 32px;
      border-radius: 18px;
    }

    .my-customer-brand {
      position: absolute;
      right: 0;
      bottom: 18px;
      width: 93px;
      height: 32px;
    }

    .my-customer-name {
      width: 200px;
      margin: 0 auto;

      i {
        font-size: 14px;
        color: #fff;
      }
      span {
        font-size: 16px;
        color: #000;
      }

      .app-icon {
        display: inline-block;
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        border-radius: 4px;
        background: -webkit-linear-gradient(left, #7ab6fb, #508bfe);
        background: -moz-linear-gradient(left, #7ab6fb, #508bfe);
        background: linear-gradient(left, #7ab6fb, #508bfe);
      }
    }
  }
  .right-box {
    // background: #fff;
    min-height: 500px;
    padding: 0px;

    .apps-content {
      .apps-content-left {
        height: 100%;
        background: #fff;
        overflow-x: hidden;
        overflow-y: auto;

        .apps-content-left__title {
          height: 55px;
          line-height: 55px;
          padding: 0 0 0 18px;
        }

        .tab-left-list-cell {
          position: relative;
          text-align: left;
          margin-top: 15px;
          height: 30px;
          line-height: 30px;
          white-space: nowrap;
          overflow: hidden;
          cursor: pointer;

          &:hover {
            background: rgba(24, 144, 255, 0.06);
            i {
              color: #1890ff;
            }
          }
          &.active-tab {
            background: rgba(24, 144, 255, 0.06);
            &::before {
              content: ' ';
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              width: 2px;
              background: #1890ff;
              z-index: 1;
            }
            i {
              color: #1890ff;
            }
          }

          .child-tab-left-list {
            li {
              position: relative;
              text-align: left;
              height: 30px;
              line-height: 30px;
              white-space: nowrap;
              overflow: hidden;
              cursor: pointer;

              &:hover {
                background: rgba(24, 144, 255, 0.06);
                i {
                  color: #1890ff;
                }
              }
              &.active-tab {
                background: rgba(24, 144, 255, 0.06);
                &::before {
                  content: ' ';
                  position: absolute;
                  left: 0;
                  top: 0;
                  bottom: 0;
                  width: 2px;
                  background: #1890ff;
                  z-index: 1;
                }
                i {
                  color: #1890ff;
                }
              }
            }
          }
        }
      }
      .apps-content-right {
        width: calc(100% - 10px);
        margin-left: 10px;
        background: #fff;
      }
    }
  }
}
</style>
