<template>
    <div>
        <add-table>
            <table-row>
                <table-col>
                    <van-field
                            label-class="cus-field-class"
                            label-width="50%"
                            label-align="center"
                            name="samplingNum"
                            v-model="formObj.samplingNum"
                            label="抽样单编号"
                            :rules="[{ required: true, message: '请填写抽样单编号' }]"
                    ></van-field>
                </table-col>
                <table-col>
                    <van-field
                            label-class="cus-field-class"
                            label-width="50%"
                            label-align="center"
                            v-model="formObj.taskNum"
                            label="No."
                    ></van-field>
                </table-col>
            </table-row>
            <table-row>
                <table-col>
                    <van-field
                            label-class="cus-field-class"
                            label-width="50%"
                            label-align="center"
                            v-model="formObj.source"
                            label="任务来源"
                    ></van-field>
                </table-col>
                <table-col>
                    <van-field
                            label-class="cus-field-class"
                            label-width="50%"
                            label-align="center"
                            label="任务类别">
                        <template #input>
                            <van-radio-group v-model="formObj.taskType" direction="horizontal">
                                <van-radio :name="item" :key="item" shape="square" v-for="item in taskTypeList">
                                    {{item}}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                </table-col>
            </table-row>
            <table-row flex-none>
                <table-col>
                    被抽样单位信息
                </table-col>
                <table-col flex-none>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="nonNetTested.name"
                                    label="单位名称"
                                    right-icon="add-o"
                                    @click-right-icon="_companySelect('nonNetTested.name')"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field readonly
                                       label-class="cus-field-class"
                                       label-width="25%"
                                       label-align="center"
                                       v-model="areaObj"
                                       label="省市区"
                                       @click="showCityPicker=true"
                                       :columns-placeholder="['请选择', '请选择', '请选择']"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="nonNetTested.address"
                                    label="单位地址"
                                    placeholder="如证照与许可证不一致，以许可证为准"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="nonNetTested.fax"
                                    label="传真"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="nonNetTested.postalCode"
                                    label="邮编"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="nonNetTested.testedMan"
                                    label="受检人"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="nonNetTested.testedManTel"
                                    label="受检人电话"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="nonNetTested.testedManFax"
                                    label="受检人传真"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    label="区域类型">
                                <template #input>
                                    <van-radio-group v-model="nonNetTested.areaType" direction="horizontal">
                                        <van-radio v-for="item in areaTypeList" :key="item" :name="item" shape="square">
                                            {{item}}
                                        </van-radio>
                                    </van-radio-group>
                                    <div style="border-bottom: 1px solid #000">
                                        <van-field :readonly="nonNetTested.areaType!=='其他'"
                                                   label-class="cus-field-class"
                                                   label-width="50%"
                                                   label-align="center"
                                                   v-model="nonNetTested.areaTypeRemark"
                                        ></van-field>
                                    </div>
                                </template>
                            </van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-radio-group v-model="nonNetTested.permitType" direction="horizontal">
                                <van-radio v-for="item in permitTypeList" :key="item" :name="item" shape="square">
                                    {{item}}
                                </van-radio>
                            </van-radio-group>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="nonNetTested.permitNum"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="nonNetTested.legalPerson"
                                    label="法人代表"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="nonNetTested.linkman"
                                    label="联系人"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="nonNetTested.license"
                                    label="营业执照号/社会信用代码"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="nonNetTested.tel"
                                    label="联系电话"
                            ></van-field>
                        </table-col>
                    </table-row>
                </table-col>
            </table-row>
            <table-row flex-none>
                <table-col>
                    抽样地点
                </table-col>
                <table-col>
                    <van-radio-group v-model="nonNetTested.place" direction="horizontal">
                        <div style="display: flex;padding: 5px 10px;flex-wrap: wrap">
                            <van-radio v-for="item in placeList" :key="item" :name="item" shape="square">
                                {{item}}
                            </van-radio>
                            <div style="border-bottom: 1px solid #000">
                                <van-field :readonly="nonNetTested.place!=='其他'"
                                           label-class="cus-field-class"
                                           label-width="50%"
                                           label-align="center"
                                           v-model="nonNetTested.placeRemark"
                                ></van-field>
                            </div>
                        </div>
                    </van-radio-group>
                </table-col>
            </table-row>
            <table-row>
                <table-col>
                    <van-field readonly
                               label-class="cus-field-class"
                               label-width="50%"
                               label-align="center"
                               v-model="formObj.samplingDate"
                               label="抽样日期"
                               @click="_selectDate('formObj.samplingDate')"
                    ></van-field>
                </table-col>
                <table-col>
                    <van-field
                            label-class="cus-field-class"
                            label-width="50%"
                            label-align="center"
                            v-model="formObj.testMembers"
                            label="抽样人员"
                    ></van-field>
                </table-col>
            </table-row>
            <table-row flex-none>
                <table-col>
                    样品信息
                </table-col>
                <table-col flex-none>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.name"
                                    label="样品名称"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="sample.trademark"
                                    label="商标"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="sample.qrcode"
                                    label="条形码"
                                    @blur="_getSample"
                            ></van-field>
                            <!--<van-field-->
                            <!--label-class="cus-field-class"-->
                            <!--label-width="25%"-->
                            <!--label-align="center"-->
                            <!--v-model="sample.qrcode"-->
                            <!--label="条形码"-->
                            <!--right-icon="scan"-->
                            <!--@click-right-icon="_scan"-->
                            <!--&gt;</van-field>-->
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="sample.firstClass"
                                    label="大类"
                                    right-icon="add-o"
                                    @click-right-icon="_classSelect('大类')"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="sample.secondClass"
                                    label="亚类"
                                    right-icon="add-o"
                                    @click-right-icon="_classSelect('亚类')"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="sample.thirdClass"
                                    label="次亚类"
                                    right-icon="add-o"
                                    @click-right-icon="_classSelect('次亚类')"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="sample.fourthClass"
                                    label="细类"
                                    right-icon="add-o"
                                    @click-right-icon="_classSelect('细类')"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <van-field
                                label-class="cus-field-class"
                                label-width="25%"
                                label-align="center"
                                label="产品认证情况">
                            <template #input>
                                <van-radio-group v-model="sample.type" direction="horizontal">
                                    <van-radio :name="item" :key="item" shape="square" v-for="item in sampleTypeList">
                                        {{item}}
                                    </van-radio>
                                    <div style="border-bottom: 1px solid #000">
                                        <van-field :readonly="sample.type!=='其他'"
                                                   label-class="cus-field-class"
                                                   label-width="50%"
                                                   label-align="center"
                                                   v-model="sample.typeRemark"
                                        ></van-field>
                                    </div>
                                </van-radio-group>
                            </template>
                        </van-field>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    label="样品来源">
                                <template #input>
                                    <van-radio-group v-model="sample.source" direction="horizontal">
                                        <van-radio :name="item" :key="item" shape="square" v-for="item in sourceList">
                                            {{item}}
                                        </van-radio>
                                    </van-radio-group>
                                    <div style="border-bottom: 1px solid #000">
                                        <van-field :readonly="sample.source!=='其他'"
                                                   label-class="cus-field-class"
                                                   label-width="50%"
                                                   label-align="center"
                                                   v-model="sample.sourceRemark"
                                        ></van-field>
                                    </div>
                                </template>
                            </van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    label="样品属性">
                                <template #input>
                                    <van-radio-group v-model="sample.properties" direction="horizontal">
                                        <van-radio :name="item" :key="item" shape="square"
                                                   v-for="item in propertiesList">{{item}}
                                        </van-radio>
                                    </van-radio-group>
                                    <div style="border-bottom: 1px solid #000">
                                        <van-field :readonly="sample.properties!=='其他'"
                                                   label-class="cus-field-class"
                                                   label-width="50%"
                                                   label-align="center"
                                                   v-model="sample.propertiesRemark"
                                        ></van-field>
                                    </div>
                                </template>
                            </van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-radio-group v-model="sample.dateType" direction="horizontal">
                                <van-radio v-for="item in dateTypeList" :key="item" :name="item" shape="square">
                                    {{item}}
                                </van-radio>
                            </van-radio-group>
                        </table-col>
                        <table-col>
                            <van-field
                                    readonly
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.sampleDate"
                                    label=""
                                    @click="_selectDate('sample.sampleDate')"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.standard"
                                    label="执行标准/技术文档"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.batchNo"
                                    label="样品批号"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.specification"
                                    label="规格型号"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.qualityGrade"
                                    label="质量等级"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.shelfLife"
                                    label="保质期"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.price"
                                    label="单价"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.samplingBase"
                                    label="抽样基数"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.quantity"
                                    label="抽样数量"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.unit"
                                    label="抽样数量单位"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.backupQuanity"
                                    label="备样数量"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    label="抽样方式">
                                <template #input>
                                    <van-radio-group v-model="sample.samplingMethod" direction="horizontal">
                                        <van-radio :name="item" v-for="item in samplingMethodList" :key="item"
                                                   shape="square">{{item}}
                                        </van-radio>
                                    </van-radio-group>
                                </template>
                            </van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    label="是否进口">
                                <template #input>
                                    <van-radio-group v-model="sample.inward" direction="horizontal">
                                        <van-radio v-for="item in trueOrFalseList" :key="item.value" :name="item.value"
                                                   shape="square">{{item.label}}
                                        </van-radio>
                                    </van-radio-group>
                                </template>
                            </van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="sample.originPlace"
                                    label="原产地"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    label="包装">
                                <template #input>
                                    <van-radio-group v-model="sample.packClass" direction="horizontal">
                                        <van-radio v-for="item in packClassList" :name="item" :key="item"
                                                   shape="square">{{item}}
                                        </van-radio>
                                    </van-radio-group>
                                </template>
                            </van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    label="标识">
                                <template #input>
                                    <van-radio-group v-model="sample.identifier" direction="horizontal">
                                        <van-radio v-for="item in identifierList" :name="item" :key="item"
                                                   shape="square">{{item}}
                                        </van-radio>
                                    </van-radio-group>
                                </template>
                            </van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    label="储存条件">
                                <template #input>
                                    <van-checkbox-group v-model="storageCondition" direction="horizontal">
                                        <van-checkbox v-for="item in storageConditionList" :name="item" :key="item"
                                                      shape="square">{{item}}
                                        </van-checkbox>
                                    </van-checkbox-group>
                                    <div style="border-bottom: 1px solid #000">
                                        <van-field
                                                label-class="cus-field-class"
                                                label-width="50%"
                                                label-align="center"
                                                v-model="sample.storageConditionRemark"
                                        ></van-field>
                                    </div>
                                </template>
                            </van-field>
                        </table-col>
                    </table-row>
                </table-col>
            </table-row>
            <table-row flex-none>
                <table-col>（标称）生产者信息</table-col>
                <table-col flex-none>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="formObj.proName"
                                    label="生产者名称"
                                    right-icon="add-o"
                                    @click-right-icon="_companySelect('formObj.proName')"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="formObj.proAddress"
                                    label="生产者地址"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    label="单位类型">
                                <template #input>
                                    <van-radio-group v-model="formObj.proType" direction="horizontal">
                                        <van-radio v-for="item in proTypeList" :name="item.value" :key="item.text"
                                                   shape="square">{{item.text}}
                                        </van-radio>
                                    </van-radio-group>
                                </template>
                            </van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="formObj.proLinkman"
                                    label="联系人"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="formObj.proTel"
                                    label="联系电话"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="formObj.proLicense"
                                    label="生产许可证号"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="formObj.proFax"
                                    label="传真"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="formObj.proPostalCode"
                                    label="邮编"
                            ></van-field>
                        </table-col>
                    </table-row>
                </table-col>
            </table-row>
            <table-row flex-none>
                <table-col>（标称）第三方企业信息</table-col>
                <table-col flex-none>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="formObj.thirdPartyName"
                                    label="企业名称"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="formObj.thirdPartyAddress"
                                    label="企业地址"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    label="企业性质">
                                <template #input>
                                    <van-radio-group v-model="formObj.thirdPartyNature" direction="horizontal">
                                        <van-radio v-for="item in thirdPartyNatureList" :key="item" :name="item"
                                                   shape="square">{{item}}
                                        </van-radio>
                                    </van-radio-group>
                                    <div style="border-bottom: 1px solid #000">
                                        <van-field :readonly="formObj.thirdPartyNature!=='其他'"
                                                   label-class="cus-field-class"
                                                   label-width="50%"
                                                   label-align="center"
                                                   v-model="formObj.thirdPartyNatureRemark"
                                        ></van-field>
                                    </div>
                                </template>
                            </van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="formObj.thirdPartyLicense"
                                    label="企业许可证号"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="25%"
                                    label-align="center"
                                    v-model="formObj.thirdPartyTel"
                                    label="联系电话"
                            ></van-field>
                        </table-col>
                    </table-row>
                </table-col>
            </table-row>
            <table-row flex-none>
                <table-col>抽样单位信息</table-col>
                <table-col flex-none>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="formObj.testName"
                                    label="单位名称"
                                    right-icon="add-o"
                                    @click-right-icon="_companySelect('formObj.testName')"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="formObj.testAddress"
                                    label="地址"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="formObj.testPostalCode"
                                    label="邮编"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="formObj.testLinkman"
                                    label="联系人"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="formObj.testTel"
                                    label="电话"
                            ></van-field>
                        </table-col>
                    </table-row>
                    <table-row>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="formObj.testEmail"
                                    label="邮箱"
                            ></van-field>
                        </table-col>
                        <table-col>
                            <van-field
                                    label-class="cus-field-class"
                                    label-width="50%"
                                    label-align="center"
                                    v-model="formObj.testFax"
                                    label="传真"
                            ></van-field>
                        </table-col>
                    </table-row>
                </table-col>
            </table-row>
            <table-row>
                <table-col>
                    <van-field
                            label-class="cus-field-class"
                            label-width="100px"
                            label-align="center"
                            v-model="formObj.remark"
                            label="备注"
                    ></van-field>
                </table-col>
            </table-row>
        </add-table>
        <div class="bottom-btn">
            <van-button block type="info" @click="_ok">保存</van-button>
        </div>
        <van-popup v-model="showDatePicker" position="bottom"
                   :safe-area-inset-bottom="true"
                   :close-on-popstate="true">
            <van-datetime-picker
                    type="date"
                    v-model="currentDate"
                    @confirm="_dateConfirm"
                    @cancel="showDatePicker = false"
            ></van-datetime-picker>
        </van-popup>

        <van-popup v-model="showCityPicker" position="bottom"
                   :safe-area-inset-bottom="true"
                   :close-on-popstate="true">
            <van-area title="省市区"
                      :area-list="areaList"
                      @confirm="_areaConfirm"
                      @cancel="showCityPicker=false"
            ></van-area>
        </van-popup>

        <SelectClass ref="class" @on-result-change="_classResult"></SelectClass>
        <SelectTester ref="tester" @on-result-change="_testerResult"></SelectTester>
        <SelectProducter ref="producter" @on-result-change="_producterResult"></SelectProducter>
        <SelectTested ref="tested" @on-result-change="_testedResult"></SelectTested>
        <ScanBar ref="scan" @on-result-change="_scanResult"></ScanBar>
    </div>
</template>

<script>
    import SamplingListAddTable from './components/SamplingListAddTable'
    import TableRow from './components/TableRow'
    import TableCol from './components/TableCol'
    import {samplingSummary, samplingSample} from '../../api'
    import {default as areaList} from '../../lib/area'
    import SelectClass from './components/SelectClass'
    import SelectTester from './components/SelectTester'
    import SelectProducter from './components/SelectProducter'
    import SelectTested from './components/SelectTested'
    import ScanBar from './components/ScanBar'

    export default {
        name: "SamplingListAdd",
        components: {
            "add-table": SamplingListAddTable,
            "table-row": TableRow,
            "table-col": TableCol,
            SelectClass,
            SelectTester,
            SelectProducter,
            SelectTested,
            ScanBar
        },
        data() {
            return {
                showDatePicker: false,
                currentDate: new Date(),
                selectDateType: '',

                showCityPicker: false,
                areaList: areaList,

                formObj: {
                    samplingNum: '',
                    taskNum: '',

                    source: '',
                    taskType: '',
                    proName: '',
                    proAddress: '',
                    proLicense: '',
                    proTel: '',
                    testPostalCode:'',

                    thirdPartyName: '',
                    thirdPartyAddress: '',
                    thirdPartyNature: '',
                    thirdPartyNatureRemark: '',
                    thirdPartyLicense: '',
                    thirdPartyTel: '',

                    testName: '',
                    testAddress: '',
                    testLinkman: '',
                    testTel: '',
                    testEmail: '',
                    testFax: '',
                    remark: '',

                    samplingDate: '',
                    testMembers: '',

                    proPostalCode: '',
                    proFax: '',
                    proType: '',
                    proLinkman: '',
                },
                nonNetTested: {
                    name: '',
                    testedProvince: '',
                    testedCity: '',
                    testedCountry: '',
                    testedMan: '',
                    testedManTel: '',
                    testedManFax: '',
                    address: '',
                    fax: '',
                    postalCode: '',

                    areaType: '',
                    areaTypeRemark: '',
                    permitType: '',
                    permitNum: '',
                    legalPerson: '',
                    linkman: '',
                    license: '',
                    tel: '',

                    place: '',
                    placeRemark: ''
                },
                sample: {
                    name: '',
                    trademark: '',
                    qrcode: '',
                    firstClass: '',
                    secondClass: '',
                    thirdClass: '',
                    fourthClass: '',
                    type: '',
                    typeRemark: '',
                    source: '',
                    sourceRemark: '',
                    properties: '',
                    propertiesRemark: '',
                    dateType: '',
                    sampleDate: '',
                    standard: '',
                    batchNo: '',
                    specification: '',
                    qualityGrade: '',
                    shelfLife: '',
                    price: '',
                    samplingBase: '',
                    quantity: '',
                    unit: '',
                    backupQuanity: '',
                    samplingMethod: '',
                    inward: '',
                    originPlace: '',
                    packClass: '',
                    identifier: '',
                    storageCondition: '',
                    storageConditionRemark: ''
                },
                taskTypeList: ['监督抽检', '风险监测'],
                areaTypeList: ['景点', '城市', '乡镇', '学校周边', '其他'],
                permitTypeList: ['经营许可证号', '生产许可证号'],
                sampleTypeList: ['无公害农产品', '绿色食品', '有机农产品', '其他',],
                sourceList: ['加工/自制', '委托生产', '外购', '其他'],
                propertiesList: ['普通食品', '特殊食品', '节令食品', '重大活动保障食品', '其他',],
                dateTypeList: ['生产日期', '购进日期', '加工日期', '检疫日期'],
                samplingMethodList: ['无菌抽样', '非无菌抽样'],
                trueOrFalseList: [{label: '是', value: 1}, {label: '否', value: 0}],
                packClassList: ['有包装', '无包装'],
                identifierList: ['有标识', '无标识'],
                storageConditionList: ['常温', '冷藏', '冷冻', '避光', '密闭', '阴凉', '通风', '干燥', '其他'],
                thirdPartyNatureList: ['委托', '代理', '经销', '进口', '其他'],
                proTypeList: [{value: 1, text: '生产'}, {value: 2, text: '进货'}],

                storageCondition: [],

                placeList: ['生产基地/企业', '屠宰场', '农贸市场', '批发市场', '超市', '其他'],

                id: '',
                testedType: this.$route.query.testedType,
                shelfId: this.$route.query.shelfId
            }
        },
        watch: {
            //除储存条件  选其他以外的选项备注清空
            'nonNetTested.areaType': function (val) {
                if (val !== '' && val !== '其他') {
                    this.nonNetTested.areaTypeRemark = ''
                }
            },
            'sample.type': function (val) {
                if (val !== '' && val !== '其他') {
                    this.sample.typeRemark = ''
                }
            },
            'sample.source': function (val) {
                if (val !== '' && val !== '其他') {
                    this.sample.sourceRemark = ''
                }
            },
            'sample.properties': function (val) {
                if (val !== '' && val !== '其他') {
                    this.sample.propertiesRemark = ''
                }
            },
            'formObj.thirdPartyNature': function (val) {
                if (val !== '' && val !== '其他') {
                    this.formObj.thirdPartyNatureRemark = ''
                }
            },
            'nonNetTested.place': function (val) {
                if (val !== '' && val !== '其他') {
                    this.nonNetTested.placeRemark = ''
                }
            },
        },
        computed: {
            areaObj: function () {
                return this.nonNetTested.testedProvince + this.nonNetTested.testedCity + this.nonNetTested.testedCountry
            }
        },
        mounted() {
            // mui.init({
            //     beforeback: function () {
            //         localStorage.removeItem('summary')
            //         localStorage.removeItem('sample')
            //         return true
            //     }
            // })
            this._open()
        },
        // beforeDestroy(){
        //     localStorage.removeItem('summary')
        //     localStorage.removeItem('sample')
        // },
        methods: {
            _open() {
                if (this.$route.query.id) {//编辑
                    this.id = this.$route.query.id
                    // if (localStorage.getItem('summary')) {
                    //     this._initData(JSON.parse(localStorage.getItem('summary')))
                    //     if (localStorage.getItem('sample')) {
                    //         this._scanResult(JSON.parse(localStorage.getItem('sample')))
                    //     }
                    // } else {
                    this._getData()
                    // }
                } else {//添加
                    this.id = ''
                    // if (localStorage.getItem('summary')) {
                    //     this._initData(JSON.parse(localStorage.getItem('summary')))
                    //     if (localStorage.getItem('sample')) {
                    //         this._scanResult(JSON.parse(localStorage.getItem('sample')))
                    //     }
                    // } else {
                    this.formObj.testMembers = this.$global.getUserInfo().realname
                    this._getLastTester()
                    // }
                }
            },
            _companySelect(type) {
                switch (type) {
                    case 'nonNetTested.name':
                        this.$refs.tested._open()
                        break
                    case 'formObj.proName':
                        this.$refs.producter._open()
                        break
                    case 'formObj.testName':
                        this.$refs.tester._open()
                        break
                }
            },
            _testerResult(res) {
                this.formObj.testName = res.testName ? res.testName : ''
                this.formObj.testAddress = res.testAddress ? res.testAddress : ''
                this.formObj.testLinkman = res.testLinkman ? res.testLinkman : ''
                this.formObj.testTel = res.testTel ? res.testTel : ''
                this.formObj.testEmail = res.testEmail ? res.testEmail : ''
                this.formObj.testFax = res.testFax ? res.testFax : ''
            },
            _producterResult(res) {
                this.formObj.proName = res.proName ? res.proName : ''
                this.formObj.proAddress = res.proAddress ? res.proAddress : ''
                this.formObj.proLicense = res.proLicense ? res.proLicense : ''
                this.formObj.proTel = res.proTel ? res.proTel : ''
            },
            _testedResult(res) {
                this.nonNetTested.name = res.name ? res.name : ''
                this.nonNetTested.testedProvince = res.testedProvince ? res.testedProvince : ''
                this.nonNetTested.testedCity = res.testedCity ? res.testedCity : ''
                this.nonNetTested.testedCountry = res.testedCountry ? res.testedCountry : ''
                this.nonNetTested.address = res.address ? res.address : ''
                this.nonNetTested.areaType = res.areaType ? res.areaType : ''
                this.nonNetTested.permitType = res.permitType ? res.permitType : ''
                this.nonNetTested.permitNum = res.permitNum ? res.permitNum : ''
                this.nonNetTested.legalPerson = res.legalPerson ? res.legalPerson : ''
                this.nonNetTested.linkman = res.linkman ? res.linkman : ''
                this.nonNetTested.license = res.license ? res.license : ''
                this.nonNetTested.tel = res.tel ? res.tel : ''
            },
            _scan() {
                //将已经填写过的存起来
                localStorage.setItem('summary', JSON.stringify(this._getSaveObj()))
                // this.$refs.scan._open()
                this.$router.push('/sampling_list/scan_bar')
            },
            _scanResult(result) {
                for (let key in this.sample) {
                    if (result[key] !== '') {
                        if (key === 'sampleDate') {
                            this.sample[key] = result[key] ? this.$dateformat(result[key], 'yyyy-mm-dd') : ''
                        } else if (key === 'storageCondition') {
                            this.storageCondition = result[key].split(',')
                            this.sample[key] = result[key]
                        } else {
                            this.sample[key] = result[key]
                        }
                    }
                }
            },
            _classSelect(type) {
                switch (type) {
                    case '大类':
                        this.$refs.class._open(0)
                        break
                    case '亚类':
                        if (this.sample.firstClass) {
                            this.$refs.class._open(1, this.sample.firstClass)
                        } else {
                            this.$toast('请先选择大类！')
                        }
                        break
                    case '次亚类':
                        if (this.sample.secondClass) {
                            this.$refs.class._open(2, this.sample.secondClass)
                        } else {
                            this.$toast('请先选择亚类！')
                        }
                        break
                    case '细类':
                        if (this.sample.thirdClass) {
                            this.$refs.class._open(3, this.sample.thirdClass)
                        } else {
                            this.$toast('请先选择次亚类！')
                        }
                        break
                }
            },
            _classResult(res, level) {
                switch (level) {
                    case 0:
                        this.sample.firstClass = res
                        this.sample.secondClass = ''
                        this.sample.thirdClass = ''
                        this.sample.fourthClass = ''
                        break
                    case 1:
                        this.sample.secondClass = res
                        this.sample.thirdClass = ''
                        this.sample.fourthClass = ''
                        break
                    case 2:
                        this.sample.thirdClass = res
                        this.sample.fourthClass = ''
                        break
                    case 3:
                        this.sample.fourthClass = res
                        break
                }
            },
            //获取最近填写的抽样单位信息
            _getLastTester: async function () {
                let result = await samplingSummary.lastTester()
                if (result) {
                    this.formObj.testName = result.testName ? result.testName : ''
                    this.formObj.testAddress = result.testAddress ? result.testAddress : ''
                    this.formObj.testLinkman = result.testLinkman ? result.testLinkman : ''
                    this.formObj.testTel = result.testTel ? result.testTel : ''
                    this.formObj.testEmail = result.testEmail ? result.testEmail : ''
                    this.formObj.testFax = result.testFax ? result.testFax : ''
                }
            },
            _getData: async function () {
                let result = await samplingSummary.getById(this.id)
                if (result) {
                    this._initData(result)
                }
            },
            _initData(result) {
                for (let key in this.formObj) {
                    if (result[key] !== '') {
                        if (key === 'samplingDate') {
                            this.formObj[key] = result[key] ? this.$dateformat(result[key], 'yyyy-mm-dd') : ''
                        } else {
                            this.formObj[key] = result[key]
                        }
                    }
                }
                for (let key in this.nonNetTested) {
                    if (result.nonNetTested[key] !== '') {
                        this.nonNetTested[key] = result.nonNetTested[key]
                    }
                }
                for (let key in this.sample) {
                    if (result.sample[key] !== '') {
                        if (key === 'sampleDate') {
                            this.sample[key] = result.sample[key] ? this.$dateformat(result.sample[key], 'yyyy-mm-dd') : ''
                        } else if (key === 'storageCondition') {
                            this.storageCondition = result.sample[key].split(',')
                            this.sample[key] = result.sample[key]
                        } else {
                            this.sample[key] = result.sample[key]
                        }
                    }
                }
                this.testedType = result.testedType
                this.shelfId = result.shelfId
            },
            _valParams() {
                if (this.formObj.samplingNum === '') {
                    this.$toast('请输入抽样单编号')
                    return true
                }
                if (this.sample.firstClass === '') {
                    this.$toast('请输入大类')
                    return true
                }
                if (this.sample.secondClass === '') {
                    this.$toast('请输入大亚类')
                    return true
                }
                if (this.sample.thirdClass === '') {
                    this.$toast('请输入次亚类')
                    return true
                }
                if (this.sample.fourthClass === '') {
                    this.$toast('请输入细类')
                    return true
                }
                return false
            },
            _ok() {
                if (this._valParams()) {
                    return
                }
                let data = this._getSaveObj()
                if (this.id) {
                    this._editSave(data)
                } else {
                    this._addSave(data)
                }
            },
            _getSaveObj() {
                let data = Object.assign({}, this.formObj, {nonNetTested: this.nonNetTested}, {sample: this.sample})
                data.sample.storageCondition = this.storageCondition.join(',')
                data.shelfId = this.shelfId
                data.testedType = this.testedType
                return data
            },
            _addSave: async function (data) {
                let result = await samplingSummary.add(data)
                if (result) {
                    this.$toast('添加成功！')
                    // localStorage.removeItem('summary')
                    // localStorage.removeItem('sample')
                    this.$router.go(-1)
                }
            },
            _editSave: async function (data) {
                data.id = this.id
                let result = await samplingSummary.edit(data)
                if (result) {
                    this.$toast('编辑成功！')
                    // localStorage.removeItem('summary')
                    // localStorage.removeItem('sample')
                    this.$router.go(-1)
                }
            },
            _selectDate(type) {
                this.selectDateType = type
                this.showDatePicker = true
            },
            _dateConfirm(date) {
                switch (this.selectDateType) {
                    case 'sample.sampleDate':
                        this.sample.sampleDate = this.$dateformat(date, 'yyyy-mm-dd')
                        break
                    case 'formObj.samplingDate':
                        this.formObj.samplingDate = this.$dateformat(date, 'yyyy-mm-dd')
                        break
                }
                this.showDatePicker = false
            },
            _areaConfirm(value) {
                this.nonNetTested.testedProvince = value[0].name
                this.nonNetTested.testedCity = value[1].name
                this.nonNetTested.testedCountry = value[2].name
                this.showCityPicker = false
            },

            _getSample: async function () {
                if (this.sample.qrcode && this.id === '') {
                    let res = await samplingSample.scanSample({qrcode: this.sample.qrcode})
                    if (res) {
                        this._scanResult(res)
                    }
                }
            },
        }
    }
</script>

<style lang="less">
    @import "../../styles/sampling-list-add.less";

</style>
