<template lang="html">
  <div class="checkTemplateDetailsVue pop-up">
    <div class="title">
      新建模板
      <i class="close" @click="close()"></i>
    </div>
    <div class="main">
      <div class="list">
        <p class="item">
          <span>检测模板名称</span>:
          <input type="text" name="" v-model="data.tempName" spellcheck="false">
        </p>
        <p class="item">
          <span>模板渠道</span>:
          <input type="text" name="" v-model="data.pt" spellcheck="false">
        </p>
        <p class="item">
          <span>等级</span>:
          <input type="text" name="" v-model="data.templateLv" spellcheck="false">
        </p>
        <p class="item">
          <span>设置人</span>:
          <input type="text" name="" :value="this.userInfo.username" disabled spellcheck="false">
        </p>
        <p class="item">
          <span>连通性测试</span>:
          <select class="" name="" v-model="data.needPing">
            <option :value="false">否</option>
            <option :value="true">是</option>
          </select>
        </p>
        <p class="item">
          <span>测试间隔(小时)</span>:
          <input type="text" name="" v-model="data.pingInterval" spellcheck="false" :disabled="!data.needPing">
        </p>
        <p class="item">
          <span>链接测试网站</span>:
          <input type="text" name="" v-model="data.pingUrlOne">
        </p>
        <p class="item">
          <span>测试网站二</span>:
          <input type="text" name="" v-model="data.pingUrlTwo">
        </p>
        <p class="item">
          <span>字段完整率</span>:
          <select class="" name="" v-model="data.needField">
            <option :value="false">否</option>
            <option :value="true">是</option>
          </select>
        </p>
        <p class="item">
          <span>测试间隔(小时)</span>:
          <input type="text" name="" v-model="data.fieldInterval" spellcheck="false" :disabled="!data.needField">
        </p>
        <p class="item">
          <span>字段选择</span>:
          <input type="text" name="" v-model="data.field" spellcheck="false" readonly @click="popup.fieldSelect = true">
        </p>
        <p class="item">
          <span>字段达标率(%)</span>:
          <input type="text" name="" v-model="data.fieldIntegrityRate" spellcheck="false">
        </p>
        <p class="item">
          <span>数据的延时性</span>:
          <select class="" name="" v-model="data.needDelayed">
            <option :value="false">否</option>
            <option :value="true">是</option>
          </select>
        </p>
        <p class="item">
          <span>测试间隔(小时)</span>:
          <input type="text" name="" v-model="data.delayedInterval" spellcheck="false" :disabled="!data.needDelayed">
        </p>
        <p class="item">
          <span>入库时间字段</span>:
          <input type="text" name="" v-model="data.savetime" spellcheck="false">
        </p>
        <p class="item">
          <span>产生时间字段</span>:
          <input type="text" name="" v-model="data.time" spellcheck="false">
        </p>
        <p class="item">
          <span>每次检查条数</span>:
          <input type="text" name="" v-model="data.testCount">
        </p>
        <p class="item">
          <span>延时要求</span>:
          <input type="text" name="" v-model="data.newsDelayed">
        </p>
        <p class="item">
          <span>预警邮箱</span>:
          <input type="text" name="" v-model="data.mail">
        </p>
        <p class="item">
          <span>低数据量预警</span>:
          <input type="text" name="" v-model="data.newsNumber">
        </p>
        <p class="item">
          <span>存储地址</span>:
          <input type="text" name="" v-model="data.host">
        </p>
        <p class="item">
          <span>端口</span>:
          <input type="text" name="" v-model="data.port">
        </p>
        <p class="item">
          <span>数据库名</span>:
          <input type="text" name="" v-model="data.dBName">
        </p>
        <p class="item">
          <span>表名</span>:
          <input type="text" name="" v-model="data.collection">
        </p>
        <p class="item">
          <span>采集主键</span>:
          <input type="text" name="" v-model="data.spyderInfoId">
        </p>
      </div>
    </div>
    <div class="btns">
      <button type="button" class="btn3" @click="submit()">确认</button>
      <button type="button" class="btn3" @click="close()">放弃</button>
    </div>

    <!-- 字段选择弹窗 -->
    <div class="mask" v-if="popup.fieldSelect">
      <field-select @close="popup.fieldSelect = false" :field="data.field" @change-field-list="changeFieldList" :all-fields="allFields" />
    </div>

  </div>
</template>

<script>
import { bus, requestSaveTmp } from '@/vuex/request.js'
import fieldSelect from '@/components/module/fieldSelect'

export default {
  components: {
    fieldSelect
  },
  data () {
    return {
      popup: {
        fieldSelect: false
      },
      data: {
        tempName: '',
        pt: '',
        templateLv: '',
        creator: '',
        needPing: false,
        pingInterval: 0,
        pingUrlOne: '',
        pingUrlTwo: '',
        needField: false,
        fieldInterval: 0,
        field: [''],
        fieldIntegrityRate: '',
        needDelayed: false,
        delayedInterval: 0,
        savetime: '',
        time: '',
        testCount: '',
        newsDelayed: '',
        mail: '',
        newsNumber: '',
        host: '',
        port: '',
        dBName: '',
        collection: '',
        spyderInfoId: ''
      }
    }
  },
  props: ['userInfo', 'allFields', 'ptSelectedData'],
  mounted () {
    // 弹框弹出动画
    window.$(() => {
      bus.$emit('pop-up-show', '.checkTemplateDetailsVue.pop-up')
    })
    // init
    this.data.creator = this.userInfo.username
    this.data.pt = this.ptSelectedData.pt
  },
  methods: {
    changeFieldList (list) {
      this.data.field = list
    },
    // 关闭弹窗&动画
    close () {
      window.$(() => {
        bus.$emit('pop-up-close', '.checkTemplateDetailsVue.pop-up')
        setTimeout(() => {
          this.$emit('close')
        }, 500)
      })
    },
    submit () {
      let params = this.data
      if (params.needPing && params.pingUrlOne === '') {
        bus.$emit('alert', '链接测试网站 不可为空！')
        return false
      }
      for (let n in params) {
        // 除去特殊几个外，其他都不为空
        if (params[n] === '' && !/spyderInfoId|pingUrlTwo/g.test(n)) {
          bus.$emit('alert', '必填项未填写')
          return false
        }
        // 部分值必须为整数
        if (/[^\d]/g.test(params[n]) && /templateLv|pingInterval|fieldInterval|delayedInterval|testCount|newsNumber|port|fieldIntegrityRate|newsDelayed/g.test(n)) {
          bus.$emit('alert', '等级、测试间隔、每次检查条数、低数据量预警、端口 必须为整数')
          return false
        }
        // if (/templateLv|pingInterval|fieldInterval|delayedInterval|testCount|newsNumber|port|fieldIntegrityRate|newsDelayed/g.test(n)) {
        //   if (/[^\d]/g.test(params[n])) {
        //     bus.$emit('alert', '等级、测试间隔、每次检查条数、低数据量预警、端口 必须为整数')
        //     return false
        //   } else {
        //     params[n] = parseInt(this.data[n])
        //   }
        // }
        if (n === 'host' && !/\d+\.\d+\.\d+\.\d+/g.test(params[n])) {
          bus.$emit('alert', '存储地址 必须为ip地址，如：192.168.0.242')
          return false
        }
      }

      params.field = this.data.field.join(',')

      console.log('checkTemplateAdd request params:', params)

      // {tmp: JSON.stringify(params)}
      let data = params
      requestSaveTmp(params, data, (response) => {
        if (response.data) {
          if (response.data.state) {
            bus.$emit('alert', response.data.message)
            this.$emit('update')
            this.$emit('close')
          } else {
            bus.$emit('alert', response.data.message)
          }
        } else {
          bus.$emit('alert', response + '.')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.checkTemplateDetailsVue{
  .main{
    .list{
      overflow: hidden;
      .item{
        width: 50%;
        float: left;
        margin-bottom: 20px;
        span{
          display: inline-block;
          width: 100px;
        }
        input, select{
          width: 200px;
          height: 31px;
          background-color: #2F363E;
          border: 1px solid #505A64;
          background-image: none;
          &[readonly]{
            cursor: pointer;
          }
        }
      }
    }
    .handle{
      line-height: 100px;
      padding-left: 50px;
      label.checkbox input[type=checkbox]+span{
        background-color: #262B31;
        box-shadow: 0 0 0 1px #262B31;
        margin-right: 10px;
      }
    }
  }
}
</style>
