<template>
    <view class="whole">
        <u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="编辑面料信息"></u-navbar>
        <view class="body">
            <!-- <view class="title">面料基本信息</view>
            <view></view>
            <view>
                <u-input v-model="detail.referToBrand"></u-input>
            </view> -->
            <u-form :model="detailInfo" label-position="top" ref="ruForm">
                <hs-tip-title title="面料基本信息"></hs-tip-title>
                <u-form-item label="面料名称" prop="materialName" required>
                    <u-input v-model="detailInfo.materialName" placeholder="请输入面料名称" />
                </u-form-item>
                <view class="title">面料门幅</view>
                <u-number-box v-model="detailInfo.clothWidth" :step="0.1" :positive-integer="false" :input-width="160"
                    :input-height="60" @change="valChange" style="margin-right:30rpx">
                </u-number-box>cm
                <u-form-item label="面料成分" prop="component" required>
                    <u-input v-model="detailInfo.component" placeholder="请输入面料成分" />
                </u-form-item>
            </u-form>
        </view>
        <view class="footer">
            <view class="footer-btn">
                <u-button @click="submitBtn" class="custom-style" shape="circle">提交</u-button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                id: "",
                step: 0.1,
                detailInfo: {},
                value: 2.2,
                tableList: []
            }
        },
        onLoad(option) {
            this.id = option.id
            this.detail()
        },
        methods: {
            valChange() {},
            // 详情
            detail() {
                this.$http('modelingtask.materialDetail', this.id).then(res => {
                    let {
                        code,
                        data
                    } = res;
                    if (code === 200) {
                        this.detailInfo = data;
                        this.detailInfo.clothWidth = parseFloat(data.clothWidth)
                    }
                });
            },
            // 提交
            submitBtn() {
                console.log("submit")
                let param = {

                    id: this.id,
                    materialType: "面料",
                    materialName: this.detailInfo.materialName,
                    clothWidth: this.detailInfo.clothWidth,
                    component: this.detailInfo.component,
                }
                this.$http('info.updateMaterial', param).then(res => {
                    let {
                        code,
                        data
                    } = res;
                    if (code === 200) {
                        this.$router.push({
                            path: "/pages/home/detail",
                            query: {
                                id: this.id
                            }
                        })
                    } else {

                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .whole {
        background: #F5F5F5;

        .body {
            background: #fff;
            padding: 30rpx 30rpx;

            .title {
                margin: 30rpx 0;
            }

        }

        .footer {
            position: fixed;
            width: 100%;
            bottom: 0;
            z-index: 998;
            background: #fff;
            box-shadow: 0px -4rpx 6rpx 0px rgba(178, 182, 214, 0.1);
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);

            .footer-btn {
                padding: 20rpx 60rpx;
            }

            .custom-style {
                color: #fff;
                background: #000;
            }
        }
    }
</style>