<template>
  <div class="flex bg-white p-10 datapanel ">
    <div style="flex: 1.5;" class="flex">
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged :pager="!row && !areainfo" @sort="sort">
          <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch">
            <div novalidate class="form-inline auto" partial>
              <div class="form-group">
                <input type="text" class="form-control" v-model="model.f_title"
                       condition="f_title like '%{}%'" placeholder='标题'>
              </div>
              <div class="form-group">
                <input type="text" class="form-control" v-model="model.f_operator"
                       condition="f_operator like '%{}%'" placeholder='发布人'>
              </div>
              <div class="form-group">
                <button class="btn btn-success" @click="search(), $parent.$parent.clean()">查询</button>
              </div>
              <div class="form-group">
                <button class="btn btn-success" @click="$parent.$parent.add()">新增停气通知</button>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" v-ref:grid partial='list'>
            <template partial='head'>
              <tr>
                <th>
                  <nobr>序号</nobr>
                </th>
                <th>
                  <nobr>标题</nobr>
                </th>
                <th>
                  <nobr>内容</nobr>
                </th>
                <th>
                  <nobr>操作人</nobr>
                </th>
                <th>
                  <nobr>停气时间</nobr>
                </th>
                <th>
                  <nobr>来气时间</nobr>
                </th>
              </tr>
            </template>
            <template partial='body'>
              <td style="text-align: center;">{{$index + 1}}</td>
              <td style="text-align: center;">{{row.f_title}}</td>
              <td style="text-align: center;">{{row.f_content}}</td>
              <td style="text-align: center;">{{row.f_operator}}</td>
              <td style="text-align: center;">{{row.f_stop_date}}</td>
              <td style="text-align: center;">{{row.f_start_date}}</td>
            </template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
  </div>
  <div style="height: 500px;" v-show="row || areainfo" class="select-overspread">
    <notice-essential-info v-if="row || areainfo" :row="row" @clean="clean" :areainfo="areainfo" @success="renew"
                           @build-success="buildFileSuccess"></notice-essential-info>
  </div>

  <modal :show.sync="add_show"  backdrop="false" z-index="-1">
    <header slot="modal-header" class="modal-header">
      <h4 class="modal-title">发布停气通知</h4>
    </header>
    <article slot="modal-body" class="modal-body">
      <form class="form-horizontal" >
        <div class="form-group">
          <label for="f_title" class="control-label">标题</label>
          <input type="text"  class="form-control" v-model="model.f_title"
                 placeholder='标题'>
        </div>
        <div class="form-group">
          <label for="f_content" class="control-label">内容</label>
          <input type="text"  class="form-control" v-model="model.f_content"
                 placeholder='内容'>
        </div>
        <div class="form-group">
          <label for="f_stop_date" class="control-label">停气时间</label>
          <datepicker id="f_stop_date" placeholder="停气时间"
                      v-model="model.f_stop_date"
                      :value.sync="model.f_stop_date"
                      :disabled-days-of-Week="[]"
                      :format="'yyyy-MM-dd HH:mm:ss'"
                      :show-reset-button="reset">
          </datepicker>
        </div>
        <div class="form-group">
          <label for="f_start_date" class="control-label">来气时间</label>
          <datepicker id="f_start_date" placeholder="来气时间"
                      v-model="model.f_start_date"
                      :value.sync="model.f_start_date"
                      :disabled-days-of-Week="[]"
                      :format="'yyyy-MM-dd HH:mm:ss'"
                      :show-reset-button="reset">
          </datepicker>
        </div>

      </form>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-success":disabled='!$v.valid' @click='addConfirm'>确认</button>
      <button type="button" class="btn btn-default" @click='addclose'>取消</button>
    </footer>
  </modal>
</template>

<script>

  import {PagedList} from 'vue-client'
  import Vue from 'vue'
  import co from 'co'

  let areaGen = function * (self) {
    let data = {}
    data.f_grade = self.model.f_grade[0] ? self.model.f_grade[0] : ''
  }
  let loadParamGem = async function (self) {
    console.log('获取登录信息，', self.$login, self.$appdata, self.$appdata.getParam('用户类型'), Vue.$login.f.name)
    self.headers.username = Vue.$login.f.name
    self.headers.username = Vue.$login.guid()
    await self.search()
    await self.$LoadParams.loadParam()

  }
  let add = async function (self) {
    console.log('self:',self)
    let param = {
      f_title: [self.model.f_title,''],
      f_f_operate_date: self.$login.toStandardTimeString(),
      f_operator: self.$login.f.name,
      f_content : self.model.f_content,
      f_stop_date: self.model.f_stop_date ,
      f_start_date: self.model.f_start_date ,
      user:'1=1'
    }
    self.$resetpost('rs/logic/savenotification', param).then(() => {
      // this.params.rows.splice(index, 1)
      console.log('发布成功！')/*
      this.$refs.paged.$refs.criteria.search()*/
      this.f_error_reason = ''
    })
    self.add_show = false
    self.search()
  }

  export default {
    'title': '停气通知',
    data () {
      return {
        model: new PagedList('rs/sql/singleTable_OrderBy', 30, {items: '`*`', tablename: '`t_notification`', orderitem: '`id`'}),
        // 选择一条公告信息，对其进行修改
        rows: [], // 用户档案选择一条时，将只显示一条信息，rows用来存放整页的数据
        contract: [{label: '全部', value: ' is null or f_contract_id is not null'}, {label: '有', value: ' is not null'},
          {label: '无', value: ' is null'}],
        orderDefault: 'f_modify_date desc',
        orderFields: {
          f_userinfo_id: 'no'
        },

        isChange:false,
        userlist: false,
        row: null,
        boxmodel: null,
        // 销户启用
        batcan: false,
        batenable: false,

        add_show:false,

        inputtores: this.$appdata.getParam('抄表员'),
        adjustables: []
      }
    },
    ready () {
      this.search()
      /*loadParamGem(this)*/
    },
    methods: {


      search () {
        console.log('condition:',condition)
        let condition = "1=1"
        this.model.search(condition)
      },
      add(){
        console.log('新增')
        this.add_show = true
      },

      addclose(){
        this.add_show=false
      },


      async addConfirm(){
        if(!this.model.f_title){
          this.$showAlert("输入标题","warning", 1500)
          return
        }

        await this.$showMessage(`是否确认添加新的公告`, ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            add(this)
          }

        })
      },
      clean () {
        Object.keys(this.$refs.paged.$refs.criteria.model).forEach((key) => {
          this.$refs.paged.$refs.criteria.model[key] = ''
        })
      },
      /* download(row){
         this.updaterow=row
         console.log('download')
         downloadfile(this)
       },*/




      selfSearch (args) {
        args.condition = `${args.condition}`
        this.model.search(args.condition, args.model)
      }




    },
    computed: {



    },
    watch: {

    },
    events: {

    }
  }
</script>
<style>
  .nav-tabss ul > li > a {
    padding: 5px 10px;
  }
</style>
