<template>
  <div class="auto form-horizontal" >
    <modal :show.sync="show" width="800px" v-ref:modal middle backdrop="false">
      <header slot="modal-header" class="modal-header">
        <h3 style="color:black" class="modal-title">新增短信模版</h3>
      </header>
      <article slot="modal-body" style = "padding-bottom:10px;padding-top: 20px">
        <div class="row auto">
          <div class="col-sm-6" style="text-align: center;">
            <label class="control-label">短信类型:</label>
            <v-select id="f_send_type"
                      v-model="model.f_send_type"
                      placeholder='短信类型'
                      :value.sync="model.f_send_type"
                      :options='getsendType'
                      width="300px"
                      close-on-select clear-button>
            </v-select>
          </div>
          <div class="col-sm-6"  style="text-align: center;">
            <label >模板id:</label>
            <input  type="text" class= "input_search"  v-model="model.f_templateid" placeholder='模板id'>
          </div>
        </div>
        <div class="row auto" style="margin-left: 20px;margin-right: 20px" >
          <textarea class="form-control col-sm-4" v-model="model.f_user_defined" rows="3" placeholder="短信内容" cols="10"></textarea>
        </div>
        <div class="row auto" style="text-align: center;">
          <h4><b>字数:<span style="color: #5cb85c">{{fontSize}}</span></b></h4>
        </div>
        <div class="row">
          <h4>说明：<button class="btn btn-info button-range width-60" style="margin-right: 10px;" @click="downloadFiles">更多</button></h4>
          {"f_meter_classify":"气表分类",
          "f_userinfo_code": "客户编号",
          "f_userinfo_id": "户编号",
          "f_user_name":	"用户姓名",
          "f_oughtamount":	"用气量",
          "f_oughtfee":	"用气金额",
          "f_debt_money":	"已交金额"
          "overdue":"违约金",
          "f_last_tablebase":"上期表底数",
          "f_balance":"本期账户余额",
          "f_oughtfee_all":"合计欠费金额"}
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-info width-60" @click="confirm()">保存</button>
        <button type="button" class="btn btn-default width-60" @click='cancel()'>取消</button>
      </footer>
    </modal>
  </div>
</template>
<script>
  import Vue from 'vue'
export default {
  title: '新增短信模版',
  data () {
    return {
      model: {
        f_user_defined: '',
        f_templateid: ''
      },
      fontSize: 0,
      getsendType: this.$appdata.getParam('短信类型')
    }
  },
  props: ['show'],
  methods: {
    downloadFiles(){
      let downurl='rs/downloadfile/file?filename=短信说明';
      this.$downFile(downurl,'短信说明.xlsx')
    },
    cancel  () {
      this.model.f_user_defined = ''
      this.$dispatch('toggle')
    },
    confirm () {
      if (this.model.f_send_type[0] === '') {
        this.$showAlert('短信类型及模板内容不能为空！', 'danger', 3000)
      } else {
        let setpos = {
          f_send_type: this.model.f_send_type[0],
          f_templateid: this.model.f_templateid,
          f_user_defined: this.model.f_user_defined.replace(/'/g, `''`).replace(/"/g, `''`),
          f_state: '有效',
          f_operator: Vue.$login.f.name,
          f_operatorid: Vue.$login.f.id,
          f_orgid: Vue.$login.f.orgid,
          f_orgname: Vue.$login.f.orgs,
          f_depid: Vue.$login.f.depids,
          f_depname: Vue.$login.f.deps,
          f_zoneid: Vue.$login.f.zoneid,
          f_zones: Vue.$login.f.zones

        }
        this.$resetpost('rs/entity/t_send_model', setpos, {resolveMsg: '模板保存成功', rejectMsg: '模板保存失败'})
        this.$dispatch('definedMessage', this.model.f_user_defined)
      }
    }
  },
  watch: {
    'model.f_user_defined' (val) {
      console.log(val)
      this.fontSize = val.length
      console.log(this.fontSize)
    }
  },
  computed: {

  }
}
</script>
<style >
</style>
