<template>
  <el-dialog title="查看门店" :visible.sync="visible" width="740px" custom-class="store" @close="onClose">
    <div class="alert">
      <i class="iconfont icon-warning-circle-fill"></i>
      <span class="ml10">若要修改门店请前往【企业管理-权限管理-用户列表】进行修改</span>
      <el-button :limit-code="$buttonCode.marketingToUserList" type="text" class="ml10" @click="toUserList">立即前往</el-button>
    </div>
    <el-input class="mt20 mb20 w260" v-model="search" clearable prefix-icon="el-icon-search" placeholder="请输入门店名称或code" @change="onSearch" />
    <el-table :data="tableData.data" element-loading-text="拼命加载中" max-height="288">
      <el-table-column v-for="(v, i) in tableData.header" :key="i" :prop="v.prop" :min-width="v.minWidth" :label="v.label" :formatter="v.formatter" :fixed="v.fixed" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
          <span v-else>{{ scope.row[v.prop] || '--' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <dm-pagination small class="dm-pagination" @current-change="handleCurrentChange" :current-page="tableData.currentPage" :page-size="tableData.pageSize" layout="prev, pager, next" :total="tableData.total" hide-on-single-page />
  </el-dialog>
</template>

<script>
import { getStoreList } from '@/service/api/rechargeApi.js';
export default {
  name: 'view-store',
  components: {},
  props: {
    visible: Boolean,
    departId: String,
    departList: Array
  },
  data() {
    return {
      search: '',
      tableData: {
        data: [],
        currentPage: 1,
        pageSize: 10,
        header: [],
        total: 0,
        loading: false
      }
    };
  },
  created() {
    // create hook
  },
  mounted() {
    // mounted hook
  },
  methods: {
    // table-methods
    async getTableData() {
      this.tableData.loading = true;
      const para = {
        search: this.search,
        pageSize: this.tableData.pageSize,
        pageNum: this.tableData.currentPage,
        departId: this.departId,
        accountEnterpriseDpartmentList: (this.departList || []).toString()
      };
      const { result } = await getStoreList(para);
      this.tableData.data = result.result || [];
      this.tableData.total = result.totalCount;
      this.tableData.loading = false;
    },
    getTableHeader() {
      this.tableData.header = [
        { label: '门店名称', prop: 'storeName', minWidth: 120 },
        { label: '门店code', prop: 'storeCode', minWidth: 120 },
        { label: '所属部门', prop: 'departName', minWidth: 120 }
      ];
    },
    handleCurrentChange(val) {
      this.tableData.currentPage = val;
      this.getTableData();
    },
    onSearch() {
      this.tableData.currentPage = 1;
      this.getTableData();
    },
    onClose() {
      this.$emit('update:visible', false);
      this.search = '';
      this.tableData.currentPage = 1;
    },
    toUserList() {
      if (!this.$getButtonLimit(this.$buttonCode.marketingToUserList)) return this.$message.warning({ message: '无部门管理权限，请联系管理员开启权限配置', showClose: true });
      window.open('/gic-web/#/userManager');
    }
  },
  computed: {
    // do something
  },
  watch: {
    visible: {
      handler: function(newVal) {
        if (newVal) {
          this.getTableData();
          this.getTableHeader();
        }
      },
      immediate: true
    }
  }
};
</script>

<style scoped lang="scss">
.store {
  height: 513px;
  .alert {
    display: flex;
    align-items: center;
    background: #f7f8fa;
    width: 520px;
    height: 32px;
    padding: 0 16px;
    box-sizing: border-box;
    i {
      color: #1890ff;
    }
  }
}
.w260 {
  width: 260px;
}
</style>
