<template>
  <div class="container">
    <!-- <topheader title="保姆服务安心包"></topheader>  -->
    <p class="top-line">
      <span>填写信息</span>
      <span  @click="previewBlankContract" class="preview-blank"> <img src="../assets/icon_eye.png" alt /> 预览合同</span></p>
    <div class="form-wrapper">
      <van-form @submit="onSubmit" @failed="onFailed">
        <div class="form-module">
          <van-field
            label="雇主姓名"
            v-model="customerName"
            placeholder="请输入雇主姓名"
            :rules="formRules.nameRule"
            maxlength="10"
            clearable
            required
          />
          <van-field
            label="身份证号"
            v-model="customerIdCard"
            placeholder="请输入身份证号"
            maxlength="18"
            required
            :formatter="formatter"
            name="validator"
            clearable
            :rules="[{ validator, message: '请输入正确的身份证号码' },{ required: true, message: '您还未填写身份证号'}]"
          />
          <van-field
            label="住宅地址"
            name="cityAddress"
            is-link
            required
            v-model="cityAddress"
            placeholder="请选择省-市-区"
            :rules="formRules.cityAddressRule"
            readonly
            @click="areaSelect('customer')"
          />
          <van-field
            label="详细地址"
            name="detailAddress"
            required
            v-model="detailAddress"
            placeholder="请输入详细地址"
            :rules="formRules.detailAddressRule"
            clearable
          />

          <van-field
            label="联系电话"
            required
            v-model="customerTel"
            name="pattern"
            type="tel"
            placeholder="请输入联系电话"
            :rules="[{ required: true, message: '您还未填写手机号码' },
          { pattern, message: '请输入正确的手机号码'}]"
            maxlength="11"
            clearable
          />
           <van-field
            label="紧急联系人"
            required
            v-model="customerUrgentName"
            placeholder="请输入紧急联系人"
            :rules="formRules.customerUrgentNameRule"
            clearable
          />
          <van-field
            label="紧急联系电话"
            required
            v-model="customerUrgentTel"
            name="pattern"
            type="tel"
            placeholder="请输入紧急联系电话"
            :rules="[{ required: true, message: '您还未填写紧急联系电话' },
          { pattern, message: '请输入正确的手机号码'}]"
            maxlength="11"
            clearable
          />
        </div>
        <div class="form-module">
          <van-field
            label="保姆姓名"
            required
            v-model="servantName"
            placeholder="请输入保姆姓名"
            :rules="formRules.servantNameRule"
            maxlength="10"
            clearabl
          />
          <van-field
            label="身份证号"
            v-model="servantIdCard"
            required
            placeholder="请输入身份证号"
            maxlength="18"
            :formatter="formatter"
            name="validator"
            clearable
            :rules="[{ validator, message: '请输入正确的身份证号码' },{ required: true, message: '您还未填写身份证号'}]"
          />
          <van-field
            label="住宅地址"
            required
            is-link
            v-model="servantCityAddress"
            placeholder="请选择省-市-区"
            :rules="formRules.servantCityAddressRule"
            readonly
            @click="areaSelect('servant')"
          />
          <van-field
            label="详细地址"
            required
            v-model="servantDetailAddress"
            placeholder="请输入详细地址"
            :rules="formRules.servantDetailAddressRule"
            clearable
          />
          <van-field
            label="联系电话"
            v-model="servantTel"
            name="pattern"
            type="tel"
            required
            placeholder="请输入联系电话"
            :rules="[{ required: true, message: '您还未填写手机号码' },
          { pattern, message: '请输入正确的手机号码'}]"
            maxlength="11"
            clearable
          />
          <van-field
            label="紧急联系人"
            required
            v-model="servantUrgentName"
            name="pattern"
            placeholder="请输入紧急联系人"
            :rules="formRules.servantUrgentNameRule"
            clearable
          />
          <van-field
            label="紧急联系电话"
            v-model="servantUrgentTel"
            name="pattern"
            type="tel"
            required
            placeholder="请输入紧急联系电话"
            :rules="[{ required: true, message: '您还未填写紧急联系电话' },
          { pattern, message: '请输入正确的手机号码'}]"
            maxlength="11"
            clearable
          />
        </div>

        <div class="form-module">
          <van-field
            label="服务类型"
            required
            v-model="serviceType"
            placeholder="请选择服务类型"
            :rules="formRules.serviceTypeRule"
            readonly
            is-link
            @click="serviceTypeSelect"
          />
          <van-field label="服务方式" required :rules="formRules.serviceWayRule">
            <template #input>
              <van-radio-group v-model="serviceWay" direction="horizontal">
                <van-radio name="1">住家型</van-radio>
                <van-radio name="2">非住家型</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </div>
        <!-- 服务内容 -->
        <div class="form-module">
          <van-field label="服务内容" required :rules="formRules.serviceContentRule">
            <template #input>
              <van-checkbox-group v-model="serviceContent" direction="horizontal">
                <van-checkbox name="1" shape="square">一般家务</van-checkbox>
                <van-checkbox name="2" shape="square">辅助照顾小孩</van-checkbox>
                <van-checkbox name="3" shape="square">全职照顾小孩</van-checkbox>
                <van-checkbox name="4" shape="square">照顾老人</van-checkbox>
                <van-checkbox name="5" shape="square">孕产妇护理</van-checkbox>
                <van-checkbox name="6" shape="square">照顾病人</van-checkbox>
                <van-checkbox name="7" shape="square">其它服务内容</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>

          <template class="service-content-block" v-if="serviceContent.indexOf('1')!=-1">
            <van-field
              label="住房面积(平米)"
              type="number"
              :rules="formRules.houseAreaRule"
              required
              v-model="houseArea"
              placeholder="请输入住房面积"
            />
            <van-field
              label="常住人数"
              type="number"
              :border="true"
              required
              v-model="residentPeople"
              :rules="formRules.residentPeopleRule"
              placeholder="请输入常住人数"
            />
          </template>
          <!-- 辅助照顾小孩 -->
          <template class="service-content-block" v-if="serviceContent.indexOf('2')!=-1">
            <van-field label="辅助照顾小孩" required>
              <template #input>
                <van-radio-group v-model="assistedCare" direction="horizontal">
                  <van-radio name="1">1个</van-radio>
                  <van-radio name="2">2个</van-radio>
                  <van-radio name="3">3个</van-radio>
                  <van-radio name="4">4个</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              label="第一个月龄"
              type="number"
              required
              v-model="firstMonthAge"
               :rules="formRules.firstMonthAgeRule"
              placeholder="请输入第一个小孩月龄"
            />

            <van-field
              v-if="assistedCare>=2"
              label="第二个月龄"
              type="number"
              required
              v-model="secondMonthAge"
              :rules="formRules.secondMonthAgeRule"
              placeholder="请输入第二个小孩月龄"
            />
            <van-field
              v-if="assistedCare>=3"
              label="第三个月龄"
              type="number"
              required
              v-model="thirdMonthAge"
              :rules="formRules.thirdMonthAgeRule"
              placeholder="请输入第三个小孩月龄"
            />
            <van-field
              v-if="assistedCare>=4"
              label="第四个月龄"
              type="number"
              required
              v-model="fourthMonthAge"
              :rules="formRules.fourthMonthAgeRule"
              placeholder="请输入第四个小孩月龄"
            />
          </template>
          <!-- 全职照顾小孩 -->
          <template class="service-content-block" v-if="serviceContent.indexOf('3')!=-1">
            <van-field label="全职照顾小孩" required>
              <template #input>
                <van-radio-group v-model="fullTimeCare" direction="horizontal">
                  <van-radio name="1">1个</van-radio>
                  <van-radio name="2">2个</van-radio>
                  <van-radio name="3">3个</van-radio>
                  <van-radio name="4">4个</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              label="第一个月龄"
              type="number"
              required
              v-model="qzFirstMonthAge"
              :rules="formRules.qzFirstMonthAgeRule"
              placeholder="请输入第一个小孩月龄"
            />

            <van-field
              v-if="fullTimeCare>=2"
              label="第二个月龄"
              type="number"
              required
              v-model="qzSecondMonthAge"
              :rules="formRules.qzSecondMonthAgeRule"
              placeholder="请输入第二个小孩月龄"
            />
            <van-field
              v-if="fullTimeCare>=3"
              label="第三个月龄"
              type="number"
              required
              v-model="qzThirdMonthAge"
               :rules="formRules.qzThirdMonthAgeRule"
              placeholder="请输入第三个小孩月龄"
            />
            <van-field
              v-if="fullTimeCare>=4"
              label="第四个月龄"
              type="number"
              required
              v-model="qzFourthMonthAge"
               :rules="formRules.qzFourthMonthAgeRule"
              placeholder="请输入第四个小孩月龄"
            />
          </template>
          <!-- 照顾老人 -->
          <template class="service-content-block" v-if="serviceContent.indexOf('4')!=-1">
            <van-field label="照顾老人" required>
              <template #input>
                <van-radio-group v-model="totalCare" direction="horizontal">
                  <van-radio name="1">1个</van-radio>
                  <van-radio name="2">2个</van-radio>
                  <van-radio name="3">3个</van-radio>
                  <van-radio name="4">4个</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              label="第一位年龄"
              type="number"
              required
              v-model="firstOldMan"
               :rules="formRules.firstOldManRule"
              placeholder="请输入第一位老人年龄"
            />
            <van-field label="第一位老人" required>
              <template #input>
                <van-radio-group v-model="firstOldManState"   :rules="formRules.firstOldManStateRule"
                direction="horizontal">
                  <van-radio name="1">能自理</van-radio>
                  <van-radio name="2">半自理</van-radio>
                  <van-radio name="3">完全不能自理</van-radio>
                </van-radio-group>
              </template>
            </van-field>

            <van-field
              v-if="totalCare>=2"
              label="第二位年龄"
              type="number"
              required
              v-model="secondOldMan"
              :rules="formRules.secondOldManRule"
              placeholder="请输入第二位老人年龄"
            />
            <van-field label="第二位老人" required v-if="totalCare>=2">
              <template #input>
                <van-radio-group v-model="secondOldManState"   :rules="formRules.secondOldManStateRule"
                direction="horizontal">
                  <van-radio name="1">能自理</van-radio>
                  <van-radio name="2">半自理</van-radio>
                  <van-radio name="3">完全不能自理</van-radio>
                </van-radio-group>
              </template>
            </van-field>

            <van-field
              v-if="totalCare>=3"
              label="第三位年龄"
              type="number"
              required
              v-model="thirdOldMan"
               :rules="formRules.thirdOldManRule"
              placeholder="请输入第三位老人年龄"
            />
            <van-field label="第三位老人" required v-if="totalCare>=3">
              <template #input>
                <van-radio-group v-model="thirdOldManState"  :rules="formRules.thirdOldManStateRule"
                direction="horizontal">
                  <van-radio name="1">能自理</van-radio>
                  <van-radio name="2">半自理</van-radio>
                  <van-radio name="3">完全不能自理</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              v-if="totalCare>=4"
              label="第四位年龄"
              type="number"
              required
              v-model="fourthOldMan"
              :rules="formRules.fourthOldManRule"
              placeholder="请输入第四位老人年龄"
            />
            <van-field label="第四位老人" required v-if="totalCare>=4">
              <template #input>
                <van-radio-group v-model="fourthOldManState"   :rules="formRules.fourthOldManStateRule"
                direction="horizontal">
                  <van-radio name="1">能自理</van-radio>
                  <van-radio name="2">半自理</van-radio>
                  <van-radio name="3">完全不能自理</van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </template>
          <!-- 病人病情 -->
          <template class="service-content-block" v-if="serviceContent.indexOf('6')!=-1">
            <van-field label="病人病情" required v-model="sickState" :rules="formRules.sickStateRule"  placeholder="请输入病人病情" />
          </template>
          <template class="service-content-block" v-if="serviceContent.indexOf('7')!=-1">
            <van-field label="其它服务内容" required v-model="otherServices"  :rules="formRules.otherServicesRule"  placeholder="请输入其它服务内容" />
          </template>
        </div>
        <!-- 服务期限 -->
        <div class="form-module">
          <van-field
            label="服务开始日期"
            required
            v-model="serviceStartDate"
             :rules="formRules.serviceStartDateRule"
            placeholder="请选择服务开始日期"
            readonly
            is-link
            @click="serviceStartDateSelect"
          />
          <van-field
            label="服务结束日期"
            required
            v-model="serviceEndDate"
            placeholder="请选择服务结束日期"
            :rules="formRules.serviceEndDateRule"
            readonly
            is-link
            @click="serviceEndDateSelect"
          />
          <van-field
            label="休息天数"
            type="number"
            required
            maxlength="2"
            v-model="monthlyRest"
            :rules="formRules.monthlyRestRule"
            placeholder="请输入每月休息天数"
          />
          <van-field label="休息时间方式" required :rules="formRules.restWays">
            <template #input>
              <van-radio-group v-model="restWays" direction="horizontal">
                <van-radio name="1">每周固定休息</van-radio>
                <van-radio name="2">双方协商</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field label="休息日" required v-if="restWays=='1'" :rules="formRules.restDayRule">
            <template #input>
              <van-checkbox-group v-model="restDay" direction="horizontal" :max="2">
                <van-checkbox name="周一" shape="square">周一</van-checkbox>
                <van-checkbox name="周二" shape="square">周二</van-checkbox>
                <van-checkbox name="周三" shape="square">周三</van-checkbox>
                <van-checkbox name="周四" shape="square">周四</van-checkbox>
                <van-checkbox name="周五" shape="square">周五</van-checkbox>
                <van-checkbox name="周六" shape="square">周六</van-checkbox>
                <van-checkbox name="周日" shape="square">周日</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>
          <van-field
            label="工作开始时间"
            required
            v-model="startWorkTime"
             :rules="formRules.startWorkTimeRule"
            placeholder="请选择工作开始时间"
            readonly
            is-link
            @click="startWorkTimeSelect"
          />
          <van-field
            label="工作结束时间"
            required
            v-model="endWorkTime"
            :rules="formRules.endWorkTimeRule"
            placeholder="请选择工作结束时间"
            readonly
            is-link
            @click="endWorkTimeSelect"
          />
        </div>
        <!-- 劳务报酬 -->
        <div class="form-module">
          <van-field label="劳务报酬" type="number" required v-model="salary" placeholder="请输入劳务报酬"  :rules="formRules.salaryRule"/>
          <van-field name="radio" label="休息日加班报酬" required :rules="formRules.doublePayRule">
            <template #input>
              <van-radio-group v-model="doublePay" direction="horizontal" >
                <van-radio name="1">1倍</van-radio>
                <van-radio name="2">2倍</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="节假日加班报酬" required :rules="formRules.tripleSalaryRule">
            <template #input>
              <van-radio-group v-model="tripleSalary" direction="horizontal" >
                <van-radio name="1">1倍</van-radio>
                <van-radio name="2">2倍</van-radio>
                <van-radio name="3">3倍</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            label="薪酬发放日"
            required
            v-model="salaryGiving"
            :rules="formRules.salaryGivingRule"
            placeholder="请选择薪酬发放日"
            readonly
            is-link
            @click="salaryGivingSelect"
          />
          <van-field
            label="发放方式"
            required
            v-model="paymentMethod"
            :rules="formRules.paymentMethodRule"
            placeholder="请选择发放方式"
            readonly
            is-link
            @click="paymentMethodSelect"
          />

          <van-field label="账号" required v-model="accountNum" placeholder="银行账号/支付宝账号/微信账号/其它"  :rules="formRules.accountNumRule"/>
        </div>

        <van-field name="radio" label="实名认证" required :border="false">
          <template #input>
            <van-radio-group v-model="isAuth" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <p class="tips">{{isAuth==1?yesContent:noContent}}</p>
        <van-field name="checkbox" :border="false" :rules="formRules.protocolRule">
          <template #input>
            <van-checkbox v-model="checkbox"  class="read-tip">鲸致生活使用E签宝作为第三方电子签约工具，我已知晓我所填写的信息属实，并同意鲸致生活将信息提供给E签宝进行电子合同的生成和签署。</van-checkbox>
          </template>
        </van-field>

        <div class="submit-wrapper">
          <!-- <div @click="onSubmit">提交</div> -->

          <van-button block native-type="submit" type="primary">发送合同</van-button>
        </div>
      </van-form>
    </div>
    <!-- 省市区弹框 -->
    <van-popup v-model="areaShow" position="bottom">
      <van-area
        title="省-市-区"
        :area-list="areaList"
        value="310115"
        @cancel="areaCancel"
        @confirm="areaConfirm"
      />
      <!-- <van-area title="省-市-区" :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']" /> -->
    </van-popup>
    <!-- 选择服务类型 -->
    <van-popup v-model="serviceTypeShow" position="bottom">
      <van-picker
        title="选择服务类型"
        show-toolbar
        :columns="serviceTypelist"
        @confirm="serviceTypeConfirm"
        @cancel="serviceTypeCancel"
      />
    </van-popup>
    <!-- 服务开始时间 -->
    <van-popup v-model="serviceStartDateShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="服务开始时间"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="serviceStartDateCancel"
        @confirm="serviceStartDateConfirm"
      />
    </van-popup>
    <!-- 服务结束时间 -->
    <van-popup v-model="serviceEndDateShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="服务开始时间"
        :min-date="endMinDate"
        :max-date="endMaxDate"
        @cancel="serviceEndDateCancel"
        @confirm="serviceEndDateConfirm"
      />
    </van-popup>
    <!-- 工作开始时间 -->
    <van-popup v-model="startWorkTimeShow" position="bottom">
      <van-datetime-picker
        v-model="currentTime"
        type="time"
        :filter="filter"
        @confirm="startWorkTimeConfirm"
        @cancel="startWorkTimeCancel"
      />
    </van-popup>
    <!-- 工作结束时间 -->
    <van-popup v-model="endWorkTimeShow" position="bottom">
      <van-datetime-picker
        v-model="currentTime"
        type="time"
        :filter="filter"
        @confirm="endWorkTimeConfirm"
        @cancel="endWorkTimeCancel"
      />
    </van-popup>
    <!-- 发放方式 -->
    <van-popup v-model="paymentMethodShow" position="bottom">
      <van-picker
        title="选择发放方式"
        show-toolbar
        :columns="paymentMethodlist"
        @confirm="paymentMethodConfirm"
        @cancel="paymentMethodCancel"
      />
    </van-popup>
    <!-- 薪酬发放日 -->
    <van-popup v-model="salaryGivingShow" position="bottom">
      <van-picker
        title="选择薪酬发放日"
        show-toolbar
        :columns="salaryGivinglist"
        @confirm="salaryGivingConfirm"
        @cancel="salaryGivingCancel"
      />
    </van-popup>

    <!-- 弹框 -->
    <van-dialog
      v-model="dialogShow"
      title="提示"
      cancelButtonText="取消"
      confirmButtonText="去签署"
      cancelButtonColor="#999999"
      confirmButtonColor="#0EAEFC"
      show-cancel-button
      @confirm="dialogConfirm"
    >
      <div class="dialog-wrapper">{{isAuth==1?yesContent:noContent}}</div>
    </van-dialog>
  </div>
</template>

<script>
import Service from "../script/api/service";
import Topheader from "@/components/Topheader";
import Vue from "vue";
import { Popup, Area, Picker, DatetimePicker } from "vant";
Vue.use(Popup)
  .use(Area)
  .use(Picker)
  .use(DatetimePicker);
import * as validatorInput from "../script/Validator";
import areaJson from "../script/areaJson";
import moment from "moment";
export default {
    // metaInfo: {
    // title: "合同签署",
    // },
  name: "userInput",
  data() {
    return {
      blankUrl:'https://uat.jzlives.cn/file/servantequity/qybgy.pdf',//正式环境
      // blankUrl:'http://uat.b.jzlives.cn/file/servantequity/qybgy.pdf',//测试环境
      checkbox:'',
      userInfo:'',
      customerName: "", //雇主姓名
      customerIdCard: "",
      customerTel: "",
      cityAddress: "",
      detailAddress: "",
      customerUrgentName:"",
      customerUrgentTel: "",
      servantName: "", //保姆姓名
      servantIdCard: "",
      servantTel: "",
      servantCityAddress: "",
      servantDetailAddress: "",
      servantUrgentName:'',
      servantUrgentTel: "",
      areaType: "", //当前弹出的省市区选择类型
      areaShow: false,
      areaList: areaJson, //城市信息
      serviceType: "", //服务类型
      serviceTypeNum:'',
      serviceTypelist: [
        { text: "普通家务保姆", value: "1" },
        { text: "育儿嫂", value: "2" },
        { text: "钟点工保姆", value: "3" },
        { text: "月嫂", value: "4" },
         { text: "其它", value: "5" }
      ],
      serviceTypeShow: false, //服务类型
      serviceWay: "", //服务方式
      serviceContent: [], //服务内容
      houseArea: "", //房屋面积
      residentPeople: "", //常住人数
      assistedCare: "1", //辅助照顾小孩个数
      fullTimeCare: "1", //全职照顾小孩
      firstMonthAge: "",
      secondMonthAge: "",
      thirdMonthAge: "",
      fourthMonthAge: "",
      qzFirstMonthAge: "",
      qzSecondMonthAge: "",
      qzThirdMonthAge: "",
      qzFourthMonthAge: "",
      totalCare: "1", //照顾老人
      firstOldMan: "",
      firstOldManState: "1",
      secondOldMan: "",
      secondOldManState: "1",
      thirdOldMan: "",
      thirdOldManState: "1",
      fourthOldMan: "",
      fourthOldManState: "1",
      sickState: "", //病人情况
      otherServices: "", //其它服务内容
      serviceStartDate: "", //服务开始时间
      serviceStartDateShow: false,
      minDate: '',
      maxDate: new Date(),
      endMinDate:new Date(),
      endMaxDate:'',
      currentDate: new Date(),
      serviceEndDate: "",
      serviceEndDateShow: false,
      monthlyRest: "", //休息天数
      restWays: "", //休息方式
      restDay: [], //休息日
      startWorkTime: "", //工作开始时间
      endWorkTime: "",
      currentTime: "08:00",
      startWorkTimeShow: false,
      endWorkTimeShow: false,
      salary: "", //劳务报酬
      doublePay: "", //休息日加班报酬
      tripleSalary: "", //节假日加班报酬
      salaryGiving: "", //薪酬发放日
      salaryGivinglist: [],
      salaryGivingShow: false,
      paymentMethod: "", //薪酬发放方式
      paymentMethodTpye:'',
      paymentMethodShow: false,
      paymentMethodlist: [
        { text: "银行转账", value: "1" },
        { text: "支付宝", value: "2" },
        { text: "微信", value: "3" },
        { text: "其它", value: "4" }
      ],
      accountNum: "", //账号
      isAuth: "1", //实名认证
      dialogShow: false, //弹框确认
      yesContent:
        "保姆实名认证在合同签署完成后进行，若保姆未通过实名认证，则此《雇佣合同》无效。请仔细核对您的合同具体信息。",
      noContent:
        "您未选择保姆实名认证，保姆实名认证，让您安心无忧。在您完成签署之前，请仔细核对您的合同具体信息。",

      customerAddress: "", //客户地址拼接
      province: "",
      city: "",
      area: "",
      source: "", //来源
      pattern: /^1\d{10}$/,
      formRules: {
        // idCardRule: [{ required: true, message: "您还未填写身份证号" }],
        // telRule: [
        //   { required: true, message: "您还未填写手机号码" },
        //   { pattern, message: '请输入正确的手机号码' }
        //   ],
        nameRule: [{ required: true, message: "您还未填写姓名" }],
        customerUrgentNameRule: [{ required: true, message: "您还未填写紧急联系人姓名" }],
        servantUrgentNameRule: [{ required: true, message: "您还未填写紧急联系人姓名" }],
        cityAddressRule: [
          { required: true, message: "您还未选择省市区", trigger: "onChange" }
        ],
        detailAddressRule: [{ required: true, message: "您还未填写详细地址" }],
        servantNameRule: [{ required: true, message: "您还未填写姓名" }],
        servantCityAddressRule: [
          { required: true, message: "您还未选择省市区", trigger: "onChange" }
        ],
        servantDetailAddressRule: [
          { required: true, message: "您还未填写详细地址" }
        ],
        serviceTypeRule: [{ required: true, message: "您还未选择服务类型" }],
        serviceWayRule: [{ required: true, message: "您还未选择服务方式" }],
        serviceContentRule: [{ required: true, message: "您还未选择服务内容" }],
        houseAreaRule: [{ required: true, message: "您还未填写房屋面积" }],
        residentPeopleRule: [{ required: true, message: "您还未输入常住人数" }],
        firstMonthAgeRule: [{ required: true, message: "您还未输入第一个小孩月龄" }],
        secondMonthAgeRule: [{ required: true, message: "您还未输入第二个小孩月龄" }],
        thirdMonthAgeRule: [{ required: true, message: "您还未输入第三个小孩月龄" }],
        fourthMonthAgeRule: [{ required: true, message: "您还未输入第四个小孩月龄" }],
        residentPeopleRule: [{ required: true, message: "您还未输入常住人数" }],
        qzFirstMonthAgeRule: [{ required: true, message: "您还未输入第一个小孩月龄" }],
        qzSecondMonthAgeRule: [{ required: true, message: "您还未输入第二个小孩月龄" }],
        qzThirdMonthAgeRule: [{ required: true, message: "您还未输入第三个小孩月龄" }],
        qzFourthMonthAgeRule: [{ required: true, message: "您还未输入第四个小孩月龄" }],
        firstOldManRule: [{ required: true, message: "您还未输入第一位老人年龄" }],
        secondOldManRule: [{ required: true, message: "您还未输入第二位老人年龄" }],
        thirdOldManRule: [{ required: true, message: "您还未输入第三位老人年龄" }],
        fourthOldManRule: [{ required: true, message: "您还未输入第四位老人年龄" }],
        sickStateRule: [{ required: true, message: "您还未输入病人情况" }],
        otherServicesRule: [{ required: true, message: "您还未输入其它服务内容" }],


        serviceStartDateRule:[{ required: true, message: "您还未选择服务开始时间" }],
        serviceEndDateRule:[{ required: true, message: "您还未选择服务结束时间" }],
        monthlyRestRule:[{ required: true, message: "您还未输入每月休息天数" }],
        restWays:[{ required: true, message: "您还未选择休息时间方式" }],
        restDayRule:[{ required: true, message: "您还未选择固定休息日" }],
        startWorkTimeRule:[{ required: true, message: "您还未选择工作开始时间" }],
        endWorkTimeRule:[{ required: true, message: "您还未选择工作结束时间" }],
        salaryRule:[{ required: true, message: "您还未输入劳务报酬" }],
        doublePayRule:[{ required: true, message: "您还未选择休息日加班报酬" }],
        tripleSalaryRule:[{ required: true, message: "您还未选择节假日加班报酬" }],
        salaryGivingRule:[{ required: true, message: "您还未选择薪酬发放日" }],
        paymentMethodRule:[{ required: true, message: "您还未选择发放方式" }],
        accountNumRule:[{ required: true, message: "您还未选择发放账号" }],
        protocolRule: [{ required: true, message: "您还未勾选上述内容" }]

      }
    };
  },
  computed: {},
  components: {
    Topheader
  },
  watch: {},
  beforeDestroy() {},
  created() {
    let list = [];
    for (let i = 1; i <= 31; i++) {
      list.push(i);
    }
    this.salaryGivinglist = list;
    let year=(new Date()).getFullYear();
    let month=(new Date()).getMonth();
    let day=(new Date()).getDate();
    this.minDate=new Date(year-1, month,day);
    this.endMaxDate=new Date(year+1, month,day);
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
  mounted() {
    let path = this.$route.path;
  },
  methods: {
    // 省市区选择
    areaSelect: function(type) {
      this.areaType = type;
      this.areaShow = true;
    },
    areaCancel: function() {
      this.areaShow = false;
    },
    areaConfirm: function(data) {
      this.province = data[0].name;
      this.city = data[1].name;
      this.area = data[2].name;
      if (this.areaType == "customer") {
        this.cityAddress = data.map(item => item.name).join("");
      } else if (this.areaType == "servant") {
        this.servantCityAddress = data.map(item => item.name).join("");
      }

      this.areaShow = false;
    },
    serviceTypeSelect: function() {
      this.serviceTypeShow = true;
    },
    serviceTypeConfirm(item, index) {
      this.serviceType = item.text;
      this.serviceTypeNum = item.value;
      this.serviceTypeShow = false;
    },
    serviceTypeCancel() {
      this.serviceTypeShow = false;
    },
    serviceStartDateSelect() {
      this.serviceStartDateShow = true;
    },
    serviceStartDateConfirm(value) {
      this.serviceStartDate = moment(value).format("YYYY-MM-DD");
      this.serviceStartDateShow = false;
    },
    serviceStartDateCancel() {
      this.serviceStartDateShow = false;
    },
    serviceEndDateSelect() {
      this.serviceEndDateShow = true;
    },
    serviceEndDateConfirm(value) {
      this.serviceEndDate = moment(value).format("YYYY-MM-DD");
      this.serviceEndDateShow = false;
    },
    serviceEndDateCancel() {
      this.serviceEndDateShow = false;
    },
    // 工作时间格式化
    filter(type, options) {
      if (type === "minute") {
        return options.filter(option => option % 5 === 0);
      }
      return options;
    },
    startWorkTimeSelect() {
      this.startWorkTimeShow = true;
    },
    startWorkTimeConfirm(value) {
      this.startWorkTime = value;
      this.startWorkTimeShow = false;
    },
    startWorkTimeCancel() {
      this.startWorkTimeShow = false;
    },
    endWorkTimeSelect() {
      this.endWorkTimeShow = true;
    },
    endWorkTimeConfirm(value) {
      this.endWorkTime = value;
      this.endWorkTimeShow = false;
    },
    endWorkTimeCancel() {
      this.endWorkTimeShow = false;
    },
    formatter(value) {
      // 过滤输入的数字
      return value.replace(/[^0-9xX]/g, "");
    },
    validator: function(val) {
      let result = validatorInput.validateIdCard(val);
      return result;
    },
    salaryGivingSelect() {
      this.salaryGivingShow = true;
    },

    salaryGivingConfirm(item, index) {
      this.salaryGiving = item;
      this.salaryGivingShow = false;
    },
    salaryGivingCancel() {
      this.salaryGivingShow = false;
    },
    paymentMethodSelect() {
      this.paymentMethodShow = true;
    },
    paymentMethodConfirm(item, index) {
      this.paymentMethod = item.text;
      this.paymentMethodTpye = item.value;
      this.paymentMethodShow = false;
    },
    paymentMethodCancel() {
      this.paymentMethodShow = false;
    },

    onSubmit: function() {
      this.dialogShow = true;
    },
    dialogConfirm: function() {
      this.dataSubmit();
    },
    selfCareFormat(value){
      if(value=='1'){
        return '能自理';
      }else if(value=='2'){
        return '半自理';
      }else if(value=='3'){
        return '完全不能自理';
      }
    },
    previewBlankContract: function() {
      // 预览空白合同
      location.href =
        "/static/pdf/web/viewer.html?file=" + encodeURIComponent(this.blankUrl);
    },
    dataSubmit: function() {
      let serviceContentVO={
        child:{
          children:[],
          num:''
        },
       fullTimeChild:{
          children:[],
          num:''
        },
        helpOldMan:{
          num:'',
          oldManList:[]
        },
        housework:{
          houseArea:'',
          peopele:'',
        },
        num:this.serviceContent.join(','),
        other:'',
        patient:'',

      };
      if(this.serviceContent.indexOf('1')!=-1){
      serviceContentVO.housework={
        houseArea:this.houseArea,
          peopele:this.residentPeople,
      }
      }
      // 照顾小孩
      if(this.serviceContent.indexOf('2')!=-1){
        serviceContentVO.child.num=this.assistedCare;
        let childLength=this.assistedCare;
        if(childLength==1){
          serviceContentVO.child.children=[{monthAge:this.firstMonthAge}];
        }else if(childLength==2){
          serviceContentVO.child.children=[{monthAge:this.firstMonthAge},{monthAge:this.secondMonthAge}];
        }else if(childLength==3){
          serviceContentVO.child.children=[{monthAge:this.firstMonthAge},{monthAge:this.secondMonthAge},{monthAge:this.thirdMonthAge}];
        }else if(childLength==4){
          serviceContentVO.child.children=[{monthAge:this.firstMonthAge},{monthAge:this.secondMonthAge},{monthAge:this.thirdMonthAge},{monthAge:this.fourthMonthAge}];
        }
      }
      // 全职照顾小孩
      if(this.serviceContent.indexOf('3')!=-1){
      serviceContentVO.fullTimeChild.num=this.fullTimeCare;
          let childFullLength=this.fullTimeCare;
        if(childFullLength==1){
          serviceContentVO.fullTimeChild.children=[{monthAge:this.qzFirstMonthAge}];
        }else if(childFullLength==2){
          serviceContentVO.fullTimeChild.children=[{monthAge:this.qzFirstMonthAge},{monthAge:this.qzSecondMonthAge}];
        }else if(childFullLength==3){
          serviceContentVO.fullTimeChild.children=[{monthAge:this.qzFirstMonthAge},{monthAge:this.qzSecondMonthAge},{monthAge:this.qzThirdMonthAge}];
        }else if(childFullLength==4){
          serviceContentVO.fullTimeChild.children=[{monthAge:this.qzFirstMonthAge},{monthAge:this.qzSecondMonthAge},{monthAge:this.qzThirdMonthAge},{monthAge:this.qzFourthMonthAge}];
        }

      }
      // 照顾老人
      if(this.serviceContent.indexOf('4')!=-1){
         serviceContentVO.helpOldMan.num=this.totalCare;
         let oldManLength=this.totalCare;
        if(oldManLength==1){
          serviceContentVO.helpOldMan.oldManList=[
            {age:this.firstOldMan,
            selfCare:this.selfCareFormat(this.firstOldManState)  }
            ];
        }else if(oldManLength==2){
           serviceContentVO.helpOldMan.oldManList=[
            {age:this.firstOldMan,
            selfCare:this.selfCareFormat(this.firstOldManState)  },
             {age:this.secondOldMan,
            selfCare:this.selfCareFormat(this.secondOldManState)  },
            ];
        }else if(oldManLength==3){
           serviceContentVO.helpOldMan.oldManList=[
            {age:this.firstOldMan,
            selfCare:this.selfCareFormat(this.firstOldManState)  },
             {age:this.secondOldMan,
            selfCare:this.selfCareFormat(this.secondOldManState)  },
              {age:this.thirdOldMan,
            selfCare:this.selfCareFormat(this.thirdOldManState)  },
            ];
        }else if(oldManLength==4){
          serviceContentVO.helpOldMan.oldManList=[
            {age:this.firstOldMan,
            selfCare:this.selfCareFormat(this.firstOldManState)  },
             {age:this.secondOldMan,
            selfCare:this.selfCareFormat(this.secondOldManState)  },
              {age:this.thirdOldMan,
            selfCare:this.selfCareFormat(this.thirdOldManState)  },
             {age:this.fourthOldMan,
            selfCare:this.selfCareFormat(this.fourthOldManState)  },
            ];
        }
     }
      if(this.serviceContent.indexOf('6')!=-1){
         serviceContentVO.patient=this.sickState;
      }
      if(this.serviceContent.indexOf('7')!=-1){
        serviceContentVO.other=this.otherServices;
        
      }

     let area=(this.serviceContent.indexOf('1')!=-1?this.houseArea:'');
     let population=(this.serviceContent.indexOf('1')!=-1?this.residentPeople:'');
     let child=(this.serviceContent.indexOf('2')!=-1?this.assistedCare:'');
     let one_child=(child>=1?this.firstMonthAge:'');
     let two_child=(child>=2?this.secondMonthAge:'');
     let three_child=(child>=3?this.thirdMonthAge:'');
     let five_child=(child>=4?this.fourthMonthAge:'');
     let the_child=(this.serviceContent.indexOf('3')!=-1?this.fullTimeCare:'');
     let one_full=(the_child>=1?this.qzFirstMonthAge:'');
     let two_full=(the_child>=2?this.qzSecondMonthAge:'');
     let three_full=(the_child>=3?this.qzThirdMonthAge:'');
     let five_full=(the_child>=4?this.qzFourthMonthAge:'');
     let man=(this.serviceContent.indexOf('4')!=-1?this.totalCare:'');
     let one_man=(man>=1?this.firstOldMan:'');
     let two_man=(man>=2?this.secondOldMan:'');
     let three_man=(man>=3?this.thirdOldMan:'');
     let five_man=(man>=4?this.fourthOldMan:'');
    let the_illness=(this.serviceContent.indexOf('6')!=-1?this.sickState:'');
    let other=(this.serviceContent.indexOf('7')!=-1?this.otherServices:'');
   

       let simpleFormFields={
          employers:this.customerName,
          card:this.customerIdCard,
          address:this.cityAddress + this.detailAddress,
          phone:this.customerTel,
          emergency_contact:this.customerUrgentName+this.customerUrgentTel,
          nanny:this.servantName,
          certificate:this.servantIdCard,
          contact_address:this.servantCityAddress + this.servantDetailAddress,
          contact_phone:this.servantTel,
          emergency_phone:this.servantUrgentName+this.servantUrgentTel,
          service_type:this.serviceTypeNum,
          service_mode:this.serviceWay,
          service_content:this.serviceContent.join(','),
          area: area,
          population:population,
          child:child,
          one_child:one_child,
          two_child:two_child,
          three_child:three_child,
          five_child:five_child,
          the_child:the_child,
          one_full:one_full,
          two_full:two_full,
          three_full:three_full,
          five_full:five_full,
          man:man,
          one_man:one_man,
          two_man:two_man,
          three_man:three_man,
          five_man:five_man,
          the_illness:the_illness,
          other:other,
          year:(new Date(this.serviceStartDate)).getFullYear(),
          month:(new Date(this.serviceStartDate)).getMonth()+1,
          day:(new Date(this.serviceStartDate)).getDate(),
          years:(new Date(this.serviceEndDate)).getFullYear(),
          months:(new Date(this.serviceEndDate)).getMonth()+1,
          days:(new Date(this.serviceEndDate)).getDate(),
          holiday:this.monthlyRest,
          species:this.restWays,
          start_time:this.startWorkTime,
          end_time:this.endWorkTime,
          number_days:this.restDay.join(','),
          wage:this.salary,
          work_overtime:this.doublePay,
          holidays:this.tripleSalary,
          salary:this.salaryGiving,
          account:this.paymentMethodTpye,
          current_year:(new Date()).getFullYear(),
          current_make:(new Date()).getMonth()+1,
          current_day:(new Date()).getDate(),

       };
       if(man>='1'){
        if(this.firstOldManState=='1'){
          simpleFormFields.one_self= '√';
        }else if(this.firstOldManState=='2'){
          simpleFormFields.one_half= '√';
        }else if(this.firstOldManState=='3'){
           simpleFormFields.one_paralysis= '√';
        }
     }
     if(man>='2'){
       if(this.secondOldManState=='1'){
          simpleFormFields.two_self= '√';
        }else if(this.secondOldManState=='2'){
          simpleFormFields.two_half= '√';
        }else if(this.secondOldManState=='3'){
           simpleFormFields.two_paralysis= '√';
        }
     }
     if(man>='3'){
       if(this.thirdOldManState=='1'){
          simpleFormFields.three_self= '√';
        }else if(this.thirdOldManState=='2'){
          simpleFormFields.three_half= '√';
        }else if(this.thirdOldManState=='3'){
           simpleFormFields.three_paralysis= '√';
        }
     }
     if(man>='4'){
       if(this.fourthOldManState=='1'){
          simpleFormFields.five_self= '√';
        }else if(this.fourthOldManState=='2'){
          simpleFormFields.five_half= '√';
        }else if(this.fourthOldManState=='3'){
           simpleFormFields.five_paralysis= '√';
        }
     }
   
   if(this.paymentMethodTpye=='1'){
         simpleFormFields.bank_account=this.accountNum;
   }else if(this.paymentMethodTpye=='2'){
         simpleFormFields.alipay=this.accountNum;
   }else  if(this.paymentMethodTpye=='3'){
         simpleFormFields.wechat=this.accountNum;
   }else  if(this.paymentMethodTpye=='4'){
         simpleFormFields.other_account=this.accountNum;
   }
   console.log(simpleFormFields);
      let params = {
        name: '雇佣合同(保姆和客户)',
        simpleFormFields:simpleFormFields
      };
      Service.$axiosContractPreview(params).then(res => {
        if (res.data.errno == "-1") {
          this.$toast(res.data.data);
        } else if (res.data.errno == "0") {
           let contractParams={
        account: this.accountNum,
        contractNo: res.data.data.contractNo,
        customerAddr:this.cityAddress + this.detailAddress,
        customerContact:this.customerUrgentName,
        customerContactPhone:this.customerUrgentTel,
        customerIdCard: this.customerIdCard,
        customerName: this.customerName,
        customerTel: this.customerTel,
        fileId: res.data.data.fileId,
        legalMultiple:this.tripleSalary,
        monthOffDays:this.monthlyRest,
        operId: this.userInfo.id,
        operName: this.userInfo.customerName,
        orderNo:this.userInfo.orderNo,
        payType:this.paymentMethodTpye,
        remark: '',
        remuneration: this.salary,
        remunerationDate:this.salaryGiving,
        restDay:this.restDay.join(','),
        restDayMultiple: this.doublePay,
        servantAddr: this.servantCityAddress + this.servantDetailAddress,
        servantContact: this.servantUrgentName,
        servantContactPhone: this.servantUrgentTel,
        servantIdCard: this.servantIdCard,
        servantName:this.servantName,
        servantTel:this.servantTel,
       serviceContentVO: serviceContentVO,
       serviceModel:this.serviceWay,
       serviceStartTime: new Date(this.serviceStartDate),
      //  serviceEndTime: moment(this.serviceEndDate).format(),
       serviceEndTime:new Date(this.serviceEndDate),
      serviceType:this.serviceTypeNum,
      templateNo: res.data.data.templateNo,
      verify: this.isAuth=='1'?true:false,
      workStartTime:this.startWorkTime,
      workEndTime: this.endWorkTime,
      };
      console.log(contractParams);
        sessionStorage.setItem('contractInfo',JSON.stringify(contractParams))
          sessionStorage.setItem('pdfUrl',res.data.data.downloadUrl)
          // this.$router.push('/previewContract');
           this.$router.push('/pdfPreview');
          // this.$toast("提交成功");

          // this.$dialog
          //   .alert({
          //     message: "提交成功"
          //   })
          //   .then(() => {
          //     window.history.go(-1);
          //   });
        }
      });
    },
   

    onFailed: function(errinfo) {
      // this.dataSubmit();
      console.log(errinfo);
     let isValid=(((new Date(this.serviceEndDate)).getTime()-(new Date(this.serviceStartDate)).getTime())/(1000*60*60*24));
      console.log(isValid);
     
      // this.$toast('请检查页面输入内容');
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  background: #f5f5f5;
  padding: 0 0 1rem;
  /* margin:0 0 1rem; */
}
.form-module {
  margin: 0 0 10px;
}
.main-notice {
  margin: 0.88rem 0 0;
  height: 2.4rem;
  padding: 0 0.3rem 0.3rem;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  color: #0eaefc;
}
p.main-title {
  font-size: 0.36rem;
  height: 0.6rem;
  line-height: 0.6rem;
  font-weight: bold;
}
p.notice-detail {
  font-size: 0.26rem;
}
.form-item {
  background: #f5f5f5;
  padding: 0.4rem 0.3rem;
  line-height: 0.4rem;
  color: #333;
  font-size: 0.3rem;
}
.require-dot {
  color: #e3665e;
  font-size: 0.2rem;
  /* margin-right: -0.04rem; */
}
.tips {
  color: #777;
  font-size:11px;
  line-height: 0.26rem;
  margin: 10px;
}
p.address-tips {
  font-size: 12px;
  padding: 0.16rem;
  line-height: 0.36rem;
}
.field-wrapper {
  background: #eaeaea;
  padding: 0.2rem;
}
.field-wrapper .van-cell {
  border-radius: 0.12rem;
  overflow: hidden;
}
.radio-field-wrapper .van-radio {
  height: 0.92rem;
  border-bottom: 1px solid #ececec;
  padding: 0 0.46rem;
}
.radio-field-wrapper .van-cell {
  padding: 0;
}
.radio-field-wrapper .van-radio-group {
  width: 100%;
}
.protocol-item {
  display: flex;
  justify-content: flex-start;
  align-self: start;
}
.protocol-item p {
  margin: 0 0 0 0.06rem;
  text-align: justify;
}
.protocol-link {
  color: #0eaefc;
  font-size: 0.3rem;
}
.submit-wrapper {
  margin: 1rem 0.5rem 0;
}
.dialog-wrapper {
  padding: 0.26rem 0.46rem;
  font-size: 0.24rem;
}
.dialog-wrapper p {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.2rem 0;
}
.dialog-wrapper span.dialog-title {
  color: #333;
  font-weight: bold;
  flex: 1;
}
.dialog-wrapper span.dialog-content {
  color: #666;
  flex: 2;
  white-space: pre-wrap;
  word-break: break-all;
  text-align: right;
}
div.dialog-tips {
  color: #0eaefc;
  text-align: center;
  font-size: 0.2rem;
  margin: 0 -0.2rem;
}
>>> .van-field__label {
  width: 100px;
}
>>> .van-checkbox--horizontal {
  margin-bottom: 6px;
}
.read-tip>>> .van-checkbox__label{
  font-size:10px;
  color: #999;
  line-height: 16px;
}
.top-line{
    padding: 10px 16px;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    border-bottom:1px solid #DCE6EC;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
p.top-line .preview-blank{
  color:#08A1F9 ;
  display: flex;
  align-items: center;
}
p.top-line .preview-blank img{
  width: 18px;
  margin-right:4px;
}
</style>
