<template>
    <div>
        <!-- 待审核 -->
        <avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" 
            v-model:search="searchParams" ref="crud"
            @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange">
            <template #menu-left>
                <el-button type="primary"  @click="settleConfirm" v-if="permission.underReview_settlementConfirm">结算确认</el-button>
                <el-button type="primary"  @click="initiateReview" v-if="permission.underReview_initiateCheck">发起审核</el-button>
            </template>
        </avue-crud>
        <!-- 结算确认 -->
        <el-dialog title="结算确认" :modelValue="isConfirm" append-to-body width="30%">
            <el-form :model="settleForm" :rules="settleRules" ref="settleForm">
                <el-form-item label="确认结果" prop="confirmResult">
                    <el-radio-group v-model="settleForm.confirmResult" @change="changeResult">
                        <el-radio label="1">结算正确</el-radio>
                        <el-radio label="0">结算异常</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="异常原因" prop="errorReason" v-if="settleForm.confirmResult == 0">
                    <el-select v-model="settleForm.errorReason">
                        <el-option label="订单数据错误" value="订单数据错误"></el-option>
                        <el-option label="无需结算" value="无需结算"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isConfirm = false">取消</el-button>
                    <el-button type="primary" @click="summitSettle">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 发起审核 -->
        <el-dialog title="发起审核" :modelValue="isReview" append-to-body width="30%">
            <el-form :model="reviewForm" :rules="reviewRules" ref="reviewForm">
                <el-form-item label="结算说明" prop="reason">
                    <el-input v-model="reviewForm.reason" type="textarea" placeholder="请输入结算说明"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isReview = false">取消</el-button>
                    <el-button type="primary" @click="summitReview">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {getStatement,confirmSettlement,sendApproval} from "@/api/outsourcingManagement/oemOrderSettlement"
import { mapGetters } from 'vuex';
export default {
    data(){
        return{
            loading:false,
            data:[],
            form:{},
            searchParams:{
                rosStatusList:2,
            },
            query:{},
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectionList:[],
            isConfirm:false,
            settleForm:{},
            settleRules:{
                confirmResult:[{required: true, message: '请选择结算结果',trigger:'blur'}],
                errorReason:[{required: false, message: '请填写异常原因',trigger:'blur'}],
            },
            isReview:false,
            reviewForm:{},
            reviewRules:{
                reason:[{required: true, message: '请填写结算说明',trigger:'blur'}]
            },
            option:{
                height: 'auto',
                calcHeight: 32,
                tip: false,
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                searchIcon: true,
                searchIndex: 3,
                tree: false,
                border: true,
                index: false,
                selection: true,
                rowKey: 'id',
                editBtn: false,
                viewBtn: false,
                delBtn: false,
                addBtn: false,
                editBtnText: '修改',
                viewBtnIcon: ' ',
                delBtnIcon: ' ',
                editBtnIcon: ' ',
                viewBtnText: '详情',
                labelWidth: 120,
                searchLabelWidth:'auto',
                menuWidth: 180,
                dialogWidth: 640,
                dialogClickModal: false,
                searchEnter: true,
                excelBtn: true,
                filterBtn: true,
                searchShowBtn: false,
                columnSort: true,
                showOverflowTooltip: true,
                menu: false,
                searchLabelPosition: 'left',
                searchGutter: 24,
                searchSpan: 6,
                menuAlign: 'left',
                gridBtn: false,
                searchMenuPosition: 'right',
                addBtnIcon: ' ',
                viewBtnIcon: ' ',
                delBtnIcon: ' ',
                editBtnIcon: ' ',
                align: 'center',
                column: [
                    {
                        label: '计划单号',
                        prop: 'ypCode',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: true,
                        width: 120,
                        searchOrder:4,
                    },
                    {
                        label: '车间订单单号',
                        prop: 'woCode',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: true,
                        width: 140,
                        searchOrder:3,
                    },
                    {
                        label: '零件号',
                        prop: 'partCode',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: true,
                        width: 120,
                        searchOrder:7,
                    },
                    {
                        label: '零件名称',
                        prop: 'partName',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '批次号',
                        prop: 'batchNo',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '质量等级',
                        prop: 'productIdent',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: true,
                        width: 120,
                        // type:'select',
                        searchOrder:5,
                        // dicUrl:"/api/blade-scheduling/qualityGrade/getGrades",
                        // props:{
                        //     label:'qualityGrade',
                        //     value:"id"
                        // }
                    },
                    {
                        label: '工序',
                        prop: 'ppsId',
                        sortable: true,
                        filterable: true,
                        span: 24,
                        search: true,
                        width: 120,
                        type:'select',
                        dicUrl:"/api/blade-desk/mesOemProcess/page?current=1&&size=99999",
                        props:{
                            label: 'paName',
                            value: 'oemProcessCode',
                            res: 'data.records',
                        },
                        searchOrder:9,
                    },
                    {
                        label: '工艺能力',
                        prop: 'caId',
                        sortable: true,
                        filterable: true,
                        span: 24,
                        search: false,
                        searchOrder:8,
                        width: 120,
                        type:'select',
                        dicUrl:"/api/blade-desk/BA/craftAbility/findList",
                        props:{
                            label:"caName",
                            value:"id"
                        },
                    },
                     {
                        label: '结算大类',
                        prop: 'statementCategory',
                        sortable: 'custom',
                        filter: true,
                        span: 24,
                        search: true,
                        width: 120,
                        searchOrder:19,

                    },
                    {
                        label: '厂家代码',
                        prop: 'ocCode',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '厂家名称',
                        prop: 'ocName',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '结算数量',
                        prop: 'makeQty',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '单件面积(d㎡)',
                        prop: 'ypArea',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 140,
                    },
                    {
                        label: '总面积(d㎡)',
                        prop: 'totalArea',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 140,
                    },
                    {
                        label: '镀种',
                        prop: 'plate',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: true,
                        width: 120,
                        searchOrder:6,
                    },
                    {
                        label: '镀层厚度',
                        prop: 'plateThickness',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '流程卡号',
                        prop: 'cardNo',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: true,
                        width: 120,
                        searchOrder:1
                    },
                    {
                        label: '工序标准代码',
                        prop: 'standardProcessCode',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '涂色标个数',
                        prop: 'tsbNum',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '涂色带个数',
                        prop: 'tsdNum',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '涂箭头个数',
                        prop: 'tjtNum',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '计划部门编号',
                        prop: 'planDeptcode',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '使用部门编号',
                        prop: 'useDeptCode',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '镀后入库时间',
                        prop: 'putStoreTime',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: true,
                        width: 140,
                        type: "date",
                        searchRange: true,
                        format: 'YYYY-MM-DD',
                        valueFormat: 'YYYY-MM-DD',
                        startPlaceholder: '开始时间',
                        endPlaceholder: '结束时间',
                        searchOrder:20,
                    },
                    {
                        label: '报价单号',
                        prop: 'quotation',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '计量单位',
                        prop: 'unit',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '结算单价',
                        prop: 'unitPrice',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '结算金额',
                        prop: 'totalPrice',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    // {
                    //     label: '异常原因',
                    //     prop: 'abnormalReason',
                    //     sortable: true,
                    //     filter: true,
                    //     span: 24,
                    //     search: true,
                    //     width: 120,
                    //     searchOrder:14,
                    // },
                    {
                        label: '结算时间',
                        prop: 'settleDate',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '结算状态',
                        prop: 'rosStatusName',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        width: 120,
                    },
                    {
                        label: '结算状态',
                        prop: 'rosStatusList',
                        sortable: true,
                        filterable: true,
                        span: 24,
                        hide: true,
                        search: true,
                        width: 120,
                        type:'select',
                        searchOrder:10,
                        clearable:false,
                        dicData:[
                            // 未结算：1，待确认：2，结算异常：3，结算完成：4，待审核：5，审核中：6，待推送：7
                            {
                                label:'待确认',
                                value:2
                            },
                            {
                                label:'待审核',
                                value:5
                            }
                        ]
                    },
                    {
                        label: '外协厂商',
                        prop: 'ocIds',
                        sortable: true,
                        filterable: true,
                        span: 24,
                        hide: true,
                        search: true,
                        width: 120,
                        type:'select',
                        searchOrder:10,
                        dicUrl:"/api/blade-desk/BA/Oem/listForSelect",
                        props:{
                            label:'ocName',
                            value:"id"
                        }
                    },
                ]
            }
        }
    },
    computed: {
        ...mapGetters(['permission']),
    },
    mounted() { 
    },
    methods:{
        searchChange(params, done){
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad();
            done()
        },
        searchReset(){
            this.query = {
                rosStatusList:2
            }
            this.searchParams = {
                rosStatusList:2
            }
            this.onLoad()
        },
        selectionChange(list){
            this.selectionList = list;
        },
        currentChange(currentPage){
            this.page.currentPage = currentPage;
            this.onLoad()
        },
        sizeChange(pageSize){
            this.page.pageSize = pageSize;
            this.onLoad()
        },
        refreshChange(){
            this.onLoad();
        },
        settleConfirm(){
            if(this.selectionList.length == 0){
                this.$message.error('请至少选择一条数据')
                return
            }
            let tmp = this.selectionList.find(item => item.rosStatus != 2)
            if(tmp){
                this.$message.error('请选择状态为【待确认】的数据！')
                return
            }
            this.isConfirm = true
        },
        initiateReview(){
            if(this.data.length == 0){
                this.$message.error('请先查询数据！')
                return
            }
            let tmp = this.data.find(item => item.rosStatus != 5)
            if(tmp){
                this.$message.error('请先查询状态为【待审核】的数据！')
                return
            }
            this.reviewForm = {}
            this.isReview = true
        },
        summitReview(){
            this.$refs.reviewForm.validate(valid => { 
                if(valid){
                    let params = {
                        settlementMemo:this.reviewForm.reason
                    }
                    sendApproval(params).then(res => { 
                        if(res.data.code == 200){
                            this.$message.success('发送成功')
                            this.isReview = false
                            this.onLoad()
                        }
                    })
                }
            })
            
        },
        changeResult(val){
            console.log('val-----------------',val)
            if(val == 0){
                this.settleRules.errorReason[0].required = true
            }else{
                this.settleRules.errorReason[0].required = false
            }
        },
        summitSettle(){
            this.$refs.settleForm.validate(valid => {
                if(valid){
                    let params = {
                        ids:this.selectionList.map(item => item.id),
                        ...this.settleForm,
                        confirmResult:this.settleForm.confirmResult == 1 ? true : false
                    }
                    console.log('params----------',params)
                    confirmSettlement(params).then(res =>{
                        if(res.data.code == 200){
                            this.$message.success('确认结算成功');
                            this.isConfirm = false
                            this.onLoad()
                        }
                    })
                    // this.$message.success('结算成功！')
                    // this.isConfirm = false
                }
            })
        },
        onLoad(){
            this.loading = true
            let params = {
                current:this.page.currentPage,
                size:this.page.pageSize,
                ...this.query,
                postPlatingStorageTimeStart:this.query && this.query.putStoreTime && this.query.putStoreTime.length != 0 && this.query.putStoreTime[0],
                postPlatingStorageTimeEnd:this.query && this.query.putStoreTime && this.query.putStoreTime.length != 0 && this.query.putStoreTime[1],
            }
            if(params.putStoreTime) delete params.putStoreTime
            getStatement(params).then(res =>{
                this.data = res.data.data.records
                 this.data.forEach(item =>{
                    item.ppsId =  item.ppsId?item.ppsId+'':''
                })
                this.page.total = res.data.data.total
                this.loading = false
            })
        },
    }
}
</script>

<style>

</style>