<template>
    <!-- 新购绑定页面 -->
    <div class="app-container">
        <PageHeader v-if="isShowComponent !== 'Index'" :pageContent="pageContent" @goBack="goBack" />
        <!-- 列表 -->
        <TableModel
            :formLabel="formLabel"
            :columnsList="columnsList"
            :request-api="queryPurchaseBindDetailsApi"
            :sendParams="sendParams"
            ref="tableRef"
            v-if="isShowComponent === 'Index'"
        >
            <template slot="handle" slot-scope="{ data }">
                <el-button type="primary" size="mini" @click="handleBindOpt(data)">绑定</el-button>
            </template>

            <template slot="purchaseNum" slot-scope="{ data }">{{ data.purchaseNum / 1000 }}</template>

            <template slot="checkNum" slot-scope="{ data }">{{data.checkNum / 1000}}</template>

            <template slot="bindNum" slot-scope="{ data }">{{data.bindNum / 1000}}</template>
        </TableModel>

        <!-- 数据绑定弹框 -->
        <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
            <template slot="outerContent">
                <!-- 编码绑定组件 -->
                <FormBinding :rowData="rowData" @closeDialog="closeDialog" />
            </template>
        </DialogModel>
    </div>
</template>

<script>
import PageHeader from '@/components/pageHeader'
import { columnsList, dialogConfig, formLabel } from '../config-bind-list'
import { commonMixin } from '../../mixins/common'

import { queryPurchaseBindDetailsApi } from '@/api/purchase/binding' // api
import FormBinding from './form-binding.vue'

export default {
    name: 'arrivalBindingManage',
    mixins: [commonMixin], // 混入公共方法和数据
    components: { PageHeader, FormBinding },
    props: {
        sendParams: {
            type: Object,
            default: () => null,
        },
    },
    created() {
        console.log(this.sendParams, 'this.sendParams')
    },
    methods: {
        queryPurchaseBindDetailsApi,
        goBack() {
            this.isShowComponent = 'Index'
        },
        /**  绑定按钮 */
        handleBindOpt(data) {
            console.log('data', data)
            this.rowData = data
            this.dialogConfig.outerVisible = true
            this.dialogConfig.outerTitle = '绑定'
        },
    },
    data() {
        return {
            formLabel,
            columnsList,
            dialogConfig,
            isShowComponent: 'Index',
            pageContent: '新购绑定物资列表',
            sendData: undefined,
            rowData: null, // 绑定的当前行数据
        }
    },
}
</script>
