<template>
  <div id="unit" class="flex-row">
    <validator name='m'>
    <div class="basic-main" style="margin-left: 1%;" >

          <criteria-paged :model="model" v-ref:paged  @sort="sort" >
            <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch">
              <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
                <div class="row">
                  <div class="form-group col-sm-3">
                    <label class="font_normal_body">组织机构</label>
                    <res-select
                      restype='organization'
                      @res-select="$parent.$parent.getorg"
                      is-mul="false"
                      :initresid='$parent.$parent.curorgid'
                    >
                    </res-select>
                  </div>
                  <div class="form-group col-sm-3">
                    <label class="font_normal_body">客户编号</label>
                    <input type="text" class="input_search" style="width:60%" v-model="model.f_userinfo_code"
                           @keyup.enter="search()"  condition="f_userinfo_code = '{}'" placeholder='客户编号'>
                  </div>
                  <div class="form-group col-sm-3">
                    <label class="font_normal_body">客户名称</label>
                    <input type="text" class="input_search" style="width:60%" v-model="model.f_user_name"
                           @keyup.enter="search()"  condition="f_user_name like '%{}%'" placeholder='客户姓名'>
                  </div>

                  <div style="float:right">
                    <button class="button_search" @click="search(), $parent.$parent.clean()">查询</button>
                    <button class="button_clear" @click="$parent.$parent.clear()">清空</button>
                    <div style="float: right"  class="button_spacing" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"    @click="$parent.$parent.hidden()"></div>
                  </div>
                </div>
                <div class="row" v-if="$parent.$parent.criteriaShow">
                  <div class="form-group col-sm-3" >
                    <label class="font_normal_body">旧客户号</label>
                    <input type="text" class="input_search" style="width:60%" v-model="model.f_olduserinfo_code" placeholder='客户编号'
                           condition="f_olduserinfo_code = '{}'">
                  </div>
                  <div class="form-group col-sm-3">
                    <label class="font_normal_body">用气性质</label>
                    <v-select :value.sync="model.f_gasproperties" v-model="model.f_gasproperties"
                              :options='$parent.$parent.gasproperties' placeholder='用气性质'
                              close-on-select condition="f_gasproperties='{}'"></v-select>
                  </div>
                  <div class="form-group col-sm-3">
                    <label class="font_normal_body">客户电话</label>
                    <input type="text" class="input_search" style="width:60%" v-model="model.f_user_phone" placeholder='客户电话'
                           condition="f_user_phone = '{}'">
                  </div>
                  <div class="form-group col-sm-3">
                    <label class="font_normal_body">客户地址</label>
                    <input type="text" class="input_search" style="width:60%" v-model="model.f_address"
                           condition="f_address like '%{}%'" placeholder='客户地址'>
                  </div>
                  <div class="form-group col-sm-3">
                    <label class="font_normal_body">客户状态</label>
                    <v-select :value.sync="model.f_user_state" v-model="model.f_user_state"
                              :options='$parent.$parent.userstates' placeholder='客户状态'
                              close-on-select condition="f_user_state='{}'"></v-select>
                  </div>
                  <div class="form-group col-sm-3">
                    <label class="font_normal_body">调压箱&nbsp;&nbsp;&nbsp;</label>
                    <v-select :value.sync="model.f_adjustable_id" :options='$parent.$parent.adjustables' placeholder='调压箱'
                              close-on-select
                              v-model='model.f_adjustable_id' condition="f_adjustable_id = '{}'" :search='true'></v-select>
                  </div>
                </div>
              </div>
            </criteria>
            <data-grid :model="model" class="list_area table_sy" v-ref:grid partial='list'>
              <template partial='head'>
                <tr>
                  <th>
                    <nobr>序号</nobr>
                  </th>
                  <th>
                    <!--<data-order field="f_userinfo_id" name="客户编号"></data-order>-->
                    <nobr>客户编号</nobr>
                  </th>
                  <th>
                    <nobr>客户信息</nobr>
                  </th>
                  <th>
                    <nobr>地址信息</nobr>
                  </th>
                  <th>
                    <nobr>用气性质</nobr>
                  </th>
                  <th>
                    <nobr>气价名称</nobr>
                  </th>
                  <th>
                    <nobr>表具信息</nobr>
                  </th>
                  <th>
                    <nobr>状态</nobr>
                  </th>
                  <th>
                    <nobr>操作</nobr>
                  </th>
                </tr>
              </template>
              <template partial='body'>
                <td style="text-align: center;">{{$index + 1}}</td>
                <td style="text-align: center;white-space: nowrap;">{{row.f_userinfo_code}}</td>
                <td style="text-align: center;white-space: nowrap;">{{row.f_user_name}}&nbsp;&nbsp;{{row.f_user_phone ? row.f_user_phone : ''}}</td>
                <td style="text-align: center;white-space: nowrap;">{{row.addressid}}&nbsp;&nbsp;{{row.f_address_detail ? row.f_address + row.f_address_detail : row.f_address}}</td>
                <td style="text-align: center;">{{row.f_gasproperties}}</td>
                <td style="text-align: center;white-space: nowrap;">{{row.f_price_name}}</td>
                <td style="text-align: center;white-space: nowrap;">{{row.f_meternumber}}&nbsp;&nbsp;{{row.f_meter_brand}}&nbsp;&nbsp;{{row.f_table_state}}</td>
                <td style="text-align: center;white-space: nowrap;">{{row.f_user_state}}</td>
                <td style="text-align: center;white-space: nowrap;">
                  <button type="button" name="button" class="btn btn-link" v-if="row.f_user_state === '正常'"
                          @click.stop="$parent.$parent.$parent.priceshow(row)">调价
                  </button>

                </td>
              </template>
            </data-grid>
          </criteria-paged>
        </div>

    <modal :show.sync="show" backdrop="false">

      <header slot="modal-header" class="modal-header">
        <h4 class="modal-title" style="text-align: center;">气价调整</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="panel panel-primary datapanel">
          <form class="form-horizontal">
            <div class="form-group">
              <div style="padding:20px;" class="row">
              <div class="col-sm-4 flex-row ">
                <label class="control-label">客户编号</label>
                <p class="form-control-static">{{row.f_userinfo_code}}</p>
              </div>
                <div class="col-sm-4 flex-row ">
              <label class="control-label">客户名称</label>
              <p class="form-control-static">{{row.f_user_name}}</p>
                </div>
                <div class="col-sm-4 flex-row ">
              <label class="control-label">客户电话</label>
              <p class="form-control-static">{{row.f_user_phone}}</p>
               </div>
              </div>
                <div class="row" style="padding:20px;">
                <div class="col-sm-12 flex-row ">
              <label class="control-label">客户地址</label>
              <p class="form-control-static">{{row.f_address}}</p>
            </div>
              </div>
            </div>
          </form>

        </div>

        <div class="panel panel-primary datapanel">
          <form class="form-horizontal select-overspread">
            <div class="form-group">
              <div class="row bg-info text-center text-center" style="height:35px">
                <div style="float: left">
                  <label class="font_normal_body">旧气价信息</label>
                </div>
              </div>
              <div class="row" style="padding:20px;">
                <div class="col-sm-3 flex-row ">
                  <label class="control-label">客户类型</label>
                  <p class="form-control-static">{{row.f_user_type}}</p>
                </div>
                <div class="col-sm-3 flex-row ">
                  <label class="control-label">用气性质</label>
                  <p class="form-control-static">{{row.f_gasproperties}}</p>
                </div>
                <div class="col-sm-3 flex-row ">
                  <label class="control-label">气价类型</label>
                  <p class="form-control-static">{{row.f_price_type}}</p>
                </div>
                <div class="col-sm-3 flex-row ">
                  <label class="control-label">气价名称</label>
                  <p class="form-control-static">{{row.f_price_name}}</p>
                </div>
            </div>
              <div class="row bg-info text-center text-center" style="height:35px">
                <div style="float: left">
                  <label class="font_normal_body">新气价信息</label>
                </div>
              </div>
              <div class="row" style="padding:20px;">
              <div class="col-sm-3 flex-row">
                <label class="control-label">用户类型</label>
                <v-select :value.sync="newinfo.f_user_type"
                          :options='usertypes' placeholder='用户类型'
                          @change="userTypeChange()"
                          close-on-select></v-select>
              </div>
              <div class="col-sm-3 flex-row"
                   :class="[$m.gas.required ? 'select-error' : '']">
                <label class="control-label">用气性质</label>
                <input type="text" v-show="false" v-model="$refs.gas.selectedItems" v-validate:gas='{required: true }'>
                <v-select :value.sync="newinfo.f_gasproperties" v-model="newinfo.f_gasproperties"
                          :options='gasproperties' placeholder='用气性质'
                          close-on-select v-ref:gas></v-select>
              </div>
              <div class="col-sm-3 flex-row" :class="[$m.type.required ? 'select-error' : '']">
                <label class="control-label">气价类型</label>
                <v-select :value.sync="newinfo.pricetype" v-model="newinfo.pricetype"
                          placeholder='气价类型' :options="pricetypes"
                          close-on-select v-ref:type>
                </v-select>
                <input type="text" v-show="false" v-model="$refs.type.selectedItems" v-validate:type='{required: true }'>
              </div>
              <div class="col-sm-3 flex-row" :class="[$m.name.required ? 'select-error' : '']">
                <label class="control-label">气价名称</label>
                <v-select :value.sync="newinfo.pricename" v-model="newinfo.pricename"
                          placeholder='气价名称' :options="getPricenames()"
                          close-on-select :disabled='newinfo.pricetype.length === 0 ' v-ref:name></v-select>
                <input type="text" v-show="false" v-model="$refs.name.selectedItems" v-validate:name='{required: true }'>
                <span class="col-sm-3" v-if="row.pricetype.length === 1 && gasproperties.length === 0"
                      style="color:red;text-align:right">请确定用气性质已选择！！</span>
              </div>
              </div>
            </div>
          </form>
        </div>


      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button class="button_search" :disabled='!$m.valid ' @click="modifyUser()">确定</button>
        <button type="button" class="button_clear" @click='close'>取消</button>
      </footer>

    </modal>
    </validator>
  </div>

</template>

<script>

  import {PagedList} from 'vue-client'
  import Vue from 'vue'

  let loadParamGem = async function (self) {
    await self.$LoadParams.loadParam(self.f_filialeid)
  }



  export default {
    'title': '调价管理',
    data () {
      return {
        model: new PagedList('rs/sql/sale_getUserPrice', 30, {orderitem: '"f_userinfo_id DESC"'}),
        row: null, // 选择一条客户信息，对其进行修改
        rows: [], // 客户档案选择一条时，将只显示一条信息，rows用来存放整页的数据
        orderDefault: 'f_createfile_date desc',
        orderFields: {
          f_userinfo_id: 'no'
        },
        newinfo:{
          f_user_type:'',
          f_gasproperties:'',
          pricetype:'',
          pricename:''
        },
        show:false,
        curorgid: [this.$login.f.orgid],
        f_filialeid: this.$login.f.orgid,
        criteriaShow: false,
        valid:false,
        usertypes: this.$appdata.getParam('用户类型'),
        gasproperties2: this.newinfo?(this.newinfo.f_user_type.length === 1 ? this.$appdata.getParam(this.newinfo.f_user_type[0]) : []):[],
        pricetypes: this.$appdata.getParam('气价类型'),
        gasproperties: this.$appdata.getParam('用气性质') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]: []
      }
    },
    methods: {
      userTypeChange () {
        this.gasproperties = []
        if (this.newinfo.f_user_type.length === 1) {
          this.gasproperties = this.$appdata.getParam(this.newinfo.f_user_type[0])
        }
      },
      // mValid (bool) {
      //   this.valid = bool
      // },
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      priceshow(row) {
        this.show = true
        this.row = row
      },
      getPricenames () {
        console.log('气价。，。。', this.newinfo.pricetype, this.newinfo.f_user_type, this.newinfo.f_gasproperties)
        let rs = []
        if (this.newinfo.f_user_type.length === 1 && this.newinfo.f_gasproperties.length === 1 && this.newinfo.pricetype.length === 1) {
          let params = {
            f_user_type: this.newinfo.f_user_type[0],
            f_gasproperties: this.newinfo.f_gasproperties[0],
            f_price_type: this.newinfo.pricetype[0],
            filter: this.f_filialeid
          }
          rs = this.$GetSaleParam.getPrice(params)
        }
        if (rs.length === 0) {
          this.newinfo.f_price_name = ''
        }
        return rs
      },
      close() {
        this.show = false
        this.row = null
        this.newinfo = {
          f_user_type:'',
          f_gasproperties:'',
          pricetype:'',
          pricename:''
        }
      },
      async modifyUser () {
        let param={
          f_userinfo_id: this.row.f_userinfo_id,
          f_userfiles_id:this.row.f_userfiles_id,
          f_user_id:this.row.f_user_id,
          f_user_name:this.row.f_user_name,
          f_user_type:this.newinfo.f_user_type[0],
          f_gasproperties:this.newinfo.f_gasproperties[0],
          f_price_type: this.newinfo.pricetype[0],
          f_price_id: this.newinfo.pricename[0].f_price_id,
          f_filialeid:this.f_filialeid,
          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_change_reason:''
        }

        await this.$resetpost('rs/logic/user_pricechange', {data: param}, {resolveMsg: '更新成功', rejectMsg: '更新失败'})

        this.criteriaShow = false
        this.close()
        this.search ()
      },
      clean () {
        this.row = null
        this.areainfo = null
        this.$refs.paged.$refs.grid.select(null)
        this.$refs.paged.$refs.grid.model.rows = this.rows
      },


      selfSearch (args) {
        console.log('开始查询档案', this.f_filialeid)
        args.condition = `${args.condition} and f_filialeid = '${this.f_filialeid}'`
        this.criteriaShow = false
        this.$refs.paged.$refs.grid.$el.scrollTop = 0
        this.model.search(args.condition, args.model)
        this.clean()
      },
      sort (field, rule) {
        // 将所有排序方式设为不排序，实现相互排斥
        for (let key in this.orderFields) {
          if (key === field) {
            this.orderFields[key] = rule
          } else {
            this.orderFields[key] = 'no'
          }
        }
        // 如果新规则不排序，还原为默认排序
        if (rule === 'no') {
          this.model.paramSource.orderitem = `'${this.orderDefault}'`
        } else {
          this.model.paramSource.orderitem = `'${field} ${rule}'`
        }

        this.search()
      },


      clear(){
        Object.keys(this.$refs.paged.$refs.criteria.model).forEach((key) => {
          this.$refs.paged.$refs.criteria.model[key] = []
        })
      },
      getorg (val) {
        this.f_filialeid = val[0]
      }
    },
    ready(){
      this.$refs.paged.$refs.criteria.condition += "and f_filialeid = "+ this.$login.f.orgid
      this.search()
    },
    computed: {
      userstates () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('客户状态')]
      }
    },
    watch: {
      // 每次查询将查询到的数据存储起来，供选择操作后的替换
      'model.state' (val) {
        if (val === '正确') {
          this.rows = this.model.rows
        }
      },
      'show'(val){
        if(val===false){
          this.newinfo={
              f_user_type:'',
              f_gasproperties:'',
              pricetype:'',
              pricename:''
          }
          this.row=null
        }
      },
      'f_filialeid' (val) {
        loadParamGem(this)
      }
    }
  }
</script>
<style>
  .nav-tabss ul > li > a {
    padding: 5px 10px;
  }

.datapanel {
     color: #333;
     background-color: white;
     box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
     padding: 10px 30px 10px 30px;
     height: auto;
     border-radius:15px;
   }
  .modal .modal-dialog .modal-content{
    width:900px
  }

</style>
