<template>
    <view class="mx3" style="padding-bottom: 100rpx">
        <view class="main-color-bg" style="height: 100rpx; margin: 0 -30rpx"></view>
        <view
            class="p3 bg-color-white"
            style="margin-top: -50rpx; border-radius: 20rpx"
        >
            <u-form :model="form" ref="uForm" >
<!--                <u-form-item label="选择备件" required prop="running" :label-width="150">
                    <u-input
                        v-model="form.running"
                        disabled
                        @click="handleSelect"
                        placeholder="请选择设备"
                        type="select"
                    />-->

                    <!--   <u-select
            v-model="haltState"
            :list="runningList"
            @confirm="runningSubmit"
          ></u-select>
                </u-form-item>-->
                <common-popup :list="runningList" @select="runningSubmit" ref="popup" />
                <view class="main-color-text f-size-32 f-weight-6 mt-2">基本信息</view>
                <u-form-item label="名称" :label-width="150">
                    <u-input v-model="form.spareName" disabled />
                </u-form-item>
                <u-form-item label="编号" :label-width="150">
                    <u-input v-model="form.no" disabled />
                </u-form-item>
                <u-form-item label="规格" :label-width="150">
                    <u-input v-model="form.ggxh" disabled />
                </u-form-item>
                <u-form-item label="单位" :label-width="150">
                    <u-input v-model="form.unit" disabled />
                </u-form-item>
                <u-form-item label="价格" :label-width="150">
                    <u-input v-model="form.price" disabled />
                </u-form-item>
                <u-form-item label="库存数量" :label-width="150">
                    <u-input v-model="form.num" disabled />
                </u-form-item>
                <view class="main-color-text f-size-32 f-weight-6 mt-2">出库数量</view>
                <u-form-item label="数量" :label-width="150">
                    <u-input v-model="form.outNum" />
                </u-form-item>
<!--                <u-form-item label="总价" :label-width="150">
                    <u-input v-model="form.totalPrice" disabled />
                </u-form-item>-->
            </u-form>

            <!-- <button class="main-color-bg text-color-white" @tap='handleSubmit'>提交</button> -->
            <view class="p-fixed d-flex j-around a-center footer">
                <view
                    class="main-color-bg text-color-white common"
                    @tap="handleSubmit"
                >提交</view
                >
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                id: '',
                running: '',
                spareName: '',
                ggxh: '',
                unit: '',
                no: '',
                price: '',
                // 传入的
                spareId: '',
                outNum: '',
                storeId: ''
            },
            header: {
                Authorization: 'Bearer ' + uni.getStorageSync('accessToken')
            },
            rules: {
                outNum: [
                    {
                        required: true,
                        message: '请填写出库数量',
                        trigger: ['blur', 'change']
                    }
                ]
            },
            // #ifdef MP-WEIXIN
            cursorSpacing: 50,
            // #endif
            // #ifndef MP-WEIXIN
            cursorSpacing: 0,
            // #endif
            sbBackId: '',
            aShow: false,
            address: ''
        };
    },
    onShow() {

    },
    onLoad(options) {
        if (options && options.detailId) {
            this.$Http
                .fetchSpareStore({
                    id: options.detailId
                })
                .then((res) => {
                    this.form.spareName = res.data.spareName;
                    this.form.ggxh = res.data.ggxh;
                    this.form.unit = res.data.unit;
                    this.form.no = res.data.no;
                    this.form.spareId = res.data.spareId;
                    this.form.num = res.data.num;
                    this.form.id = options.detailId;
                    this.form.outNum = 1;
                });
        }

    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    methods: {
        //
        confirm(e) {
            this.address = ''
            for (let i = 0; i < e.length; i++) {
                this.address += e[i].label
            }
        },
        handleSubmit() {
            const params = {
                type: 4,
                remark: '出库',
                storeId: this.form.storeId,
                detailList:[{
                    spareId: this.form.spareId,
                    num: this.form.outNum,
                    price: this.form.price,
                    //totalPrice: this.form.totalPrice
                }]
            };
            console.log(params);
            const a = this.imagesList.map(item => {
                return item.url;
            });
            console.log(a);
            // this.form.photo = a.join(',');
            this.$refs.uForm.validate((valid) => {
                if (valid) {
                    this.$Http.addOutStoreForm(params).then((res) => {
                        /*uni.navigateBack({
                            delta: 1
                        });*/
                        uni.showToast({
                            title:'出库成功',
                            icon:'none'
                        })
                    });
                }
            });
        },
        // 紧急等级
        levelSubmit(data) {
            this.form.level = data[0].label;
            this.form.levelValue = data[0].value;
        },
        // 选择设备
        runningSubmit(data) {
            console.log(data);
            this.form.sbId = data.value;
            this.$Http
                .fetchSbInfo({
                    id: data.value
                })
                .then((res) => {
                    this.form.bianhao = res.data.no;
                    this.form.sbName = res.data.name;
                });

            this.form.running = data.label;
        },
        // 是否
        haltSubmit(data) {
            this.form.halt = data[0].label;
            this.form.needStop = data[0].value;
        },
        repairSubmit(data) {
            this.form.repair = data[0].label;
            this.form.source = data[0].value;
        },
        // 删除成功
        uploadRemove(index, lists, name) {
            this.fileList = lists;

            this.imagesList.splice(index, 1)
            console.log(this.imagesList);
        },
        // 上传成功
        uploadSuccess(data, index, lists, name) {
            this.fileList = lists;
            this.imagesList.push(data.data)
            console.log(this.imagesList);
        }

    // initSb() {
    //   this.$Http
    //     .getSbInfoPage({
    //       pageNum: 1,
    //       pageSize: 1000,
    //       filter: 0,
    //     })
    //     .then((res) => {
    //       let data = res.data.rows;
    //       console.log(data);
    //       data.forEach((item) => {
    //         this.runningList.push({
    //           label: item.nameModel,
    //           value: item.id,
    //         });
    //       });
    //     });
    // },
    }
};
</script>

<style lang="less">
.footer {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10000;
  border-top: 1rpx solid #f4f4f4;
  height: 100rpx;

  .common {
    padding: 15rpx 200rpx;
    border-radius: 30rpx;
    background-color: #0082ff;
    color: #fff;
  }
}
</style>
