<template>
    <div>
        <el-card class="el-card">
                <el-form :model="query" label-width="100px" v-show="showSearch" size="mini">
                  <el-row>
                    <el-col  :span="6">
                    <el-form-item label="搜索:">
                        <el-input v-model="query.key" placeholder="搜索" style="width: 120%" clearable="true"></el-input>
                    </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>

          <div class="top-right-btn">
            <el-button-group style="display:flex;">
              <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
              <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
              <el-button type="primary" size="mini" icon="el-icon-bottom-right" @click="combine" :loading="combineLoading">选入</el-button>
            </el-button-group>
          </div>

          <el-divider style="margin: 15px"></el-divider>

                <el-table v-loading="loading" :data="list"  @current-change="handleSelectChange" style="width: 100%" highlight-current-row border>
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="往来单位编码" prop="erpId" show-overflow-tooltip></el-table-column>
                    <el-table-column label="第三方主系统ID" prop="thirdId" show-overflow-tooltip></el-table-column>
                    <el-table-column label="名称" prop="name" show-overflow-tooltip></el-table-column>
                    <el-table-column label="简写" prop="spell" show-overflow-tooltip></el-table-column>
                    <el-table-column label="社会信用号" prop="creditNo" show-overflow-tooltip></el-table-column>
                    <el-table-column label="地址" prop="addr" show-overflow-tooltip></el-table-column>
                </el-table>
        </el-card>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="query.page"
        :limit.sync="query.limit"
        @pagination="handleCurrentChange"
      ></pagination>
    </div>
</template>

<script>
import {combineSingle, getBasicUnitMaintains} from "@/api/basic/basicUnitMaintain";

export default {
    name: "combinType",
    props: {
        closeDialog: {
            type: Function,
            required: true,
        },

    },
    data() {
        return {
            showSearch: true,
            query: {
                key: "",
                page: 1,
                limit: 20,
            },
            total: 0,
            loading: false,
            list: [],
            currentRow: null,
            combineLoading: false,
        };
    },
    methods: {
        handlepageChange(val) {
            this.unitQuery.page = val;
            this.getList();
        },
        handleErppageChange(val) {
            this.erpQuery.page = val.page;
            this.getErpList();
        },
      hideSearch() {
        this.showSearch = !this.showSearch;
      },
        onReset() {
            this.$router.push({
                path: "",
            });
            this.query = {
                key: "",
                page: 1,
                limit: 20,
            };
            this.getList();
        },
        getList() {
            this.loading = true;
            getBasicUnitMaintains(this.query)
                .then((response) => {
                    this.loading = false;
                    this.list = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },


        handleSelectChange(val) {
            this.currentRow = val;
        },

        handleCurrentChange(val) {
            this.query.page = val.page;
            this.getList();
        },
        combine() {
            this.closeDialog(this.currentRow);
        },
        handleSelectionUdiChange(val) {
            console.log("----" + val[0].id);
            this.multipleUdiSelection = val;
        },
    },
    created() {
      this.getList()
    },
};
</script>

<style scoped>

</style>
