<template>
  <div class="auto">
    <form novalidate class="form-horizontal">
      <p class="bg-info text-center" style="padding: 8px;">增值服务管理</p>
      <div style="width:100%;min-height:300px;">
        <div v-if="!isshow" style="width:100%;height:50px;">
          <p class="titleshow1">当前无增值管理信息！</p>
        </div>
        <div v-for="(index,row) in model" style="width:100%;height:66px;">
          <div class="row showlist" v-if="isshow">
            <div class="form-group col-sm-2">
              <p class="titleshow">{{ row.value_type }}</p>
            </div>
            <div class="form-group col-sm-2">
              <input class="col-sm-3" style="zoom: 200%;margin-top:0" @click="changeisuse(1,row,index)" type="checkbox"
                     name="optionsRadios" :id="'optionsRadios'+index" value="option1"
                     :checked="row.isuse==='是'?'checked':''">
              <label class="col-sm-3"> 是 </label>
              <input class="col-sm-3" style="zoom: 200%;margin-top:0" @click="changeisuse(0,row,index)" type="checkbox"
                     name="optionsRadios" :id="'optionsRadiosno'+index" value="option2"
                     :checked="row.isuse!=='是'?'checked':''">
              <label class="col-sm-3"> 否 </label>
            </div>
            <div>
              <label class=" control-label">购买时间:</label>
              <datepicker id="startDate" placeholder="输入年-月-日" style="width:60%"
                          v-model="row.startDate" :disabled="row.isuse=='否'"
                          :value.sync="row.startDate"
                          @change="changeconfirm(row)"
                          :format="'yyyy-MM-dd'"
                          v-ref:datepick
                          :show-reset-button="true">
              </datepicker>
              <span v-show="othershow" style="color: #999;right:30px;" class="glyphicon glyphicon-calendar"></span>
            </div>
            <textarea rows="2" v-model="row.f_remark" style="margin: 0; border: 2px solid rgb(140, 188, 226); width: 231px; height: 33px;resize: none;"  placeholder='备注信息'></textarea>
            <div style=" margin-right:6%;margin-left: 2%;" v-if="isshow">
              <button type="button" :style="{background:row.color}"
                      style="border-radius:5px;margin: 0 auto; display: block;border:none" class="btn btn-success"
                      @click="confirm(row)" :disabled='!$v.valid' id='components-comOpe-othCha'>提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
import {HttpResetClass} from 'vue-client'

let getvalueaddinfo = async function (self) {
  let http = new HttpResetClass()
  let param = {
    f_userfiles_id: self.row.f_userfiles_id,
    f_userinfo_id: self.row.f_userinfo_id
  }
  if (self.row.f_olduserinfo_code) {
    param.f_olduserinfo_code = self.row.f_olduserinfo_code
  }
  let valueaddinfo = await http.load('POST', 'rs/logic/chargevalueaddinfo', param, {resolveMsg: null, rejectMsg: null})
  let tempdata = []
  if (valueaddinfo.data && valueaddinfo.data.length > 0) {
    self.isshow = true
    valueaddinfo.data.forEach(itemget => {
      if (itemget.endDate == null) {
        itemget.endDate = '1900-01-01 00:00:00'
      }
      let tempitem = {
        value_type: itemget.value_type,
        isuse: itemget.isuse,
        startDate: itemget.startDate.substring(0, 10),
        f_remark: itemget.f_remark,
        endDate: itemget.endDate.substring(0, 10),
        color: '#b0b7b9'
      }
      tempdata.push(tempitem)
    })
    self.$set('model', tempdata)
  } else {
    self.isshow = false
  }
  self.oldmodel = JSON.parse(JSON.stringify(self.model))
}

export default {
  title: '增值服务管理',
  data() {
    return {
      valueaddinfo: [...this.$appdata.getParam('增值服务类型')],
      model: [
        {
          value_type: '',
          isuse: '否',
          startDate: '',
          endDate: '',
          f_remark: ''
        }
      ],
      oldmodel: [],
      valueaddoptions: [{label: '是', value: '是'}, {label: '否', value: '否'}],
      hasinfo: -1,
      allhasinfo: 0,
      showParame: false,
      isshow: false,
      screenheight: window.screen.height,
      screenwidth: window.screen.width,
      othershow: true
    }
  },
  props: ['row'],
  ready() {
    this.initData()
    getvalueaddinfo(this)
  },
  methods: {
    changeconfirm(row) {
      row.color = '#00B8EE'
    },
    changeisuse(value, row, index) {
      let options1 = document.querySelector('#optionsRadios' + index)
      let options2 = document.querySelector('#optionsRadiosno' + index)
      if (value == 1 && row.isuse == '是') {
        options1.checked = true
        return
      } else if (value == 0 && row.isuse == '否') {
        options2.checked = true
        return
      }

      row.color = '#00B8EE'
      if (value == 1) {
        row.isuse = '是'
        row.startDate = this.$login.toStandardDateString()
        options1.checked = true
        options2.checked = false
      }
      if (value == 0) {
        row.isuse = '否'
        options1.checked = false
        options2.checked = true
        row.startDate = ''
        row.endDate = ''
      }
    },
    reflush() {
      this.initData()
      getvalueaddinfo(this)
      this.$dispatch('resflushvalue')
    },
    mValid(bool) {
      this.row.valid = bool
      this.$dispatch('self-valid')
    },
    initData() {
      if (this.screenwidth >= 1920 && this.screenheight >= 1080) {
        this.othershow = true
      } else {
        this.othershow = false
      }
      if (this.valueaddinfo.length > 0) {
        this.model = []
        this.valueaddinfo.forEach(item => {
          let temp = {
            value_type: item.value,
            isuse: '否',
            startDate: '',
            endDate: ''
          }
          this.model.push(temp)
        })
      }
    },
    confirm(savemodel) {
      if (savemodel == null || savemodel.value_type == null) {
        this.$showAlert('当前无任何增值业务,请联系管理员进行添加!!', 'warning', 2000)
        return
      }
      if (savemodel.isuse == '是' && (savemodel.startDate == '')) {
        this.$showAlert('请输入购买时间!!', 'warning', 2000)
        return
      }
      if (savemodel.startDate.indexOf(':') < 0) {
        savemodel.startDate = savemodel.startDate.substring(0, 10)
      }
      if (savemodel.endDate.indexOf(':') < 0) {
        savemodel.endDate = savemodel.endDate.substring(0, 10)
      }
      // 处理数据
      let savearrdata = []
      savearrdata.push(savemodel)
      let param = {
        oldvalueinfo: this.oldmodel,
        valueinfo: savearrdata,
        userinfo: this.row,
        f_operator: this.$login.f.name,
        f_operatorid: this.$login.f.id,
        f_orgid: this.$login.f.orgid,
        f_orgname: this.$login.f.orgs,
        f_depid: this.$login.f.depids,
        f_depname: this.$login.f.deps,
        f_zoneid: this.$login.f.zoneid,
        f_zones: this.$login.f.zones
      }
      this.$resetpost('rs/logic/chargevaluesave', param).then((res) => {
        if (res.data) {
          this.reflush()
        }
      })
    },
    clean() {
      this.$dispatch('clean', this.row)
    },
    close() {
      this.clean()
    },
    changetimes(row) {
      row.startDate = ''
      row.endDate = ''
    }
  },
  computed: {}
}
</script>
<style scoped>
.titleshow {
  text-align: left;
  font-weight: bold;
  font-size: 17px;
  margin: 5px 0 0 5px;
  border-left: 5px solid #81ced6;
  padding-left: 10px;
}

.titleshow1 {
  text-align: center;
  font-weight: bold;
  font-size: 19px;
  margin: 5px 0 0 5px;
}

.showlist {
  border-top: 1px solid #e2dfdf;
  border-bottom: 1px solid #e2dfdf;
  padding-top: 16px;
  margin-top: 9px;
  width: 100%;
  height: 100%;
  display: flex;
}


</style>
