<template>
  <div class="p20" v-loading="loading">
    <div class="pb20 clearfix flex-center">
      <el-input prefix-icon="el-icon-search" v-model="listParams.name" @change="refresh" class="w400 mrAuto" clearable placeholder="请输入自提点名称进行搜索"></el-input>
      <el-select class="more-select mr10" @change="mutiOption" placeholder="批量操作">
        <el-option :disabled="!selectList.length" :value="0">批量设置</el-option>
        <el-option :disabled="!selectList.length" :value="1">批量删除</el-option>
      </el-select>
      <el-button type="default" @click="exportExcel">导出自提点</el-button>
      <el-button type="primary" @click="$router.push('/setting/pickup-add')">新建自提点</el-button>
    </div>
    <el-table tooltip-effect="dark" :data="tableList" style="width:100%" @selection-change="(list) => { selectList = list; }">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="自提点名称" prop="name" min-width="180px;"> </el-table-column>
      <el-table-column label="自提点地址" prop="address" min-width="180px;"> </el-table-column>
      <el-table-column label="联系电话" prop="phone" min-width="140px;"> </el-table-column>
      <el-table-column label="自提时间可选" min-width="120px;">
        <template slot-scope="scope">
          {{ scope.row.chooseTimeFlag ? '可选' : '不可选' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text"  @click="$router.push(`/setting/pickup-edit?id=${scope.row.pickupId}`)">编辑</el-button>
          <dm-delete @confirm="del(scope.row.pickupId)" tips="确认删除？">
            <el-button type="text">删除</el-button>
          </dm-delete>
        </template>
      </el-table-column>
    </el-table>
    <div class="clearfix">
      <dm-pagination class="fr mb0" v-if="tableList.length" background @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>
    <pickup-update-dialog :dialog-visible.sync="dialogVisible" :ids="selectList.map(v => v.ids)" @mutiUpdate="mutiUpdate"></pickup-update-dialog>
  </div>
</template>

<script>
import { page } from '@/mixins/table.js';
import fetch, { exportPickupStoreExcel } from '@/api/gift.js';
import pickupUpdateDialog from './module/pickup-update-dialog';
const { pickupList, delPickup } = fetch;
export default {
  name: 'PickupList',
  components: { pickupUpdateDialog },
  mixins: [ page ],
  data() {
    return {
      loading: false,
      listParams: {
        name: '',
        currentPage: 1,
        pageSize: 20,
      },
      total: 0,
      tableList: [],
      pickedForm: {
        dialogVisible: false,
        selectIdList: [], // 复选框选中的数据的id
        list: [ { timeRange: [] } ] // 初始数据
      },
      selectList: [],
      dialogVisible: false,
    };
  },
  created() {
    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: '通用设置' }, { breadName: '自提点设置' } ]);
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    exportExcel() {
      console.log(exportPickupStoreExcel + `?dataUrl=/welfare/setting/pickup-list&name=${this.listParams.name}`);
      // window.location = exportPickupStoreExcel + `?dataUrl=/welfare/setting/pickup-list&areaId=${this.currentAreaId}&name=${this.listParams.name}`;
    },
    mutiUpdate() {
      this.selectList = [];
      this.getTableList();
    },
    mutiOption(val) {
      if(val == 0) {
        // 批量设置
        this.dialogVisible = true;
      }
      if(val == 1) {
        // 批量删除
        this.del(this.selectList.map(v => v.pickupId).join(','));
      }
    },
    del(pickupIds) {
      this.loading = true;
      delPickup({ pickupIds: pickupIds })
        .then(res => {
          this.loading = false;
          this.$tips({ type: 'success', message: '操作成功' });
          this.getTableList();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getTableList() {
      if(this.loading) {
        return;
      }
      this.loading = true;
      pickupList().then(res => {
        this.loading = false;
        const data = res.result;
        this.tableList = data.result || [];
        this.total = data.totalCount;
        // 删除至最后一页没数据的情况，页码-1
        if (this.tableList.length === 0 && this.listParams.currentPage !== 1) {
          this.listParams.currentPage -= 1;
          this.getTableList();
        }
      }).finally(() => {
        this.loading = false;
      });
    },
  },
};
</script>
