<!--
 * @Descripttion : 当前组件信息
 * @Author       : 无尘
 * @Date         : 2020-02-13 14:02:22
 * @LastEditors: 无尘
 * @LastEditTime: 2020-08-26 09:54:35
 * @FilePath     : haoban-3\src\components\app\customer\store-list.vue
 -->
<!--
  <store-list :brandId="brandId" :departObj="departObj"  @getStore="getStore"></store-list>
  import storeList from '@/components/app/customer/store-list.vue';
 -->
<template>
  <div class="depart-list-body">
    <div class="depart-name-wrap m-b-20">
      <div class="font-14 color-303133">门店 {{ total }} 家</div>
      <div class="flex flex-space-between m-t-20">
        <div>
          <el-input placeholder="请输入门店名称/代码" maxlength="50" prefix-icon="el-icon-search" v-model="searchInput" class="w-274" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearInput"></el-input>
        </div>
        <div class="to-log flex m-t-20"></div>
      </div>
    </div>
    <div class="depart-children-list border-box m-t-18">
      <div class="m-t-20">
        <el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
          <el-table-column class="cursor-pointer" label="门店名称" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
          </el-table-column>
          <el-table-column class="cursor-pointer" prop="" label="门店类型" show-overflow-tooltip>
            <template slot-scope="scope">{{ storeType[scope.row.storeType] || '--' }}</template>
          </el-table-column>
          <el-table-column class="cursor-pointer" prop="" label="门店分组" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.storeGroupName || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" @click="showMember(scope.row)">查看会员</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
          <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { _debounce } from '@/common/js/public';
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
export default {
  name: 'depart-list',
  components: {},
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    },
    departObj: {
      type: Object,
      default() {
        return {
          departmentId: '',
          departmentName: '',
          wxDepartmentId: '',
          parentId: '',
          isStore: '',
          staffCount: '',
          bindFlag: ''
        };
      }
    }
  },
  data() {
    return {
      nameVisible: false,
      departmentName: this.departObj.departmentName || '',
      searchInput: '',
      storeType: {
        '0': '自营',
        '1': '联营',
        '2': '代理(加盟)',
        '3': '代销',
        '4': '托管'
      },
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
      tableData: []
    };
  },
  methods: {
    showMember(item) {
      const that = this;
      that.$emit('getStore', item);
    },

    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    }, 500),
    // 搜索清除
    clearInput() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    },

    /**
     * 分页---页码变化
     * @param {Number} val
     */
    handleSizeChange(val) {
      const that = this;
      that.currentPage = 1;
      that.pageSize = val;
      that.getTableList();
    },

    /**
     * 分页---当前页变化
     * @param {Number} val
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;
      that.getTableList();
    },
    /**
     * 获取列表数据
     */
    getTableList() {
      const that = this;
      let para = {
        departmentId: that.departObj.storeGroupId,
        enterpriseId: that.brandId,
        searchName: that.searchInput || '', // 搜索字段
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize // 一页显示个数
      };
      getRequest('/haoban-app-customer-web/store-list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.tableData = resData.result.list || [];
            that.total = resData.result.total;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    departObj(newData, oldData) {
      const that = this;
      if (Object.keys(newData)) {
        that.currentPage = 1;
        that.getTableList();
      }
    },
    brandId(newData) {
      const that = this;
      if (newData) {
        that.searchInput = '';
      }
    }
  },
  mounted() {
    const that = this;
    if (Object.keys(that.departObj)) {
      that.currentPage = 1;
      that.getTableList();
    }
  }
};
</script>
<style lang="less" scoped>
.m-b-10 {
  margin-bottom: 10px;
}
.el-breadcrumb__inner.is-link:hover,
.el-breadcrumb__inner a:hover {
  color: #2f54eb;
}
.log-icon {
  width: 28px;
  height: 28px;
  border-radius: 2px;
  margin-right: 15px;
  span {
    color: #c0c4cc;
  }
  &:hover {
    background: rgba(240, 245, 255, 1);
    span {
      color: #909399;
    }
  }
}
.to-log-btn {
  width: 102px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background: rgba(245, 247, 250, 1);
  &:hover {
    color: #597ef7;
  }
}
.w-274 {
  width: 274px;
}
.iconchangyongicon- {
  &:hover {
    background: #eaedfd;
    border-radius: 2px;
  }
}
</style>
