<template>
  <div class="auto"  id="meterInfoTest">
    <validator name='a' @valid="addressValid(true)" @invalid="addressValid(false)">
      <form class="form-horizontal">
        <div class="row">
          <div class="col-sm-4 form-group">
            <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 form-group">
            <label class="font_normal_body" title="参数:收费状态, 权限:【收费记录状态修改】">收费状态</label>
<!--            <input type="text" v-model="model.f_charge_state" disabled=disabled style="width: 60%" class="input_search">-->
            <v-select :value.sync="model.f_state" v-model="model.f_state"
                      :value-single="true"
                      :search="false"
                      :disabled="editstate"
                      :options='positions' placeholder='收费状态'
                      close-on-select>
            </v-select>
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body">地&emsp;&emsp;址</label>
            <input type="text" v-model="model.f_address" disabled=disabled style="width: 60%" class="input_search">
          </div>
          <!--<div class="col-sm-4 form-group">
            <label class="font_normal_body">用户编号</label>
            <input type="text" v-model="model.f_userinfo_code" disabled=disabled style="width: 60%" class="input_search">
          </div>-->
          <div class="col-sm-4 form-group">
            <label class="font_normal_body" title="参数:付款方式查询">付款方式</label>
<!--            <input type="text" v-model="model.f_payment" style="width: 60%" class="input_search">-->
            <v-select :value.sync="model.f_payment" v-model="model.f_payment"
                      :options='payments' placeholder='付款方式'
                      :value-single="true"
                      :search="false"
                      close-on-select>
            </v-select>
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body" title="参数:写卡状态">写卡状态</label>
<!--            <input type="text" v-model="model.f_write_card" style="width: 60%" class="input_search">-->
            <v-select :value.sync="model.f_write_card" v-model="model.f_write_card"
                      :options='writeCards' placeholder='写卡状态'
                      :value-single="true"
                      :search="false"
                      close-on-select>
            </v-select>
          </div>
          <div class="col-sm-4 form-group" title="修正需权限：【收费记录维护金额权限】">
            <label class="font_normal_body">收款金额</label>
            <input type="text" v-model="model.f_collection" :disabled="!editcollection"  style="width: 60%" class="input_search">
          </div>
          <!--<div class="col-sm-4 form-group">-->
            <!--<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 form-group">
            <label class="font_normal_body">转账单位</label>
            <input type="text" v-model="model.f_banktransfer_person" :disabled="!editbank" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body">转账金额</label>
            <input type="text" v-model="model.f_banktransfer_money" :disabled="!editbank" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body">转账日期</label>
<!--            <input type="text" v-model="model.f_banktransfer_date" :disabled="!editbank" style="width: 60%" class="input_search">-->
            <datepicker id="f_banktransfer_date" placeholder="转账日期" style="width:60%"
                        v-model="model.f_banktransfer_date"
                        :value.sync="model.f_banktransfer_date"
                        :format="'yyyy-MM-dd HH:mm:ss'"
                        :show-reset-button="true">
            </datepicker>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4 form-group" title="参数:操作时间, 权限:【收费记录时间修改】">
            <label class="font_normal_body">操作时间</label>
            <!--<input type="text" v-model="model.f_delivery_date"  style="width: 60%"  class="input_search">-->
            <datepicker id="f_delivery_date" placeholder="操作时间" style="width:60%"
                        v-model="model.f_operate_date"
                        :value.sync="model.f_operate_date"
                        :disabled="editDate"
                        :format="'yyyy-MM-dd HH:mm:ss'"
                        :show-reset-button="true">
            </datepicker>
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body">财务核算日期</label>
            <!--<input type="text" v-model="model.f_delivery_date"  style="width: 60%"  class="input_search">-->
            <datepicker id="f_delivery_date" placeholder="财务核算日期" style="width:60%"
                        v-model="model.f_accounting_date"
                        :value.sync="model.f_accounting_date"
                        :format="'yyyy-MM-dd HH:mm:ss'"
                        :show-reset-button="true">
            </datepicker>
          </div>
          <div class="col-sm-4 form-group" title="修正需权限：【收费记录维护金额权限】">
            <label class="font_normal_body">购气气量</label>
            <input type="text" v-model="model.f_pregas" :disabled="!editcollection" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4 form-group" title="修正需权限：【收费记录维护金额权限】">
            <label class="font_normal_body">购气金额</label>
            <input type="text" v-model="model.f_preamount" :disabled="!editcollection" style="width: 60%" class="input_search">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4 form-group" title="修正需权限：【收费记录维护操作员权限】">
            <label class="font_normal_body" title="参数:操作人员">操作人员</label>
            <v-select :value.sync="model.f_operatorid"
                      v-model="model.f_operatorid"
                      :disabled="!editoperator"
                      :value-single="true"  @change="selectoperator()"
                      :options='foperator'
                      close-on-select></v-select>
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body">所属部门</label>
            <input type="text" v-model="model.f_depname" disabled=disabled style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body">所属公司</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 form-group">
            <label class="font_normal_body" title="打印格式">收据类型</label>
            <v-select id="f_bill_style"
                      placeholder='收据类型'
                      :value-single="true"
                      :value.sync="model.f_bill_style"
                      :options='equipmentType'
                      close-on-select clear-button>
            </v-select>
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body">开发票人</label>
            <input type="text" v-model="model.f_bill_operator" disabled=disabled  style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body">发票时间</label>
            <datepicker id="f_bill_date" placeholder="开发票时间" style="width:60%"
                        v-model="model.f_bill_date"
                        :value.sync="model.f_bill_date"
                        :format="'yyyy-MM-dd'"
                        :show-reset-button="true">
            </datepicker>
            <!--<input type="text" v-model="model.f_bill_date"   style="width: 60%" class="input_search">-->
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4 form-group">
            <label class="font_normal_body">流&ensp;水&ensp;号</label>
            <input type="text" v-model="model.f_serial_id" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body">业务单号</label>
            <input type="text" v-model="model.f_serial_number" style="width: 60%" class="input_search">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12 form-group">
            <label class="font_normal_body">备注信息</label>
            <input type="text" v-model="model.f_comments"  style="width: 85%" 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  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>
    <!--文件上传按钮-->
    <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
  let readyGen = async function (self) {
    await self.$LoadParams.loadParam(self.f_filialeid)
    await self.$GetSaleParam.initinputtor()
  }
  export default {
    title: '基本信息',

    data () {
      return {
        equipmentType: this.$appdata.getParam('打印格式') ? [{label: '', value: ''}, ...this.$appdata.getParam('打印格式')] : [],
        // 构建数组来存储对象
        editbank: true,
        editcollection: false,
        editoperator: false,
        uploadText: '收费',
        showfiles: false,
        recordList: [],
        foperator: [],
        fileNameSet: {
          'f_payment': '收费形式',
          'f_state': '是否有效',
          'f_bill_style': '收据类型',
          'f_operate_date': '收费日期',
          'f_accounting_date': '财务核算日期',
          'f_pregas': '购气气量',
          'f_address': '地址',
          'f_user_type': '用气性质',
          'f_preamount': '充值金额',
          'f_orgname': '所属公司',
          'f_depname': '所属部门',
          'f_user_name': '用户姓名',
          'f_write_card': '写卡状态',
          'f_banktransfer_person': '转账单位',
          'f_banktransfer_money': '转账金额',
          'f_banktransfer_date': '转账日期',
          'f_comments': '备注信息',
          'f_bill_date': '开票时间',
          'f_bill_operator': '开票人',
          'f_serial_id': '流水号',
          'f_serial_number': '业务单号'
        },
        editstate: true,
        editDate: true
      }
    },
    props: {
      oldmodel: Object,
      model: Object
    },

    ready () {
      if (this.$login.r.includes('维护银行转账信息')) {
        this.editbank = true
      }
      if (this.$login.r.includes('收费记录维护金额权限')) {
        this.editcollection = true
      }
      if (this.$login.r.includes('收费记录维护操作员权限')) {
        this.editoperator = true
      }
      if (this.$login.r.includes('收费记录状态修改')) {
        this.editstate = false
      }
      if (this.$login.r.includes('收费记录时间修改')) {
        this.editDate = false
      }
      this.oldmodel = JSON.parse(JSON.stringify(this.model))
      this.model.f_bill_state = [this.oldmodel]
      console.log('看看收费id', this.oldmodel)
      readyGen(this)
    },
    created () {
    },
    methods: {
      initoperator () {
        this.foperator = []
        console.log('this.$login', this.$login, this.oldmodel, this.model)
        let arr = this.$GetSaleParam.inputtors.filter((res) => {
          if (res.rolestr != null && res.rolestr != '') {
            return res.rolestr.indexOf('营业员') > -1 && res.f_department_name == this.model.f_depname
          }
        })
        arr.forEach((res) => {
          this.foperator.push({label: res.name, value: res.id})
        })
      },
      selectoperator () {
        let id = this.model.f_operatorid
        if (!this.model.f_operatorid) {
          return
        }
        let http = new HttpResetClass()
        http.load('POST', 'rs/sql/saleSingleTable',
          {data: {tablename: 't_user',
            condition: `id = '${id}'`}},
          {resolveMsg: null, rejectMsg: null}).then((res) => {
            console.log('kanak,res', res)
            if (res.data.length > 0) {
              this.model.f_operator = res.data[0].name
            } else {
              this.model.f_operatorid = ''
              this.$showAlert('操作员信息未找到', 'warning', 2000)
            }
            console.log('this.f_operatorid', this.model.f_operator)
          })
      },
      cancel () {
        this.$dispatch('close')
      },
      uploadFiles () {
        this.showfiles = !this.showfiles
      },
      addressValid (val) {
      },
      save () {
        // console.log(this.model.key)
        //
        for (var item in this.model) {
          if (item != 'f_sendsuccess') {
            if (this.model[item] != this.oldmodel[item] && this.model[item] != 's_timestamp') {
              var car = {
                chinesename: this.fileNameSet[item],
                fieldname: item,
                tablename: 't_sellinggas',
                oldvalue: this.oldmodel[item],
                newvalue: this.model[item],
                state: '有效',
                modifitime: Util.toStandardTimeString(),
                operator: this.$login.f.name,
                sellingas_id: this.model.id,
                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)
            }
          }
        }
        if (this.model.f_bill_date !== '' || this.model.f_bill_date === undefined) {
          this.model.f_bill_operator = this.$login.f.name
        }
        this.$resetpost('rs/logic/saveing', {data: {recordlist: this.recordList, newData: this.model}}).then((res) => {
          console.log('this.model', this.model)
        })
        this.$dispatch('close')
      }
    },
    computed: {
      positions () {
        return this.$appdata.getParam('收费状态')
      },
      payments () {
        return this.$appdata.getParam('付款方式查询')
      },
      writeCards () {
        return this.$appdata.getParam('写卡状态')
      },
      billStyles () {
        return this.$appdata.getParam('收据类型')
      }
    },
    watch: {
      'model' () {
        this.initoperator()
      }
    }
  }
</script>
<style lang="less" scoped>
#meterInfoTest{
  #addboxmap {
    height: 300px;
  }
  .glyphicon-map-marker:hover {
    color: red;
  }
  .glyphicon-map-marker {
    color: blue;
    cursor: pointer;
  }
  .col-sm-4 {
    .font_normal_body {
      width: 73px;
      overflow: auto;
      white-space: nowrap;
      // 指滚动条两边的按钮
      &::-webkit-scrollbar-button {
        display: none;
      }
      // 滚动条的宽度
      &::-webkit-scrollbar {
        width: 5px !important;
        height: 5px !important;
      }
      // 滚动条的设置
      &::-webkit-scrollbar-thumb {
        background-color: #ddd;
        background-clip: padding-box;
      }
      &::-webkit-scrollbar-thumb:hover {
        background-color: #bbb;
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ededed;
      }
    }
  }
}
</style>
