<template>
  <div class="project-config-page">
    <a-form-model
      ref="form"
      :model="form"
      class="form-wrap"
      @submit="handleSubmit"
    >
      <a-card title="官网购票界面设置">
        <a-col v-bind="layout2">
          <a-form-model-item
            label="网站名称"
            prop="app_title"
            :rules="{ required: true, message: '请输入' }"
          >
            <a-input v-model="form.app_title"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col v-bind="layout2">
          <a-form-model-item label="首页地址" prop="app_home_url">
            <a-input v-model="form.app_home_url"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col v-bind="layout2">
          <a-form-model-item label="LOGO" prop="app_logo">
            <a-upload
              :action="uploadUrl"
              listType="picture-card"
              :fileList="logoFileList"
              :before-upload="beforeImageUpload"
              @preview="handlePreview"
              @change="handleChange($event, 'logoFileList', 'app_logo')"
            >
              <div v-if="logoFileList.length < 1">
                <a-icon type="plus" />
                <div class="ant-upload-text">
                  点击上传
                </div>
              </div>
            </a-upload>
          </a-form-model-item>
        </a-col>

        <a-col v-bind="layout2">
          <a-form-model-item label="网站背景" prop="app_background">
            <a-upload
              :action="uploadUrl"
              listType="picture-card"
              :fileList="bgImageList"
              :before-upload="beforeImageUpload"
              @preview="handlePreview"
              @change="
                handleChange(
                  $event,
                  'bgImageList',
                  'app_background.backgroundImage'
                )
              "
            >
              <div v-if="bgImageList.length < 1">
                <a-icon type="plus" />
                <div class="ant-upload-text">
                  点击上传
                </div>
              </div>
            </a-upload>
            <ColorPicker
              v-model="form.app_background.backgroundColor"
            ></ColorPicker>
          </a-form-model-item>
        </a-col>

        <!-- 票务小程序首页轮播图 -->
        <a-col v-bind="layout2" v-if="['YINXIANGMAZU','demo'].includes(form.project_name) ">
          <a-form-item
            label="小程序首页轮播图"
            v-bind="layout2"
          >
            <a-upload
              list-type="picture-card"
              :file-list="imageList_miniappSwiper"
              :customRequest="()=>{}"
              :before-upload="beforeImageUpload_miniappSwiper"
              @preview="handleImagePreview_miniappSwiper"
              @change="handleImageChange_miniappSwiper"
              v-decorator="[
                'pictures',
                {
                  initialValue:imageList_miniappSwiper
                }
              ]"
            >
              <div v-if="imageList_miniappSwiper.length < 6">
                <a-icon type="plus" />
                <div class="ant-upload-text">
                  上传
                </div>
              </div>
            </a-upload>
            <div class="clearfix"></div>
            <a-alert
              banner
              type="warning"
              message="图片格式支持 JPG/PNG，大小不超过1MB，最多可上传6张图片。推荐分辨率750*1076（px）"
            ></a-alert>
          </a-form-item>
        </a-col>

        <!-- 销售海报设置 -->
        <a-col v-bind="layout2" v-if="['YINXIANGMAZU','demo'].includes(form.project_name) ">
          <a-form-item
            label="销售海报"
            v-bind="layout2"
          >
            <a-upload
              list-type="picture-card"
              :file-list="imageList_salePosterSwiper"
              :customRequest="()=>{}"
              :before-upload="beforeImageUpload_salePosterSwiper"
              @preview="handleImagePreview_salePosterSwiper"
              @change="handleImageChange_salePosterSwiper"
              v-decorator="[
                'pictures',
                {
                  initialValue:imageList_salePosterSwiper
                }
              ]"
            >
              <div v-if="imageList_salePosterSwiper.length < 6">
                <a-icon type="plus" />
                <div class="ant-upload-text">
                  上传
                </div>
              </div>
            </a-upload>
            <div class="clearfix"></div>
            <a-alert
              banner
              type="warning"
              message="图片格式支持 JPG/PNG，大小不超过2MB，最多可上传6张图片。推荐分辨率750*1000（px）"
            ></a-alert>
          </a-form-item>
        </a-col>
      </a-card>

      <div class="btns-wrap" v-if="form.project_name === 'demo'">
        <a-button type="primary" html-type="submit">
          <a-icon type="save" /> 保存
        </a-button>
      </div>

      <a-card title="手机端弹窗设置">
        <a-col v-bind="layout2">
          <a-form-model-item label="类型">
            <a-select
              v-model="form.wx_home_pop_info.type"
              @change="handleTypeChange"
            >
              <a-select-option
                v-for="(item, index) in typeOptions"
                :key="index"
                :value="item.value"
              >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col v-bind="layout2" v-if="form.wx_home_pop_info.type === 'TEXT'">
          <a-form-model-item
            label="文本信息"
            :prop="'wx_home_pop_info.content'"
            :rules="{
              required: true,
              message: '不能为空'
            }"
          >
            <a-textarea
              v-model="form.wx_home_pop_info.content"
              :autoSize="{ minRows: 2 }"
            ></a-textarea>
          </a-form-model-item>
        </a-col>

        <a-col v-bind="layout2" v-if="form.wx_home_pop_info.type === 'PICTURE'">
          <a-form-model-item
            label="上传图片"
            :prop="'wx_home_pop_info.content'"
            :rules="{
              required: true,
              message: '请上传图片'
            }"
          >
            <a-upload
              :action="uploadUrl"
              listType="picture-card"
              :fileList="fileList"
              :before-upload="beforeImageUpload"
              @preview="handlePreview"
              @change="
                handleChange($event, 'fileList', 'wx_home_pop_info.content')
              "
            >
              <div v-if="fileList.length < 1">
                <a-icon type="plus" />
                <div class="ant-upload-text">
                  点击上传
                </div>
              </div>
            </a-upload>
          </a-form-model-item>
        </a-col>

        <a-modal
          :visible="previewVisible"
          :footer="null"
          @cancel="handleCancel"
        >
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>

        <!-- 小程序轮播图预览 -->
        <a-modal
          :visible="previewImageVisible_miniappSwiper"
          :footer="null"
          @cancel="handleImageCancel_miniappSwiper"
        >
          <img
            alt="example"
            style="width: 100%"
            :src="previewImage_miniappSwiper"
          >
        </a-modal>
        <!-- 销售海报预览 -->
        <a-modal
          :visible="previewImageVisible_salePosterSwiper"
          :footer="null"
          @cancel="handleImageCancel_salePosterSwiper"
        >
          <img
            alt="example"
            style="width: 100%"
            :src="previewImage_salePosterSwiper"
          >
        </a-modal>
      </a-card>

      <div class="btns-wrap">
        <a-button type="primary" html-type="submit">
          <a-icon type="save" /> 保存
        </a-button>
      </div>

      <a-card title="可预约时间" v-if="['YINXIANGMAZU','demo'].includes(form.project_name) ">
        <a-form-item
          label="门票可预约时间"
          v-bind="formItemLayout"
        >
          <a-button @click="addWorkTimesVisible = true">
            <a-icon type="plus" /> 新增可预约时间
          </a-button>
          <div
            class="workTimesItem"
            v-for="(item,index) in worktimes"
            :key="index"
          >
            <a-tag color="#0099a0">
              {{ item.type | workTimesType }}
            </a-tag>

            <a-form-item
              label="日期范围"
              v-bind="formItemLayout"
              v-if="item.type==='SPECIAL_DAY'"
            >
              {{ item.start }} 至 {{ item.end }}
            </a-form-item>
            <a-form-item
              label="日期"
              v-bind="formItemLayout"
              v-if="item.type==='SPECIAL_WEEKDAY'"
            >
              {{ item.day | weekDays }}
            </a-form-item>
            <a-form-item
              label="日期"
              v-bind="formItemLayout"
              v-if="item.type==='SPECIAL_MONTHDAY'"
            >
              {{ item.day | monthDays }}
            </a-form-item>
            <a-form-item
              label="法定日类型"
              v-bind="formItemLayout"
              v-if="item.type==='LEGAL_HOLIDAY'"
            >
              {{ item.legal_type | legalType }}
            </a-form-item>
            <a-form-item
              label="时间范围"
              v-bind="formItemLayout"
            >
              <ul>
                <li
                  v-for="(k,i) in item.periods"
                  :key="i"
                >
                  {{ k.start }} 至 {{ k.end }}
                </li>
              </ul>
            </a-form-item>
            <a-form-item
              label="是否允许"
              v-bind="formItemLayout"
            >
              {{ item.permit?'是':'否' }}
            </a-form-item>
            <a-form-item
              label="优先级"
              v-bind="formItemLayout"
            >
              {{ item.priority }}
            </a-form-item>
            <a-form-item
              label="禁止开放提示语"
              v-bind="formItemLayout"
            >
              {{ item.no_permit_prompt }}
            </a-form-item>
            <div class="btns-wrap">
              <a-button
                type="primary"
                size="small"
                @click="eidtWorkTime(item,index)"
              >
                编辑
              </a-button>
              <a-button
                type="danger"
                size="small"
                @click="deleteWorkTime(index)"
              >
                删除
              </a-button>
            </div>
          </div>
        </a-form-item>
      </a-card>
      <div class="btns-wrap" v-if="['YINXIANGMAZU','demo'].includes(form.project_name) ">
        <a-button type="primary" @click="setWorkTimes">
          <a-icon type="save" /> 保存
        </a-button>
      </div>

      <a-spin :spinning="loadingData">
        <a-card title="基本配置">
          <a-row :gutter="24">
            <a-col v-bind="layout">
              <a-form-model-item label="项目名称">
                <a-input disabled v-model="form.project_name"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item label="公司名称">
                <a-input v-model="form.company_name"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item label="公司地址">
                <a-input v-model="form.company_address"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item label="联系人">
                <a-input v-model="form.contact_person"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item label="联系人手机">
                <a-input v-model="form.contact_number"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item label="商品服务名称">
                <a-input v-model="form.goods_service_name"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item label="购物车开关">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.using_shopping_cart"
                ></a-switch>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item label="导游开关">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.show_guide_order"
                ></a-switch>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item label="机选座位">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.is_auto_assign_seat"
                ></a-switch>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item label="购买者实名认证">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.buyer_need_realname"
                ></a-switch>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item label="微信部分退单">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.allow_user_part_cancel"
                ></a-switch>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item label="微信部分使用退单">
                <a-tooltip>
                  <template #title>允许用户退部分使用订单中未使用的票</template>
                  <i class="el-icon-info"></i>
                </a-tooltip>
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.allow_user_cancel_part_use"
                ></a-switch>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item label="游客实名认证">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.player_need_realname"
                ></a-switch>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item label="预约展示轮播">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.reservation_show_carousel_map"
                ></a-switch>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item label="协议独立显示">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.show_purchase_protocol_separate"
                ></a-switch>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item label="商品服务">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.goods_service"
                ></a-switch>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item label="免费票">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.free_ticket_support"
                ></a-switch>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item label="预约票">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.ticket_reservation_support"
                ></a-switch>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item label="预约票可直接入园">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.reservation_ticket_show_qrcode"
                ></a-switch>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item label="灰名单提示">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.grey_list"
                ></a-switch>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="form.grey_list">
              <a-form-model-item
                label="灰名单模板"
                prop="grey_list_template"
                :rules="{ required: true, message: '请输入' }"
              >
                <GreySelector v-model="form.grey_list_template"></GreySelector>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item
                label="健康码上传"
                prop="upload_health_code"
                :rules="{ required: false, message: '请输入' }"
              >
                <a-select v-model="form.upload_health_code">
                  <a-select-option :key="0"> 不开启 </a-select-option>
                  <a-select-option :key="1"> 开启 </a-select-option>
                  <a-select-option :key="2"> 必须上传 </a-select-option>
                  <a-select-option :key="3"> 与灰名单匹配 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="form.upload_health_code">
              <a-form-model-item
                label="健康码描述说明"
                prop="upload_health_code_desc"
                :rules="{ required: false, message: '请输入' }"
              >
                <a-textarea
                  v-model="form.upload_health_code_desc"
                  :autoSize="{ minRows: 1 }"
                ></a-textarea>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item
                label="预印兑换票"
                prop="exchange_ticket_model"
                :rules="{ required: false, message: '请输入' }"
              >
                <a-select v-model="form.exchange_ticket_model">
                  <a-select-option :key="0"> 不开启 </a-select-option>
                  <a-select-option :key="1"> 开启 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item
                label="自动分佣"
                prop="wx_prorate_type"
                :rules="{ required: false, message: '请输入' }"
              >
                <a-select v-model="form.wx_prorate_type">
                  <a-select-option :key="0" :value="0"> 不开启 </a-select-option>
                  <a-select-option :key="1" :value="1"> 手动分佣 </a-select-option>
                  <a-select-option :key="2" :value="2"> 自动分佣 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="layout">
              <a-form-model-item
                label="支持证件类型"
                prop="support_identity_type"
              >
                <a-select mode="multiple" v-model="form.support_identity_type">
                  <a-select-option key="ID_CARD"> 身份证 </a-select-option>
                  <a-select-option key="HUZHAO"> 护照 </a-select-option>
                  <a-select-option key="GANGAO"> 港澳通行证 </a-select-option>
                  <a-select-option key="TAIBAO"> 台湾通行证 </a-select-option>
                  <a-select-option key="XUESHENG"> 学生证 </a-select-option>
                  <a-select-option key="LAONIAN"> 老年证 </a-select-option>
                  <a-select-option key="CANJIREN"> 残疾人证 </a-select-option>
                  <a-select-option key="JUNREN"> 军人证 </a-select-option>
                  <a-select-option key="JIAOSHI"> 教师证 </a-select-option>
                  <a-select-option key="YONGJIUJULIU"> 外国人永久居留身份证 </a-select-option>
                  <a-select-option key="SHEBAO"> 社保 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item
                label="分佣时间设置"
                prop="wx_profit_share_time_type"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-select v-model="form.wx_profit_share_time_type">
                  <a-select-option :key="0"> 完成后分佣 </a-select-option>
                  <a-select-option :key="1"> 支付后开始分佣 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="form.wx_profit_share_time_type">
              <a-form-model-item
                label="支付后开始分佣时间"
                prop="wx_profit_share_day"
              >
                <a-input-number
                  :min="0"
                  :max="30"
                  v-model="form.wx_profit_share_day"
                />
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item
                label="项目是否支持开票"
                prop="support_invoice"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.support_invoice"
                ></a-switch>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="form.support_invoice">
              <a-form-model-item label="项目的发票供应商">
                <a-input v-model="form.support_invoice_channel"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item
                label="允许一码多人"
                prop="allow_more_check_num"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.allow_more_check_num"
                ></a-switch>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="form.allow_more_check_num">
              <a-form-model-item label="一码多人最小检票次数">
                <a-input-number v-model="form.definite_check_num"></a-input-number>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="form.allow_more_check_num">
              <a-form-model-item label="默认开启一码多人">
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.default_allow_more_check_num"
                ></a-switch>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item
                label="是否开启旅行社下单"
                prop="allow_agency_order"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.allow_agency_order"
                ></a-switch>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item
                label="开票模式"
                prop="invoice_union_type"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-select v-model="form.invoice_union_type">
                  <a-select-option key="COMMON"> 普通开票 </a-select-option>
                  <a-select-option key="SCAN"> 扫码开票 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item label="过期自动退票天数">
                <a-input-number v-model="form.auto_cancel_out_of_date_days" :precision="0" :min="0"></a-input-number>
                <a-tooltip
                  placement="top"
                  title="大于0时自动开启">
                  <a-icon type="exclamation-circle" theme="filled" style="color:orange;margin-left: 5px;"/>
                </a-tooltip>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item
                label="允许使用第三方价格码"
                prop="whether_to_use_thirdparty_pricecode"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.whether_to_use_thirdparty_pricecode"
                ></a-switch>
              </a-form-model-item>
            </a-col>

            <!-- 是否开启黑白默哀模式 -->
            <a-col v-bind="layout">
              <a-form-model-item
                label="是否开启黑色背景模式"
                prop="turn_on_the_black_background"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.turn_on_the_black_background"
                ></a-switch>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item
                label="期票是否可以选择时间"
                prop="promissory_note_allow_choose_time"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.promissory_note_allow_choose_time"
                ></a-switch>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item
                label="是否实时人数限购"
                prop="realtime_personnum_open"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-select v-model="form.realtime_personnum_open">
                  <a-select-option key="0"> 关闭 </a-select-option>
                  <a-select-option key="1"> 开启 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="form.realtime_personnum_open==='1'">
              <a-form-model-item label="实时限购人数">
                <a-input-number v-model="form.realtime_personnum_limit" :min="1" :precision="0"></a-input-number>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item
                label="是否限制取消"
                :prop="'order_cancel_limit_buy_times.is_open'"
              >
                <a-select v-model="form.order_cancel_limit_buy_times.is_open">
                  <a-select-option key="0"> 关闭 </a-select-option>
                  <a-select-option key="1"> 开启 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="form.order_cancel_limit_buy_times.is_open==='1'">
              <a-form-model-item
                label="限购周期"
                :prop="'order_cancel_limit_buy_times.period'"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-select v-model="form.order_cancel_limit_buy_times.period">
                  <a-select-option key="DAY"> 日 </a-select-option>
                  <a-select-option key="WEEK"> 周 </a-select-option>
                  <a-select-option key="MONTH"> 月 </a-select-option>
                  <a-select-option key="YEAR"> 年 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="form.order_cancel_limit_buy_times.is_open==='1'">
              <a-form-model-item label="据身份证限制取消次数">
                <a-input-number :min="1" v-model="form.order_cancel_limit_buy_times.card_id_limit"></a-input-number>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="form.order_cancel_limit_buy_times.is_open==='1'">
              <a-form-model-item label="据ip限制取消次数">
                <a-input-number :min="1" v-model="form.order_cancel_limit_buy_times.ip_limit"></a-input-number>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="form.order_cancel_limit_buy_times.is_open==='1'">
              <a-form-model-item label="据账号限制取消次数">
                <a-input-number :min="1" v-model="form.order_cancel_limit_buy_times.account_limit"></a-input-number>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout">
              <a-form-model-item
                label="是否开启订单数量购买限制"
                prop="order_num_limit_open"
                :rules="{ required: false, message: '请选择' }"
              >
                <!-- 之前接口返回数字0，现在改成返回字符串0，字符串'0'会导致a-switch打开状态 -->
                <!--
                <a-switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  v-model="form.order_num_limit_open"
                  @change="form.order_num_limit_open = $event ? 1 : 0"
                ></a-switch>
                -->
                <a-select v-model="form.order_num_limit_open">
                  <a-select-option key="0"> 关闭 </a-select-option>
                  <a-select-option key="1"> 开启 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="+form.order_num_limit_open">
              <a-form-model-item
                label="限购方式"
                prop="order_num_limit_type"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-select v-model="form.order_num_limit_type">
                  <a-select-option key="PHONE"> 手机号 </a-select-option>
                  <a-select-option key="CARDID"> 身份证号 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="+form.order_num_limit_open">
              <a-form-model-item label="限购次数">
                <a-input-number v-model="form.order_num_limit_times"></a-input-number>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="layout" v-if="+form.order_num_limit_open">
              <a-form-model-item
                label="限购策略"
                prop="order_num_limit_strategy"
                :rules="{ required: false, message: '请选择' }"
              >
                <a-select v-model="form.order_num_limit_strategy">
                  <a-select-option key="FOREVER"> 永久 </a-select-option>
                  <a-select-option key="DAY"> 天 </a-select-option>
                  <a-select-option key="WEEK"> 周 </a-select-option>
                  <a-select-option key="MONTH"> 月 </a-select-option>
                  <a-select-option key="YEAR"> 年 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="{ span: 24 }">
              <a-form-model-item label="门票下单协议">
                <a-input
                  v-show="false"
                  v-model="form.purchase_protocol"
                ></a-input>
                <Editor v-model="form.purchase_protocol"></Editor>
              </a-form-model-item>
            </a-col>

            <a-col v-bind="{ span: 24 }">
              <a-form-model-item label="会员下单协议">
                <a-input
                  v-show="false"
                  v-model="form.member_purchase_protocol"
                ></a-input>
                <Editor v-model="form.member_purchase_protocol"></Editor>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="{ span: 24 }">
              <a-form-model-item label="退票须知">
                <a-input v-show="false" v-model="form.refund_notice"></a-input>
                <Editor v-model="form.refund_notice"></Editor>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="{ span: 24 }">
              <a-form-model-item label="入园须知">
                <a-input
                  v-show="false"
                  v-model="form.admission_notice"
                ></a-input>
                <Editor v-model="form.admission_notice"></Editor>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-spin>

      <div class="btns-wrap">
        <a-button type="primary" html-type="submit">
          <a-icon type="save" /> 保存
        </a-button>
      </div>
    </a-form-model>
    <ImageCropper
      ref="cropper"
      :info="fileInfo_miniappSwiper"
      @success="handleCropper_miniappSwiper"
    ></ImageCropper>

    <PosterCropper
      ref="cropper"
      :info="fileInfo_salePosterSwiper"
      @success="handleCropper_salePosterSwiper"
    ></PosterCropper>

    <!-- 开放时间弹窗 -->
    <AddWorkTimesModal
      v-model="addWorkTimesVisible"
      @change="addWorkTime"
    ></AddWorkTimesModal>

    <!-- 开放时间弹窗 -->
    <EditWorkTimesModal
      v-model="editWorkTimesVisible"
      :work-time="currentWorkTime"
      @change="updateWorkTime"
    ></EditWorkTimesModal>
  </div>
</template>

<script>
import GreySelector from '@/components/GreySelector'
import { getConfigProject, setConfigProject, getAppointDate } from '@/api/project'
import { getWeixinConfig } from '@/api/saleChannel/weixin'
import ColorPicker from '@/components/color-picker'
import Editor from '@/components/Editor/index.vue'
import { set } from 'lodash'
import ImageCropper from '@/components/ImageCropper/index_miniappSlider'
import PosterCropper from '@/components/ImageCropper/index_salePosterSlider'
import scenicMixin from './appointDate/scenicMixin.js'

function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

const typeOptions = [
  {
    label: '不显示',
    value: 'NONE'
  },
  // {
  //   label: '文字',
  //   value: 'TEXT'
  // },
  {
    label: '图片',
    value: 'PICTURE'
  }
]

export default {
  mixins: [scenicMixin],
  created () {
    getConfigProject().then(res => {
      res.extraInfo.app_background = this.isJson(res.extraInfo.app_background)
        ? JSON.parse(res.extraInfo.app_background)
        : {
          backgroundImage: '',
          backgroundColor: ''
        }
      res.extraInfo.order_cancel_limit_buy_times = this.isJson(res.extraInfo.order_cancel_limit_buy_times)
        ? JSON.parse(res.extraInfo.order_cancel_limit_buy_times)
        : this.form.order_cancel_limit_buy_times
      this.form = res.extraInfo

      if (!this.form.grey_list) {
        this.form.grey_list_template = undefined
      }

      const popInfo = res.extraInfo.wx_home_pop_info

      if (popInfo.type === 'PICTURE') {
        this.fileList = [
          {
            uid: 0,
            name: '图片',
            url: popInfo.content,
            thumbUrl: popInfo.content,
            size: 100,
            percent: 100
          }
        ]
      }

      this.logoFileList = res.extraInfo.app_logo
        ? [
          {
            uid: 0,
            name: '图片',
            url: res.extraInfo.app_logo,
            thumbUrl: res.extraInfo.app_logo,
            size: 100,
            percent: 100
          }
        ]
        : []

      this.bgImageList = res.extraInfo.app_background.backgroundImage
        ? [
          {
            uid: 0,
            name: '图片',
            url: res.extraInfo.app_background.backgroundImage,
            thumbUrl: res.extraInfo.app_background.backgroundImage,
            size: 100,
            percent: 100
          }
        ]
        : []

      console.log(this.bgImageList)

      // 小程序轮播图，将字符串恢复成数组
      this.imageList_miniappSwiper = res.extraInfo.project_slideshow ? JSON.parse(res.extraInfo.project_slideshow) : []
      this.imageList_salePosterSwiper = res.extraInfo.sales_promotion_posters ? JSON.parse(res.extraInfo.sales_promotion_posters) : []
      this.loadingData = false
    })

    getWeixinConfig().then(res => {
      this.appid = res.extraInfo.wx_appid
    })
    getAppointDate().then(res => {
      this.worktimes = res.extraInfo.worktimes || []
      console.log('%c [ res ]-1065', 'font-size:13px; background:pink; color:#bf2c9f;', res)
    })
  },
  computed: {
    showWebsiteSetting () {
      let projectList = ['demo']

      if (window.config && window.config.pcWebsiteProjectList) {
        projectList = projectList.concat(window.config.pcWebsiteProjectList)
      }

      return projectList.indexOf(this.form.project_name) > -1
    }
  },
  components: {
    ImageCropper,
    Editor,
    ColorPicker,
    GreySelector,
    PosterCropper
  },
  data () {
    return {
      typeOptions,
      fileList: [],
      bgImageList: [],
      logoFileList: [],
      imageList_miniappSwiper: [], // 小程序轮播图
      imageList_salePosterSwiper: [], // 销售海报
      formData: null,
      previewImage: '',
      previewImage_miniappSwiper: '', // 小程序轮播图预览
      previewImageVisible_miniappSwiper: false, // 小程序轮播图是否可见
      fileInfo_miniappSwiper: null, // 小程序轮播图裁剪
      previewImage_salePosterSwiper: '', // 销售海报预览
      previewImageVisible_salePosterSwiper: false, // 销售海报是否可见
      fileInfo_salePosterSwiper: null, // 销售海报裁剪
      loadingData: true,
      previewVisible: false,
      colors: '#ffffff',
      form: {
        project_name: '',
        company_name: '',
        company_address: '',
        contact_person: '',
        contact_number: '',
        goods_service_name: '',
        using_shopping_cart: false,
        is_auto_assign_seat: false,
        show_guide_order: false,
        goods_service: false,
        free_ticket_support: false, // 免费票
        ticket_reservation_support: false, // 预约票
        reservation_ticket_show_qrcode: false, // 预约票可直接入园
        exchange_ticket_model: false, // 预印兑换票
        wx_prorate_type: 0, // 是否开启微信分佣
        support_identity_type: [], // 支持的证件类型
        wx_profit_share_time_type: 0,
        wx_profit_share_day: '',
        buyer_need_realname: false,
        allow_user_part_cancel: false,
        allow_user_cancel_part_use: false, // 允许用户退部分使用订单中未使用的票
        order_cancel_limit_buy_times: {
          is_open: '0', // 是否开启，0否，1是
          period: 'DAY', // 周期，DAY,WEEK,MONTH,YEAR
          card_id_limit: 1, // 根据身份证限制取消次数
          ip_limit: 1, // 根据ip限制取消次数
          account_limit: 1// 根据账号取消次数
        },
        player_need_realname: false,
        reservation_show_carousel_map: false,
        wx_home_pop_info: {
          type: 'PICTURE',
          content: ''
        },
        app_title: '',
        app_logo: '',
        app_home_url: '',
        app_background: '',
        support_invoice: 0, // 项目是否支持开票
        allow_more_check_num: false,
        definite_check_num: 10,
        default_allow_more_check_num: false,
        allow_agency_order: false,
        invoice_union_type: 'COMMON', // 开票模式
        auto_cancel_out_of_date_days: 0,
        whether_to_use_thirdparty_pricecode: false,
        turn_on_the_black_background: false, // 是否开启黑白默哀
        promissory_note_allow_choose_time: false, // 期票是否可以选择时间 true/false
        order_num_limit_open: '', // 是否开启订单数量购买限制.0关闭.1开启
        order_num_limit_type: '', // 限购方式
        order_num_limit_times: '', // 限购次教
        order_num_limit_strategy: '', // 限购策略
        realtime_personnum_open: '0',
        realtime_personnum_limit: 100,
        support_invoice_channel: '', // 项目的发票供应商
        upload_health_code: 0, // 健康码上传
        upload_health_code_desc: '' // 健康码描述说明
      },
      layout: {
        xl: 6,
        lg: 8,
        md: 12
      },
      layout2: {
        span: 12
      },
      appid: ''
    }
  },
  methods: {
    isJson (str) {
      if (typeof str === 'string') {
        try {
          var obj = JSON.parse(str)
          if (typeof obj === 'object' && obj) {
            return true
          } else {
            return false
          }
        } catch (e) {
          console.log('error：' + str + '!!!' + e)
          return false
        }
      } else {
        return false
      }
    },
    copySuccess () {
      this.$message.success('复制成功')
    },
    copyError () {
      this.$message.error('复制失败')
    },
    handleSubmit (e) {
      e.preventDefault()
      this.loadingSubmit = true
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loadingData = true

          const params = JSON.parse(JSON.stringify(this.form))
          params.app_background = JSON.stringify(params.app_background)
          params.order_cancel_limit_buy_times = JSON.stringify(params.order_cancel_limit_buy_times)
          if (!params.grey_list) {
            params.grey_list_template = 0
          }

          // 小程序轮播图 this.imageList_miniappSwiper为数组，现在需要把它转成字符串
          const strOfSlideShow = JSON.stringify(this.imageList_miniappSwiper)
          const strOfSlideShowPoster = JSON.stringify(this.imageList_salePosterSwiper)
          console.log('小程序轮播图', strOfSlideShow)
          params.project_slideshow = strOfSlideShow
          params.sales_promotion_posters = strOfSlideShowPoster

          setConfigProject(params)
            .then(res => {
              this.$message.success('保存成功')
              this.$store.dispatch('getProjectConfig')
            })
            .finally(() => {
              this.loadingData = false
            })
        }
      })
    },
    handleCancel () {
      this.previewVisible = false
    },
    handleImageCancel_miniappSwiper () {
      this.previewImageVisible_miniappSwiper = false
    },
    handleImageCancel_salePosterSwiper () {
      this.previewImageVisible_salePosterSwiper = false
    },
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange (info, files, attr) {
      let fileList = info.fileList

      if (info.fileList.length === 0) {
        set(this.form, attr, '')
      }

      if (info.file.status === 'done') {
        set(this.form, attr, info.file.response.link)

        fileList = fileList.filter(item => {
          return item.percent === 100
        })
      }

      if (!info.file.status) {
        const index = fileList.findIndex(item => {
          return item.uid === info.file.uid
        })
        fileList.splice(index, 1)
      }

      this[files] = fileList
    },
    beforeImageUpload (file) {
      const isImage = file.type.indexOf('image') > -1
      if (!isImage) {
        this.$message.error('请选择图片格式的文件')
      }
      return isImage
    },
    // 小程序轮播图
    beforeImageUpload_miniappSwiper (file) {
      const isImage = file.type.indexOf('image/png') > -1 || file.type.indexOf('image/jpeg') > -1

      if (!isImage) {
        this.$message.error('请上传JPG或PNG格式的图片')
      }

      let isLt = false
      const fileSize = file.size / 1024 / 1024

      if (isImage) {
        if (fileSize > 1) {
          this.$message.error('图片必须小于1M!')
        } else {
          isLt = true
        }
      }

      return isImage && isLt
    },
    // 销售海报
    beforeImageUpload_salePosterSwiper (file) {
      const isImage = file.type.indexOf('image/png') > -1 || file.type.indexOf('image/jpeg') > -1

      if (!isImage) {
        this.$message.error('请上传JPG或PNG格式的图片')
      }

      let isLt = false
      const fileSize = file.size / 1024 / 1024

      if (isImage) {
        if (fileSize > 2) {
          this.$message.error('图片必须小于2M!')
        } else {
          isLt = true
        }
      }
      return isImage && isLt
    },
    // 小程序轮播图
    handleImagePreview_miniappSwiper (file) {
      // console.log(file)
      this.previewImage_miniappSwiper = file.url || file.thumbUrl
      this.previewImageVisible_miniappSwiper = true
    },
    // 销售海报
    handleImagePreview_salePosterSwiper (file) {
      // console.log(file)
      this.previewImage_salePosterSwiper = file.url || file.thumbUrl
      this.previewImageVisible_salePosterSwiper = true
    },
    // 小程序轮播图
    handleImageChange_miniappSwiper (info) {
      const fileList = info.fileList

      if (info.file.status === 'uploading') {
        var reader = new FileReader() // 实例化文件读取对象
        reader.readAsDataURL(info.file.originFileObj) // 将文件读取为 DataURL,也就是base64编码
        reader.onload = (ev) => { // 文件读取成功完成时触发
          var dataURL = ev.target.result // 获得文件读取成功后的DataURL,也就是base64编码

          this.$refs.cropper.show({
            img: dataURL
          })
        }
        return
      }

      if (!info.file.status) {
        const index = fileList.findIndex(item => {
          return item.uid === info.file.uid
        })
        fileList.splice(index, 1)
      }
      this.imageList_miniappSwiper = fileList
    },
    // 销售海报
    handleImageChange_salePosterSwiper (info) {
      const fileList = info.fileList

      if (info.file.status === 'uploading') {
        var reader = new FileReader() // 实例化文件读取对象
        reader.readAsDataURL(info.file.originFileObj) // 将文件读取为 DataURL,也就是base64编码
        reader.onload = (ev) => { // 文件读取成功完成时触发
          var dataURL = ev.target.result // 获得文件读取成功后的DataURL,也就是base64编码

          this.$refs.cropper.show({
            img: dataURL
          })
        }
        return
      }

      if (!info.file.status) {
        const index = fileList.findIndex(item => {
          return item.uid === info.file.uid
        })
        fileList.splice(index, 1)
      }
      this.imageList_salePosterSwiper = fileList
    },
    // 小程序轮播图
    handleCropper_miniappSwiper (i) {
      const index = this.imageList_miniappSwiper.length
      this.imageList_miniappSwiper = this.imageList_miniappSwiper.concat({
        uid: index + '',
        name: '图' + index,
        url: i.link,
        thumbUrl: i.link,
        size: i.size,
        percent: 100
      })
      console.log(this.imageList_miniappSwiper)
    },
    // 销售海报
    handleCropper_salePosterSwiper (i) {
      const index = this.imageList_salePosterSwiper.length
      this.imageList_salePosterSwiper = this.imageList_salePosterSwiper.concat({
        uid: index + '',
        name: '图' + index,
        url: i.link,
        thumbUrl: i.link,
        size: i.size,
        percent: 100
      })
      console.log(this.imageList_salePosterSwiper)
    },
    handleTypeChange (val) {
      if (val === 'NONE') {
        this.form.wx_home_pop_info.content = ''
      } else {
        this.form.wx_home_pop_info.content = ''
      }

      this.fileList = []
    }
  }
}
</script>

<style lang="scss">
.btns-wrap {
  text-align: center;
  margin-bottom: 30px;
}
.project-config-page {
  .ant-form-item-label label {
    width: 120px;
    display: inline-block;
  }
}
.ant-upload-picture-card-wrapper {
  display: inline-block;
  width: auto;
  vertical-align: top;
}
.editr--content {
  height: 600px;
  overflow: auto;
}

/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.workTimesItem {
  border: 1px solid #ddd;
  position: relative;
  padding: 5px;
  border-radius: 5px;
  margin: 5px 0;

  ul,
  li {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .el-tag {
    position: absolute;
    right: 0px;
    top: 10px;
  }

  .btns-wrap {
    text-align: center;
  }
}
</style>
