<template>
  <page-meta
    :page-style="
      'overflow:' +
      (adminListShow || configshow || areaShow ? 'hidden' : 'visible')
    "
  ></page-meta>
  <view class="containers">
    <!-- 拜访须知 -->
    <u-popup
      :show="configshow"
      :mask-close-able="false"
      class="configwrap"
      mode="bottom"
    >
      <view class="configtitle">
        {{ configInfo.name }}
      </view>
      <view class="configvalue">
        <view v-html="configInfo.value"> </view>
        <view style="text-align: center">
          <view class="configbtn" @click="closeConfig">
            <view>确认/Confirm</view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 普通访客 先选择区域 -->
    <u-popup :show="areaShow" class="configwrap" mode="bottom">
      <view class="configtitle label-with-en">
        <view>前往区域</view>
        <view class="en-text">Visit Area</view>
      </view>
      <block v-if="visitArea.length > 0">
        <view class="configvalue areavalue">
          <uni-data-checkbox
            mode="button"
            @change="changeVisitArea"
            v-model="form.visit_area_id"
            :localdata="visitArea"
            :map="{ text: 'name', value: 'id' }"
          />
        </view>
        <button
          class="areabtn button-with-en"
          @click="closeArea"
          size="large"
          type="primary"
        >
          <view>确认/Confirm</view>
        </button>
      </block>

      <view class="configvalue configload" v-else>
        <view class="label-with-en">
          <text>数据加载中...</text>
          <text class="en-text">Loading data...</text>
        </view>
        <u-icon
          @click="getVisitArea"
          name="reload"
          color="#2979ff"
          size="28"
        ></u-icon>
      </view>
    </u-popup>

    <view class="steps">
      <uni-steps :options="steps" :active="stepActive" active-color="#4f607e" />
    </view>
    <uni-forms ref="formdata" :model="form" :rules="rules" labelWidth="140px">
      <view class="formtext label-with-en">
        <view>拜访信息</view>
        <view class="en-text">Visit Information</view>
      </view>
      <uni-forms-item required name="start_date">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>开始日期</text>
            <text class="en-text">Start Date</text>
          </view>
        </template>
        <uni-datetime-picker
          type="date"
          :start="toadyStart"
          return-type="string"
          v-model="form.start_date"
          @change="onStartDateChange"
          style="width: 100%"
        />
      </uni-forms-item>
      <uni-forms-item required name="end_date">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>结束日期</text>
            <text class="en-text">End Date</text>
          </view>
        </template>
        <uni-datetime-picker
          type="date"
          :start="toadyStart"
          return-type="string"
          v-model="form.end_date"
          @change="onEndDateChange"
          style="width: 100%"
        />
      </uni-forms-item>
      <uni-forms-item required name="time">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>到访时间</text>
            <text class="en-text">Time</text>
          </view>
        </template>
        <uni-data-select
          v-model="form.time"
          :localdata="timeOptions"
          placeholder="请选择时间 / Please select time"
          @change="onTimeChange"
        />
      </uni-forms-item>
      <!-- <uni-forms-item required name="visit_time_id">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>到访时段</text>
            <text class="en-text">Visit Time</text>
          </view>
        </template>
        <uni-data-checkbox
          v-model="form.visit_time_id"
          :localdata="visitTime"
          :map="{ text: 'visitTimeRange', value: 'id' }"
        />
      </uni-forms-item> -->
      <uni-forms-item required name="visit_area_id">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>前往区域</text>
            <text class="en-text">Visit Area</text>
          </view>
        </template>
        <uni-data-checkbox
          @change="changeVisitArea"
          v-model="form.visit_area_id"
          :localdata="visitArea"
          :map="{ text: 'name', value: 'id' }"
        />
      </uni-forms-item>
      <uni-forms-item v-if="form.type == 1 || form.type == 3">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>到访事由</text>
            <text class="en-text">Visit Reason</text>
          </view>
        </template>
        <uni-data-select v-model="form.reason" :localdata="reasonList">
        </uni-data-select>
      </uni-forms-item>
      <uni-forms-item v-if="form.type == 2">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>施工开始时段</text>
            <text class="en-text">Construction Start Time</text>
          </view>
        </template>
        <uni-datetime-picker
          type="date"
          :start="toadyStart"
          return-type="string"
          v-model="form.work_start_time"
        />
      </uni-forms-item>
      <uni-forms-item v-if="form.type == 2">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>施工结束时段</text>
            <text class="en-text">Construction End Time</text>
          </view>
        </template>
        <uni-datetime-picker
          type="date"
          :start="toadyStart"
          return-type="string"
          v-model="form.work_end_time"
        />
      </uni-forms-item>
      <!-- <uni-forms-item label="车牌号" v-if="form.type==3"> -->
      <uni-forms-item required name="plate" v-if="form.type == 3">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>车辆类型</text>
            <text class="en-text">Vehicle Type</text>
          </view>
        </template>
        <uni-data-checkbox
          v-model="form.plate"
          :localdata="parkAreaList"
          :map="{ text: 'value', value: 'value' }"
        />
      </uni-forms-item>
      <uni-forms-item>
        <template slot="label">
          <view class="label-with-en-inline">
            <text>备注</text>
            <text class="en-text">Remark</text>
          </view>
        </template>
        <uni-easyinput
          type="textarea"
          v-model="form.remark"
          placeholder="请输入自我备注 / Please enter remarks"
        />
      </uni-forms-item>
      <view
        class="formtext"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <view class="label-with-en" style="flex: 1">
          <text>拜访人信息</text>
          <text class="en-text">Visitor Information</text>
        </view>
        <button
          style="background-color: #4f607e !important"
          type="primary"
          size="mini"
          @click="pullVisitorInfo"
          class="button-mini-with-en"
        >
          <view>拉取拜访人信息</view>
          <view class="en-text">Pull Visitor Info</view>
        </button>
      </view>
      <uni-forms-item required name="name">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>姓名</text>
            <text class="en-text">Name</text>
          </view>
        </template>
        <uni-easyinput
          v-model="form.name"
          placeholder="请输入姓名 / Please enter name"
        />
      </uni-forms-item>
      <uni-forms-item required name="mobile">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>联系电话</text>
            <text class="en-text">Phone Number</text>
          </view>
        </template>
        <uni-easyinput
          v-model="form.mobile"
          placeholder="请输入联系电话 / Please enter phone number"
        />
      </uni-forms-item>
      <uni-forms-item required name="credent">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>证件类型</text>
            <text class="en-text">ID Type</text>
          </view>
        </template>
        <uni-data-select v-model="form.credent" :localdata="credentList">
        </uni-data-select>
      </uni-forms-item>
      <uni-forms-item required name="idcard" v-if="form.credent == 1">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>证件号码</text>
            <text class="en-text">ID Card Number</text>
          </view>
        </template>
        <uni-easyinput
          type="idcard"
          v-model="form.idcard"
          placeholder="请输入证件号码 / Please enter ID card number"
        />
      </uni-forms-item>
      <uni-forms-item required name="passcard" v-if="form.credent == 2">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>护照号码</text>
            <text class="en-text">Passport Number</text>
          </view>
        </template>
        <uni-easyinput
          type="text"
          v-model="form.passcard"
          placeholder="请输入证件号码 / Please enter passport number"
        />
      </uni-forms-item>
      <uni-forms-item required name="company_name">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>单位名称</text>
            <text class="en-text">Company Name</text>
          </view>
        </template>
        <uni-easyinput
          v-model="form.company_name"
          placeholder="请输入单位名称 / Please enter company name"
        />
      </uni-forms-item>
      <!-- <uni-forms-item required name="cda" v-if="form.type==1&&visitAreaText=='生产区'">
				<template slot="label">
					<view class="label-with-en-inline">
						<text>CDA编号</text>
						<text class="en-text">CDA Number</text>
					</view>
				</template>
				<uni-easyinput type='textarea' v-model="form.cda" placeholder="请输入CDA编号(如无注明原因) / Please enter CDA number (if none, specify reason)" />
			</uni-forms-item> -->
      <uni-forms-item v-if="form.type != 3">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>到访车辆</text>
            <text class="en-text">Visiting Vehicles</text>
          </view>
        </template>
        <view style="text-align: right">
          <button
            style="background-color: #4f607e"
            type="primary"
            size="mini"
            @click="form.cars.push('')"
            class="button-mini-with-en"
          >
            <view>新增车辆</view>
            <view class="en-text">Add Vehicle</view>
          </button>
        </view>

        <view
          v-for="(item, index) in form.cars"
          :key="index"
          class="justify-between align-center"
          style="margin-bottom: 20rpx"
        >
          <uni-easyinput
            disabled
            @tap="(plateShow = true), (carindex = index)"
            v-model.trim="form.cars[index]"
            placeholder="请输入到访车辆 / Please enter license plate"
          />
          <view
            @click="form.cars.splice(index, 1)"
            style="color: red; margin-left: 20rpx"
            class="label-with-en-inline-del"
          >
            <text>删除</text>
            <text class="en-text">Delete</text>
          </view>
        </view>
        <plate-input
          v-if="plateShow"
          :plate="form.cars[carindex]"
          @export="setCars"
          @close="plateShow = false"
        />
      </uni-forms-item>
      <uni-forms-item required name="cars" v-else>
        <template slot="label">
          <view class="label-with-en-inline">
            <text>到访车辆</text>
            <text class="en-text">Visiting Vehicles</text>
          </view>
        </template>
        <view style="text-align: right">
          <button
            style="background-color: #4f607e"
            type="primary"
            size="mini"
            @click="form.cars.push('')"
            class="button-mini-with-en"
          >
            <view>新增车辆</view>
            <view class="en-text">Add Vehicle</view>
          </button>
        </view>

        <view
          v-for="(item, index) in form.cars"
          :key="index"
          class="justify-between align-center"
          style="margin-bottom: 20rpx"
        >
          <uni-easyinput
            disabled
            @tap="(plateShow = true), (carindex = index)"
            v-model.trim="form.cars[index]"
            placeholder="请输入到访车辆 / Please enter license plate"
          />
          <view
            @click="form.cars.splice(index, 1)"
            style="color: red; margin-left: 20rpx"
            class="label-with-en-inline-del"
          >
            <text>删除</text>
            <text class="en-text">Delete</text>
          </view>
        </view>
        <plate-input
          v-if="plateShow"
          :plate="form.cars[carindex]"
          @export="setCars"
          @close="plateShow = false"
        />
      </uni-forms-item>
      <template>
        <view
          class="formtext"
          style="display: flex; justify-content: space-between"
        >
          <view class="label-with-en">
            <text>随访人员</text>
            <text class="en-text">Follow-up Personnel</text>
          </view>
          <button
            style="background-color: #4f607e !important"
            type="primary"
            size="mini"
            @click="
              $refs.showRight.open(),
                (follw_people_obj = { credent: 1 }),
                (follow_people_index = -1)
            "
            class="button-mini-with-en"
          >
            <view>新增随访人员</view>
            <view class="en-text">Add Personnel</view>
          </button>
        </view>
        <!-- 随访人员表格 -->
        <template>
          <uni-table ref="table" border emptyText="暂无更多数据 / No more data">
            <uni-tr>
              <uni-th width="160" align="center">
                <view class="label-with-en-table">
                  <text>操作</text>
                  <text class="en-text">Action</text>
                </view>
              </uni-th>
              <uni-th width="120" align="center">
                <view class="label-with-en-table">
                  <text>姓名</text>
                  <text class="en-text">Name</text>
                </view>
              </uni-th>
              <uni-th width="120" align="left">
                <view class="label-with-en-table">
                  <text>联系电话</text>
                  <text class="en-text">Phone</text>
                </view>
              </uni-th>
              <uni-th width="120" align="center">
                <view class="label-with-en-table">
                  <text>证件类型</text>
                  <text class="en-text">ID Type</text>
                </view>
              </uni-th>
              <uni-th width="120" align="left">
                <view class="label-with-en-table">
                  <text>证件号码</text>
                  <text class="en-text">ID Number</text>
                </view>
              </uni-th>
            </uni-tr>
            <uni-tr
              style="vertical-align: middle"
              v-for="(item, index) in form.follw_people"
              :key="index"
            >
              <uni-td>
                <view class="uni-group">
                  <view
                    @click="editFollwPeople(index)"
                    style="color: #4f607e; margin-right: 8px"
                    class="label-with-en-inline-del"
                  >
                    <text>修改</text>
                    <text class="en-text">Edit</text>
                  </view>
                  <view
                    @click="form.follw_people.splice(index, 1)"
                    style="color: red; margin-right: 8px"
                    class="label-with-en-inline-del"
                  >
                    <text>删除</text>
                    <text class="en-text">Delete</text>
                  </view>
                </view>
              </uni-td>
              <uni-td>{{ item.name }}</uni-td>
              <uni-td>
                <view class="name">{{ item.mobile }}</view>
              </uni-td>
              <uni-td align="center">{{
                item.credent == 1 ? "身份证 / ID Card" : "护照 / Passport"
              }}</uni-td>
              <uni-td align="center">{{ item.idcard }}</uni-td>
            </uni-tr>
          </uni-table>
        </template>
      </template>

      <!-- <uni-forms-item label="长访客申请">
				<uni-data-checkbox v-model="form.long_time" :localdata="longList" :map="{text:'value',value:'id'}" />
			</uni-forms-item>
			<template v-if="form.long_time==1">
				<uni-forms-item label="开始日期">
					<uni-datetime-picker type="date" :start="toadyStart" return-type="string"
						v-model="form.start_date" />
				</uni-forms-item>
				<uni-forms-item label="结束日期">
					<uni-datetime-picker type="date" :start="toadyStart" return-type="string" v-model="form.end_date" />
				</uni-forms-item>
			</template> -->
      <view
        class="formtext label-with-en"
        v-if="form.type == 1 || form.type == 2"
      >
        <view>被访人信息</view>
        <view class="en-text">Host Information</view>
      </view>
      <uni-forms-item
        required
        name="acceptName"
        v-if="form.type == 1 || form.type == 2"
      >
        <template slot="label">
          <view class="label-with-en-inline">
            <text>被访人</text>
            <text class="en-text">Host</text>
          </view>
        </template>
        <uni-easyinput
          @clear="clearAccept('accept')"
          disabled
          v-model="form.acceptName"
          @tap="adminListShowOpen('accept')"
          placeholder="请选择联系人员 / Please select contact person"
        />
      </uni-forms-item>

      <view class="formtext label-with-en" v-if="form.type == 3">
        <view>被访人信息</view>
        <view class="en-text">Consignee Information</view>
      </view>
      <uni-forms-item v-if="form.type == 3" required name="goodsName">
        <template slot="label">
          <view class="label-with-en-inline">
            <text>被访人</text>
            <text class="en-text">Consignee</text>
          </view>
        </template>
        <uni-easyinput
          @clear="clearAccept('goods')"
          disabled
          v-model="form.goodsName"
          @tap="adminListShowOpen('goods')"
          placeholder="请选择联系人员 / Please select contact person"
        />
      </uni-forms-item>

      <!-- <view class="formtext label-with-en" v-if="visitAreaText=='生产区'">
				<view>陪同人信息</view>
				<view class="en-text">Accompanying Personnel Information</view>
			</view>
			<uni-forms-item required name="accompanyName" v-if="visitAreaText=='生产区'">
				<template slot="label">
					<view class="label-with-en-inline">
						<text>陪同人</text>
						<text class="en-text">Accompanying Personnel</text>
					</view>
				</template>
				<uni-easyinput @clear="clearAccept('accompany')" disabled v-model="form.accompanyName"
					@tap="adminListShowOpen('accompany')" placeholder="请选择联系人员 / Please select contact person" />
			</uni-forms-item> -->
      <qianziyu-select
        :show="adminListShow"
        type="radio"
        :popupTitle="'联系人员/Contact Personnel'"
        name="cworkStationName"
        :dataLists="adminList"
        placeholder="输入联系人具体姓名或手机号搜索"
        @search="selectSearch"
        @submit="submitAccept"
        placeholderEnText="请输入联系人具体姓名或手机号搜索/Enter name or phone number to search"
        @cancel="cancelAccept"
      />
    </uni-forms>
    <button
      type="primary"
      style="background-color: #4f607e !important"
      @click="getStudy"
      class="button-with-en-submit"
    >
      <view>{{ goStudy }} / Submit</view>
      <!-- <view class="en-text"></view> -->
    </button>

    <!-- 随访人员弹出 -->
    <uni-drawer ref="showRight" mode="right" :mask-click="true" :width="320">
      <uni-forms
        ref="peopleform"
        :model="follw_people_obj"
        :rules="peoplerules"
        labelWidth="80px"
      >
        <uni-forms-item required name="name">
          <template slot="label">
            <view class="label-with-en-inline">
              <text>姓名</text>
              <text class="en-text">Name</text>
            </view>
          </template>
          <uni-easyinput
            v-model="follw_people_obj.name"
            placeholder="请输入姓名 / Please enter name"
          />
        </uni-forms-item>
        <uni-forms-item required name="mobile">
          <template slot="label">
            <view class="label-with-en-inline">
              <text>联系电话</text>
              <text class="en-text">Phone Number</text>
            </view>
          </template>
          <uni-easyinput
            v-model="follw_people_obj.mobile"
            placeholder="请输入联系电话 / Please enter phone number"
          />
        </uni-forms-item>
        <uni-forms-item required name="credent">
          <template slot="label">
            <view class="label-with-en-inline">
              <text>证件类型</text>
              <text class="en-text">ID Type</text>
            </view>
          </template>
          <uni-data-select
            @change="chooseCredent"
            v-model="follw_people_obj.credent"
            :localdata="credentList"
          >
          </uni-data-select>
        </uni-forms-item>
        <uni-forms-item
          required
          name="idcard"
          v-if="follw_people_obj.credent == 1"
        >
          <template slot="label">
            <view class="label-with-en-inline">
              <text>证件号码</text>
              <text class="en-text">ID Card Number</text>
            </view>
          </template>
          <uni-easyinput
            type="idcard"
            v-model="follw_people_obj.idcard"
            placeholder="请输入证件号码 / Please enter ID card number"
          />
        </uni-forms-item>
        <uni-forms-item
          required
          name="passcard"
          v-if="follw_people_obj.credent == 2"
        >
          <template slot="label">
            <view class="label-with-en-inline">
              <text>护照号码</text>
              <text class="en-text">Passport Number</text>
            </view>
          </template>
          <uni-easyinput
            type="text"
            v-model="follw_people_obj.passcard"
            placeholder="请输入证件号码 / Please enter passport number"
          />
        </uni-forms-item>
      </uni-forms>
      <view
        class="uni-group"
        style="text-align: right; display: flex; justify-content: space-between"
      >
        <button @click="closeDrawer" size="mini" class="button-mini-with-en">
          <view>取消/Cancel</view>
        </button>
        <button
          @click="pushFollowPeople"
          size="mini"
          type="primary"
          style="background-color: #4f607e !important; margin-left: 8px"
          class="button-mini-with-en"
        >
          <view>确认/Confirm</view>
        </button>
      </view>
    </uni-drawer>
  </view>
</template>

<script>
import plateInput from "@/uni_modules/uni-plate-input/uni-plate-input.vue";
import qianziyuSelect from "@/components/qianziyu-select/qianziyu-select.vue";
export default {
  components: {
    plateInput,
    qianziyuSelect,
  },
  data() {
    return {
      steps: [
        {
          title: "填报\nRegistration",
        },
        {
          title: "学习\nStudy",
        },
        {
          title: "完成\nComplete",
        },
      ],
      stepActive: 0,
      configshow: false,
      areaShow: false,
      configInfo: {},
      configKey: "ptfk",
      toadyStart: "",
      dateRange: [],
      carindex: 0,
      plateShow: false,
      adminListShow: false,
      adminKeyword: "",
      acceptType: "",
      acceptName: "",
      goodsName: "",
      visitAreaText: "",
      timeOptions: [],
      form: {
        type: 1,
        date: "",
        visit_time_id: "",
        time: "",
        visit_area_id: "",
        reason: "",
        plate: "",
        remark: "",
        name: "",
        mobile: "",
        credent: 1,
        idcard: "",
        passcard: "",
        company_name: "",
        cars: [],
        follw_people: [],
        long_time: 0,
        start_date: "",
        end_date: "",
        accompany_id: "",
        accpet_department_id: "",
        accept_admin_id: "",
        accept_goods_admin_id: "",
        acceptName: "",
        goodsName: "",
        accompanyName: "",
      },
      follw_people_obj: {
        name: "",
        mobile: "",
        credent: 1,
        idcard: "",
      },
      follow_people_index: -1,
      rules: {
        start_date: {
          rules: [
            {
              required: true,
              errorMessage: "请选择开始日期 / Please select start date",
            },
          ],
        },
        end_date: {
          rules: [
            {
              required: true,
              errorMessage: "请选择结束日期 / Please select end date",
            },
          ],
        },
        visit_time_id: {
          rules: [
            {
              required: true,
              errorMessage: "请选择拜访时段 / Please select visit time",
            },
          ],
        },
        visit_area_id: {
          rules: [
            {
              required: true,
              errorMessage: "请选择前往区域 / Please select visit area",
            },
          ],
        },
        time: {
          rules: [
            {
              required: true,
              errorMessage: "请选择具体时间 / Please select time",
            },
          ],
        },
        plate: {
          rules: [
            {
              required: true,
              errorMessage: "请填写车辆 / Please select vehicle type",
            },
          ],
        },
        name: {
          rules: [
            {
              required: true,
              errorMessage: "姓名不能为空 / Name cannot be empty",
            },
          ],
        },
        mobile: {
          rules: [
            {
              required: true,
              errorMessage: "联系电话不能为空 / Phone number cannot be empty",
            },
            {
              pattern: "^[1][3-9][\\d]{9}",
              errorMessage: "联系号码格式错误 / Invalid phone number format",
            },
          ],
        },
        credent: {
          rules: [
            {
              required: true,
              errorMessage: "请选择身份证类型 / Please select ID type",
            },
          ],
        },
        idcard: {
          rules: [
            {
              // 主访客身份证：统一改为“非必填，填了就校验格式”
              validateFunction: (rule, value, data, callback) => {
                const pattern =
                  /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                if (!value) {
                  callback();
                  return;
                }
                if (!pattern.test(value)) {
                  callback(
                    new Error(
                      "身份证格式错误 / Invalid ID card format"
                    )
                  );
                  return;
                }
                callback();
              },
            },
          ],
        },
        // passcard: {
        //   rules: [
        //     {
        //       required: true,
        //       errorMessage:
        //         "护照号码不能为空 / Passport number cannot be empty",
        //     },
        //     {
        //       pattern: "/^([a-zA-z]|[0-9]){5,17}$/",
        //       errorMessage: "护照格式错误 / Invalid passport format",
        //     },
        //   ],
        // },
        company_name: {
          rules: [
            {
              required: true,
              errorMessage: "单位名称不能为空 / Company name cannot be empty",
            },
          ],
        },
        // cda: {
        // 	rules: [{
        // 		required: true,
        // 		errorMessage: 'CDA编号不能为空 / CDA number cannot be empty'
        // 	}]
        // },
        cars: {
          rules: [
            {
              required: true,
              errorMessage: "车辆不能为空 / License plate cannot be empty",
            },
          ],
        },
        acceptName: {
          rules: [
            {
              required: true,
              errorMessage: "请选择被访人 / Please select host",
            },
          ],
        },
        // accompanyName: {
        // 	rules: [{
        // 		required: true,
        // 		errorMessage: '请选择陪同人 / Please select accompanying personnel'
        // 	}]
        // },
        goodsName: {
          rules: [
            {
              required: true,
              errorMessage: "请选择被访人 / Please select consignee",
            },
          ],
        },
      },
      peoplerules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage:
                "随访人姓名不能为空 / Follower name cannot be empty",
            },
          ],
        },
        mobile: {
          rules: [
            {
              required: true,
              errorMessage: "联系电话不能为空 / Phone number cannot be empty",
            },
            {
              pattern: "^[1][3-9][\\d]{9}",
              errorMessage: "联系号码格式错误 / Invalid phone number format",
            },
          ],
        },
        credent: {
          rules: [
            {
              required: true,
              errorMessage: "请选择身份证类型 / Please select ID type",
            },
          ],
        },
        idcard: {
          rules: [
            {
              validateFunction: (rule, value, data, callback) => {
                const pattern =
                  /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                // 随访人身份证：非必填，填了才校验格式
                if (!value) {
                  callback();
                  return;
                }
                if (!pattern.test(value)) {
                  callback(
                    new Error(
                      "身份证格式错误 / Invalid ID card format"
                    )
                  );
                  return;
                }
                callback();
              },
            },
          ],
        },
        // passcard: {
        //   rules: [
        //     {
        //       required: true,
        //       errorMessage:
        //         "护照号码不能为空 / Passport number cannot be empty",
        //     },
        //     {
        //       pattern: "/^([a-zA-z]|[0-9]){5,17}$/",
        //       errorMessage: "护照格式错误 / Invalid passport format",
        //     },
        //   ],
        // },
      },
      // 单选数据源
      visitTime: [],
      visitArea: [],
      reasonList: [],
      parkAreaList: [],
      credentList: [
        {
          value: 1,
          text: "身份证 / ID Card",
        },
        {
          value: 2,
          text: "护照 / Passport",
        },
      ],
      longList: [
        {
          id: 0,
          value: "否",
        },
        {
          id: 1,
          value: "是",
        },
      ],
      adminList: [],
      isCall: "", // 是否待邀约
      goStudy: "提交",
      isStudy: false,
    };
  },
  onLoad(options) {
    // uni.navigateTo({
    // 	url:'/pages/visit/testStudy?type=3'
    // })
    // return
    this.toadyStart = new Date();
    this.form.type = options.type;
    //this.areaShow = options.type == 1 ? true : false
    this.configKey =
      options.type == 1 ? "ptfk" : options.type == 2 ? "sgfk" : "wlcl";
    this.isCall = options.iscall ? options.iscall : "";
    // this.goStudy = this.isCall == 'call' ? '提交' : ''
    this.form.audit_status = this.isCall == "call" ? 1 : 0;
    // 只有 施工需要提醒
    if (options.type == 2) {
      this.showStudy();
    }

    // if (options.type == 2 || options.type == 3) {
    this.getConfig();
    // }
    this.init();

    // 设置默认日期为当天
    const today = new Date().toISOString().split("T")[0];
    this.form.start_date = today;
    this.form.end_date = today;
    this.form.date = today;
    this.form.long_time = 0;

    if (uni.getStorageSync("formdata")) {
      this.form = uni.getStorageSync("formdata");
      if (!this.form.time) {
        this.form.time = "";
      }
    }
    // this.getAdminList()
  },
  onReady() {},
  methods: {
    init() {
      this.getVisitArea();
      this.getVisitTime();
      this.getReason();
      this.getPark();
    },
    adminListShowOpen(type) {
      this.acceptType = type;
      this.adminKeyword = "";
      // this.getAdminList()

      this.adminListShow = true;
    },
    cancelAccept() {
      console.log("123");
      this.adminKeyword = "";
      this.adminList = [];
      this.adminListShow = false;
    },
    selectSearch(e) {
      this.adminKeyword = e;
      this.getAdminList();
    },
    clearAccept(type) {
      if (type == "accept") {
        this.form.accept_admin_id = "";
        this.form.acceptName = "";
      } else if (type == "goods") {
        this.form.accept_goods_admin_id = "";
        this.form.goodsName = "";
      } else {
        this.form.accompany_id = "";
        this.form.accompanyName = "";
      }
    },
    submitAccept(e) {
      console.log(e);
      this.form.accompany_id = e.id;
      this.form.accompanyName = e.name;
      if (this.acceptType == "accept") {
        this.form.accept_admin_id = e.id;
        this.form.accpet_department_id = e.department_id;
        this.form.acceptName = e.name;
        // if (this.visitAreaText == '非生产区'||this.visitAreaText == '研发R&D') {
        // 	this.form.accompany_id = e.id
        // 	this.form.accompanyName = e.name
        // }
      } else if (this.acceptType == "goods") {
        this.form.accept_goods_admin_id = e.id;
        this.form.accept_admin_id = e.id;
        this.form.accpet_department_id = e.department_id;
        this.form.goodsName = e.name;
        // if (this.visitAreaText == '非生产区'||this.visitAreaText == '研发R&D') {
        // 	this.form.accompany_id = e.id
        // 	this.form.accompanyName = e.name
        // }
      } else {
        this.form.accompany_id = e.id;
        this.form.accompanyName = e.name;
      }

      this.adminListShow = false;
    },
    setCars(e) {
      this.form.cars[this.carindex] = e;
      this.plateShow = false;
      console.log(e, this.carindex);
    },

    closeConfig() {
      this.configshow = false;
    },
    closeArea() {
      if (!this.form.visit_area_id) {
        this.util.alert("请先选择前往区域 / Please select visit area first");
        return;
      }
      if (this.visitAreaText == "生产区") {
        this.configKey = "ptfk";
        this.getConfig();
        this.areaShow = false;
      } else if (this.visitAreaText == "研发R&D") {
        this.configKey = "ptfk";
        this.getConfig();
        this.areaShow = false;
      } else {
        this.configKey = "ptfk";
        this.getConfig();
        this.areaShow = false;
      }
    },
    async getConfig() {
      let that = this;
      // util.request()
      this.util.request({
        api: "/api/mobile/user/config",
        data: {
          page: 1,
          page_size: 99,
        },
        // requestType: 'bd',
        utilSuccess: function (res) {
          console.log(res);
          let data = res;
          for (let k of data) {
            if (k.key == that.configKey) {
              that.configInfo = k;
            }
          }
          that.configshow = true;
        },
        utilFail: function (res) {},
      });
    },
    // 获取单选数据

    getVisitArea() {
      let that = this;
      // that.visitArea = [{
      // 	name: '非生产区',
      // 	id: 3
      // }, {
      // 	name: '生产区',
      // 	id: 4
      // }, {
      // 	name: "研发R&D",
      // 	id: 5
      // }]
      this.util.request({
        api: "/api/mobile/visit/visit-area",
        data: {},
        utilSuccess: function (res) {
          console.log(res);
          that.visitArea = res;
        },
        utilFail: function (res) {},
      });
    },
    changeVisitArea(e) {
      console.log(e);
      this.visitAreaText = e.detail.data.name;
    },
    onTimeChange(e) {
      const selected =
        (e && e.detail && e.detail.value) ||
        (typeof e === "string" ? e : "") ||
        this.form.time;
      if (!selected) {
        return;
      }
      this.form.time = selected;
      this.matchVisitTimeId(selected);
    },
    matchVisitTimeId(timeStr) {
      if (!timeStr || !this.visitTime || this.visitTime.length === 0) {
        return;
      }
      const current = this.timeToMinutes(timeStr);
      if (current === null) {
        return;
      }
      const endMatch = this.visitTime.find(
        (item) => this.timeToMinutes(item.end_time) === current
      );
      if (endMatch) {
        this.form.visit_time_id = endMatch.id;
        return;
      }
      const rangeMatch = this.visitTime.find((item) => {
        const start = this.timeToMinutes(item.start_time);
        const end = this.timeToMinutes(item.end_time);
        return (
          start !== null && end !== null && current >= start && current < end
        );
      });
      if (rangeMatch) {
        this.form.visit_time_id = rangeMatch.id;
      }
    },
    generateTimeOptions(list) {
      if (!list || list.length === 0) {
        return [];
      }
      const startMinutes = list
        .map((item) => this.timeToMinutes(item.start_time))
        .filter((item) => item !== null);
      const endMinutes = list
        .map((item) => this.timeToMinutes(item.end_time))
        .filter((item) => item !== null);
      if (!startMinutes.length || !endMinutes.length) {
        return [];
      }
      const minTime = Math.min(...startMinutes);
      const maxTime = Math.max(...endMinutes);
      const options = [];
      const step = 30;
      for (let minutes = minTime; minutes <= maxTime; minutes += step) {
        const timeText = this.minutesToTime(minutes);
        options.push({
          text: timeText,
          value: timeText,
        });
      }
      const maxText = this.minutesToTime(maxTime);
      if (!options.find((option) => option.value === maxText)) {
        options.push({
          text: maxText,
          value: maxText,
        });
      }
      return options;
    },
    timeToMinutes(timeStr) {
      if (!timeStr || typeof timeStr !== "string") {
        return null;
      }
      const parts = timeStr.split(":");
      if (parts.length !== 2) {
        return null;
      }
      const hour = parseInt(parts[0], 10);
      const minute = parseInt(parts[1], 10);
      if (isNaN(hour) || isNaN(minute)) {
        return null;
      }
      return hour * 60 + minute;
    },
    minutesToTime(minutes) {
      if (typeof minutes !== "number") {
        return "";
      }
      const hour = Math.floor(minutes / 60)
        .toString()
        .padStart(2, "0");
      const minute = (minutes % 60).toString().padStart(2, "0");
      return `${hour}:${minute}`;
    },
    getVisitTime() {
      let that = this;
      // util.request()
      this.util.request({
        api: "/api/mobile/visit/visit-time",
        data: {},
        utilSuccess: function (res) {
          for (var m of res) {
            m.visitTimeRange = m.start_time + "-" + m.end_time;
          }
          console.log(res);
          that.visitTime = res;
          that.timeOptions = that.generateTimeOptions(res);
          if (!that.form.time && that.timeOptions.length > 0) {
            that.form.time = that.timeOptions[0].value;
          }
          if (that.form.time) {
            that.matchVisitTimeId(that.form.time);
          }
        },
        utilFail: function (res) {},
      });
    },
    getReason() {
      let that = this;
      // util.request()
      this.util.request({
        api: "/api/admin/parameter/show",
        data: {
          number: "reasonList",
        },
        utilSuccess: function (res) {
          let arr = [];
          console.log(res);
          for (var m of res.detail) {
            arr.push({
              text: m.value,
              value: m.value,
            });
          }
          that.reasonList = arr;
        },
        utilFail: function (res) {},
      });
    },
    getPark() {
      let that = this;
      // util.request()
      this.util.request({
        api: "/api/admin/parameter/show",
        data: {
          number: "parkArea",
        },
        utilSuccess: function (res) {
          that.parkAreaList = res.detail;
        },
        utilFail: function (res) {},
      });
    },
    async getAdminList() {
      let that = this;
      // util.request()
      this.util.request({
        api: "/api/admin/other/admin-user-list",
        data: {
          page_size: 99,
          page: 1,
          keyword: this.adminKeyword,
        },
        utilSuccess: function (res) {
          that.adminList = res.data;
        },
        utilFail: function (res) {},
      });
    },
    //
    chooseCredent(e) {
      console.log(e);
    },
    // 随访人员弹出
    editFollwPeople(index) {
      this.follow_people_index = index;
      this.follw_people_obj = this.form.follw_people[index];
      this.$refs.showRight.open();
    },
    closeDrawer() {
      this.follw_people_obj = {};
      this.follow_people_index = -1;
      this.$refs.showRight.close();
    },
    pushFollowPeople() {
      console.log("this.follw_people_obj", this.follw_people_obj);
      if (this.follw_people_obj.credent == 2) {
        this.follw_people_obj.idcard = this.follw_people_obj.passcard;
      }
      // 随访人员：如选择身份证(credent == 1)，填写了身份证则先做准确性校验
      if (
        this.follw_people_obj.credent == 1 &&
        this.follw_people_obj.idcard
      ) {
        const pattern =
          /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if (!pattern.test(this.follw_people_obj.idcard)) {
          this.util.alert(
            "身份证格式错误 / Invalid ID card format"
          );
          return;
        }
      }
      this.$refs["peopleform"]
        .validate()
        .then((res) => {
          if (this.follow_people_index > -1) {
            this.form.follw_people[this.follow_people_index] =
              this.follw_people_obj;
          } else {
            this.form.follw_people.push(this.follw_people_obj);
          }
          this.follow_people_index = -1;
          this.$refs.showRight.close();
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 去学习
    // 获取访客学习状态
    async showStudy() {
      this.util.alert(
        "请确保每位访客都已通过学习培训，方可提交拜访 / Please ensure all visitors have completed the training before submitting the visit"
      );
      // let that = this
      // let id_arr = []
      // id_arr.push(this.form.idcard)
      // for(var k of this.form.follw_people){
      // 	id_arr.push(k.idcard)
      // }
      // this.util.request({
      // 	api: '/api/mobile/visit/ask-log',
      // 	method: "post",
      // 	data:{
      // 		type:that.form.type
      // 	},
      // 	utilSuccess: function(res) {
      // 		console.log("res",res)
      // 		if(res.msg=='学习有效中'){
      // 			uni.showToast({
      // 				title: '请确保随访人员都已通过学习培训方可提交拜访',
      // 				duration: 2000,
      // 				icon: 'none'
      // 			})
      // 			that.isStudy = true
      // 			that.goStudy = '提交'

      // 		}
      // 	},
      // 	utilFail: function(res) {
      // 		// console.log(res)
      // 		// uni.showToast({
      // 		// 	title: res,
      // 		// 	duration: 2000,
      // 		// 	icon: 'none'
      // 		// })
      // 	}
      // })
    },
    // 获取随访人员的 学习记录
    async getStudy() {
      let that = this;
      // 护照类型提交前需要同步证件号码
      if (this.form.credent == 2) {
        this.form.idcard = this.form.passcard;
      }

      // 确保date字段设置为start_date
      if (this.form.start_date) {
        this.form.date = this.form.start_date;
      }

      // 使用身份证(credent=1) 且填写了证件号时，先做一次格式校验（普通访客/施工/物流均生效）
      if (this.form.credent == 1 && this.form.idcard) {
        const pattern =
          /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if (!pattern.test(this.form.idcard)) {
          this.util.alert(
            "身份证格式错误 / Invalid ID card format"
          );
          return;
        }
      }

      // 施工(type=2) / 物流(type=3) 且使用身份证(credent=1) 时，身份证必须填写
      if (this.form.type != 1 && this.form.credent == 1 && !this.form.idcard) {
        this.util.alert(
          "身份证号码不能为空 / ID card number cannot be empty"
        );
        return;
      }

      this.$refs["formdata"]
        .validate()
        .then(() => {
          let id_arr = [];
          if (this.form.idcard) {
            id_arr.push(this.form.idcard);
          }
          for (var k of this.form.follw_people) {
            if (k.idcard) {
              id_arr.push(k.idcard);
            }
          }

          // 普通访客和物流司机只需要表单校验，不需要学习校验
          if (this.form.type == 1 || this.form.type == 3) {
            if (that.isCall === "call") {
              that.submitForm();
            } else {
              that.submitNoStudy();
            }
            return;
          }

          this.util.request({
            api: "/api/mobile/visit/idcard-check",
            method: "post",
            data: {
              idcard: id_arr,
            },
            utilSuccess: function (res) {
              if (res.length > 0) {
                let str =
                  res.join("，") + "未完成学习培训 / Not completed training";
                that.util.alert(str);
                uni.setStorageSync("formdata", that.form);
              } else {
                if (that.isCall === "call") {
                  that.submitForm();
                } else {
                  that.submitNoStudy();
                }
              }
            },
            utilFail: function (res) {
              uni.showToast({
                title: res,
                duration: 2000,
                icon: "none",
              });
            },
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    saveFormgoStudy() {
      if (this.form.credent == 2) {
        this.form.idcard = this.form.passcard;
      }

      // 确保date字段设置为start_date
      if (this.form.start_date) {
        this.form.date = this.form.start_date;
      }

      // 使用身份证(credent=1) 且填写了证件号时，先做一次格式校验（普通访客/施工/物流均生效）
      if (this.form.credent == 1 && this.form.idcard) {
        const pattern =
          /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if (!pattern.test(this.form.idcard)) {
          this.util.alert(
            "身份证格式错误 / Invalid ID card format"
          );
          return;
        }
      }

      // 施工(type=2) / 物流(type=3) 且使用身份证(credent=1) 时，身份证必须填写
      if (this.form.type != 1 && this.form.credent == 1 && !this.form.idcard) {
        this.util.alert(
          "身份证号码不能为空 / ID card number cannot be empty"
        );
        return;
      }

      this.$refs["formdata"]
        .validate()
        .then((res) => {
          console.log("form", this.form);
          // return
          if (this.isCall === "call") {
            this.submitForm();
            return;
          }
          if (this.isStudy) {
            this.submitNoStudy();
          } else {
            uni.setStorageSync("formdata", this.form);
            uni.redirectTo({
              url: "/pages/visit/study?type=" + this.form.type,
            });
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    submitForm() {
      let that = this;
      console.log("form", this.form);
      // return
      this.util.request({
        api: "/api/admin/visit/save",
        method: "POST",
        requestType: "bd",
        data: that.form,
        utilSuccess: function (res) {
          uni.showToast({
            title: res.msg,
            duration: 2000,
            icon: "none",
          });
          uni.removeStorageSync("formdata");
          uni.redirectTo({
            url: "/pages/visit/successform?iscall=call",
          });
        },
        utilFail: function (res) {
          uni.showToast({
            title: res,
            duration: 2000,
            icon: "none",
          });
        },
      });
    },
    submitNoStudy() {
      let that = this;
      this.util.request({
        api: "/api/mobile/visit/visit-save",
        method: "POST",
        data: that.form,
        utilSuccess: function (res) {
          uni.showToast({
            title: res.msg,
            duration: 2000,
            icon: "none",
          });
          uni.removeStorageSync("formdata");
          that.newsSubscription();
        },
        utilFail: function (res) {
          console.log(res);
          uni.showToast({
            title: res,
            duration: 2000,
            icon: "none",
          });
        },
      });
    },
    newsSubscription() {
      uni.getSetting({
        withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
        success(res) {
          if (res.authSetting["scope.subscribeMessage"]) {
            uni.redirectTo({
              url: "/pages/visit/successform",
            });
          } else {
            // 用户没有点击"总是保持以上，不再询问"则每次都会调起订阅消息
            uni.requestSubscribeMessage({
              tmplIds: [
                "OfDFwAIZyXqvPgmc_czIXhveVtp3n_ftyWJEks1DSi4",
                "r8n41lmkGeob15YBuuxhG7MbpgVSsUxKnK9ORPtr5VY",
              ],
              success(res) {
                console.log("res", res);
                uni.showToast({
                  title: "订阅成功",
                });
                uni.redirectTo({
                  url: "/pages/visit/successform",
                });
              },
            });
          }
        },
      });
    },
    // 开始日期变化处理
    onStartDateChange(e) {
      console.log("开始日期变化:", e);
      this.calculateDateRange();
    },

    // 结束日期变化处理
    onEndDateChange(e) {
      console.log("结束日期变化:", e);
      this.calculateDateRange();
    },

    // 计算日期范围和长期访问状态
    calculateDateRange() {
      if (this.form.start_date && this.form.end_date) {
        // 计算日期差
        const start = new Date(this.form.start_date);
        const end = new Date(this.form.end_date);
        const timeDiff = end.getTime() - start.getTime();
        const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1; // +1 因为包含开始和结束日期

        // 如果超过1天，设置为长期访问
        this.form.long_time = daysDiff > 1 ? 1 : 0;

        // 设置date字段为start_date
        this.form.date = this.form.start_date;

        console.log("计算后的值:", {
          start_date: this.form.start_date,
          end_date: this.form.end_date,
          long_time: this.form.long_time,
          daysDiff: daysDiff,
        });
      }
    },
    // 拉取拜访人信息
    pullVisitorInfo() {
      let that = this;
      this.util.request({
        api: "/api/mobile/user/my-visit",
        method: "get",
        data: {
          page: 1,
          page_size: 1,
          type: "",
        },
        utilSuccess: function (res) {
          if (res.data && res.data.length > 0) {
            // 获取第一条记录
            const firstRecord = res.data[0];
            // 自动填充拜访人信息
            that.form.name = firstRecord.name || "";
            that.form.mobile = firstRecord.mobile || "";
            that.form.credent = firstRecord.credent || 1;
            that.form.idcard = firstRecord.idcard || "";
            that.form.company_name = firstRecord.company_name || "";
            // that.form.cda = firstRecord.cda || ''

            // 根据证件类型设置对应的证件号码
            if (firstRecord.credent == 2) {
              that.form.passcard = firstRecord.idcard || "";
            }

            uni.showToast({
              title: "拜访人信息已自动填充 / Visitor information auto-filled",
              duration: 2000,
              icon: "success",
            });
          } else {
            uni.showToast({
              title:
                "暂无拜访人历史记录，请手动输入! / No visitor history, please enter manually!",
              duration: 2000,
              icon: "none",
            });
          }
        },
        utilFail: function (res) {
          uni.showToast({
            title: "拉取失败，请手动输入 / Pull failed, please enter manually",
            duration: 2000,
            icon: "none",
          });
        },
      });
    },
  },
};
</script>

<style scoped>
.containers {
  background-color: #fff;
  min-height: 100vh;
  padding: 20rpx;
  padding-bottom: 60rpx;
}

.steps {
  margin-bottom: 40rpx;
}

.formtext {
  margin-bottom: 20rpx;
}

/deep/ .uni-table-td {
  vertical-align: middle;
}

/deep/ .uni-drawer__content {
  padding: 40rpx;
}

.configtitle {
  font-size: 40rpx;
  text-align: center;
  margin-top: 36rpx;
  padding-bottom: 20rpx;
}

.configvalue {
  padding: 40rpx;
  font-size: 36rpx;
  height: 600rpx;
  overflow-y: auto;
}

.configbtn {
  background: #4f607e;
  padding: 20rpx;
  /* display: inline-block; */
  text-align: center;
  margin: 20rpx auto;
  color: #fff;
  border-radius: 20rpx;
}

.configload {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50rpx;
  color: #ddd;
}

.configload text {
  margin-right: 20rpx;
}

/deep/ .u-popup__content__close .u-icon__icon {
  color: #fff !important;
}

.areabtn {
  background-color: #4f607e;
  /* margin-left: 8px; */
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  border-radius: 0;
}

/deep/
  .areavalue
  .uni-data-checklist
  .checklist-group
  .checklist-box.is--button {
  padding: 30rpx;
}

/* 日期选择器样式优化 */
/deep/ .uni-datetime-picker {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 !important;
}

/deep/ .uni-datetime-picker .uni-datetime-picker__input {
  width: 100% !important;
  overflow: visible !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

/deep/ .uni-datetime-picker .uni-datetime-picker__input-text {
  width: 100% !important;
  overflow: visible !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

/* 确保表单项有足够空间 */
/deep/ .uni-forms-item__content {
  flex: 1 !important;
  min-width: 0 !important;
}
.label-with-en-inline {
  display: flex;
  flex-direction: column;
  width: 80px;
  min-width: 80px;
  font-weight: 500;
}
.label-with-en-inline text {
  display: block;
  line-height: 1.5;
}
.label-with-en-inline .en-text {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
  font-weight: normal;
}
.label-with-en-inline-del {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.label-with-en-inline-del text {
  display: block;
  line-height: 1.2;
}
.label-with-en-inline-del .en-text {
  font-size: 18rpx;
  color: #999;
  margin-top: 2rpx;
  font-weight: normal;
}
.button-with-en {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.button-with-en .en-text {
  font-size: 20rpx;
  opacity: 0.9;
  margin-top: 2rpx;
  font-weight: normal;
}
.button-with-en-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.button-with-en-submit .en-text {
  font-size: 20rpx;
  opacity: 0.9;
  margin-top: 2rpx;
  font-weight: normal;
}
.button-mini-with-en {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8rpx 16rpx;
}
.button-mini-with-en view {
  line-height: 1.2;
}
.button-mini-with-en .en-text {
  font-size: 18rpx;
  opacity: 0.9;
  margin-top: 2rpx;
  font-weight: normal;
}
.label-with-en {
  display: flex;
  flex-direction: column;
}
.label-with-en .en-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
}
.label-with-en-table {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.label-with-en-table .en-text {
  font-size: 20rpx;
  color: #999;
  margin-top: 2rpx;
}
/deep/ .uni-forms-item__label {
  width: 140px !important;
  min-width: 140px !important;
  padding-right: 16rpx;
  display: flex;
  align-items: flex-start;
}
</style>