<template>
    <div class="container">
        <el-card>
            <!-- 头部 -->
            <el-row type="flex" justify="between" style="margin-bottom: 10px">
                <!-- 左边按钮 -->
                <el-col>
                    <el-button type="success" icon="el-icon-plus" @click="showDialog = true"
                        >新增</el-button
                    >
                    <el-button type="success" icon="el-icon-edit" @click="edit">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="del">删除</el-button>
                    <el-button type="success" icon="el-icon-search">查询</el-button>
                    <el-button type="success" icon="el-icon-reading" @click="look">查看</el-button>
                </el-col>
            </el-row>
            <!-- 表格部分 -->
            <template>
                <el-table
                    :data="list"
                    style="width: 100%"
                    @row-click="singleElection"
                    highlight-current-row
                >
                    <el-table-column label="单选">
                        <template slot-scope="scope">
                            <el-radio
                                class="radio"
                                @change="radioChange(scope.row)"
                                v-model="changeRadio"
                                :label="scope.row.billid"
                            >
                            </el-radio>
                        </template>
                    </el-table-column>

                    <el-table-column prop="phaseCode" label="阶段编码"> </el-table-column>

                    <el-table-column prop="phaseName" label="阶段名称"> </el-table-column>

                    <el-table-column prop="phaseContent" label="执行内容"> </el-table-column>

                    <el-table-column prop="bm_functionName" label="执行单据"> </el-table-column>

                    <el-table-column prop="isInvoice" label="是否开票">
                        <template slot-scope="scope">
                            <el-switch
                                style="display: block"
                                v-model="scope.row.isInvoice"
                                active-color="#13ce66"
                                inactive-color="#8B8B8B"
                                :active-value="1"
                                :inactive-value="0"
                                :active-text="scope.row.isInvoice == 1 ? '是' : '否'"
                                @change="change(scope.row)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isIncome" label="确认收入">
                        <template slot-scope="scope">
                            <el-switch
                                style="display: block"
                                v-model="scope.row.isIncome"
                                active-color="#13ce66"
                                inactive-color="#8B8B8B"
                                :active-value="1"
                                :inactive-value="0"
                                :active-text="scope.row.isIncome == 1 ? '是' : '否'"
                                @change="change(scope.row)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="State" label="启用状态">
                        <template slot-scope="scope">
                            <el-switch
                                style="display: block"
                                v-model="scope.row.State"
                                active-color="#13ce66"
                                inactive-color="#8B8B8B"
                                :active-value="1"
                                :inactive-value="0"
                                :active-text="scope.row.State == 1 ? '启用' : '禁用'"
                                @change="change(scope.row)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-card>
        <!-- 放置分页组件 -->
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="params.limit"
            layout="prev, pager, next,sizes, jumper"
            :total="10"
        >
        </el-pagination>
        <!-- 新增弹框 -->
        <contract-add ref="addContract" :showDialog.sync="showDialog" />
        <!-- 查看弹窗 -->
        <contract-look ref="lookContract" :lookDialog.sync="lookDialog" />

    </div>
</template>

<script>
import { contractBillList, switchLock, editBillList, delBillList,getBillList } from '@/api/apis/fileManagement'
import ContractAdd from './contract-add.vue'
import ContractLook from './contract-look.vue'

export default {
    components: {
        ContractAdd,
        ContractLook,
    },
    data() {
        return {
            num: '',
            showDialog: false,
            lookDialog:false,
            checked: false,
            changeRadio: '',
            list: [],
            checkList: [],
            isInvoice: false,
            changeobj: {
                id: '',
                State: '',
                isInvoice: '',
                isIncome: ''
            },
            params: { page: 1, limit: 3, Sequence: 'ascending', SequenceName: '' },
        }
    },
    created() {
        this.getContractList()
    },
    methods: {
        //获取合同阶段档案列表数据
        async getContractList() {
            const { data } = await contractBillList(this.params)
            this.list = data[1]
            this.num = data[0]
        },
        singleElection(row) {
            this.changeRadio = row.billid
        },
        //改变是否开票
        change(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.getContractList()
            })
        },

        //编辑
        async edit() {
            if (this.changeRadio === '') {
                this.$vmNews('请选择一条数据!', 'warning')
                return
            } else {
                let obj = { id: this.changeRadio }
                const res = await editBillList(obj)
                this.$refs.addContract.formData = res.data[1][0]
                const { data } = await getBillList(this.params)
                // this.$refs.addContract.formData.bm_functionName= data[1].bm_functionName
                this.showDialog = true
            }
        },
        //删除
        async del() {
            if (this.changeRadio === '') {
                this.$vmNews('请选择一条数据!', 'warning')
                return
            } else {
                await this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                let obj = { id: this.changeRadio }
                await delBillList(obj)
                this.$message.success('删除成功')
                this.getContractList()
            }
        },
        //查看
        async look(){
             if (this.changeRadio === '') {
                this.$vmNews('请选择一条数据!', 'warning')
                return
            } else {
                let obj = { id: this.changeRadio }
                const res = await editBillList(obj)
                this.$refs.lookContract.formData = res.data[1][0]
                this.lookDialog = true
            }
        },
        // 一页多少条
        handleSizeChange(val) {
            this.params.limit = val
            this.getContractList(this.params)
        },
        // 多少页
        handleCurrentChange(newPage) {
            this.params.page = newPage
            this.getContractList(this.params)
        },
    },
}
</script>

<style  scoped>
.container {
    margin: 10px 0 0 10px;
}

>>> .el-radio__label {
    /* display: none; */
}
</style>
