<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="w260 mrAuto" clearable placeholder="请输入自提点名称进行搜索"></el-input>
      <el-select class="more-select w160 mr10" @change="mutiOption" placeholder="批量操作">
        <el-option :value="0">批量设置</el-option>
        <el-option :value="1">批量删除</el-option>
      </el-select>
      <el-button type="default" @click="exportExcel"><i class="iconfont-welfare4 icon-xiazai"></i>&nbsp;导出</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.pickupId)" @mutiUpdate="mutiUpdate"></pickup-update-dialog>
  </div>
</template>

<script>
import { page } from '@/mixins/table.js';
// import fetch, { exportPickupStoreExcel } from '@/api/gift.js';
import fetch from '@/api/gift.js';
import pickupUpdateDialog from './module/pickup-update-dialog';
const { pickupList, delPickup, exportPickup } = 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: '福利中心', breadPath: '/index' }, { breadName: '自提点设置' } ]);
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    exportExcel() {
      // exportPickupStoreExcel;
      // window.location = exportPickupStoreExcel + `?dataUrl=/welfare/setting/pickup-list&name=${this.listParams.name}`;
      // window.location = `https://four.gicdev.com/api-welfare/export-pickup-store-excel?dataUrl=/welfare/setting/pickup-list&name=${this.listParams.name}`;
      let params = {
        dataUrl: '/welfare/setting/pickup-list',
        name: this.listParams.name
      };
      exportPickup(params).then(res =>{
        window.location.href = window.location.origin + '/damo-system/report-list';
        // window.location.href = 'https://four.gicdev.com/damo-system/report-list';
      });
    },
    mutiUpdate() {
      this.selectList = [];
      this.getTableList();
    },
    mutiOption(val) {
      if(this.selectList.length == 0){
        return this.$message.warning('请选择自提点');
      }
      if(val == 0) {
        // 批量设置
        this.dialogVisible = true;
      }
      if(val == 1) {
        // 批量删除
        this.$confirm('<div>删除后礼品中不支持该自提点，确定删除选中自提点吗？</div>', '批量删除', {
          closeOnClickModal: false,
          showClose: false,
          type: 'warning',
          customClass: 'show-title',
          dangerouslyUseHTMLString: true,
          confirmButtonText: '批量删除',
        })
          .then(() => {
            this.del(this.selectList.map(v => v.pickupId).join(','));
          });
        // 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;
        });
    },
    refresh(value){
      this.listParams.name = value;
      this.getTableList();
    },
    getTableList() {
      if(this.loading) {
        return;
      }
      this.loading = true;
      let params = {
        name: this.listParams.name,
        currentPage: this.listParams.currentPage,
        pageSize: this.listParams.pageSize,
      };
      pickupList(params).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>
