<template>
  <div class="auto">
    <validator name='a' @valid="addressValid(true)" @invalid="addressValid(false)">
      <form class="form-horizontal">
        <div class="row">
          <div class="col-sm-4">
            <label class="font_normal_body">表编号&nbsp;&nbsp;&nbsp;</label>
            <input type="text" v-model="model.f_userinfo_id" disabled=disabled style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4">
            <label class="font_normal_body">用户编号</label>
            <input type="text" v-model="model.f_user_id" disabled=disabled style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4">
            <label class="font_normal_body">用户姓名</label>
            <input type="text" v-model="model.f_user_name"  disabled=disabled style="width: 60%" class="input_search">
          </div>
          <!--<div class="col-sm-4">-->
          <!--<label class="font_normal_body">收据类型</label>-->
          <!--<input type="text" v-model="model.f_bill_style" style="width: 60%" class="input_search">-->
          <!--</div>-->
        </div>
        <div class="row">
          <div class="col-sm-4">
            <label class="font_normal_body">用户类型</label>
            <input type="text" v-model="model.f_user_type" disabled=disabled style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4">
            <label class="font_normal_body">用气性质</label>
            <input type="text" v-model="model.f_gasproperties" disabled=disabled style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4">
            <label class="font_normal_body">补卡类型</label>
            <input type="text" v-model="model.f_fillcard_type" disabled=disabled  style="width: 60%" class="input_search">
          </div>

        </div>
        <div class="row">
          <div class="col-sm-4">
            <label class="font_normal_body">卡&nbsp;&nbsp;&nbsp;号&nbsp;&nbsp;&nbsp;</label>
            <input type="text" v-model="model.f_card_id" disabled=disabled  style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4">
            <label class="font_normal_body">卡&nbsp;&nbsp;&nbsp;费&nbsp;&nbsp;&nbsp;</label>
            <input type="text" v-model="model.f_cardfees"  style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4">
<!--            <label class="font_normal_body">付款方式</label>-->
<!--            <input type="text" v-model="model.f_payment"  style="width: 60%" class="input_search">-->
            <label class="font_normal_body" title="参数:付款方式">付款方式</label>
            <v-select id="f_payment"
                      v-model="model.f_payment" :value-single="true"
                      class="select_list select"
                      :value.sync="model.f_payment"
                      :options='paytype'
                      close-on-select >
            </v-select>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <label class="font_normal_body" title="参数:票据类型">票据类型</label>
            <v-select :value.sync="model.f_bill_style" v-model="model.f_bill_style"
                      :options='papertype' :value-single="true"
                      class="select_list select"
                      close-on-select></v-select>
<!--            <label class="font_normal_body">票据类型</label>-->
<!--            <input type="text" v-model="model.f_bill_style" style="width: 60%" class="input_search">-->
          </div>
          <div class="col-sm-4">
            <label class="font_normal_body">是否接表</label>
            <input type="text" v-model="model.f_ispick_table" disabled=disabled style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4">
            <label class="font_normal_body">补卡原因</label>
            <input type="text" v-model="model.f_reason"   style="width: 60%" class="input_search">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <label class="font_normal_body">补卡日期</label>
            <datepicker id="f_fillcard_date" placeholder="补卡日期" style="width:60%"
                        v-model="model.f_fillcard_date"
                        :value.sync="model.f_fillcard_date"
                        :format="'yyyy-MM-dd'"
                        :show-reset-button="true">
            </datepicker>
          </div>
          <div class="col-sm-4">
            <label class="font_normal_body">补气状态</label>
            <input type="text" v-model="model.f_fillcard_state" disabled=disabled style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4">
            <label class="font_normal_body">组&nbsp;&nbsp;&nbsp;织&nbsp;&nbsp;&nbsp;</label>
            <input type="text" v-model="model.f_orgname" disabled=disabled  style="width: 60%" class="input_search">
          </div>

        </div>
        <div class="row">
          <div class="col-sm-4">
            <label class="font_normal_body">部&nbsp;&nbsp;&nbsp;门&nbsp;&nbsp;&nbsp;</label>
            <input type="text" v-model="model.f_depname" disabled=disabled  style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4 ">
            <label class="font_normal_body" title="参数:操作人员查询">操作人员</label>
            <v-select :value.sync="model.f_operator"
                      v-model="model.f_operator"
                      :value-single="true"  @blur="selectoperator()"
                      :options='foperator'
                      close-on-select></v-select>
            <!--                      @click="selectoperator"-->
          </div>
          <div class="col-sm-4">
            <label class="font_normal_body">流水号&nbsp;&nbsp;&nbsp;</label>
            <input type="text" v-model="model.f_serial_id" disabled=disabled style="width: 60%" class="input_search">
          </div>
        </div>
      </form>
      <div style="float: right">
        <button class="button_search" @click="save">保存</button>
        <button class="button_clear" @click="cancel">取消</button>
      </div>
    </validator>
    <!--<modal :show.sync="showfiles" width="80%" style="width:auto;"  v-ref:modal middle backdrop="false">-->
      <!--<article slot="modal-body">-->
        <!--<upload :blodid="model.f_userinfo_id"  :businessid="model.id" v-ref:upload  fusetype="收费" isremark="true" style="width:auto" ></upload>-->
      <!--</article>-->
      <!--<footer slot="modal-footer" class="modal-footer">-->
      <!--</footer>-->
    <!--</modal>-->
    <!--&lt;!&ndash;文件上传按钮&ndash;&gt;-->
    <!--<button class="button_search" style="width: max-content" @click="uploadFiles()">上传附件</button>-->
  </div>
</template>

<script>
  import Vue from 'vue'
  import {HttpResetClass} from 'vue-client'
  import * as Util from "../../../../Util";
  var data
  export default {
    title: '基本信息',
    data () {
      return {
        equipmentType: this.$appdata.getParam('打印格式') ? [{label: '', value: ''}, ...this.$appdata.getParam('打印格式')] : [],
        // 构建数组来存储对象
        editbank: true,
        uploadText: '收费',
        papertype: this.$appdata.getParam('票据类型') ? [{label: '', value: ''}, ...this.$appdata.getParam('票据类型')] : [],
        paytype: this.$appdata.getParam('付款方式') ? [{label: '', value: ''}, ...this.$appdata.getParam('付款方式')] : [],
        showfiles: false,
        recordList: [],
        fileNameSet: {
          // 要更改字段的中文名
          'f_cardfees': '卡费',
          'f_payment': '付款方式',
          'f_bill_style': '票据类型',
          'f_reason': '补卡原因',
          'f_fillcard_date': '补卡日期'
        }
      }
    },
    props: {
      oldmodel: Object,
      model: Object
    },

    ready () {
      if (this.$login.r.includes('维护补卡信息')) {
        this.editbank = true
      }
      this.oldmodel = JSON.parse(JSON.stringify(this.model))
      this.model.f_bill_state = [this.oldmodel]
    },
    created () {
    },
    methods: {
      selectoperator () {
        let f_operator = this.model.f_operator
        console.log('处理签的this.f_operatorid', this.f_operatorid)
        let http = new HttpResetClass()
        http.load('POST', 'rs/logic/findOperator',
          {f_operator: f_operator},
          {resolveMsg: null, rejectMsg: null}).then((res) => {
            console.log('kanak,res', res)
            this.model.f_operatorid = res.data[0].id
            console.log('this.f_operatorid', this.f_operatorid)
          })
      },
      cancel () {
        this.$dispatch('close')
      },
      uploadFiles () {
        this.showfiles = !this.showfiles
      },
      addressValid (val) {
      },
      save () {
        // console.log(this.model.key)
        this.recordList = [] // 清空，防止重复提交
        console.log('newdate' + new Date())
        console.log('MODEL BEFORE:', this.model)
        for (var item in this.model) {
          if (this.model[item] instanceof Array) {
            this.model[item] = this.model[item].length > 0 ? this.model[item][0] : ''
          }
          if (this.model[item] != this.oldmodel[item] && this.model[item] !='s_timestamp') {
            var car = { // 需要更改的字段
              // t_fillcard
              id: this.model.id,
              f_user_id: this.model.f_user_id,
              chinesename: this.fileNameSet[item],
              fieldname: item,
              tablename: 't_fillcard',
              oldvalue: this.oldmodel[item],
              newvalue: this.model[item],
              state: '有效',
              modifitime: Util.toStandardTimeString(),
              operator: this.$login.f.name,
              changemeter_id: this.model.id,
              f_operate_date: this.model.f_operate_date,
              f_cardfees: this.model.f_cardfees,
              f_payment: this.model.f_payment,
              f_bill_style: this.model.f_bill_style,
              f_reason: this.model.f_reason != '' || null ? this.model.f_reason : '',
              f_fillcard_date: this.model.f_fillcard_date,
              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
            }
            this.recordList.push(car)
            // 该方法并未对chinesename fieldname operator等进行判断赋值，此暂写为定值
            console.log('看看car的值', car)
          }
        }

        this.$resetpost('rs/logic/replacementCardSaving', {data: {recordlist: this.recordList, newData: this.model}}).then((res) => {
          console.log('this.model', this.model)
        })
        this.$dispatch('close')
      }
    },
    computed: {
      foperator () {
        return [...this.$appdata.getParam('操作人员')]
      }
    },
    watch: {
      'model.f_user_name' () {
        if (this.model.f_operator) {
          this.selectoperator()
        }
      },
      'model.f_operator' () {
        if (this.model.f_operator) {
          this.selectoperator()
        }
      }
    }
  }
</script>

<style scoped>

</style>
