<template>
  <div id="articleAddEdit">
    <div class="auto select-overspread">
      <validator name='v'>
        <ul class="nav nav-tabs">
          <li class="bg-info text-center"><a href="#">{{{title}}}</a></li>
        </ul>
        <div class="form-horizontal select-overspread container-fluid auto" style="margin-top:20px;flex: 1;">
          <div class="row">
            <div class="col-sm-6 form-group">
              <label class="font_normal_body">组织机构</label>
              <res-select restype='organization'
                          @res-select="getorg"
                          is-mul="false"
                          :initresid='curorgid'>
              </res-select>
            </div>
            <div class="col-sm-6 form-group">
              <label class="font_normal_body">文章标题</label>
              <input type="text" v-model="listinfo.f_title" class="input_search" style="width:60%" placeholder="文章标题">
            </div>
            <div class="col-sm-6 form-group">
              <label class="font_normal_body">文章类型</label>
              <v-select
                v-model="listinfo.f_type"
                placeholder='文章类型'
                :value.sync="listinfo.f_type"
                :options='getType'
                close-on-select value-single>
              </v-select>
            </div>
            <div class="col-sm-6 form-group">
              <label class="font_normal_body">文章链接</label>
              <input type="text" v-model="listinfo.f_link" class="input_search" style="width:60%" placeholder="文章链接">
            </div>
            <div class="col-sm-6 form-group">
              <label class="font_normal_body">权&emsp;&emsp;重</label>
              <input type="number" v-model="listinfo.f_weight" class="input_search" style="width:60%" placeholder="权重">
            </div>
            <div class="col-sm-6 form-group">
              <label class="font_normal_body">状&emsp;&emsp;态</label>
              <v-select
                v-model="listinfo.f_state"
                placeholder='文章类型'
                :value.sync="listinfo.f_state"
                :options='getState'
                close-on-select value-single>
              </v-select>
            </div>
            <div class="col-sm-6" v-if="listinfo.f_type === '轮播图'|| listinfo.f_type === '广告弹框' || listinfo.f_type === '便民服务'">
              <label class="font_normal_body">文章图片</label>
              <avatar-upload :img-src.sync="listinfo.img.content" :filename.sync="listinfo.img.filename"></avatar-upload>
            </div>
            <div class="col-sm-6" v-if="listinfo.f_img">
              <label class="font_normal_body">现存图片</label>
              <img-self :src="listinfo.f_img" alt="图片加载失败" :width="100" :height="100"></img-self>
            </div>
          </div>
        </div>
        <div class="row">
          <div style="float: right;">
            <button @click='clear()' class="btn button_clear" style="width: 70px">
              <span class="glyphicon glyphicon-log-out"></span>清空
            </button>
            <button @click="confirm()" class="btn button_search" style="width: 70px" :disabled="saveFlag">
              <span class="glyphicon glyphicon-floppy-disk"></span>保存
            </button>
          </div>
        </div>
      </validator>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        f_orgids: this.$login.f.orgid,
        f_operator: this.$login.f.name,
        curorgid: [this.$login.f.orgid],
        f_orgid: '',
        f_filialeids: ''
      }
    },
    props: {
      listinfo: {
        type: Object
      },
      title: {
        type: String
      }
    },
    ready () {
    },
    methods: {
      getorg (val) {
        this.f_orgid = this.$login.convertToIn(val)
        this.f_filialeids = val[0]
      },
      confirm () {
        let data = {content : ''}
        if (this.listinfo.id){
          this.listinfo.img = data
        }
        this.listinfo['f_edit_date'] = this.$login.toStandardTimeString()
        this.listinfo['f_operator'] = this.f_operator
        this.listinfo['f_orgid'] = this.f_filialeids ? this.f_filialeids : this.f_orgids
        this.$resetpost('wx/rs/logic/saveArticle', this.listinfo, {
          resolveMsg: '保存成功。',
          rejectMsg: '保存失败!!!',
          aoteEncrypt: this.weixin_mmType,
          encryKey: this.weixin_mm
        }).then((res) => { this.$dispatch('refresh') }
        )
      },
      clear () {
        let id = this.listinfo['id']
        if (id) {
          this.listinfo = {id: id}
        } else {
          this.listinfo = {}
        }
      }
    },
    watch: {},
    computed: {
      // 保存按钮条件
      saveFlag () {
        if (this.listinfo.f_type === '便民服务') {
          return (!(this.listinfo.f_title && this.listinfo.f_type && this.listinfo.f_link && this.listinfo.f_state && this.listinfo.img.content))
        } else {
          return (!(this.listinfo.f_title && this.listinfo.f_type && this.listinfo.f_link && this.listinfo.f_state))
        }
      },
      getState () {
        return [{label: '有效', value: '有效'}, {label: '无效', value: '无效'}]
      },
      getType () {
        return this.$appdata.getParam('微信文章类型')
      }
    }
  }
</script>
<style lang="less">
</style>
