<template>
    <!-- subpages/carManagement/pages/add/add.wxml -->
    <view class="personal-info">
        <view class="basic-info">
            <view class="item">
                <view class="field">
                    <text class="must">*</text>
                    <view class="field-text">所属组织</view>
                </view>
                <view style="overflow-x: hidden;">
                    <jia-cascader :itemList="angencyList" :defaultItemList="defaultItemList"
                        @completeChange="completeGrid" @inputChange="change" :border="false"
                        :clearIcon="false"></jia-cascader>
                </view>
            </view>
            <view :class="'item  '">
                <view class="field">
                    <text class="must">*</text>
                    <view class="field-text">车牌号码</view>
                </view>
                <view hover-class="backC" class="value-dl">
                    <input class="telInput" type="text" placeholder="请输入" v-model="formData.carNumber" />
                </view>
            </view>
            <view :class="'item  '">
                <view class="field">
                    <text class="must">*</text>
                    <view class="field-text">车主姓名</view>
                </view>
                <view hover-class="backC" class="value-dl">
                    <input class="telInput" type="text" placeholder="请输入" v-model="formData.carOwnerName" />
                </view>
            </view>
            <view :class="'item  '">
                <view class="field">
                    <text class="must">*</text>
                    <view class="field-text">车主电话</view>
                </view>
                <view hover-class="backC" class="value-dl">
                    <input class="telInput" type="text" placeholder="请输入" v-model="formData.carOwnerMobile" />
                </view>
            </view>
            <view :class="'item  '">
                <view class="field">
                    <view class="field-text">车主身份证</view>
                </view>
                <view hover-class="backC" class="value-dl">
                    <input class="telInput" type="text" placeholder="请输入" v-model="formData.carOwnerNum" />
                </view>
            </view>

        </view>

        <view class="basic-info" style="padding-bottom:10px ;">
            <view :class="'item  '">
                <view class="field">
                    <view class="field-text">车辆品牌</view>
                </view>
                <view hover-class="backC" class="value-dl">
                    <input class="telInput" type="text" placeholder="请输入" v-model="formData.carBrand" />
                </view>
            </view>
            <view :class="'item  '">
                <view class="field">
                    <view class="field-text">车辆颜色</view>
                </view>
                <view class="value-dl">
                    <input class="telInput" type="text" placeholder="请输入" v-model="formData.carColor" />
                </view>
            </view>

            <view :class="'item  '">
                <view class="field">
                    <view class="field-text">核载人数</view>
                </view>
                <view hover-class="backC" class="value-dl">
                    <u-number-box v-model="formData.carriersNum">
                        <view slot="minus" class="minus">
                            <u-icon name="minus" size="12" color=" #d0d0d0"></u-icon>
                        </view>
                        <text slot="input" style="width: 50px;text-align: center;" class="input">{{ formData.carriersNum
                            }}</text>
                        <view slot="plus" class="plus">
                            <u-icon name="plus" size="12" color=" #d0d0d0"></u-icon>
                        </view>
                    </u-number-box>
                </view>
            </view>
            <view :class="'item  '">
                <view class="field">
                    <view class="field-text">购置日期</view>
                </view>
                <view hover-class="backC" class="value-dl" @tap="showTimePicker">
                    <view :class="formData.acquistionDate ? 'di-name' : 'di-name1'">{{ formData.acquistionDate ?
                        formData.acquistionDate : '请选择' }}
                    </view>
                    <image class="di-but" src="/static/images/right.png" mode="aspectFit" />
                </view>
            </view>
            <u-datetime-picker :show="visibleTime" v-model="formData.acquistionDate" :maxDate="maxDate" mode="datetime"
                @cancel="visibleTime = false" @confirm="onConfirmDate"></u-datetime-picker>
            <view class="issue-content">
                <view class="item1">
                    <view class="field">
                        <view class="field-text">备注说明</view>
                    </view>
                </view>
                <textarea maxlength="500" v-model="formData.remark" placeholder="请输入备注说明(不超过500字)"></textarea>
            </view>
        </view>
        <view class="bot_btn">
            <button type="default" :plain="true" class="bottom_btn bottom_btn_close" @tap="close">取消</button>
            <button type="primary" class="btn_bule bottom_btn" @tap="saveForm">提交</button>
        </view>
    </view>
</template>

<script>
import {
    formatTime
} from '../../../../utils/util';
const app = getApp();
import api from '../../../../utils/api';
// subpages/carManagement/pages/add/add.js
export default {
    components: {
    },
    data() {
        return {
            visibleTime: false,
            maxDate: null,
            angencyList: [],
            defaultItemList: [],
            formData: {
                agencyId: '',//所属组织
                orgNamePath: '',//所属组织名称路径
                carBrand: '',//车辆品牌
                carOwnerMobile: '',//车主电话
                carOwnerName: '',//车主姓名
                orgIdPath: '',//所属组织路径
                carNumber: '',//车牌号码
                customerId: '',//客户Id
                carColor: '',//车辆颜色
                carriersNum: 1,//核载人数
                acquistionDate: '',//购置日期
                carOwnerNum: '',//车主证件号
                remark: ''//备注
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            angencyId: app.globalData.user.agencyId,
        });
        this.getAgencygridtree()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() { },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() { },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() { },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() { },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() { },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() { },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() { },
    methods: {
        getAgencygridtree() {
            api.getAgencygridtree()
                .then((res) => {
                    this.setData({
                        angencyList: this.convertLabelToText([res.data])
                    });
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        change(e) {
            console.log(e, '选中的');
        },
        completeGrid(e) {
            if(e.result){
                this.setData({
                'formData.orgNamePath':e.result.map(item=>item.text).join(','),
                'formData.orgIdPath':e.result.map(item=>item.value).join(','),
                agencyId:e.result[e.result.length - 1].value
                })
            }
        },
        convertLabelToText(tree) {
            return tree.map(node => {
                const newNode = {
                    ...node
                };
                // 将 label 替换为 text
                if (newNode.agencyName !== undefined) {
                    newNode.text = newNode.agencyName;
                    delete newNode.agencyName;
                }
                if (newNode.subAgencyList && newNode.subAgencyList.length > 0) {
                    newNode.children = newNode.subAgencyList
                    delete newNode.subAgencyList;
                }
                if (newNode.agencyId) {
                    newNode.value = newNode.agencyId
                    delete newNode.agencyId;
                }
                if (newNode.children && newNode.children.length > 0) {
                    newNode.children = this.convertLabelToText(newNode.children);
                }

                return newNode;
            });
        },
        showTimePicker(e) {
            this.setData({
                visibleTime: true,
                maxDate: new Date().getTime(),
                acquistionDate: new Date().getTime()
            });
        },
        onConfirmDate(e) {
            this.setData({
                visibleTime: false,
                'formData.acquistionDate': formatTime(e.value)
            });

        },
        saveForm() {
            console.log(this.formData);
        },
    }
};
</script>
<style>
/* subpages/carManagement/pages/add/add.wxss */
page {
    width: 100%;
    height: auto;
    overflow-y: auto;
    background: #f7f7f7;
    padding-bottom: 20rpx;
    box-sizing: border-box;
}

.personal-info {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20rpx;
    overflow: hidden;
}

.basic-info {
    width: 100%;
    background: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    margin-top: 20rpx;
}

.item {
    border-bottom: 1rpx solid #e7eeee;
    padding: 25rpx 0;
    line-height: 60rpx;
    display: flex;
}

.field {
    position: relative;
    box-sizing: border-box;
    width: 190rpx;
    padding-left: 25rpx;
}

.field-d {
    width: 220rpx !important;
}

.value-d {
    width: 450rpx !important;
}

.field.mobile-field {
    width: 250rpx !important;
}

.field .must {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    color: #f61616;
    font-size: 30rpx;
}

.field .field-text {
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
}

.field .field-text-small {
    font-size: 28rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
}

.value {
    position: relative;
    width: 410rpx;
    display: flex;
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
    line-height: 60rpx;
}

.value-dl {
    position: relative;
    display: flex;
    font-size: 32rpx;
    color: #333;
    line-height: 60rpx;
    align-items: center;
    display: flex;
    justify-content: space-between;

    flex: 1;
}

.telInput {
    margin-left: 40rpx;
}

.di-name {
    margin-right: 14rpx;
    text-align: left;
    width: calc(100% - 30rpx);
    margin-left: 40rpx;
    font-family: 'PingFangSC-Regular', sans-serif;
}

.di-name1 {
    margin-right: 14rpx;
    text-align: left;
    width: calc(100% - 30rpx);
    margin-left: 40rpx;
    font-family: 'PingFangSC-Regular', sans-serif;
    color: #999;
}

.di-but {
    width: 30rpx;
    height: 34rpx;
}

.value input {
    text-align: right;
    font-size: 34rpx;
    color: #333;
    height: 100%;
    width: 100%;
}

.value .picker {
    position: relative;
    width: 100%;
    padding-right: 40rpx;
    text-align: right;
}

.value .picker .z-weak {
    color: #999;
}

.value .picker .menu-arrow {
    position: absolute;
    top: 20rpx;
    right: 0;
    width: 16rpx;
    height: 23rpx;
}

.value-mobile {
    position: relative;
    width: 410rpx;
    display: flex;
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
    line-height: 60rpx;
    display: flex;
    margin-left: 30rpx;
}

.value-mobile .get-code {
    padding: 0 15rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: linear-gradient(to right, #f40c0c, #ff4e4e);
    color: #fff;
    font-size: 24rpx;
    border-radius: 6rpx;
    margin: 0;
    margin-left: 25rpx;
}

.value-mobile .button-hover {
    background: rgb(175, 1, 1);
}

.value-mobile input {
    text-align: right;
    font-size: 34rpx;
    color: #333;
    height: 100%;
    width: 55%;
}

.placeholder-style {
    font-size: 28rpx;
    color: #999;
}

.is-open {
    margin-top: 20rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 30rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
    line-height: 30rpx;
}

.submit-button {
    width: 100%;
    height: 84rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80rpx 0 65rpx;
}

.submit-button button {
    height: 84rpx;
    line-height: 84rpx;
    width: 560rpx;
    padding: 0;
    text-align: center;
    color: #fff;
    font-size: 33rpx;
    border-radius: 84rpx;
    background: linear-gradient(to right, #82b4fd, #3e93fe);
}

.disabled {
    pointer-events: none;
    /* 禁止点击 */
}

textarea {
    width: 100%;
    height: 298rpx;
    background-color: #f7f7f7;
    padding: 30rpx;
    font-size: 34rpx;
    color: #333;
    line-height: 50rpx;
    position: relative;
    box-sizing: border-box;
}

.textarea-placeholder {
    font-size: 32rpx;
    color: #999;
    line-height: 50rpx;
    position: absolute;
    left: 0;
    top: 0;
}

.u-icon {
    border-radius: 100%;
    border: solid #d0d0d0 1px;
    padding: 2px;
    box-sizing: border-box;
}

.bot_btn {
    display: flex;
    background-color: #fff;
    z-index: 10;
    width: 100%;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 50%;
    box-sizing: border-box;
    transform: translateX(-50%);
    padding: 12rpx 90rpx;
    box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.bot_btn .bottom_btn {
    width: 240rpx;
    height: 76rpx;
    border-radius: 43rpx;
    text-align: center;
    line-height: 76rpx;
    font-size: 32rpx;
}

.bot_btn .btn_bule {
    background: #3974f6;
    color: #fff;
}
</style>
