<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">用户姓名</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>
            <v-select :value.sync="model.f_payment" :value-single="true"
                      v-model="model.f_payment"
                      class="select_list select"
                      :options='payments'
                      close-on-select>
            </v-select>
          </div>
<!--          <div class="col-sm-4">-->
<!--            <label class="font_normal_body">缴费类型</label>-->
<!--            <input type="text" v-model="model.payment"  style="width: 60%" class="input_search">-->
<!--          </div>-->
          <div class="col-sm-4">
            <label class="font_normal_body">收据类型</label>
            <v-select :value.sync="model.f_bill_style" :value-single="true"
                      v-model="model.f_bill_style"
                      class="select_list select"
                      :options='bill_styles'
                      close-on-select>
            </v-select>
          </div>
<!--          <div class="col-sm-4">-->
<!--            <label class="font_normal_body">收据类型</label>-->
<!--            <input type="text" v-model="model.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_collection"  disabled=disabled  style="width: 60%" class="input_search">
          </div>
            <div class="col-sm-4">
              <label class="font_normal_body">收费时间</label>
              <datepicker id="operate_date"
                          placeholder="收费时间"
                          style="width:60%"
                          v-model="model.f_operate_date"
                          :value.sync="model.f_operate_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
              >
              </datepicker>
            </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body" title="参数:操作人员">操作人员</label>
            <v-select :value.sync="model.f_operator"
                      v-model="model.f_operator"
                      :value-single="true"  @change="selectoperator()"
                      :options='foperator'
                      close-on-select></v-select>
            <!--                      @click="selectoperator"-->
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body" >支付流水号</label>
            <input type="text" v-model="model.f_serial_id"  style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-12 form-group">
            <label class="font_normal_body">备&emsp;&emsp;注</label>
            <input type="text" v-model="model.f_comments"  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>
      <form novalidate class="form-horizontal">
        <p></p>
        <p class="bg-info text-center" style="padding: 8px;font-size: 20px">其他维护明细</p>
        <!-- <data-grid :model="inData" v-ref:grid  partial='list'>
           <template partial='head'>-->
        <table style="width: 600px">
          <tr>
            <th style="text-align: center">序号</th>
            <th style="text-align: center">品牌及类别</th>
            <th style="text-align: center">数量</th>
            <th style="text-align: center">单价</th>
            <th style="text-align: center">规格</th>
            <th style="text-align: center"> 型号</th>
            <th style="text-align: center"> 操作</th>
          </tr>
          <tr v-for="row in recordlist ">
            <td style="text-align: center;">{{$index + 1}}</td>
            <td style="text-align: center;" >{{row.brand_spec}}</td>
            <td   style="text-align: center;">{{row.number}}</td>
            <td  style="text-align: center;" >{{row.unitprice}}</td>
            <td style="text-align: center;" >{{row.typename}}</td>
            <td style="text-align: center;">{{row.typenumber}}</td>
            <td style="text-align: center;">

            <button class="button_new" type="button"  @click="editBeizhu(row)">编辑</button>
            </td>
          </tr>
        </table>
      </form>
      <modal :show.sync="editshow" v-ref:modal backdrop='false'>
        <article slot="modal-body" class="modal-body">
          <div class="row auto">
            <div class="form-group form-input-group">
              <label for="" class="control-label">品牌：</label>
              <v-select :value.sync="mingxi.brand_spec" :value-single="true"
                        v-model="mingxi.brand_spec"
                        class="select_list select"
                        :options='brand_specs'
                        close-on-select>
              </v-select>
            </div>
          </div>
          <div class="row auto">
            <div class="form-group form-input-group">
              <label for="" class="control-label">数量：</label>
              <input type="text" width="300px"  class="form-control" v-model="mingxi.number" >
            </div>
          </div>
          <div class="row auto">
            <div class="form-group form-input-group">
              <label for="" class="control-label">单价：</label>
              <input type="text" width="300px"  class="form-control" v-model="mingxi.unitprice" >
            </div>
          </div>
          <div class="row auto">
            <div class="form-group form-input-group">
              <label for="" class="control-label">规格：</label>
              <v-select :value.sync="mingxi.typename" :value-single="true"
                        v-model="mingxi.typename"
                        class="select_list select"
                        :options='typeNameList'
                        close-on-select>
              </v-select>
            </div>
          </div>
          <div class="row auto">
            <div class="form-group form-input-group">
              <label for="" class="control-label">型号：</label>
              <input type="text" width="300px" class="form-control" v-model="mingxi.typenumber" >
            </div>
          </div>
        </article>
        <footer slot="modal-footer" class="modal-footer">
          <button type="button" class="btn btn-default" @click='editclose' id="vc-messagebox-close">取消</button>
          <button type="button" class="btn btn-success" @click='updatedefail' id="vc-messagebox-confirm">确认</button>
        </footer>
      </modal>
      <!--<split-price :showdata="model" :pricesplit="priceSplit" v-if="priceSplit" ></split-price>-->
    </validator>
  </div>
</template>
<script>
  import Vue from 'vue'
  import {HttpResetClass, PagedList} from 'vue-client'
  import * as Util from "../../Util";
  // var data
  export default {
    title: '基本信息',

    data () {
      return {
        brand_specs:this.$appdata.getParam('其他收费收费类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('其他收费收费类型')] : [],
        bill_styles: this.$appdata.getParam('打印格式') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('打印格式')] : [],
        payments: this.$appdata.getParam('付款方式') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('付款方式')] : [],
        editshow: false,
        mingxi: '',
        oldmingxi: '',
        brand_spec: '',
        unitprice: '',
        typeNameList: [],
        typenumberList: [],
        // 操作记录表
        recordList3: [],
        total: '',
        // 明细操作记录
        recordList2: [],
        // 其他记录
        fileNameSet: {
          f_payment: '缴费类型',
          f_bill_style: '收据类型',
          f_collection: '缴费金额',
          f_serial_id: '支付流水号',
          f_operate_date: '缴费时间',
          f_comments: '备注',
          name: '用户姓名',
          f_operator: '操作人'
        },
        // 其他记录明细
        fileNameSet2: {
          brand_spec: '品牌类别',
          number: '数量',
          unitprice: '单价',
          typename: '规格',
          typenumber: '型号',
          operator: '操作人'
        }
      }
    },
    props: {
      model: Object,
      oldmodel: Object,
      // recordList:Array
      recordlist: Array
    },
    ready () {
      this.cou()
      this.oldmodel = JSON.parse(JSON.stringify(this.model))
      console.log(this.model)
    },
    created () {
    },
    methods: {
      async setTypename (val) {
        this.typeNameList = this.$appdata.getParam(val)
      },
      // setTypenumber (val) {
      //   this.typenumberList = this.$appdata.getParam(val)
      // },
      selectoperator () {
        let f_operator = this.model.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)
          if(res.data.length>0){
            this.model.f_operatorid = res.data[0].id
          }else{
            this.model.operator=''
            this.$showAlert('操作员信息未找到，请在参数管理进行添加','warning',2000)
          }
            console.log('this.f_operatorid', this.f_operatorid)
          })
      },
      editclose () {
        this.mingxi = ''
        this.editshow = false
      },
      editBeizhu  (val) {
        this.editshow = true
        this.mingxi = val
        this.oldmingxi = val
        this.mingxi = JSON.parse(JSON.stringify(val))
        this.oldmingxi = JSON.parse(JSON.stringify(val))
      },
      async saveOtherdetail () {
        for (var item in this.mingxi) {
          if (this.mingxi[item] instanceof Array) {
            this.mingxi[item] = this.mingxi[item].length > 0 ? this.mingxi[item][0] : ''
          }
          if (this.mingxi[item] != this.oldmingxi[item]) {
            var car3 = {
              tablename: 't_othercharge_detail',
              chinesename: this.fileNameSet2[item] != '' ? this.fileNameSet2[item] : '',
               // chinesename: this.fileNameSet2[item],
              oldvalue: this.oldmingxi[item],
              newvalue: this.mingxi[item],
              modifitime: Util.toStandardTimeString(),
              fieldname: item,
              state: '有效',
              charge_detail_id:this.mingxi.did,
              operator: this.$login.f.name != '' ? this.$login.f.name : ''
            }
            this.recordList2.push(car3)
             // 该方法并未对chinesename fieldname operator等进行判断赋值，此暂写为定值
            console.log(car3)
          }
        }
        await this.$resetpost('rs/logic/savedetailoperting', {
          data: {
            recordlist2: this.recordList2
          }
        }, {
          resolveMsg: '修改成功',
          rejectMsg: '未通过，修改出错!!!'
        })
      },
      // 修改其他记录明细
      async updatedefail () {
        this.editshow = false
        let param={
          f_number:this.mingxi.number,
          f_unitprice:this.mingxi.unitprice,
          f_brand_spec: this.mingxi.brand_spec,
          f_typenumber:this.mingxi.typenumber,
          f_typename:this.mingxi.typename,
          id: this.mingxi.did
        }
        await this.$resetpost('rs/logic/updatedetail', {data: param}, {
          resolveMsg: '修改成功',
          rejectMsg: '未通过，修改出错!!!'
        })
        this.saveOtherdetail()
        this.$dispatch('close')
        this.$dispatch('refresh')
      },
      // 计算总金额
      cou () {
        let sum = []
        this.recordlist.forEach((item, index) => {
          var sub = item.number * item.unitprice
          console.log(sub)
          sum.push(sub)
        })
        console.log(sum)
        let res = 0
        for (let i = 0; i < sum.length; i++) {
          res += sum[i]
        }
        console.log(res)
        this.total = res
      },
      cancel () {
        this.$dispatch('close')
        this.$dispatch('refresh')
      },
      // 保存操作记录
      async save2 () {
        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]) {
            var car2 = {
              tablename: 't_othercharge',
              chinesename: this.fileNameSet[item],
              oldvalue: this.oldmodel[item],
              newvalue: this.model[item],
              modifitime: Util.toStandardTimeString(),
              fieldname: item,
              state: '有效',
              othercharge_id:this.model.id,
              operator: this.$login.f.name != '' ? this.$login.f.name : '',
              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.recordList3.push(car2)
             // 该方法并未对chinesename fieldname operator等进行判断赋值，此暂写为定值
            console.log(car2)
          }
        }
        let condition = this.model.id
        await this.$resetpost('rs/logic/operationRecord', {data: {recordlist3: this.recordList3, condition: condition}}, {
          resolveMsg: '修改成功',
          rejectMsg: '未通过，修改出错!!!'
        })
        console.log('this.model', this.model)
        this.$dispatch('close')
        this.$dispatch('refresh')
      },
      // 修改其他记录
      async save () {
        // let condition = " f_collection='" + this.model.collection + "' , f_unitprice='"+ this.model.collection+"' where f_othercharge_id= '"+this.model.id+"'"
        this.model.f_collection = this.total
        let param={
          f_user_name:this.model.f_user_name,
          f_comments:this.model.f_comments,
          f_payment:this.model.f_payment,
          f_collection:this.model.f_collection,
          f_bill_style:this.model.f_bill_style,
          f_serial_id:this.model.f_serial_id?this.model.f_serial_id:'',
          f_operate_date:this.model.f_operate_date,
          f_operator:this.model.f_operator,
          f_operatorid:this.model.f_operatorid?this.model.f_operatorid:'',
          id:this.model.id
        }
        await this.$resetpost('rs/logic/saveotherrecord',{data:param}, {
          resolveMsg: '修改成功',
          rejectMsg: '未通过，修改出错!!!'
        })
        this.save2()
        this.$dispatch('close')
        this.$dispatch('refresh')
      }
    },
    computed: {
      foperator () {
        return [...this.$appdata.getParam('操作人员')]
      }
    },
    watch: {
      'model.f_user_name' () {
        if (this.model.f_operator) {
          this.selectoperator()
        }
      },
      'mingxi.brand_spec'(){
        this.setTypename(this.mingxi.brand_spec)
        if(this.typeNameList){
        }else{
          this.mingxi.typename = ''
        }
      },
      'model.operator' () {
        if (this.model.f_operator) {
          this.selectoperator()
        }
      },
      recordlist: {
        handler (val) {
          console.log('数组值有了'),
            this.cou()
        }
      }
    }

  }
</script>
