<!--
@name: 仓库管理-编辑查看
@author: 张泽贤
@time: 2022-07-13
@doc: PROLOG_UPCloudSolutionForTMS__v1.2.1_基础数据_1.2.1.doc
-->
<template>
  <p-card class="full-card-panel">
    <a-space slot="title" style="display: flex; align-items: center; cursor: pointer">
      <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
      {{ $route.meta.title }}-{{ typeTitle }}
    </a-space>
    <div slot="extra" v-show="type !== 'view'">
      <p-button :disabled="spinning" type="primary" @click="onSave">保存</p-button>
    </div>
    <p-spin :spinning="spinning">
      <p-form-model ref="ruleForm" class="plg-grid-from" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :rules="rules">
        <a-divider orientation="left">基本信息</a-divider>
        <a-row :gutter="16">
          <a-col :span="6">
            <p-form-model-item label="仓库编码" prop="code">
              <div v-if="type === 'view'">{{ form.code }}</div>
              <p-input v-model="form.code" :disabled="type === 'edit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="仓库名称" prop="name">
              <div v-if="type === 'view'">{{ form.name }}</div>
              <p-input v-model="form.name" :disabled="type === 'edit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="仓库简称" prop="shortName">
              <div v-if="type === 'view'">{{ form.shortName }}</div>
              <p-input v-model="form.shortName" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="部门" prop="departmentName">
              <div v-if="type === 'view'">{{ form.departmentName }}</div>
              <departmenTree :departmentId="form.departmentId" @getDepartment="getDepartment" v-else></departmenTree>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <p-form-model-item label="联系人" prop="contact">
              <div v-if="type === 'view'">{{ form.contact }}</div>
              <p-input v-model="form.contact" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="手机号" prop="phoneNumber">
              <div v-if="type === 'view'">{{ form.phoneNumber }}</div>
              <p-input v-model="form.phoneNumber" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="座机号" prop="landlineNumber">
              <div v-if="type === 'view'">{{ form.landlineNumber }}</div>
              <p-input v-model="form.landlineNumber" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="邮箱" prop="email">
              <div v-if="type === 'view'">{{ form.email }}</div>
              <p-input v-model="form.email" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <p-form-model-item label="邮编" prop="postCode">
              <div v-if="type === 'view'">{{ form.postCode }}</div>
              <p-input v-model="form.postCode" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="省市区" prop="zoneValue">
              <div v-if="type === 'view'">{{ form.provinceName + form.cityName + form.districtName }}</div>
              <p-cascader-zone :value="zoneValue" :disabled="type === 'view'" @change="handleZoneChange" @popupVisibleChange="popupVisibleChange" :level="3" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="12">
            <p-form-model-item label="详细地址" prop="address" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <a-row :gutter="16">
                <a-col :span="20">
                  <div v-if="type === 'view'">{{ form.address }}</div>
                  <p-input v-model="form.address" v-else />
                </a-col>
                <a-col :span="4" style="text-align: right" v-if="type !== 'view'">
                  <p-button type="primary" @click="onAddressAnalysis">地址解析</p-button>
                </a-col>
              </a-row>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <p-form-model-item label="经度" prop="longitude">
              <div v-if="type === 'view'">{{ form.longitude }}</div>
              <p-input v-model="form.longitude" v-else readOnly />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="纬度" prop="latitude">
              <div v-if="type === 'view'">{{ form.latitude }}</div>
              <p-input v-model="form.latitude" v-else readOnly />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="备注" prop="memo">
              <div v-if="type === 'view'">{{ form.memo }}</div>
              <p-input v-model="form.memo" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <p-form-model-item label="站点编码" prop="stationCode">
              <div v-if="type === 'view'">{{ form.stationCode }}</div>
              <p-search-modal v-model="form.stationCode" v-bind="$data.$formItems.stationAttr" @change="(...args) => onFormChange('station', ...args)" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="站点名称" prop="stationName">
              <div v-if="type === 'view'">{{ form.stationName }}</div>
              <p-input v-model="form.stationName" disabled v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="配送顺序" prop="stationDeliveryOrder">
              <div v-if="type === 'view'">{{ form.stationDeliveryOrder }}</div>
              <p-input v-model="form.stationDeliveryOrder" disabled v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="区域" prop="stationAreas">
              <div v-if="type === 'view'">{{ form.stationAreas }}</div>
              <p-input v-model="form.stationAreas" disabled v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-divider orientation="left">业务属性</a-divider>
        <a-row :gutter="16">
          <a-col :span="6">
            <p-form-model-item label="装车间隔" prop="loadInterval">
              <div v-if="type === 'view'">{{ form.loadInterval }}小时</div>
              <a-row v-else type="flex">
                <a-col :flex="1">
                  <p-input-number style="width: 95%" v-model="form.loadInterval" />
                </a-col>
                <a-col :flex="0">小时</a-col>
              </a-row>
              <!-- <p-input v-model="form.loadInterval" suffix="小时" v-else /> -->
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item prop="startTime" :label-col="{ span: 14 }" :wrapper-col="{ span: 10 }">
              <a-space slot="label">
                每日作业开始时间
                <a-tooltip>
                  <template slot="title">
                    <span>智能调度参数，定义仓库每天开始作业时间</span>
                  </template>
                  <a-icon type="exclamation-circle" :style="{ color: '#2b80ff' }" />
                </a-tooltip>
              </a-space>
              <div v-if="type === 'view'">{{ form.startTime }}</div>
              <p-time-picker v-model="form.startTime" format="HH:mm" valueFormat="HH:mm" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item prop="endTime" :label-col="{ span: 14 }" :wrapper-col="{ span: 10 }">
              <a-space slot="label">
                每日作业结束时间
                <a-tooltip>
                  <template slot="title">
                    <span>智能调度参数，定义仓库每天结束作业时间</span>
                  </template>
                  <a-icon type="exclamation-circle" :style="{ color: '#2b80ff' }" />
                </a-tooltip>
              </a-space>
              <div v-if="type === 'view'">{{ form.endTime }}</div>
              <p-time-picker v-model="form.endTime" format="HH:mm" valueFormat="HH:mm" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item prop="loadingTime">
              <a-space slot="label">
                装车时长
                <a-tooltip>
                  <template slot="title">
                    <span>智能调度参数，定义仓库每天作业时长</span>
                  </template>
                  <a-icon type="exclamation-circle" :style="{ color: '#2b80ff' }" />
                </a-tooltip>
              </a-space>
              <div v-if="type === 'view'">{{ form.loadingTime }}小时</div>
              <a-row v-else type="flex">
                <a-col :flex="1">
                  <p-input-number style="width: 95%" v-model="form.loadingTime" @change="loadingTimeChange" />
                </a-col>
                <a-col :flex="0">小时</a-col>
              </a-row>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" type="flex">
          <a-col :flex="0">
            <p-form-model-item :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }" label="" prop="pickUpSign">
              <p-checkbox v-model="form.pickUpSign" :readOnly="type === 'view'">提货签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :flex="0">
            <p-form-model-item :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }" label="" prop="autoPickUpSign">
              <p-checkbox v-model="form.autoPickUpSign" :readOnly="type === 'view'">自动签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col flex="0 0 520px">
            <p-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" label="可签到时间点" prop="pickUpSignTime">
              <a-space>
                <p-select v-model="form.pickUpSignTime" style="width: 140px" :options="options && options.PICK_UP_SIGN_TIME" :disabled="type === 'view'" />
                <a-input-number :readOnly="type === 'view'" style="width: 100px" v-model="form.pickUpSignTimeDura" :disabled="type === 'view'" />
                <p-select v-model="form.pickUpSignTimeUnit" style="width: 80px" :options="options && options.SIGN_TIME_UNIT" :disabled="type === 'view'" />
                <span>区间</span>
              </a-space>
            </p-form-model-item>
          </a-col>
          <a-col :flex="0">
            <p-form-model-item :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }" label="" prop="pickUpPicture">
              <p-checkbox v-model="form.pickUpPicture" :readOnly="type === 'view'">提货图片</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :flex="0">
            <p-form-model-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" label="默认提货围栏" prop="defaultPickUpRail">
              <div v-if="type === 'view'">{{ form.defaultPickUpRail }}KM</div>
              <p-input v-model="form.defaultPickUpRail" suffix="KM" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" type="flex">
          <a-col :flex="0">
            <p-form-model-item :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }" label="" prop="deliverySign">
              <p-checkbox v-model="form.deliverySign" :readOnly="type === 'view'">送达签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :flex="0">
            <p-form-model-item :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }" label="" prop="autoDeliverySign">
              <p-checkbox v-model="form.autoDeliverySign" :readOnly="type === 'view'">自动签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col flex="0 0 520px">
            <p-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" label="可签到时间点" prop="deliverySignTime">
              <a-space>
                <p-select v-model="form.deliverySignTime" :disabled="type === 'view'" style="width: 140px" :options="options && options.PICK_UP_SIGN_TIME" />
                <a-input-number :disabled="type === 'view'" style="width: 100px" v-model="form.deliverySignTimeDura" placeholder="" />
                <p-select :disabled="type === 'view'" v-model="form.deliverySignTimeUnit" style="width: 80px" :options="options && options.SIGN_TIME_UNIT" />
                <span>区间</span>
              </a-space>
            </p-form-model-item>
          </a-col>
          <a-col :flex="0">
            <p-form-model-item :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }" label="" prop="deliveryPicture">
              <p-checkbox v-model="form.deliveryPicture" :readOnly="type === 'view'">送达图片</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :flex="0">
            <p-form-model-item label="默认送达围栏" prop="defaultDeliveryRail">
              <div v-if="type === 'view'">{{ form.defaultDeliveryRail }}KM</div>
              <p-input v-model="form.defaultDeliveryRail" suffix="KM" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-divider orientation="left">预约属性</a-divider>
        <a-row :gutter="16">
          <a-col :span="6">
            <p-form-model-item label="可预约时间点" prop="aptTime" :label-col="{ span: 14 }" :wrapper-col="{ span: 10 }">
              <div v-if="type === 'view'">{{ form.aptTimeName }}</div>
              <p-select v-model="form.aptTime" :options="options.AVAILABLE_TIME" allowClear v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="2">
            <p-form-model-item label="" prop="aptTimeDura" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
              <div v-if="type === 'view'">{{ form.aptTimeDura }}</div>
              <p-input-number v-model="form.aptTimeDura" :min="0" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="aptUnit" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
              <a-row :gutter="16">
                <a-col :span="12">
                  <div v-if="type === 'view'">{{ form.aptUnitName }}</div>
                  <p-select v-model="form.aptUnit" :options="options.AVAILABLE_UNIT" allowClear v-else />
                </a-col>
                <a-col :span="12">
                  <div>以内</div>
                </a-col>
              </a-row>
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="班次允许预约数" prop="aptNum">
              <div v-if="type === 'view'">{{ form.aptNum }}</div>
              <p-input-number v-model="form.aptNum" :min="0" style="width: 100%" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <p-form-model-item label="预约不可取消时间点" prop="aptCanNotCancel" :label-col="{ span: 14 }" :wrapper-col="{ span: 10 }">
              <div v-if="type === 'view'">{{ form.aptCanNotCancelName }}</div>
              <p-select v-model="form.aptCanNotCancel" :options="options.AVAILABLE_TIME" allowClear v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="2">
            <p-form-model-item label="" prop="aptCanNotCancelDura" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
              <div v-if="type === 'view'">{{ form.aptCanNotCancelDura }}</div>
              <p-input-number v-model="form.aptCanNotCancelDura" :min="0" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="aptCanNotCancelUnit" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
              <a-row :gutter="16">
                <a-col :span="12">
                  <div v-if="type === 'view'">{{ form.aptCanNotCancelUnitName }}</div>
                  <p-select v-model="form.aptCanNotCancelUnit" :options="options.AVAILABLE_UNIT" allowClear v-else />
                </a-col>
                <a-col :span="12">
                  <div>以内</div>
                </a-col>
              </a-row>
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="预约模式" prop="aptType">
              <div v-if="type === 'view'">{{ form.aptTypeName }}</div>
              <p-select v-model="form.aptType" :options="options.APPOINTMENT_TYPE" allowClear v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="叫号处理方式" prop="callHandleType">
              <div v-if="type === 'view'">{{ form.callHandleTypeName }}</div>
              <p-select v-model="form.callHandleType" :options="options.CALL_HANDLE_TYPE" allowClear v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <p-form-model-item label="过号处理方式" prop="overNumHandleType">
              <div v-if="type === 'view'">{{ form.overNumHandleTypeName }}</div>
              <p-select v-model="form.overNumHandleType" :options="options.OVER_NUM_HANDLE_TYPE" allowClear v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="signInAutoPickUpNum">
              <p-checkbox v-model="form.signInAutoPickUpNum" :readOnly="type === 'view'">签到时自动取号</p-checkbox>
            </p-form-model-item>
          </a-col>
        </a-row>

        <div class="border" v-if="type === 'view'">
          <a-row :gutter="16">
            <a-col :span="6">
              <p-form-model-item label="可预约时间段">
                <div v-for="(item, index) in apTimeSaveVOList" :key="index">{{ apTimeSaveVOList[index].startTime }} 至 {{ apTimeSaveVOList[index].endTime }}</div>
              </p-form-model-item>
            </a-col>
          </a-row>
        </div>
        <div class="border" v-else>
          <a-row :gutter="16">
            <a-col :span="6">
              <p-form-model-item label="可预约时间段">
                <p-button type="primary" @clickSync="onAdd">新增</p-button>
              </p-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="16" v-for="(item, index) in apTimeSaveVOList" :key="index" class="dateList">
            <a-col :span="6">
              <p-time-picker
                :default-open-value="moment('00:00', 'HH:mm')"
                valueFormat="HH:mm"
                format="HH:mm"
                v-model="apTimeSaveVOList[index].startTime"
                style="width: 100%"
                @change="() => changeTime(index)"
                :disabledMinutes="
                  () => {
                    return minuteList;
                  }
                "
              />
            </a-col>
            <a-col :span="1">
              <div class="dateList_txt">至</div>
            </a-col>
            <a-col :span="6">
              <p-time-picker
                :default-open-value="moment('00:00', 'HH:mm')"
                valueFormat="HH:mm"
                format="HH:mm"
                v-model="apTimeSaveVOList[index].endTime"
                style="width: 100%"
                :disabledHours="() => getDisabledHours(index)"
                :disabledMinutes="
                  () => {
                    return minuteList;
                  }
                "
              />
            </a-col>
            <a-col :span="6">
              <a-space>
                <p-button type="danger" @click="onDel(index)">删除</p-button>
              </a-space>
            </a-col>
          </a-row>
        </div>
        <a-row :gutter="16">
          <a-col :span="6">
            <p-form-model-item label="不可预约日期">
              <p-radio-group v-model="form.nonAptDt" :disabled="type === 'view'">
                <p-radio :value="10">按周</p-radio>
                <p-radio :value="20">按月</p-radio>
              </p-radio-group>
              <p-checkbox v-model="form.nonAptSpecDate" :readOnly="type === 'view'" @change="nonAptSpecDateChange">指定日期</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="12" v-show="form.nonAptSpecDate">
            <p-form-model-item label="指定日期" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <div v-if="type === 'view'">{{ form.nonAptSpecStartDate }} 至 {{ form.nonAptSpecEndDate }}</div>
              <p-range-picker v-model="nonAptSpecDate" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" style="width: 100%" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6" v-if="type !== 'view'">
            <p-form-model-item>
              <a-space>
                <p-button type="danger" @click="onReset">重置</p-button>
              </a-space>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-show="form.nonAptDt === 10">
          <a-col :span="12">
            <p-checkbox :indeterminate="weekIndeterminate" :checked="weekAll" @change="onWeekAllChange" :disabled="type === 'view'">全部</p-checkbox>
            <br />
            <p-checkbox-group v-model="selectWeek" :options="weekList" @change="onWeekChange" :disabled="type === 'view'" />
          </a-col>
        </a-row>
        <a-row :gutter="16" v-show="form.nonAptDt === 20">
          <a-col :span="12">
            <p-checkbox :indeterminate="monthIndeterminate" :checked="dayAll" @change="onDayAllChange" :disabled="type === 'view'">全部</p-checkbox>
            <p-checkbox :indeterminate="singleIndeterminate" :checked="singleAll" @change="onSingleAllChange" :disabled="type === 'view'">单号</p-checkbox>
            <p-checkbox :indeterminate="doubleIndeterminate" :checked="doubleAll" @change="onDoubleAllChange" :disabled="type === 'view'">双号</p-checkbox>
            <br />
            <p-checkbox-group v-model="selectMonth" :options="monthList" @change="onMonthChange" :disabled="type === 'view'" />
          </a-col>
        </a-row>
        <a-divider orientation="left" v-if="mextendedField_list.length">扩展属性</a-divider>
        <extendedField :mextendedField_list="mextendedField_list" :type="type" :form="form"></extendedField>
      </p-form-model>
    </p-spin>
  </p-card>
</template>

<script>
import departmenTree from '@/blocks/components/formConfig/index.departmenTree.multiple.vue';
import CascaderZone from '@/blocks/components/cascaderZone';
import extendedField from '@/blocks/extendedField';
import * as $formItems from '@/blocks/components/searchModalConfig/index';

import { viewBranch, saveBranch, updateBranch, query_by_administrative } from '../js/api';
const setFields = () => {
  return {
    pickUpSign: false,
    autoPickUpSign: false,
    pickUpPicture: false,
    deliverySign: false,
    autoDeliverySign: false,
    deliveryPicture: false,
    signInAutoPickUpNum: false,
    nonAptDt: '',
    departmentId: '',
    departmentCode: '',
    departmentName: '',
    loadInterval: 0,
    defaultPickUpRail: '',
    defaultDeliveryRail: '',
    nonAptSpecDate: false,
    nonAptSpecStartDate: '',
    nonAptSpecEndDate: '',

    pickUpSignTime: '',
    pickUpSignTimeDura: '',
    pickUpSignTimeUnit: '',
    deliverySignTime: '',
    deliverySignTimeDura: '',
    deliverySignTimeUnit: '',
  };
};
export default {
  components: { PCascaderZone: CascaderZone, extendedField, departmenTree },
  props: {
    type: {
      type: String,
      default: '',
    },
    editId: {
      type: String,
      default: '',
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    mextendedField_list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    typeTitle() {
      const dictionary = {
        add: '新增',
        edit: '编辑',
        view: '查看',
        copy: '复制',
      };
      return dictionary[this.type] || this.type;
    },
    nonAptSpecDate: {
      get() {
        return [this.form.nonAptSpecStartDate, this.form.nonAptSpecEndDate];
      },
      set(value) {
        console.log(value);
        this.$set(this.form, 'nonAptSpecStartDate', value.length ? value[0] + ' 00:00:00' : '');
        this.$set(this.form, 'nonAptSpecEndDate', value.length ? value[1] + ' 23:59:59' : '');
      },
    },
  },
  data() {
    const positveOrZero = (rule, value, callback) => {
      if (value && !/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value)) {
        callback(new Error('请输入非负数'));
      } else {
        callback();
      }
    };
    return {
      $formItems,
      spinning: false,

      form: setFields(),
      rules: {
        code: [{ required: true, message: '仓库编码不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '仓库名称不能为空', trigger: 'blur' }],
        departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
        loadInterval: [{ validator: positveOrZero, trigger: 'blur' }],
        defaultPickUpRail: [{ validator: positveOrZero, trigger: 'blur' }],
        defaultDeliveryRail: [{ validator: positveOrZero, trigger: 'blur' }],
        loadingTime: [{ validator: positveOrZero, trigger: 'blur' }],
        // aptType: [{ required: true, message: '预约模式不能为空', trigger: 'change' }],
      },

      // 省市区弹窗状态
      zoneValue: [],

      apTimeSaveVOList: [],

      weekIndeterminate: false,
      weekAll: false,
      weekList: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      weekObj: {
        1: '星期日',
        2: '星期一',
        3: '星期二',
        4: '星期三',
        5: '星期四',
        6: '星期五',
        7: '星期六',
      },
      selectWeek: [],

      monthIndeterminate: false,
      singleIndeterminate: false,
      doubleIndeterminate: false,
      dayAll: false,
      singleAll: false,
      doubleAll: false,
      monthList: [],
      singleList: [],
      doubleList: [],
      selectMonth: [],

      minuteList: [],
    };
  },
  mounted() {
    for (let index = 1; index < 32; index++) {
      if (index % 2 === 0) {
        this.doubleList.push((index + '').padStart(2, 0));
      } else {
        this.singleList.push((index + '').padStart(2, 0));
      }
      this.monthList.push((index + '').padStart(2, 0));
    }
    // for (let index = 0; index < 60; index++) {
    //   this.minuteList.push(index)
    // }
    if (this.editId) {
      this.spinning = true;
      viewBranch({ id: this.editId })
        .then((res) => {
          if (res.success) {
            res.data.pickUpSign = res.data.pickUpSign === 1;
            res.data.autoPickUpSign = res.data.autoPickUpSign === 1;
            res.data.pickUpPicture = res.data.pickUpPicture === 1;
            res.data.deliverySign = res.data.deliverySign === 1;
            res.data.autoDeliverySign = res.data.autoDeliverySign === 1;
            res.data.deliveryPicture = res.data.deliveryPicture === 1;
            res.data.signInAutoPickUpNum = res.data.signInAutoPickUpNum === 1;
            res.data.nonAptSpecDate = !!res.data.nonAptSpecStartDate;
            if (this.type === 'copy') {
              res.data.code = '';
              res.data.name = '';
              res.data.departmentId = '';
              res.data.departmentCode = '';
              res.data.departmentName = '';
            }
            this.form = { ...res.data };
            if (this.form.province) {
              this.zoneValue.push(this.form.province);
            }
            if (this.form.city) {
              this.zoneValue.push(this.form.city);
            }
            if (this.form.district) {
              this.zoneValue.push(this.form.district);
            }
            if (this.form.nonAptDt === 10) {
              for (const key in this.weekObj) {
                const element = this.weekObj[key];
                if (this.form.nonAptDura.includes(key)) {
                  this.selectWeek.push(element);
                }
              }
            } else if (this.form.nonAptDt === 20) {
              this.selectMonth = this.form.nonAptDura.split(',');

              this.dayAll = this.selectMonth.length === 31;
              this.singleAll = this.equar(this.selectMonth, this.singleList);
              this.doubleAll = this.equar(this.selectMonth, this.doubleList);
            }

            this.apTimeSaveVOList = [...(this.form.apTimeDTOList || [])];
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    }
  },
  methods: {
    back() {
      this.$emit('back');
    },

    // 省市区
    handleZoneChange(value, arrValue, form) {
      this.form.provinceName = '';
      this.form.province = '';
      this.form.cityName = '';
      this.form.city = '';
      this.form.districtName = '';
      this.form.district = '';
      this.zoneValue = value;
      if (arrValue && arrValue.length) {
        if (arrValue[0]) {
          this.form.provinceName = arrValue[0].zname;
          this.form.province = arrValue[0].zoneid;
        }
        if (arrValue[1]) {
          this.form.cityName = arrValue[1].zname;
          this.form.city = arrValue[1].zoneid;
        }
        if (arrValue[2]) {
          this.form.districtName = arrValue[2].zname;
          this.form.district = arrValue[2].zoneid;
        }
      }
    },

    // 地址解析
    onAddressAnalysis() {
      this.$emit('upadteAddress', { address: this.form.address, longitude: this.form.longitude, latitude: this.form.latitude });
    },

    // 部门
    getDepartment(value) {
      this.form.departmentId = value.departmentId;
      this.form.departmentCode = value.departmentCode;
      this.form.departmentName = value.departmentName;
    },

    // 时间新增
    onAdd() {
      this.apTimeSaveVOList.push({ startTime: '', endTime: '' });
    },
    // 时间删除
    onDel(index) {
      this.apTimeSaveVOList.splice(index, 1);
    },

    onWeekChange(checkedList) {
      this.weekIndeterminate = !!checkedList.length && checkedList.length < this.weekList.length;
      this.weekAll = checkedList.length === this.weekList.length;
    },
    onWeekAllChange(e) {
      Object.assign(this, {
        selectWeek: e.target.checked ? this.weekList : [],
        weekIndeterminate: false,
        weekAll: e.target.checked,
      });
    },

    onMonthChange(checkedList) {
      // this.monthIndeterminate = !!checkedList.length && checkedList.length < this.monthList.length
      this.dayAll = checkedList.length === this.monthList.length;
      this.singleAll = this.equar(checkedList, this.singleList);
      this.doubleAll = this.equar(checkedList, this.doubleList);
    },
    onDayAllChange(e) {
      Object.assign(this, {
        selectMonth: e.target.checked ? this.monthList : [],
        monthIndeterminate: false,
        dayAll: e.target.checked,
        singleAll: false,
        doubleAll: false,
      });
    },
    onSingleAllChange(e) {
      let singleList = [];
      this.monthList.forEach((item) => {
        if (item % 2 === 1) {
          singleList.push(item);
        }
      });
      Object.assign(this, {
        selectMonth: e.target.checked ? singleList : [],
        singleIndeterminate: false,
        dayAll: false,
        singleAll: e.target.checked,
        doubleAll: false,
      });
    },
    onDoubleAllChange(e) {
      let doubleList = [];
      this.monthList.forEach((item) => {
        if (item % 2 === 0) {
          doubleList.push(item);
        }
      });
      Object.assign(this, {
        selectMonth: e.target.checked ? doubleList : [],
        doubleIndeterminate: false,
        dayAll: false,
        singleAll: false,
        doubleAll: e.target.checked,
      });
    },

    nonAptSpecDateChange() {
      this.form.nonAptSpecStartDate = '';
      this.form.nonAptSpecEndDate = '';
    },

    // 保存
    onSave() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        if (this.type === 'add' || this.type === 'copy') this.onMethod(saveBranch);
        if (this.type === 'edit') this.onMethod(updateBranch);

        return;
      });
    },
    onMethod(method) {
      let params = { ...this.form };
      params.pickUpSign = params.pickUpSign ? 1 : 0;
      params.autoPickUpSign = params.autoPickUpSign ? 1 : 0;
      params.pickUpPicture = params.pickUpPicture ? 1 : 0;
      params.deliverySign = params.deliverySign ? 1 : 0;
      params.autoDeliverySign = params.autoDeliverySign ? 1 : 0;
      params.deliveryPicture = params.deliveryPicture ? 1 : 0;
      params.signInAutoPickUpNum = params.signInAutoPickUpNum ? 1 : 0;
      params.apTimeSaveVOList = this.apTimeSaveVOList;
      params.nonAptDura = [];
      if (params.nonAptDt === 10) {
        for (const key in this.weekObj) {
          const element = this.weekObj[key];
          if (this.selectWeek.includes(element)) {
            params.nonAptDura.push(key);
          }
        }
      } else if (params.nonAptDt == 20) {
        params.nonAptDura = this.selectMonth;
      }
      params.nonAptDura = params.nonAptDura.join(',');

      this.spinning = true;
      method(params)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.$emit('back');
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    },

    changeTime(index) {
      this.apTimeSaveVOList[index].endTime = '';
    },
    getDisabledHours(index) {
      let start = parseInt(this.apTimeSaveVOList[index].startTime);
      const result = [];
      for (let i = 1; i < start; i++) {
        result.push(i);
      }
      return result;
    },

    // 重置
    onReset() {
      this.form = setFields();

      this.weekAll = false;
      this.selectWeek = [];

      this.dayAll = false;
      this.singleAll = false;
      this.doubleAll = false;
      this.selectMonth = [];
    },

    // 校验数组是否相同
    equar(a, b) {
      // 判断数组的长度
      if (a.length !== b.length) {
        return false;
      } else {
        a = this.compare(a);
        b = this.compare(b);
        // 循环遍历数组的值进行比较
        for (let i = 0; i < a.length; i++) {
          if (a[i] !== b[i]) {
            return false;
          }
        }
        return true;
      }
    },
    // 排序
    compare(p) {
      return function (m, n) {
        var a = m[p];
        var b = n[p];
        return a - b; //升序
      };
    },

    onFormChange(name, ...args) {
      if (name === 'station') {
        this.$set(this.form, 'stationId', args[1] ? args[2][0].id : '');
        this.$set(this.form, 'stationCode', args[1] ? args[2][0].code : '');
        this.$set(this.form, 'stationName', args[1] ? args[2][0].name : '');
        this.$set(this.form, 'stationDeliveryOrder', args[1] ? args[2][0].deliveryOrder : '');
        this.$set(this.form, 'stationAreas', args[1] ? args[2][0].areas : '');
      }
    },

    // 通过省市区获取站点
    popupVisibleChange(visible) {
      if (!visible) {
        query_by_administrative({ province: this.form.province, city: this.form.city, district: this.form.district }).then((res) => {
          if (res.success) {
            if (res.data) {
              const { id, code, name, deliveryOrder, areas } = res.data;
              this.$set(this.form, 'stationId', id || '');
              this.$set(this.form, 'stationCode', code || '');
              this.$set(this.form, 'stationName', name || '');
              this.$set(this.form, 'stationDeliveryOrder', deliveryOrder || '');
              this.$set(this.form, 'stationAreas', areas || '');
            }
          } else {
            this.$exception(res);
          }
        });
      }
    },

    loadingTimeChange(value) {
      let list = (value + '').split('.');
      if (list.length === 1) {
        this.form.loadingTime = value;
      } else {
        this.form.loadingTime = Number(list[0] + '.5');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.border {
  border: 1px solid #e8e8e8;
}

.dateList {
  padding-bottom: 10px;
  padding-left: 20px;

  .dateList_txt {
    height: 28px;
    line-height: 28px;
    text-align: center;
  }
}

.ant-time-picker {
  width: 100%;
}
</style>