<template>
    <view>
        <view class="_l">
            <view class="title">抬头类型</view>
            <view class="content">
                <view @tap="_A">
                    <icon size="16" :color="is_company ? '#FF1D42' : '#DFDFDF'" type="success" />
                    企业单位
                </view>
                <view @tap="_B">
                    <icon size="16" type="success" :color="is_company ? '#DFDFDF' : '#FF1D42'" />
                    个人/非企业单位
                </view>
            </view>
        </view>
        <view class="line">
            <view class="inputField">
                <view class="title">抬头名称</view>
                <input type="text" placeholder="请输入公司名称" :value="title" @input="titleInput" />
            </view>
            <view class="inputField" v-if="is_company">
                <view class="title">纳税人识别号</view>
                <input type="text" placeholder="请填写纳税人识别号" :value="nsrsbh" @input="nsrsbhInput" />
            </view>
            <view class="inputField" style="border: none">
                <view class="title">发票接收邮箱</view>
                <input type="text" placeholder="请填写电子发票接收邮箱" :value="email" @input="emailInput" />
            </view>
        </view>

        <button class="_button" @tap="save">保存信息</button>
    </view>
</template>

<script>
// pages/user/invoice/invoice_edit/invoice_edit_newMake.js
import { http } from '../../../../utils/util';
export default {
    data() {
        return {
            is_company: true,
            invoice_title: '',
            nsrsbh: '',
            email: '',
            title: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {

        _A: function () {
            this.setData({
                is_company: true
            });
        },

        _B: function () {
            this.setData({
                is_company: false
            });
        },

        titleInput(event) {
            const value = event.detail.value;
            this.setData({
                invoice_title: value
            });
        },

        nsrsbhInput(event) {
            const value = event.detail.value;
            this.setData({
                nsrsbh: value
            });
        },

        emailInput(event) {
            const value = event.detail.value;
            this.setData({
                email: value
            });
        },

        save() {
            let data = {};
            console.log(this);

            if (1 == this.is_company) {
                data = {
                    is_company: 1,
                    invoice_title: this.invoice_title,
                    nsrsbh: this.nsrsbh,
                    email: this.email
                };
            } else {
                if (0 == this.is_company) {
                    data = {
                        is_company: 0,
                        invoice_title: this.invoice_title,
                        email: this.email
                    };
                }
            }

            http('/api/v1/invoice-save-title', 'post', data).then((res) => {
                uni.navigateBack();
                var pages = getCurrentPages(); //获取页面栈

                if (pages.length > 1) {
                    //上一个页面实例对象
                    var prePage = pages[pages.length - 2]; //调用上一个页面的onShow方法

                    prePage.onLoad(prePage.options)
                }
            });
        }
    }
};
</script>
<style>
._l {
    margin: 20rpx 0;
    padding: 30rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    background: #fff;
}
._l .title {
    width: 200rpx;
}
._l .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex: 1;
}
.line {
    background: #fff;
}
.inputField {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 28rpx;
    color: #333333;
    border-bottom: 1rpx solid #eeeeee;
    padding: 30rpx;
}
.line .inputField .title {
    width: 200rpx;
}
.line .inputField input {
    width: 100%;
    flex: 1;
}
._button {
    position: fixed;
    bottom: 100rpx;
    width: 312rpx;
    background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
    border-radius: 44rpx;
    color: #fff;
    font-size: 28rpx;
    left: 50%;
    transform: translate(-50%, 0);
}
</style>
