<template>
  <a-modal
    :visible="value"
    destroyOnClose
    width="70%"
    title="新增景点"
    ok-text="确定并发布"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <div class="block-title">
        基本信息
      </div>
      <a-form-item
        label="景点名称"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'name',
            {
              rules: [{ required: true, message: '请输入景点名称' }]
            }
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        label="景点地址"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'address',
            {
              rules: [{ required: true, message: '请输入景点名称' }]
            }
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        label="广告位"
        v-bind="formItemLayout"
      >
        <a-select
          v-decorator="[
            'adv_position_id'
          ]">
          <a-select-option v-for="(item,index) in adPostionList" :key="index" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="景点副标题"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'subtitle'
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        label="景点设施"
        v-bind="formItemLayout"
      >
        <a-select
          mode="multiple"
          style="width: 100%"
          :token-separators="[',']"
          v-decorator="[
            'tags'
          ]"
        >
          <a-select-option
            v-for="i in tags"
            :key="i.id"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="景点开放时间"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'opening_time'
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        label="公告"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'announcement'
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        label="门票可售时间"
        v-bind="formItemLayout"
        :validate-status="workTimesItem.validateStatus"
        :help="workTimesItem.help"
      >
        <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-form-item
        label="是否开放预约"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'support_reservation',
            {
              valuePropName: 'checked',
              initialValue:false
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="景点轮播图"
        v-bind="formItemLayout"
      >
        <a-upload
          list-type="picture-card"
          :file-list="imageList"
          :customRequest="()=>{}"
          :before-upload="beforeImageUpload"
          @preview="handleImagePreview"
          @change="handleImageChange"
          v-decorator="[
            'pictures'
          ]"
        >
          <div v-if="imageList.length < 6">
            <a-icon type="plus" />
            <div class="ant-upload-text">
              上传
            </div>
          </div>
        </a-upload>

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

        <div class="clearfix"></div>
        <a-alert
          banner
          type="warning"
          message="图片格式支持 JPG/PNG，大小不超过1MB，最多可上传6张图片。推荐分辨率640*360（px）"
        ></a-alert>
      </a-form-item>

      <a-form-item
        label="视频介绍"
        v-bind="formItemLayout"
      >
        <a-upload
          :action="uploadUrl"
          :file-list="videoList"
          :before-upload="beforeVideoUpload"
          @preview="handleVideoPreview"
          @change="handleVideoChange"
          v-decorator="[
            'videos'
          ]"
        >
          <a-button v-if="videoList.length < 1">
            <a-icon type="upload" /> 点击上传
          </a-button>
        </a-upload>
        <video
          :src="videoList[0].response.link"
          v-if="videoList.length>0 && videoList[0].response && videoList[0].response.link"
          controls
          style="width:400px;"
        ></video>

        <div class="clearfix"></div>
        <a-alert
          banner
          type="warning"
          message="可上传1个视频，格式支持：MP4 H.264，大小不超过100MB"
        ></a-alert>
      </a-form-item>

      <div class="block-title">
        图文介绍
      </div>

      <a-form-item
        label="标题"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'introduction_title',
            {
              rules: [{ required: true, message: '请输入标题' }]
            }
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        label="详情"
        v-bind="formItemLayout"
      >
        <a-input
          v-show="false"
          v-decorator="[
            'introduction_content',
            {
              rules: [{ required: true, message: '请输入详情内容' }]
            }
          ]"
        ></a-input>

        <Editor ref="editor" v-model="introduction_content"></Editor>
      </a-form-item>
    </a-form>

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

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

    <ImageCropper
      ref="cropper"
      :info="fileInfo"
      @success="handleCropper"
    ></ImageCropper>
  </a-modal>
</template>

<script>
import { addScenic } from '@/api/ticketSetting/scenic'
import scenicMixin from './scenicMixin.js'
import Editor from '@/components/Editor/index.vue'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      introduction_content: ''
    }
  },
  computed: {
    ...mapState({
      adPostionList: state => state.app.adPostionList
    })
  },
  components: {
    Editor
  },
  mixins: [scenicMixin],
  methods: {
    getFileList (obj) {
      if (obj) {
        return obj.fileList.map(item => {
          const info = item.response
          return {
            size: info.size - 0,
            url: info.link
          }
        })
      } else {
        return []
      }
    },
    handleOk (e) {
      e.preventDefault()
      // 验证工作区间
      if (!this.validateWorkTimes()) return
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.pictures = this.imageList.map(item => {
            return {
              size: item.size,
              url: item.url
            }
          })

          values.videos = this.videoList.map(item => {
            if (item.response) {
              return {
                size: item.size,
                url: item.response.link
              }
            } else {
              return {
                size: item.size,
                url: item.url
              }
            }
          })

          values.tags = values.tags || []

          values.worktimes = this.formatWorksTimes(this.worktimes)
          console.log('values', values)
          addScenic(values).then(res => {
            this.$message.success('添加成功')

            this.$emit('update')
            this.handleCancel()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>
