<template>
  <div class="storeBox" v-loading="loading">
    <div>
      门店<span style="margin: 0 10px;">{{ tableData.length }}</span
      >家
    </div>
    <div class="searchBox">
      <el-input class="w260" prefix-icon="el-icon-search" placeholder="请输入门店名称/代码" clearable v-model="listParams.search" @change="searchEvent"></el-input>
      <div>
        <el-button @click="qrEvent">核销工具二维码</el-button>
        <el-button type="primary" @click="addSoreEvent">新增门店</el-button>
      </div>
    </div>
    <div class="content">
      <div v-for="(item, index) in tableData" :key="index">
        <div class="c_top">
          <div class="c_t_left">
            <div class="icon">
              <i class="iconfont icon-mendian-data mendianIcon"></i>
            </div>
            <div class="new_xinxi">
              <p class="xinxi">{{ item.storeName }}</p>
              <p class="code">code：{{ item.storeCode }}</p>
            </div>
          </div>
          <div class="c_t_right">
            <el-button type="text" style="margin-right: 12px;" @click="setStraffEvent({ storeId: item.storeId, storeCode: item.storeCode })">新增员工</el-button>
            <el-popconfirm confirm-button-text="删除" cancel-button-text="取消" icon="el-icon-warning" icon-color="#FA8C16" @confirm="deleteStoreEvent(item)" popper-class="my-popper" title="删除后卡券适用门店无法选择，是否继续？">
              <el-button slot="reference" type="text" style="margin-left:8px">删除</el-button>
            </el-popconfirm>
          </div>
        </div>
        <div class="tableBox">
          <el-table tooltipEffect="light" :data="item.staffList">
            <el-table-column prop="writeOffName" label="姓名" min-width="324px"></el-table-column>
            <el-table-column prop="writeOffPhone" label="手机号码" min-width="285px"></el-table-column>
            <el-table-column prop="unionId" label="unionID" min-width="381px"></el-table-column>
            <el-table-column prop="" label="操作" min-width="114px">
              <template slot-scope="{ row }">
                <el-button type="text" @click="setStraffEvent(row)">编辑</el-button>
                <el-popconfirm confirm-button-text="删除" cancel-button-text="取消" icon="el-icon-warning" icon-color="#FA8C16" popper-class="my-popper" @confirm="delstraffEvent(row)" title="删除后员工将无法登录核销小工具，确认删除吗？">
                  <el-button slot="reference" type="text" style="margin-left:20px;">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <dm-pagination v-show="tableData.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"></dm-pagination>
    </div>
    <links :link="link" :src="linkUrl" :show.sync="linkShow" :imageName="核销工具二维码" />
    <add-store-dialog :show.sync="addStoreShow" @refresh="getList"></add-store-dialog>
    <set-staff-dialog :show.sync="setStraffShow" :row="straffDetail" @refresh="getList"></set-staff-dialog>
  </div>
</template>

<script>
import { getStoreList, delStore, delstraff, getwriteOffQr } from '@/service/api/cardApi.js';
import AddStoreDialog from './addStoreDialog.vue';
import links from './links.vue';
import SetStaffDialog from './setStaffDialog.vue';
export default {
  components: {
    links,
    AddStoreDialog,
    SetStaffDialog
  },
  data() {
    return {
      loading: false,
      tableData: [],
      listParams: {
        search: '',
        currentPage: 1,
        pageSize: 20
      },
      total: 0,
      linkShow: false,
      linkUrl: '',
      link: '',
      addStoreShow: false,
      setStraffShow: false,
      straffDetail: {}
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    searchEvent(val) {
      this.listParams.search = val;
      this.listParams.currentPage = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listParams.currentPage = 1;
      this.listParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listParams.currentPage = val;
      this.getList();
    },
    async getList() {
      this.loading = true;
      try {
        let res = await getStoreList(this.listParams);
        this.tableData = res.result.result;
        this.total = res.result.totalCount;
      } catch (err) {
        this.loading = false;
        this.$tips({ type: 'error', message: '加载列表失败' });
      }
      this.loading = false;
    },
    // 新增门店
    addSoreEvent() {
      this.addStoreShow = true;
    },
    // 删除门店
    async deleteStoreEvent(row) {
      await delStore({ writeOffStoreId: row.writeOffStoreId })
        .then(() => {
          this.$tips({ type: 'success', message: '删除成功' });
          if (this.tableData.length === 1 && this.listParams.currentPage !== 1) {
            this.listParams.currentPage--;
          }
          this.getList();
        })
        .catch(err => {
          this.$tips({ type: 'error', message: err.message || '操作失败' });
        });
    },
    setStraffEvent(row) {
      this.setStraffShow = true;
      this.straffDetail = Object.assign({}, row);
    },
    // 删除员工
    async delstraffEvent(row) {
      await delstraff({ writeOffStoreStaffId: row.writeOffStoreStaffId })
        .then(() => {
          this.$tips({ type: 'success', message: '删除成功' });
          this.getList();
        })
        .catch(err => {
          this.$tips({ type: 'error', message: err.message || '操作失败' });
        });
    },
    // 核销工具二维码
    async qrEvent() {
      await getwriteOffQr({}).then(res => {
        if (res.errorCode == 0) {
          this.link = res.result.link;
          this.linkUrl = res.result.url;
        }
        this.linkShow = true;
      });
    }
  }
};
</script>
<style lang="scss">
.my-popper {
  max-width: 225px;
  .el-popconfirm__icon {
    margin-top: -19px;
  }
}
</style>
<style lang="scss" scoped>
.storeBox {
  margin: 20px;
  .w260 {
    width: 260px;
  }
  .searchBox {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
  }
  .mendianIcon {
    color: #597ef7;
    font-size: 21px;
  }
  .content {
    margin-top: 20px;
    height: 48px;

    .c_top {
      background: #ebecf0;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-right: 20px;
      padding-left: 13px;
      display: flex;
      justify-content: space-between;
      .c_t_left {
        padding-top: 10px;
        display: flex;
        .icon {
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background: #f5f7fa;
          border-radius: 2px;
          margin-right: 14px;
        }
        .new_xinxi {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
        }
        .code {
          font-size: 12px;
          font-weight: 400;
          color: #909399;
          line-height: 22px;
        }
      }
      .c_t_right {
        padding-top: 13px;
      }
    }
  }
}
</style>
