<template>
  <div class="custom-set-wrap">
    <common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top>
    <div class="custom-set-content boder-box">
      <div class="flex flex-space-between flex-pack-center m-b-23 m-t-30">
        <div class="custom-set-title flex flex-pack-center">模板列表（{{ tableData.length }}）</div>
        <div>
          <el-button type="button" @click="toCustomSet('')">新建模板</el-button>
        </div>
      </div>
      <el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column label="模板名称" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="模板描述" show-overflow-tooltip>
          <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';
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
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: {
    /**
     * 路由跳转
     */
    changeRouter(path) {
      let that = this;
      that.$router.push(path);
    },

    setSelectTab(item) {
      let that = this;
      that.activeTab = item.tabId;
    },

    /**
     * 新增模板
     */
    toCustomSet() {
      let that = this;
      that.changeRouter(`/template?brandId=${that.brandId}`);
    },

    /**
     *  获取 列表数据
     */
    getData() {
      let that = this;
      postRequest('/haoban-app-daily-web/daily/list-define-template', { brandId: that.brandId })
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.tableData = [];
            if (!!resData.result && !!resData.result.length) {
              that.tableData = resData.result;
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    activeBrand: function(newData, oldData) {
      const that = this;
      that.activeBrand = newData;
    }
  },
  mounted() {
    document.documentElement.style.backgroundColor = '#f0f2f5';
    this.$emit('showTab', '212');
    this.getData();
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {
    appDetail,
    commonDetailTop
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.custom-set-wrap {
  .custom-set-content {
    padding: 0 16px;

    .custom-set-title {
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>
