<template>
    <div>
        <!-- <div style="display: flex; margin-top: 12px">
          <el-checkbox v-model="checked" class="checkitemTag"
            >是否关联第三方系统往来单位信息</el-checkbox
          >
        </div> -->

        <el-card class="el-card" v-if="checked">
            <div>
                <el-form
                    :inline="true"
                    :model="erpQuery"
                    style="display: flex"
                    size="mini"
                >
                    <el-form-item class="query-form-item">
                        <el-input
                            v-model="erpQuery.customname"
                            placeholder="搜索"
                            style="width: 350px"
                        ></el-input>
                    </el-form-item>

                    <el-form-item style="display: flex">
                        <el-button type="primary" icon="search" @click="getErpList"
                        >查询
                        </el-button
                        >
                    </el-form-item>
                </el-form>

                <el-table
                    :data="erpList"
                    style="width: 100%"
                    highlight-current-row="true"
                    @current-change="handleCurrentChange"
                >
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column
                        label="第三方往来单位ID"
                        prop="customid"
                        width="200"
                    ></el-table-column>
                    <el-table-column
                        label="往来单位名称"
                        prop="customname"
                        width="400"
                    ></el-table-column>
                </el-table>

                <el-pagination
                    :page-size="erpQuery.limit"
                    @current-change="handleErppageChange"
                    layout="prev, pager, next"
                    :total="erpTotal"
                ></el-pagination>
            </div>
        </el-card>

        <el-card class="el-card">
            <div>
                <el-form
                    :inline="true"
                    :model="unitQuery"
                    style="display: flex"
                    size="mini"
                >
                    <el-form-item class="query-form-item">
                        <el-input
                            v-model="unitQuery.key"
                            placeholder="搜索"
                            style="width: 350px"
                        ></el-input>
                    </el-form-item>

                    <el-form-item style="display: flex">
                        <el-button-group>
                            <el-button type="primary" icon="search" @click="getList"
                            >查询
                            </el-button
                            >
                            <el-button
                                type="primary"
                                size="mini"
                                icon="search"
                                @click="combine"
                            >选入
                            </el-button
                            >
                        </el-button-group>
                    </el-form-item>
                </el-form>

                <el-table
                    :data="unitlList"
                    style="width: 100%"
                    @selection-change="handleSelectionUdiChange"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="往来单位ID" prop="id"></el-table-column>
                    <el-table-column
                        label="往来单位名称"
                        prop="name"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="往来单位简写"
                        show-overflow-tooltip
                        prop="spell"
                    ></el-table-column>
                    <el-table-column
                        label="地址"
                        prop="addr"
                        show-overflow-tooltip
                    ></el-table-column>
                </el-table>
            </div>
        </el-card>
        <el-pagination
            :page-size="unitQuery.limit"
            @current-change="handlepageChange"
            layout="prev, pager, next"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script>
import {ucloudUnit} from "../../api/warehouse/unit";
import {getErpUnit} from "../../api/erp/udiRelevance";
import {combine} from "../../api/receipts/unitMaintain";

export default {
    data() {
        return {
            erpQuery: {
                customname: "",
                page: 1,
                limit: 5,
            },
            unitQuery: {
                page: 1,
                limit: 10,
                key: "",
            },
            combineQuery: {
                thirdId: "",
                keys: [],
                custmandocResponses: [],
            },
            total: 0,
            erpTotal: 0,
            checked: false,
            unitlList: [],
            erpList: [],
            currentRow: null,
            multipleUdiSelection: [],
        };
    },
    methods: {
        handlepageChange(val) {
            this.unitQuery.page = val;
            this.getList();
        },
        handleErppageChange(val) {
            this.erpQuery.page = val;
            this.getErpList();
        },
        getList() {
            this.loading = true;
            ucloudUnit(this.unitQuery)
                .then((response) => {
                    console.log(response)
                    this.loading = false;
                    this.unitlList = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.unitlList = [];
                    this.total = 0;
                });
        },

        getErpList() {
            this.loading = true;
            getErpUnit(this.erpQuery)
                .then((response) => {
                    this.loading = false;
                    this.erpList = response.data.list || [];
                    this.erpTotal = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.erpList = [];
                    this.erpTotal = 0;
                });
        },
        intentBack() {
            this.$router.go(-1);
        },
        combine() {
            let selectData = this.multipleUdiSelection;
            var ids = [];
            selectData.forEach((obj, index) => {
                ids.push(obj);
            });
            console.log(" ids = " + ids.length);
            if (ids.length == 0) {
                this.$message.warning("请选择往来单位！")
                return;
            }
            this.combineQuery.custmandocResponses = ids;
            console.log(ids)
            combine(this.combineQuery)
                .then((response) => {
                    if (response.code == 20000) {
                        this.$emit("closeMain", true);
                    } else {
                        this.$emit("closeMain", false);
                    }
                })
                .catch(() => {
                    this.$emit("closeMain", false);
                });
        },

        handleCurrentChange(val) {
            console.log(val);
            this.currentRow = val;
            this.unitQuery.key = this.currentRow.customname;
        },

        handleSelectionUdiChange(val) {
            console.log("----" + val[0].id);
            this.multipleUdiSelection = val;
        },
    },
};
</script>
