<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网-申请维修-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/user-center/repair/form.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>
<!-- 我的维修 -->
<div id="addFormPage">
    <div class="navLayout" v-cloak>
        <div v-if="isPC" class="crumbs">
            <span>我的交易</span>
            <span>&gt;</span>
            <span>我的维修</span>
            <span>&gt;</span>
            <span>申请维修</span>
        </div>
        <div class="wrap clear">
            <!--左侧导航-->
            <template th:replace="user-center/components/tableft"></template>
            <div class="right">
                <div class="repair">
                    <h1 class="title">申请维修</h1>
                    <form>
                        <div class="formLine">
                            <p><em>*</em>联系人：</p>
                            <input type="text" v-model.trim="form.userContact" placeholder="请输入联系人姓名" :rule="rule.name" maxlength="50" @blur="blurHandle($event)" needverify>
                            <i class="checked icon mIcon"></i>
                            <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
                        </div>
                        <div class="formLine">
                            <p><em>*</em>联系电话：</p>
                            <input type="text" v-model.trim="form.userMobile" placeholder="请输入联系电话" :rule="rule.phone" maxlength="12" @blur="blurHandle($event)" needverify>
                            <i class="checked icon mIcon"></i>
                            <span class="errTips icon mIcon" tips="请输入有效的联系电话"></span>
                        </div>
                        <div class="formLine">
                            <p><em>*</em>联系地址：</p>
                            <div class="address">
                                <select name="province" id="province" ref="cProvince" @change="ChangeProvince" v-model="addressfrom.province">
                                    <option value="" >请选择</option>
                                    <option v-for="(item ,index) in ProvinceList" :key="index" :value='item.provinceID' >{{item.name}}</option>
                                </select>
                                <select name="city" id="cCity" @change="ChangeGetcity($event)" v-model="addressfrom.city">
                                    <option value="" >请选择</option>
                                    <option v-for="(item ,index) in cityArray" :key="index" :value="item.cityID" >{{item.name}}</option>
                                </select>
                                <select name="town" id="cTown" @change="ChangeGetcTown($event)" v-model="addressfrom.town">
                                    <option value="" >请选择</option>
                                    <option v-for="(item ,index) in townArray" :key="index" :value="item.townID"  >{{item.name}}</option>
                                </select>
                                <textarea placeholder="建议您如实填写详细地址，例如：街道名称，门牌号码，楼层和房间号等信息"  v-model.trim="form.userAddress"></textarea>
                            </div>
                            <i class="checked icon mIcon"></i>
                            <span class="errTips icon mIcon" tips="请输入正确的联系地址"></span>
                        </div>
                        <div class="formLine">
                            <p><em>*</em>仪器名称：</p>
                            <input type="text" v-model.trim="form.instrumentName" placeholder="请输入仪器名称" :rule="rule.name" maxlength="30" @blur="blurHandle($event)" needverify>
                            <i class="checked icon mIcon"></i>
                            <span class="errTips icon mIcon" tips="请输入正确的仪器名称"></span>
                        </div>
                        <div class="formLine">
                            <p>生产厂家：</p>
                            <input type="text" v-model.trim="form.manufacturer" placeholder="请输入生产厂家" maxlength="30">
                            <i class="checked icon mIcon"></i>
                            <span class="errTips icon mIcon" tips="请输入正确的公司名称"></span>
                        </div>
                        <div class="formLine">
                            <p>上传图片：</p>
                            <div class="uploadGoodsImages">
                                <div class="form-upload-image"  v-for="(item, index) in imagesList" :key="index">
                                    <img class="upload-img" :src="item" :data-image="item" :id="'uploadGoodsImages'+ index" @click="showViewerImageFn(index)">
                                    <i class="icon mIcon del" @click="removeImagesFn(index)"></i>
                                </div>
                                <div class="formLine-file" v-show="imagesList.length<5">
                                    <input ref="goodsImages" type="file" name="file" value="" class="input-file file" accept="image/png,image/jpeg,image/gif,image/jpg"  @change="uploadGoodsImagesFn">
                                    <i class="icon mIcon add"></i>
                                </div>
                            </div>
                            <p class="fileInfo">请尽量上传仪器全照或者仪器故障图片，方便您的维修事宜上传jpg/png格式照片，单个照片不能超过5M,最多不超过5张</p>
                        </div>
                        <div class="formLine">
                            <p><em>*</em>问题描述：</p>
                            <textarea  v-model.trim="form.problemDescription" placeholder="请输入您的问题描述(不超过200字)…" maxlength="200" needverify></textarea>
                            <i class="checked icon mIcon"></i>
                            <span class="errTips icon mIcon" tips="请输入您的问题描述"></span>
                        </div>
                        <div class="subLine">
                            <button type="button" @click="submitData" class="btn" :class="loginLoading ? 'disabled' : ''">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/repair.service.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/repair/form-user.js(v=${version})}"></script>
</body>
</html>
