<template>
  <div>
    <div class="detail-panel">
      <div class="panel-header">
        <div class="title">
          基本限制
        </div>
      </div>
      <el-row>
        <el-col :span="11" :offset="1">
          <el-form-item prop="common.titleMaxLength" label="标题长度" :verify="['Number']">
            <el-input v-model="tmpCondition.common.titleMaxLength"></el-input>
          </el-form-item>
          <el-form-item prop="common.coverImageMaxSize" label="封面图大小" :verify="['Regex=^[1-9]([0-9]{0,8})[kmgtpezybndKMGTPEZYBND]?[bB]?(?<!\d)$|必须以数字开头，单位为B,KB,M,MB,G,GB...']">
            <el-input v-model="tmpCondition.common.coverImageMaxSize"></el-input>
          </el-form-item>
          <el-form-item prop="common.coverImageFormat" label="封面图格式">
            <el-checkbox-group v-model="tmpCondition.common.coverImageFormat">
              <el-checkbox v-for="item in imgFormatOptions" :key="item.ID" :label="item.ID">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item prop="common.thumbMaxSize" label="缩略图大小" :verify="['Regex=^[1-9]([0-9]{0,8})[kmgtpezybndKMGTPEZYBND]?[bB]?(?<!\d)$|必须以数字开头，单位为B,KB,M,MB,G,GB...']">
            <el-input v-model="tmpCondition.common.thumbMaxSize"></el-input>
          </el-form-item>
          <el-form-item prop="common.thumbFormat" label="缩略图格式">
            <el-checkbox-group v-model="tmpCondition.common.thumbFormat">
              <el-checkbox v-for="item in imgFormatOptions" :key="item.ID" :label="item.ID">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="common.titleMaxLengthMsg" label="提示信息">
            <el-input v-model="tmpCondition.common.titleMaxLengthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="common.coverImageMaxSizeMsg" label="提示信息">
            <el-input v-model="tmpCondition.common.coverImageMaxSizeMsg"></el-input>
          </el-form-item>
          <el-form-item prop="common.coverImageFormatMsg" label="提示信息">
            <el-input v-model="tmpCondition.common.coverImageFormatMsg"></el-input>
          </el-form-item>
          <el-form-item prop="common.thumbMaxSizeMsg" label="提示信息">
            <el-input v-model="tmpCondition.common.thumbMaxSizeMsg"></el-input>
          </el-form-item>
          <el-form-item prop="common.thumbFormatMsg" label="提示信息">
            <el-input v-model="tmpCondition.common.thumbFormatMsg"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="detail-panel">
      <div class="panel-header">
        <div class="title">
          图文消息
        </div>
      </div>
      <el-row>
        <el-col :span="11" :offset="1">
          <el-form-item prop="imgText.contentMaxLength" label="内容长度" :verify="['Number']">
            <el-input v-model="tmpCondition.imgText.contentMaxLength"></el-input>
          </el-form-item>
          <el-form-item prop="imgText.summaryMaxLength" label="摘要长度" :verify="['Number']">
            <el-input v-model="tmpCondition.imgText.summaryMaxLength"></el-input>
          </el-form-item>
          <el-form-item prop="imgText.imgMaxSize" label="图片大小" :verify="['Regex=^[1-9]([0-9]{0,8})[kmgtpezybndKMGTPEZYBND]?[bB]?(?<!\d)$|必须以数字开头，单位为B,KB,M,MB,G,GB...']">
            <el-input v-model="tmpCondition.imgText.imgMaxSize"></el-input>
          </el-form-item>
          <el-form-item prop="imgText.imgPixelMaxWidth" label="图片分辨率宽" :verify="['Number']">
            <el-input v-model="tmpCondition.imgText.imgPixelMaxWidth"></el-input>
          </el-form-item>
          <el-form-item prop="imgText.imgPixelMaxHeight" label="图片分辨率高" :verify="['Number']">
            <el-input v-model="tmpCondition.imgText.imgPixelMaxHeight"></el-input>
          </el-form-item>
          <el-form-item prop="imgText.imgFormat" label="图片格式">
            <el-checkbox-group v-model="tmpCondition.imgText.imgFormat">
              <el-checkbox v-for="item in imgFormatOptions" :key="item.ID" :label="item.ID">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="imgText.contentMaxLengthMsg" label="提示信息">
            <el-input v-model="tmpCondition.imgText.contentMaxLengthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="imgText.summaryMaxLengthMsg" label="提示信息">
            <el-input v-model="tmpCondition.imgText.summaryMaxLengthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="imgText.imgMaxSizeMsg" label="提示信息">
            <el-input v-model="tmpCondition.imgText.imgMaxSizeMsg"></el-input>
          </el-form-item>
          <el-form-item prop="imgText.imgPixelMaxWidthMsg" label="提示信息">
            <el-input v-model="tmpCondition.imgText.imgPixelMaxWidthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="imgText.imgPixelMaxHeightMsg" label="提示信息">
            <el-input v-model="tmpCondition.imgText.imgPixelMaxHeightMsg"></el-input>
          </el-form-item>
          <el-form-item prop="imgText.imgFormatMsg" label="提示信息">
            <el-input v-model="tmpCondition.imgText.imgFormatMsg"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="detail-panel">
      <div class="panel-header">
        <div class="title">
          图片消息
        </div>
      </div>
      <el-row>
        <el-col :span="11" :offset="1">
          <el-form-item prop="img.imgMaxSize" label="图片大小" :verify="['Regex=^[1-9]([0-9]{0,8})[kmgtpezybndKMGTPEZYBND]?[bB]?(?<!\d)$|必须以数字开头，单位为B,KB,M,MB,G,GB...']">
            <el-input v-model="tmpCondition.img.imgMaxSize"></el-input>
          </el-form-item>
          <el-form-item prop="img.imgPixelMaxHeight" label="分辨率高" :verify="['Number']">
            <el-input v-model="tmpCondition.img.imgPixelMaxHeight"></el-input>
          </el-form-item>
          <el-form-item prop="img.imgPixelMaxWidth" label="分辨率宽" :verify="['Number']">
            <el-input v-model="tmpCondition.img.imgPixelMaxWidth"></el-input>
          </el-form-item>
          <el-form-item prop="img.descriptionMinLength" label="图片描述最小长度" :verify="['Number']">
            <el-input v-model="tmpCondition.img.descriptionMinLength"></el-input>
          </el-form-item>
          <el-form-item prop="img.descriptionMaxLength" label="图片描述最大长度" :verify="['Number']">
            <el-input v-model="tmpCondition.img.descriptionMaxLength"></el-input>
          </el-form-item>
          <el-form-item prop="img.imgFormat" label="图片格式">
            <el-checkbox-group v-model="tmpCondition.img.imgFormat">
              <el-checkbox v-for="item in imgFormatOptions" :key="item.ID" :label="item.ID">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="img.imgMaxSizeMsg" label="提示信息">
            <el-input v-model="tmpCondition.img.imgMaxSizeMsg"></el-input>
          </el-form-item>
          <el-form-item prop="img.imgPixelMaxHeightMsg" label="提示信息">
            <el-input v-model="tmpCondition.img.imgPixelMaxHeightMsg"></el-input>
          </el-form-item>
          <el-form-item prop="img.imgPixelMaxWidthMsg" label="提示信息">
            <el-input v-model="tmpCondition.img.imgPixelMaxWidthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="img.descriptionMinLengthMsg" label="提示信息">
            <el-input v-model="tmpCondition.img.descriptionMinLengthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="img.descriptionMaxLengthMsg" label="提示信息">
            <el-input v-model="tmpCondition.img.descriptionMaxLengthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="img.imgFormatMsg" label="提示信息">
            <el-input v-model="tmpCondition.img.imgFormatMsg"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="detail-panel">
      <div class="panel-header">
        <div class="title">
          语音消息
        </div>
      </div>
      <el-row>
        <el-col :span="11" :offset="1">
          <el-form-item prop="audio.audioMaxSize" label="音频大小" :verify="['Regex=^[1-9]([0-9]{0,8})[mgtpezybndMGTPEZYBND]?[bB]?(?<!\d)$|必须以数字开头，单位为B,KB,M,MB,G,GB...']">
            <el-input v-model="tmpCondition.audio.audioMaxSize"></el-input>
          </el-form-item>
          <el-form-item prop="audio.audioMaxLength" label="音频长度" :verify="['Regex=^[1-9]\d{0,5}[sSmMhH]+$|必须以数字开头单位为s/S m/M h/M']">
            <el-input v-model="tmpCondition.audio.audioMaxLength"></el-input>
          </el-form-item>
          <el-form-item prop="audio.descriptionMinLength" label="音频描述最小长度" :verify="['Number']">
            <el-input v-model="tmpCondition.audio.descriptionMinLength"></el-input>
          </el-form-item>
          <el-form-item prop="audio.descriptionMaxLength" label="音频描述最大长度" :verify="['Number']">
            <el-input v-model="tmpCondition.audio.descriptionMaxLength"></el-input>
          </el-form-item>
          <el-form-item prop="audio.audioFormat" label="音频格式">
            <el-checkbox-group v-model="tmpCondition.audio.audioFormat">
              <el-checkbox v-for="item in audioFormatOptions" :key="item.ID" :label="item.ID">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="audio.audioMaxSizeMsg" label="提示信息">
            <el-input v-model="tmpCondition.audio.audioMaxSizeMsg"></el-input>
          </el-form-item>
          <el-form-item prop="audio.audioMaxLengthMsg" label="提示信息">
            <el-input v-model="tmpCondition.audio.audioMaxLengthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="audio.descriptionMinLengthMsg" label="提示信息">
            <el-input v-model="tmpCondition.audio.descriptionMinLengthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="audio.descriptionMaxLengthMsg" label="提示信息">
            <el-input v-model="tmpCondition.audio.descriptionMaxLengthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="audio.audioFormatMsg" label="提示信息">
            <el-input v-model="tmpCondition.audio.audioFormatMsg"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="detail-panel">
      <div class="panel-header">
        <div class="title">
          视频消息
        </div>
      </div>
      <el-row>
        <el-col :span="11" :offset="1">
          <el-form-item prop="video.videoMaxSize" label="视频大小" :verify="['Regex=^[1-9]([0-9]{0,8})[mgtpezybndMGTPEZYBND]?[bB]?(?<!\d)$|必须以数字开头，单位为B,KB,M,MB,G,GB...']">
            <el-input v-model="tmpCondition.video.videoMaxSize"></el-input>
          </el-form-item>
          <el-form-item prop="video.videoMaxLength" label="视频长度" :verify="['Regex=\d{1,5}[sSmMhH]+$|必须以数字开头单位为s/S m/M h/M']">
            <el-input v-model="tmpCondition.video.videoMaxLength"></el-input>
          </el-form-item>
          <el-form-item prop="video.videoMaxRate" label="视频码率">
            <el-input v-model="tmpCondition.video.videoMaxRate"></el-input>
          </el-form-item>
          <el-form-item prop="video.descriptionMinLength" label="视频描述最小长度" :verify="['Number']">
            <el-input v-model="tmpCondition.video.descriptionMinLength"></el-input>
          </el-form-item>
          <el-form-item prop="video.descriptionMaxLength" label="视频描述最大长度" :verify="['Number']">
            <el-input v-model="tmpCondition.video.descriptionMaxLength"></el-input>
          </el-form-item>
          <el-form-item prop="video.videoFormat" label="视频格式">
            <el-checkbox-group v-model="tmpCondition.video.videoFormat">
              <el-checkbox v-for="item in videoFormatOptions" :key="item.ID" :label="item.ID">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="video.coverImagePixelMinWidthMsg" label="提示信息">
            <el-input v-model="tmpCondition.video.videoMaxSizeMsg"></el-input>
          </el-form-item>
          <el-form-item prop="video.coverImagePixelMaxWidthMsg" label="提示信息">
            <el-input v-model="tmpCondition.video.videoMaxLengthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="video.coverImagePixelMinHeightMsg" label="提示信息">
            <el-input v-model="tmpCondition.video.videoRateMsg"></el-input>
          </el-form-item>
          <el-form-item prop="video.coverImagePixelMaxHeightMsg" label="提示信息">
            <el-input v-model="tmpCondition.video.descriptionMinLengthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="video.coverImageFormatMsg" label="提示信息">
            <el-input v-model="tmpCondition.video.descriptionMaxLengthMsg"></el-input>
          </el-form-item>
          <el-form-item prop="video.videoFormatMsg" label="提示信息">
            <el-input v-model="tmpCondition.video.videoFormatMsg"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    conditionForm: Object
  },
  computed: {
    tmpCondition: {
      get() {
        return this.conditionForm
      },
      set(val) {
        this.$emit('update:conditionForm', val)
      }
    }
  },
  data() {
    return {
      imgFormatOptions: [],
      audioFormatOptions: [],
      videoFormatOptions: []
    }
  },
  async created() {
    let res = await Promise.all([
      axios.get('/ui/resourceformt/wechatimg'),
      axios.get('/ui/resourceformt/wechataudio'),
      axios.get('/ui/resourceformt/wechatvideo')
    ])
    this.imgFormatOptions = res[0].data.data
    this.audioFormatOptions = res[1].data.data
    this.videoFormatOptions = res[2].data.data
  }
}
</script>
