<template>
    <div>
        <div style="display: flex;height: 100%;">
            <base-layout ref="contractTablePage" @pageChange="onPageChange" :showTitle="false" :buttonList="buttonList"
                @onFuncBtn="handleDialog" :isPage="true">
                <div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
                    <base-table ref="contractTable" :border="true" :showIndex="false" :slotrow="true"
                        :tabLoading.sync="tabLoading" :tableHeight="tableHeight" :tableData="tableData"
                        :tableColumn="tableColumn" @radioChange="radioChange">
                        <template v-slot:isInvoice="{ row }">
                            <el-switch style="display: block" v-model="row.row.isInvoice" active-color="#13ce66"
                                :active-value="1" :inactive-value="0" @change="change(row.row)">
                            </el-switch>
                        </template>
                        <template v-slot:isIncome="{ row }">
                            <el-switch style="display: block" v-model="row.row.isIncome" active-color="#13ce66"
                                :active-value="1" :inactive-value="0" @change="change(row.row)">
                            </el-switch>
                        </template>
                        <template v-slot:state="{ row }">
                            <el-switch style="display: block" v-model="row.row.state" active-color="#13ce66"
                                :active-value="1" :inactive-value="0" @change="change(row.row)">
                            </el-switch>
                        </template>
                    </base-table>
                </div>
            </base-layout>
        </div>
        <!-- S 新增弹窗 -->
        <base-dialog :dialogVisible.sync="contractManagementDialog" :closeModal="false" :footerShow="true"
            :title="dialogType" width="60%" top="10vh" @handleConfirmClick="handleAddDialogDetails">
            <base-form :formRow="plusDialogListRow" :isFunBtn="false" ref="custmanForm" :rules="rules" :spanNumber="12"
                @onSelect="onSelect"></base-form>
        </base-dialog>
        <!-- E 新增弹窗 -->

        <!-- S 查看 -->
        <base-dialog :dialogVisible.sync="showManagementDialog" :closeModal="false" :footerShow="true" title="查看"
            width="60%" top="20vh" @handleConfirmClick="handleShowDialogDetails">
            <look-form :formRow="showFormColumn" :spanNumber="12" :ruleForm="showFormData">
                <!-- <template v-slot:state="{ row }">
                    <p>{{ row.state == 1 ? '是' : '否' }}</p>
                </template> -->
            </look-form>
        </base-dialog>
        <!-- E 查看 -->
    </div>
</template>
<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseForm from "@/components/base/baseNewForm/index.vue";
import lookForm from '@/components/base/baselookForm/index.vue'

import configData from "./configData";
import { getCompanyId } from '@/utils/auth'
import { contractBillList, switchLock, getBillDataRow, delBillList, getBillList, saveBillList } from '@/api/apis/fileManagement'

export default {
    name: "review",
    components: {
        baseLayout,
        baseTable,
        baseDialog,
        baseForm, lookForm
    },
    data() {
        return {

            pageModel: {
                page: 1, limit: 20, Sequence: '', SequenceName: ''
            },
            buttonList: [{ icon: 'el-icon-reading', menuName: '查看', },],
            tabLoading: false,
            tableData: [], //表格数据
            changeobj: { id: '', state: '', isInvoice: '', isIncome: '' },
            dialogType: "",

            contractManagementDialog: false,//新增弹窗
            rules: configData.rules, //新增表单校验
            functionName: [], //执行单据下拉框
            plusDialogListRow: configData.plusDialogList, //新增表单
            selectTableData: {}, //当前选中的数据

            showFormColumn: configData.showFormColumn,//查看
            showManagementDialog: false,//查看弹窗
            showFormData: {},
        }
    },
    computed: {
        // 表头配置
        tableColumn() {
            return configData.contractTableColumn
        },
    },
    watch: {
        // 新增编辑弹窗
        contractManagementDialog: {
            deep: true,
            handler(newValue, oldValue) {
                if (newValue === false) {
                    // 重置表单
                    this.$refs.custmanForm.resetFields('ruleForm')
                    this.$refs.contractTablePage.pageClear()
                }
            }
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        // 初始化页面
        init() {
            this.getTableData()
        },
        // 分页
        onPageChange(model) {
            this.pageModel.page = model.page;
            this.pageModel.limit = model.limit;
            this.getTableData()
        },
        // 客户档案表格数据
        async getTableData() {
            this.tabLoading = true
            setTimeout(() => { this.tabLoading = false }, 3000)
            let params = { ...this.pageModel, Sequence: '', SequenceName: '', }
            let res = await contractBillList(params)
            if (res.code == 1) {
                this.$nextTick(() => {
                    this.tableData = res.data[1]
                    this.$refs.contractTable.clearRadioIndex()
                    this.selectTableData = {}
                    this.$refs.contractTablePage.setPageTotal(res.data[0])
                })
                this.tabLoading = false
            }
        },
        // 行单击
        radioChange(val) {
            this.selectTableData = val
            this.radioModel = val.index
        },
        //选择器选中
        onSelect(val, index, indexRow) {
            this.$refs.custmanForm.getField("billKindID", val);
        },
        //查看弹窗 确认事件
        handleShowDialogDetails() {
            this.showManagementDialog = false
        },

        //增删改查
        handleDialog(item) {
            // 新增
            if (item.menuName === '新增') {
                this.dialogType = '新增'
                this.contractManagementDialog = true
                this.$refs.custmanForm.getField("isInvoice", 0);
                this.$refs.custmanForm.getField("isIncome", 0);
                this.$refs.custmanForm.getField("state", 0);
                this.getBillList()//下拉列表

            }
            // 编辑
            if (item.menuName === '编辑') {
                this.dialogType = '编辑'
                if (Object.keys(this.selectTableData).length === 0) {
                    this.$vmNews('请选择一条数据!', 'warning')
                    return
                } else {
                    this.contractManagementDialog = true
                    this.getBillList()//下拉列表

                    this.$nextTick(() => {
                        let val = this.selectTableData;
                        this.getrowDetails(val)
                    })
                }
            }
            // 删除
            if (item.menuName == '删除') {
                if (Object.keys(this.selectTableData).length === 0) {
                    this.$vmNews('请选择一条数据!', 'warning')
                    return
                } else {
                    this.$delConfirm().then(() => {
                        let billid = this.selectTableData.billid
                        this.removeTableItem(billid)
                    })
                }
            }
            // 查看
            if (item.menuName == '查看') {
                this.dialogType = '查看'
                if (Object.keys(this.selectTableData).length === 0) {
                    this.$vmNews('请选择一条数据!', 'warning')
                    return
                } else {
                    this.showManagementDialog = true
                    let val = this.selectTableData;
                    this.getrowDetails(val)
                }
            }
        },
        // 保存
        handleAddDialogDetails() {
            this.$refs.custmanForm.$refs['ruleForm'].validate((valid) => {
                if (valid) { this.saveAddDialogDetails() } else {
                    this.$message({ message: '请输入必填项', type: 'warning' }); return
                }
            })
        },
        async saveAddDialogDetails() {
            let params = {
                dataMain: {
                    billid: this.dialogType == '新增' ? '00000000-0000-0000-0000-000000000000' : this.selectTableData.billid,
                    ...this.$refs.custmanForm.ruleForm,
                },
            }
            // console.log(params, "form");
            let res = await saveBillList(params)
            if (res.code === 1) {
                this.$vmNews('保存成功', 'success')
                this.contractManagementDialog = false
                this.getTableData()
            }
        },
        // 获取当前行详情数据
        async getrowDetails(val) {
            let params = {
                id: val.billid,
                op: "",
            };
            let res = await getBillDataRow(params)
            if (res.code === 1) {
                let data = res.data
                // console.log(data);
                this.$nextTick(() => {
                    // 编辑
                    if (this.contractManagementDialog === true) {
                        // 表单数据回滚
                        this.$refs.custmanForm.choiceAssignment(data[0])
                    }
                    // 查看
                    if (this.showManagementDialog === true) {
                        this.showFormData = data[0]
                    }
                })
            }
        },
        // 删除
        async removeTableItem(billid) {
            let params = {
                id: billid,
            }
            let res = await delBillList(params)
            if (res.code === 1) {
                this.$vmNews('删除成功！', 'success')
                this.getTableData()
            }
        },
        //获取执行单据下拉列表数据
        async getBillList() {
            let params = { ...this.pageModel, Sequence: '', SequenceName: '', }
            const res = await getBillList(params)
            const options = []
            res.data[1].map(item => {
                let _item = {
                    value: item.bm_id,
                    label: item.bm_functionName,
                }
                options.push(_item)
            })
            this.plusDialogListRow[1].elCol[1].options = options

        },
        //改变是否开票
        change(row) {
            // console.log(row, "row");
            if (row.state == 0) {
                this.changeobj.state = 'false'
            } else {
                this.changeobj.state = 'true'
            }
            if (row.isInvoice == 0) {
                this.changeobj.isInvoice = 'false'
            } else {
                this.changeobj.isInvoice = 'true'
            }
            if (row.isIncome == 0) {
                this.changeobj.isIncome = 'false'
            } else {
                this.changeobj.isIncome = 'true'
            }
            this.changeobj.id = row.billid
            switchLock(this.changeobj).then(res => {
                this.getTableData()
            })
        },
    },
}
</script>
<style scoped lang='scss'>
::v-deep .el-form-item__error {
    padding: 0;
    top: 83%
}
</style>
