<!--
 * @Descripttion : 当前组件信息
 * @Author       : 无尘
 * @Date         : 2020-08-13 14:02:22
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-21 13:54:41
 * @FilePath     : haoban-4\src\components\app\my-customer\store-list.vue
 -->
<!--
  <store-list :brand-id="brandId" :depart-obj="departObj"  @getStore="getStore"></store-list>
  import storeList from '@/components/app/my-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">
        <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><el-select class="w-168 m-l-10" v-model="storeTypeId" placeholder="" @change="changeCondition">
            <el-option label="所有门店类型" value=""></el-option>
            <el-option v-for="item in storeTypeOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </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" v-loading="loading" :data="tableData" tooltip-effect="dark" :style="{ width: '100%'}">
          <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.storeCode || '--' }}</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 fetch from '@/api/my-customer-app.js';
const { getStoreList } = fetch;
// import errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
export default {
  name: 'StoreList',
  components: {},
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    },
    departObj: {
      type: Object,
      default() {
        return {
          storeGroupId: '',
          storeGroupName: '',
          wxDepartmentId: '',
          parentId: '',
          isStore: '',
          staffCount: '',
          bindFlag: ''
        };
      }
    }
  },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
      nameVisible: false,
      searchInput: '',
      storeTypeId: '',
      storeTypeOptions: [
        {
          id: '1',
          name: '自营',
        },
        {
          id: '2',
          name: '联营',
        },
        {
          id: '3',
          name: '代理',
        },
        {
          id: '4',
          name: '加盟',
        },
        {
          id: '5',
          name: '代销',
        },
        {
          id: '6',
          name: '托管',
        }
      ],
      storeType: {
        '1': '自营',
        '2': '联营',
        '3': '代理',
        '4': '加盟',
        '5': '代销',
        '6': '托管'
      },
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
      tableData: [],
      loading: false
    };
  },
  mounted() {
    const that = this;
    if (Object.keys(that.departObj)) {
      that.currentPage = 1;
      that.tableData = [];
      that.total = 0;
      that.searchInput = '';
      that.storeTypeId = '';
      that.departObj.storeGroupId ? that.getTableList() : '';
    }
  },
  methods: {
    /**
     * @description: 查看会员
     * @param {Object} item
     * @author: 无尘
     */
    showMember(item) {
      const that = this;
      that.$emit('getStore', item);
    },
    /**
     * @description: 输入
     * @author: 无尘
     */
    toInput: _debounce(function() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    }, 500),
    /**
     * @description: 搜索清除
     * @author: 无尘
     */
    clearInput() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     * @description: 选择门店类型
     * @author: 无尘
     */
    changeCondition() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     * @description:分页---页码变化
     * @param {Number} val
     * @author: 无尘
     */
    handleSizeChange(val) {
      const that = this;
      that.currentPage = 1;
      that.pageSize = val;
      that.getTableList();
    },
    /**
     * @description: 分页---当前页变化
     * @param {Number} val
     * @author: 无尘
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;
      that.getTableList();
    },
    /**
     * @description: 获取列表数据
     * @author: 无尘
     */
    getTableList() {
      const that = this;
      that.loading = true;
      const para = {
        wxEnterpriseId: that.wxEnterpriseId,
        storeGroupId: that.departObj.storeGroupId,
        enterpriseId: that.brandId,
        search: that.searchInput || '', // 搜索字段
        storeType: that.storeTypeId,
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize // 一页显示个数
      };
      getStoreList(para, { headers: { sign: that.brandId } })
        .then(res => {
          that.loading = false;
          that.tableData = res.result.result || [];
          that.total = res.result.totalCount;
        })
        .catch(function(error) {
          that.loading = false;
          that.tableData = [];
          that.total = 0;
        });
    }
  },
  watch: {
    departObj(newData, oldData) {
      const that = this;
      if (Object.keys(newData)) {
        that.searchInput = '';
        that.storeTypeId = '';
        that.currentPage = 1;
        that.tableData = [];
        that.total = 0;
        newData.storeGroupId ? that.getTableList() : '';
      }
    },
    brandId(newData) {
      const that = this;
      if (newData) {
        that.searchInput = '';
        that.storeTypeId = '';
      }
    }
  }
};
</script>
<style lang="less" scoped>
.m-b-20 {
  margin-bottom: 20px;
}

.w-274 {
  width: 274px;
}
</style>
