<template>
    <view class="tallyDetail">
        <view class="base-information">
            <view class="top row bothSide verCenter">
                <view class="title row verCenter">
                    <text class="arrow row rowCenter verCenter"></text>
                    <text class="tt">基础信息</text>
                </view>
                <view class="toggle row verCenter" @click="toggle()">
                    <text class="iconfont icon-sanjiaoxing" :class="{ rotate: flag }"></text>
                    <text class="tt">{{ flag ? '隐藏' : '展开' }}</text>
                </view>
            </view>
            <view class="pp row verCenter">
                <text class="t1">入仓号：</text>
                <text class="t2" style="width: auto;">{{ goodsArrangeData.number }}</text>
                <text class="type row rowCenter verCenter" v-if="goodsArrangeData.isInspOrg">商检</text>
            </view>
            <view class="pp row verCenter" v-if="flag">
                <text class="t1">订单时间：</text>
                <text class="t2">{{goodsArrangeData.orderDate}}</text>
            </view>
            <view class="pp row verCenter" v-if="flag">
                <text class="t1">订单客户：</text>
                <text class="t2">{{ goodsArrangeData.customer }}</text>
            </view>
            <view class="pp row verCenter" v-if="flag">
                <text class="t1">供应商：</text>
                <text class="t2">{{ goodsArrangeData.supplier }}</text>
            </view>
            <view class="pp row verCenter">
                <text class="t1">登记数量：</text>
                <text class="t2">{{ goodsArrangeData.num }}</text>
            </view>
            <view class="pp row">
                <text class="t1">采购备注：</text>
                <text class="t2">{{ goodsArrangeData.remark }}</text>
            </view>
        </view>
        <view class="question-box">
            <block v-for="(v, d) in form" :key="d">
                <view class="top row verCenter">
                    <text class="t1">问题类型</text>
                    <text class="iconfont icon-sanjiaoxing1"></text>
                    <view class="el-select-box">
                        <picker @change="bindPickerChange($event, d)" :value="questionTypeIndex[d]" :range="typeList" range-key="content">
                            <view class="uni-input">{{ typeList[questionTypeIndex[d]].content || '请选择' }}</view>
                        </picker>
                    </view>
                </view>
                <!-- 问题列表 -->
                <view class="uni-table">
                    <view class="uni-th row">
                        <text class="row verCenter">规格型号</text>
                        <text class="row verCenter">订单{{ text[d] }}</text>
                        <text class="row verCenter">实到{{ text[d] }}</text>
                        <text class="row verCenter rowCenter" style="padding-left: 0;flex: 0 0 20%;">是否异常</text>
                    </view>
                    <view class="uni-tr row verCenter" v-for="(item, index) in form[d].exceptionlist" :key="index">
                        <text class="txt w row verCenter">{{ item.model }}</text>
                        <text class="txt w row verCenter">{{ item.order_data }}</text>
                        <input class="w uni-input" type="text" @input="onInput($event, d, index)" :value="form[d].exception[index].val" :disabled="!form[d].exception[index].is" :class="{ bg: !form[d].exception[index].is }" />
                        <view class="w" style="padding-left: 0;text-align: center;flex: 0 0 20%;"><switch :checked="form.exception[index].is" @change="switchChange($event, d, index)" style="transform: scale(0.5);" color="#197ADB" /></view>
                    </view>
                </view>
                <!-- 图片上传 -->
                <view class="upload-box">
                    <view class="title row bothSide verCenter">
                        <text class="tt-l">来货图片上传(必填)</text>
                        <text class="tt-r">{{ form[d].sort_goods_img.length }}/4</text>
                    </view>
                    <view class="upload-list row verCenter">
                        <template v-if="form[d].sort_goods_img.length > 0">
                            <view class="pic-box" v-for="(v, index) in form[d].sort_goods_img" :key="index">
                                <image :src="v" mode="aspectFill" lazy-load="true" @click="previewChange(form[d].sort_goods_img, index)"></image>
                                <view class="delete row rowCenter verCenter" @click="deletePic(d, index)"><text class="iconfont icon-shanchu"></text></view>
                            </view>
                        </template>
                        <view class="default row rowCenter verCenter" @click="chooseImageChange(d)" v-if="form[d].sort_goods_img.length < 4"><text class="iconfont icon-xingzhuangjiehe"></text></view>
                    </view>
                </view>
            </block>
            <view class="textarea-box">
                <textarea @input="inputChange()" maxlength="200" placeholder="请输入异常备注" placeholder-style="color:#6E767A;" v-model="ask_customer_remark"></textarea>
                <text class="text">{{ limitword }}/200</text>
            </view>
        </view>
        <view class="btn row rowCenter verCenter" @click="submit()">提交委托单问客</view>
        <view class="rebtn row rowCenter verCenter" @click="add()">保存并继续添加问题</view>
    </view>
</template>

<script>
import { API } from '@/util/api.js';
import w_md5 from '../../js_sdk/zww-md5/w_md5.js';

export default {
    data() {
        return {
            flag: false, //toggle
            limitword: 0, //备注文字限制
            goodsArrangeData: {}, //理货列表数据
            noexebshowFalg: true, //控制是否会触发生命周期
            limitword: 0, //备注文字限制,
            text: [''], //记录数组文字
            typeList: [], //问题类型列表
            questionTypeIndex: [0], //问题类型索引
            erp_order_sn: '', //form入仓号
            ask_customer_remark: '', //form仓库问客备注
            entrys: {}, //form 金蝶数据,
            index: 0, //记录form当前操作索引
            form: [
                {
                    ask_customer_exception_id: '', //异常id
                    sort_goods_img: [], //问题图片
                    exception: [], //异常开关监听列表
                    exceptionlist: [] //原始订单列表数据
                }
            ]
        };
    },
    onLoad(options) {
        this.erp_order_sn = options.number || ''; //获取参数入仓号
    },
    onShow() {
        if (this.noexebshowFalg) {
            this.getData();
        }
    },
    methods: {
        /**
         * 获取基础数据
         */
        getData() {
            this.request(API.getGoodsArrangeData, 'POST', { page: this.page, number: this.erp_order_sn }, true).then(res => {
                if (res.err_code === 0) {
                    this.goodsArrangeData = res.data[0]; //理货列表数据
                    this.entrys = res.data[0]; //form 金蝶数据,
                    this.getAllException(0);
                } else {
                    uni.showToast({
                        title: res.err_msg,
                        icon: 'error'
                    });
                }
            });
        },
        /**
         * 获取问题类型
         */
        getAllException(index) {
            this.request(API.getAllException, 'POST', {}, true).then(res => {
                if (res.err_code === 0) {
                    this.typeList = res.data;
                    this.form[index].ask_customer_exception_id = res.data[0].ask_customer_exception_id; //默认
                    this.text[index] = res.data[0].content.substr(0, 2); //默认
                    this.getExceptionData(index);
                } else {
                    uni.showToast({
                        title: res.err_msg,
                        icon: 'error'
                    });
                }
            });
        },
        /**
         * 获取异常订单数据
         */
        getExceptionData(index) {
            this.request(API.getExceptionData, 'POST', { ask_customer_exception_id: this.form[index].ask_customer_exception_id, entrys: this.entrys }, true).then(res => {
                if (res.err_code === 0) {
                    this.form[index].exception = []; //清空异常开关监听列表
                    this.form[index].exceptionlist = res.data; //原始订单列表数据

                    //创建异常开关监听列表
                    if (res.data.length > 0) {
                        for (let i = 0; i < res.data.length; i++) {
                            this.form[index].exception.push({
                                val: '',
                                is: false
                            });
                        }
                    }
                } else {
                    uni.showToast({
                        title: res.err_msg,
                        icon: 'error'
                    });
                }
            });
        },
        onInput(e, d, index) {
            this.form[d].exception[index].val = e.detail.value;
        },
        switchChange(e, d, index) {
            this.$set(this.form[d].exception[index], 'is', e.target.value);
            if (!e.target.value) {
                this.$set(this.form[d].exception[index], 'val', '');
            }
        },
        toggle() {
            this.flag = !this.flag;
        },
        previewChange(img, index) {
            this.noexebshowFalg = false; //不允许再次触发onshow这个生命周期
            uni.previewImage({
                current: index,
                urls: img
            });
        },
        inputChange() {
            if (this.ask_customer_remark.length <= 200) {
                this.limitword = this.ask_customer_remark.length;
            }
        },
        deletePic(d, index) {
            this.form[d].sort_goods_img.splice(index, 1);
        },
        bindPickerChange(e, d) {
            console.log('picker发送选择改变，携带值为', e.target.value);
            this.questionTypeIndex[d] = e.target.value; //问题索引
            this.form[d].ask_customer_exception_id = this.typeList[e.target.value].ask_customer_exception_id; //异常id
            this.text[d] = this.typeList[e.target.value].content.substr(0, 2); //文字
            this.getExceptionData(d);
        },
        chooseImageChange(index) {
            this.noexebshowFalg = false; //不允许再次触发onshow这个生命周期
            var self = this;
            var time = parseInt(new Date().getTime() / 1000);
            uni.chooseImage({
                count: 4,
                sourceType: ['album', 'camera'],
                success: chooseImageRes => {
                    uni.showLoading({
                        title: '上传中...'
                    });
                    const tempFilePaths = chooseImageRes.tempFilePaths;
                    let maxNum = tempFilePaths.length * 1 + self.form[index].sort_goods_img.length * 1;
                    if (maxNum > 4) {
                        uni.hideLoading();
                        uni.showToast({
                            title: '图片不超过4张'
                        });
                        return false;
                    }
                    for (let i = 0; i < tempFilePaths.length; i++) {
                        console.log(tempFilePaths[i]);
                        uni.uploadFile({
                            url: API.upload,
                            filePath: tempFilePaths[i],
                            name: 'upload',
                            formData: {
                                source: '1',
                                k1: time,
                                k2: w_md5.hex_md5_32(w_md5.hex_md5_32(String(time)) + 'fh6y5t4rr351d2c3bryi')
                            },
                            success: uploadFileRes => {
                                uni.hideLoading();
                                var data = JSON.parse(uploadFileRes.data);
                                console.log(data);
                                if (data.code === 200) {
                                    self.form[index].sort_goods_img.push(data.data[0]);
                                } else {
                                    uni.showToast({
                                        title: data.message,
                                        icon: 'error'
                                    });
                                }
                            },
                            fail: error => {
                                uni.hideLoading();
                                console.log(error);
                            }
                        });
                    }
                }
            });
        },
        add() {
            this.form.push({
                ask_customer_exception_id: '',
                sort_goods_img: [],
                exception: [],
                exceptionlist: []
            });
            this.index++;
            this.questionTypeIndex.push(0);
            uni.showLoading({
                title: '添加问题中'
            });
            setTimeout(() => {
                uni.hideLoading();
                this.getAllException(this.index);
            }, 500);
        },
        submit() {
            this.noexebshowFalg = false; //不允许再次触发onshow这个生命周期
           
            //判断如有异常，是否填写实际
            var tempArr = [];
            for (let i = 0; i < this.form.length; i++) {
                if (this.form[i].exception.findIndex(target => target.is === true) == -1) {
                    uni.showModal({
                        title: '提示',
                        content: '异常的产品请至少填写一个',
                        showCancel: false,
                        success: res => {
                            if (res.confirm) {
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                    return false;
                } else {
                    console.log('验证不通过');
                }
            }

            //判断来货图片
            if (this.form.length > 0) {
                for (let i = 0; i < this.form.length; i++) {
                    if (this.form[i].sort_goods_img.length <= 0) {
                        uni.showModal({
                            title: '提示',
                            content: '请上传所有问题类型的来货图片',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                } else if (res.cancel) {
                                    console.log('用户点击取消');
                                }
                            }
                        });
                        return false;
                    }
                }
            }

            var params = { form: this.form, erp_order_sn: this.erp_order_sn, ask_customer_remark: this.ask_customer_remark, entrys: this.entrys };

            this.request(API.addAskCustomer, 'POST', params, true).then(res => {
                if (res.err_code === 0) {
                    uni.showToast({
                        title: '提交成功',
                        icon: 'success'
                    });
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/goods/tally?currentIndex=1'
                        });
                    }, 2000);
                } else {
                    uni.showToast({
                        title: res.err_msg,
                        icon: 'error'
                    });
                }
            });
        }
    }
};
</script>

<style scoped lang="scss">
@import '../../assets/css/goods/tallyQuestion.scss';
</style>