<template>
  <div class="hbrand">
    <div class="head-title">
      品牌管理
      <el-button style="float:right;margin-top: -5px;" type="primary" class="el-button--small"
        @click="CommonJump('hbrandedit')">新增</el-button>
    </div>
    <div class="content">
      <div style="margin-bottom:20px">
        <span>分类</span>
        <el-select style="margin:0 10px" class="w200" @change="(msg.pageIndex = 1), getList()" v-model="msg.CategoryId"
          size="small" placeholder="请选择" clearable>
          <el-option label="不限" :value="0"></el-option>
          <el-option v-for="item in CategoryList" :key="item.Id" :label="item.Name" :value="item.Id">
          </el-option>
        </el-select>
        <span>品牌名称</span>
        <el-input type="text" style="width:250px" size="small" maxlength="100" v-model="msg.Name" clearable
          @input="(msg.pageIndex = 1), getList()">
        </el-input>
        <el-button @click="(msg.pageIndex = 1), getList()" size="small" type="primary">
          查询
        </el-button>
      </div>
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="Id" label="编号" width="100"> </el-table-column>
        <el-table-column prop="CategoryName" label="所属分类" width="100">
        </el-table-column>
        <el-table-column prop="Name" label="品牌名称" width="200">
        </el-table-column>
        <el-table-column label="Logo" width="100px">
          <template slot-scope="scope">
            <img :src="scope.row.Logo" style="width:50px;height:50px;" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="是否热门" width="100px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.IsHot == 1" effect="dark">
              热门
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="上传描述">
          <template slot-scope="scope">
            <p class="moredesc-con">{{ scope.row.RemarkDesc }}</p>
          </template>
        </el-table-column>
        <el-table-column label="备注描述">
          <template slot-scope="scope">
            <p class="moredesc-con">{{ scope.row.MoreDesc }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <img class="edit-img" src="../../assets/img/userman/edit.png" @click="showBrandForm(scope.row)" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <img src="../../assets/img/userman/del.png" @click="RemmoveBrand(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
        :current-page.sync="msg.pageIndex" layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      msg: {
        pageIndex: 1,
        pageSize: 15,
        CategoryId: 0, //分类编号
        Name: "" //品牌名称
      },
      CategoryList: [], //分类列表
      dateList: [] //日期
    };
  },
  created() {
    this.getCategoryList();
  },
  mounted() {
    this.getList();
  },
  methods: {
    //获取分类列表
    getCategoryList() {
      this.apipost("/api/Assess/GetCategoryDropList", {}, res => {
        if (res.data.resultCode == 1) {
          this.CategoryList = res.data.data;
        } else {
          this.Error(res.data.message);
        }
      });
    },
    refreshPage() { },
    //新增修改品牌
    showBrandForm(item) {
      this.CommonJump("hbrandedit", {
        Id: item.Id
      });
    },
    //删除品牌
    RemmoveBrand(item) {
      let that = this;
      that.Confirm("是否删除此品牌?", function () {
        that.apipost(
          "/api/Assess/DelBrandInfo",
          {
            BrandId: item.Id
          },
          res => {
            if (res.data.resultCode == 1) {
              that.Success(res.data.message);
              that.getList();
            } else {
              that.Error(res.data.message);
            }
          }
        );
      });
    },
    //获取数据
    getList() {
      this.loading = true;
      this.assetsApipost("/api/Assess/GetBrandPageList", this.msg, res => {
        this.loading = false;
        if (res.data.resultCode == 1) {
          this.total = res.data.data.count;
          this.tableData = res.data.data.pageData;
        } else {
          this.Error(res.data.message);
        }
      });
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    }
  }
};
</script>
<style scoped>
.hbrand .content {
  background: #fff;
  margin-top: 10px;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.hbrand .edit-img {
  margin-right: 10px;
}

.hbrand .moredesc-con {
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: pre-line; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
</style>
