<template>
  <div>
    <el-form :model="tmpCondition" label-suffix="：" label-width="160px">
      <div class="detail-panel">
        <div class="panel-header">
          <div class="title">
            图文消息
          </div>
        </div>
        <el-row>
          <el-col :span="10" :offset="1">
            <el-form-item prop="imgText.titleMinLength" label="标题最小长度" :verify="['Number']">
              <el-input v-model="tmpCondition.imgText.titleMinLength"></el-input>
            </el-form-item>
            <el-form-item prop="imgText.titleMaxLength" label="标题最大长度" :verify="['Number']">
              <el-input v-model="tmpCondition.imgText.titleMaxLength"></el-input>
            </el-form-item>
            <el-form-item prop="imgText.contentMinLength" label="内容最小长度" :verify="['Number']">
              <el-input v-model="tmpCondition.imgText.contentMinLength"></el-input>
            </el-form-item>
            <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.summaryMinLength" label="摘要最小长度" :verify="['Number']">
              <el-input v-model="tmpCondition.imgText.summaryMinLength"></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.imgMaxCount" label="图片数量" :verify="['Number']">
              <el-input v-model="tmpCondition.imgText.imgMaxCount"></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.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="12">
            <el-form-item prop="imgText.titleMinLengthMsg" label="提示信息">
              <el-input v-model="tmpCondition.imgText.titleMinLengthMsg"></el-input>
            </el-form-item>
            <el-form-item prop="imgText.titleMaxLengthMsg" label="提示信息">
              <el-input v-model="tmpCondition.imgText.titleMaxLengthMsg"></el-input>
            </el-form-item>
            <el-form-item prop="imgText.contentMinLengthMsg" label="提示信息">
              <el-input v-model="tmpCondition.imgText.contentMinLengthMsg"></el-input>
            </el-form-item>
            <el-form-item prop="imgText.contentMaxLengthMsg" label="提示信息">
              <el-input v-model="tmpCondition.imgText.contentMaxLengthMsg"></el-input>
            </el-form-item>
            <el-form-item prop="imgText.summaryMinLengthMsg" label="提示信息">
              <el-input v-model="tmpCondition.imgText.summaryMinLengthMsg"></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.imgMaxCountMsg" label="提示信息">
              <el-input v-model="tmpCondition.imgText.imgMaxCountMsg"></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.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="10" :offset="1">
            <el-form-item prop="video.titleMinLength" label="标题最小长度" :verify="['Number']">
              <el-input v-model="tmpCondition.video.titleMinLength"></el-input>
            </el-form-item>
            <el-form-item prop="video.titleMaxLength" label="标题最大长度" :verify="['Number']">
              <el-input v-model="tmpCondition.video.titleMaxLength"></el-input>
            </el-form-item>
            <el-form-item prop="video.summaryMinLength" label="摘要最小长度" :verify="['Number']">
              <el-input v-model="tmpCondition.video.summaryMinLength"></el-input>
            </el-form-item>
            <el-form-item prop="video.summaryMaxLength" label="摘要最大长度" :verify="['Number']">
              <el-input v-model="tmpCondition.video.summaryMaxLength"></el-input>
            </el-form-item>
            <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.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="12">
            <el-form-item prop="video.titleMinLengthMsg" label="提示信息">
              <el-input v-model="tmpCondition.video.titleMinLengthMsg"></el-input>
            </el-form-item>
            <el-form-item prop="video.titleMaxLengthMsg" label="提示信息">
              <el-input v-model="tmpCondition.video.titleMaxLengthMsg"></el-input>
            </el-form-item>
            <el-form-item prop="video.summaryMinLengthMsg" label="提示信息">
              <el-input v-model="tmpCondition.video.summaryMinLengthMsg"></el-input>
            </el-form-item>
            <el-form-item prop="video.summaryMaxLengthMsg" label="提示信息">
              <el-input v-model="tmpCondition.video.summaryMaxLengthMsg"></el-input>
            </el-form-item>
            <el-form-item prop="video.videoMaxSizeMsg" label="提示信息">
              <el-input v-model="tmpCondition.video.videoMaxSizeMsg"></el-input>
            </el-form-item>
            <el-form-item prop="video.videoMaxLengthMsg" label="提示信息">
              <el-input v-model="tmpCondition.video.videoMaxLengthMsg"></el-input>
            </el-form-item>
            <el-form-item prop="video.videoMaxRateMsg" label="提示信息">
              <el-input v-model="tmpCondition.video.videoMaxRateMsg"></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>
    </el-form>
  </div>
</template>

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