<template>
    <div>
        <navbar :title="title"></navbar>
        <div class="wrapper">

            <van-form ref="form" :model="accountForm">
                <van-field v-model="accountForm.supplierName" label="供应商名称" placeholder="请输入"
                    ></van-field>
                
                <div class="jine">
                    <van-field v-model="accountForm.settleAmt" label="对外担保金额" placeholder="请输入" type="number"></van-field>
                    <span class="danwei" v-if="accountForm.settleAmt">万元人民币</span>
                </div>
                <van-field v-model="accountForm.settleWay" label="结算方式" placeholder="请输入"></van-field>
                <van-field v-model="accountForm.settleCycle" label="结算周期" placeholder="请输入"></van-field>
                <van-field v-model="accountForm.remark" label="备注" placeholder="请输入" type="textarea" :row="3"></van-field>

            </van-form>

        </div>
        <div class="footer">
            <div class="btn_box">
                <van-button type="primary" class="btn" @click="handleCommit">保存</van-button>
            </div>
            <div class="btn_box">

                <van-button type="primary" class="btn" @click="handleDelete">删除</van-button>
            </div>
        </div>
        <van-popup v-model="isShow" :style="{ width: '300px', borderRadius: '8px' }">
            <div style="height: 40px;line-height: 40px;text-align: center;font-size: 16px;font-weight: bold">提示</div>
            <div class='night_box'>供应商名称不能为空</div>

            <div @click="isShow = false"
                style="height: 42px;line-height: 42px;text-align: center;font-size: 16px;color: #2372eb">关闭</div>
        </van-popup>
        <van-popup v-model="isDialogShow" :style="{ width: '300px', borderRadius: '8px' }">
            <div style="height: 40px;line-height: 40px;text-align: center;font-size: 16px;font-weight: bold">提示</div>
            <div class='night_box'>是否确认删除</div>
            <div class="de_btn">
                <div @click="isDialogShow = false"
                >关闭</div>
            <div @click="handleDeCommit"
                >确认</div>
            </div>
            
        </van-popup>
    </div>
</template>
<script>
import navbar from '../../../components/navbar/navbar.vue';
import { addSupplierInfo, updateSupplierInfo, deleteSupplierInfo } from "@/service/api/report";
import {
    Icon,
    Field,
    Form,
    Button,
    Toast,
    Popup,
    
} from 'vant';
export default {
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanForm: Form,
        VanField: Field,
        VanButton: Button,
        VanPopup: Popup,
    },
    data() {
        return {
            addAndEdit: "",
            isDialogShow: false,
            title: '',
            isShow:false,
            accountForm: {
                supplierName: '',
                settleAmt: '',
                settleWay: '',
                settleCycle: '',
                remark: '',
                companyId: '',
                supplierType: ''
            },

        }
    },
    mounted() {
        this.title = sessionStorage.getItem('title')
        this.addAndEdit = sessionStorage.getItem('upAddandEdit')
        let params = JSON.parse(sessionStorage.getItem('upObj'))
        if (this.title == '上游情况分析') {
            if (this.addAndEdit == 'add') {
                this.accountForm.companyId = sessionStorage.getItem('companyId')
            } else {
                this.accountForm = params
            }
        } else {
            if (this.addAndEdit == 'add') {
                this.accountForm.companyId = sessionStorage.getItem('companyId')
            } else {
                this.accountForm = params
            }
        }
    },
    methods: {
        async handleCommit() {
            if(this.accountForm.supplierName == ''){
                this.isShow = true
            }else{
                if (this.title == '上游情况分析') {
                if (this.addAndEdit == 'add') {
                    this.accountForm.supplierType = '上游'
                    let result = await addSupplierInfo([this.accountForm]);
                    if (result) {
                        Toast.success('新增成功');
                        this.$router.go(-1)
                    }
                } else {
                    let result = await updateSupplierInfo(this.accountForm);
                    if (result) {
                        Toast.success('修改成功');
                        this.$router.go(-1)
                    }
                }
            } else {
                if (this.addAndEdit == 'add') {
                    this.accountForm.supplierType = '下游'
                    let result = await addSupplierInfo([this.accountForm]);
                    if (result) {
                        Toast.success('新增成功');
                        this.$router.go(-1)
                    }
                } else {
                    let result = await updateSupplierInfo(this.accountForm);
                    if (result) {
                        Toast.success('修改成功');
                        this.$router.go(-1)
                    }
                }
            }
            }
          


        },
        handleDelete() {
            this.isDialogShow = true
           
        },
        async handleDeCommit(){
            const params = {
                ids: [this.accountForm.id]
            }
            let result = await deleteSupplierInfo(params);
            if (result) {
                Toast.success('删除成功');
                this.$router.go(-1)
            }
        }
    }
}
</script>
<style lang="less" scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
    font-size: 16px;
    padding-bottom: 60px;
}

.title {
    line-height: 45px;
    padding: 5px 15px;
    color: rgb(89, 89, 89);
}

.header {
    display: flex;
    justify-content: space-between;
    padding-right: 15px;
    align-items: center;
}

.header_btn {
    text-align: center;
}

.main_item {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    color: rgb(89, 89, 89);
    line-height: 45px;
    margin-top: 1px;

}

.main_item_left {
    font-size: 14px;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
}

.btn_box {
    width: 30%;
}

.btn {
    width: 100%;
}
.night_box {
  padding: 5px 20px 5px;
  font-size: 14px;
  color: #666666;
}
.de_btn{
    margin:20px;
    justify-content: space-around;
    display: flex;
 
}
.jine{
    display: flex;
    align-items: center;
    background-color: #fff;
    /deep/ .van-cell{
        width: 50%;
    }
}
.danwei{
    font-size: 14px;
}
</style>