<template lang="html">
  <div class="checkInfoDetailsVue 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="" :value="data.templateName" disabled spellcheck="false" placeholder="UC">
        </p>
        <p class="item">
          <span>产生时间</span>:
          <input type="text" name="" :value="data.createDate" disabled class="dateInput" placeholder="2017-12-12" id="generationTime" readonly>
        </p>
        <p class="item big-area">
          <span>错误信息</span>:
          <!-- <input type="text" name="" :value="data.errorMsg" disabled spellcheck="false" placeholder="连接失败"> -->
          <textarea name="name" rows="8" cols="80" :value="data.errorMsg" disabled spellcheck="false" placeholder="连接失败"></textarea>
        </p>
        <p class="item">
          <span>所属级别</span>:
          <input type="text" name="" :value="data.templateLv" disabled spellcheck="false" placeholder="1">
        </p>
        <p class="item">
          <span>模板创建人</span>:
          <input type="text" name="" :value="data.templateCreator" disabled spellcheck="false" placeholder="沈金柱">
        </p>
        <p class="item">
          <span>是否已处理</span>:
          <input type="text" name="" :value="data.handle" disabled spellcheck="false" placeholder="沈金柱">
        </p>
        <p class="item">
          <span>处理人</span>:
          <input type="text" name="" :value="data.handler" disabled spellcheck="false" placeholder="沈金柱">
        </p>
        <p class="item big-area">
          <span>处理信息</span>:
          <textarea name="name" v-model="data.handleMsg" spellcheck="false" placeholder="无"></textarea>
        </p>
        <p class="item">
          <span>处理时间</span>:
          <input type="text" name="" :value="data.handleDate" disabled spellcheck="false" placeholder="沈金柱">
        </p>
      </div>
      <div class="handle" v-show>
        <label for="checkInfoDetailsVuePopUpCheckBox" class="checkbox">
          <input type="checkbox" name="" v-model="data.handle" id="checkInfoDetailsVuePopUpCheckBox">
          <span></span>
          已处理
        </label>
      </div>
    </div>
    <div class="btns">
      <button type="button" class="btn3" @click="close()">确定</button>
      <button type="button" class="btn3" @click="close()">返回</button>
    </div>
  </div>
</template>

<script>
// requestHandle
import { bus } from '@/vuex/request.js'
import moment from 'moment'

export default {
  data () {
    return {
      data: {
        messageId: '',
        templateName: '',
        createDate: '',
        errorMsg: '',
        templateLv: '',
        templateCreator: '',
        handle: false,
        handler: '',
        handleMsg: '',
        handleDate: ''
      }
    }
  },
  props: ['childrenData'],
  mounted () {
    // let self = this
    // 弹框弹出动画
    window.$(() => {
      bus.$emit('pop-up-show', '.checkInfoDetailsVue.pop-up')
    })
    // 初始化
    this.data = {
      messageId: this.childrenData.messageId,
      templateName: this.childrenData.templateName,
      createDate: moment(this.childrenData.createDate).format('YYYY-MM-DD HH:mm'),
      errorMsg: this.childrenData.errorMsg,
      templateLv: this.childrenData.templateLv,
      templateCreator: this.childrenData.templateCreator,
      handle: this.childrenData.handle,
      handler: this.childrenData.handler,
      handleMsg: this.childrenData.handleMsg,
      handleDate: moment(this.childrenData.handleDate).format('YYYY-MM-DD HH:mm')
    }
    // 自定义日历插件
    // window.$('#generationTime').DatePicker({
    //   format: 'Y-m-d',
    //   date: window.$('#generationTime').val(),
    //   current: window.$('#generationTime').val(),
    //   starts: 1,
    //   position: 'bottom',
    //   onBeforeShow: function () {
    //     window.$('#generationTime').DatePickerSetDate(window.$('#generationTime').val(), true)
    //   },
    //   onChange: function (formated, dates) {
    //     console.log(formated, dates)
    //     self.data.handleDate = formated
    //     window.$('#generationTime').val(formated)
    //     window.$('#generationTime').DatePickerHide()
    //   }
    // })
  },
  methods: {
    // 关闭弹窗&动画
    close () {
      window.$(() => {
        bus.$emit('pop-up-close', '.checkInfoDetailsVue.pop-up')
        setTimeout(() => {
          window.$('#generationTime').DatePickerClear()
          this.$emit('close')
        }, 500)
      })
    }
    // submit () {
    //   let params = {
    //     messageId: this.childrenData.messageId,
    //     // templateName: this.childrenData.templateName,
    //     // handleDate: this.childrenData.handleDate,
    //     // errorMsg: this.childrenData.errorMsg,
    //     // templateLv: this.childrenData.templateLv,
    //     // templateCreator: this.childrenData.templateCreator,
    //     handle: this.data.handle,
    //     handler: this.userInfo.username
    //   }
    //   requestHandle(params, {}, (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>
.checkInfoDetailsVue{
  .main{
    padding-bottom: 50px;
    .list{
      overflow: hidden;
      .item{
        width: 50%;
        float: left;
        margin-bottom: 20px;
        span{
          display: inline-block;
          width: 80px;
        }
        input{
          width: 219px;
          height: 31px;
          background-color: #2F363E;
          border: 1px solid #505A64;
        }
        &.big-area{
          width: 100%;
          vertical-align: top;
          textarea{
            min-width: 543px;
            max-width: 543px;
            min-height: 150px;
            max-height: 400px;
            background-color: #2F363E;
            border: 1px solid #505A64;
            padding: 6px;
          }
        }
      }
    }
    .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>
