<template>
  <section class="dm-wrap">
    <div class="clearfix pb22">
      <el-input v-model="listParams.searchParam" class="w300" placeholder="输入门店名称/code进行搜索" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <div class="fr">
        <el-button type="primary" @click="$router.push('/ewash/statements')" :disabled="!ewashDisable">查看账单</el-button>
        <el-button type="primary" @click="handleDialogShow" :disabled="!ewashDisable">创建子账户</el-button>
      </div>
    </div>
    <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
      <el-table-column v-for="(v, i) in tableHeader" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter" :fixed="v.fixed">
        <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-column label="当前余额" align="left" width="120" prop="storeBalance">
        <template slot-scope="scope">
          <el-button type="text" @click="getYue(scope.row)" v-if="!scope.row.balance">获取余额</el-button>
          {{ scope.row.balance }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
    <!-- 创建子账户dialog -->
    <store-child ref="storeChild" :dialogVisible.sync="dialogVisible" />
    <!-- 未创建e袋洗服务 -->
    <unable-tips :ewashTipDialog="ewashTipDialog" />
  </section>
</template>
<script>
import { getEdxStoreList, getEdxStoreYue } from '@/service/api/ewashApi.js';
import tableMethods from '@/mixins/tableMethods.js';
import unableTips from './partials/unable-tips';
import storeChild from './partials/store-child';

export default {
  name: 'ewash-store-list',
  mixins: [tableMethods],
  data() {
    return {
      dialogVisible: false,
      tableList: [],
      tableHeader: [
        { label: '门店名称', prop: 'storeName', minWidth: '120', align: 'left' },
        { label: '门店code', prop: 'storeCode', minWidth: '120', tooltip: true, align: 'left' },
        {
          label: '店长信息',
          minWidth: '140',
          tooltip: false,
          align: 'left',
          formatter: row => {
            return `<div>${row.clerkManagerName}</div><div class="fz13 minor-font-color">${row.clerkManagerPhone}</div>`;
          }
        },
        { label: '门店地址', prop: 'address', minWidth: '160', tooltip: true, align: 'left' }
      ],
      listParams: {
        searchParam: '',
        currentPage: 1,
        pageSize: 20
      },
      total: 0,
      ewashDisable: false, // e袋洗服务能否使用
      ewashTipDialog: false
    };
  },
  components: {
    unableTips,
    storeChild
  },
  methods: {
    // 创建子账户dialog
    handleDialogShow() {
      this.dialogVisible = true;
      this.$refs.storeChild.reload();
    },
    // 获取余额
    getYue(row) {
      this.loading = true;
      const { storeId } = row;
      getEdxStoreYue({ storeId })
        .then(res => {
          row.balance = `￥${res.result || 0.0}`;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 获取列表
    async getTableList() {
      try {
        this.loading = true;
        let res = await getEdxStoreList(this.listParams);
        if (res.errorCode === 0 && res.result && res.result.result) {
          this.tableList =
            res.result.result.map(v => {
              v.balance = null;
              return v;
            }) || [];
          this.total = res.result.totalCount;
          this.ewashDisable = true;
        } else {
          this.tableList = [];
          this.total = 0;
          this.ewashDisable = true;
          if (res.errorCode === 170049) {
            // 未开通e袋洗服务
            this.ewashTipDialog = true;
            this.ewashDisable = false;
          }
        }
        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    }
  },
  mounted() {
    this.getTableList();
  },
  created() {
    this.$store.commit('mutations_breadcrumb', [{ name: 'e袋洗服务', path: '' }, { name: '门店管理', path: '/ewash/store' }]); // eslint-disable-line
  }
};
</script>
