<template>
  <div class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:criteria>
        <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>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_userinfo_code" placeholder='客户编号'
                     condition="f_userinfo_code = '{}'" @keyup.enter="search()">
            </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">表&emsp;&emsp;号</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_meternumber" placeholder='表号'
                     condition="f_meternumber = '{}'" @keyup.enter="search()">
            </div>
            <div class="form-group col-sm-4 button-range" >
              <button class="button_search" style="margin-right: 10px"  @click="$parent.$parent.changeprice()" v-el:cba>批量调价</button>
              <button class="button_search" style="margin-right: 10px"  @click="search()" v-el:cba>查询</button>
              <export-excel
                :data="{condition: $parent.$parent.condition}"
                :field="$parent.$parent.getfield"
                sqlurl="rs/logic/exportfile" sql-name="salegetGasUser" :template-name="$parent.$parent.pricename+'气价使用人'"
                :choose-col="true"></export-excel>
              <div style="float: right" class="button_spacing"
                   :class="{'button_shrink_top': $parent.$parent.criteriaShow2,'button_shrink_bottom': !$parent.$parent.criteriaShow2}"
                   @click="$parent.$parent.criteriaShow2 = !$parent.$parent.criteriaShow2"></div>
            </div>
          </div>
          <div class="row" v-show="$parent.$parent.criteriaShow2">
            <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" placeholder='客户名称'
                     condition="f_user_name like '%{}%'" @keyup.enter="search()">
            </div>
            <div class="form-group col-sm-3" >
              <label  class="font_normal_body">气表状态</label>
              <v-select  style="width:60%" :value.sync="model.f_table_state"
                         v-model="model.f_table_state"
                         :options='$parent.$parent.gasStates' placeholder='气表状态'
                         condition="f_table_state ='{}'"></v-select>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">客户类型</label>
              <v-select :value.sync="model.f_user_type"
                        @change="$parent.$parent.userTypeChange1()"
                        :options='$parent.$parent.usertypes' placeholder='请选择' v-model="model.f_user_type"
                        condition="f_user_type = '{}'"
                        close-on-select></v-select>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">用气性质</label>
              <v-select :value.sync="model.f_gasproperties1" v-model="model.f_gasproperties1"
                        :options='$parent.$parent.gasproperties1' placeholder='请选择'
                        condition="f_gasproperties = '{}'"
                        close-on-select></v-select>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">用气类别</label>
              <v-select :value.sync="model.f_gongye_type" v-model='model.f_gongye_type'
                        :options='$parent.$parent.gongyetype' placeholder='用气类别'
                        condition="f_gongye_type = '{}'"
                        close-on-select
                        v-el:cc></v-select>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">气表类型</label>
              <v-select :value.sync="model.f_meter_classify" v-model="model.f_meter_classify"
                        :options='$parent.$parent.meters' placeholder='气表类型'
                        close-on-select
                        condition="f_meter_classify = '{}'"
                        style="width: 60%"
              >
              </v-select>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">小区名称</label>
              <v-select :value.sync="model.f_residential_area_id" v-model="model.f_residential_area_id"
                        :options='$parent.$parent.areaList' placeholder='小区名称'
                        close-on-select   @select-search="$parent.$parent.getAreaList"
                        condition="f_residential_area_id = '{}'"
                        style="width: 60%"
              >
              </v-select>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">气表品牌</label>
              <v-select :value.sync="model.f_meter_brand"
                        v-model="model.f_meter_brand"
                        :options="$parent.$parent.meterbrands"
                        condition="f_meter_brand = '{}'"
                        close-on-select></v-select>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" class="table_sy"  partial='list' v-ref:grid :optional="true">
        <template partial='head'>
          <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>
          <th><nobr>客户地址</nobr></th>
        </template>
        <template partial='body'>
          <td style="text-align:center"><span @click="$parent.$parent.$parent.dealmsg(row)"><a><b>{{row.f_userinfo_code}}</b></a></span></td>
          <td style="text-align:center">{{row.f_meternumber}}</td>
          <td style="text-align:center">{{row.f_price_name}}</td>
          <td style="text-align:center">{{row.f_price_type}}</td>
          <td style="text-align:center">{{row.f_user_type}}</td>
          <td style="text-align:center">{{row.f_gasproperties}}</td>
          <td style="text-align:center">{{row.f_user_name}}</td>
          <td style="text-align:center;white-space: nowrap;">{{row.f_address}}</td>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>


    <modal :show.sync="show" width="50%" 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 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="margin-top: 2%">
                <div class="col-sm-3 flex-row ">
                  <label class="control-label">客户类型</label>
                  <p class="form-control-static">{{oldinfo.f_user_type}}</p>
                </div>
                <div class="col-sm-3 flex-row ">
                  <label class="control-label">用气性质</label>
                  <p class="form-control-static">{{oldinfo.f_gasproperties}}</p>
                </div>
                <div class="col-sm-3 flex-row ">
                  <label class="control-label">气价类型</label>
                  <p class="form-control-static">{{oldinfo.f_price_type}}</p>
                </div>
                <div class="col-sm-3 flex-row ">
                  <label class="control-label">气价名称</label>
                  <p class="form-control-static">{{oldinfo.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="margin-top: 2%">
                <div class="col-sm-4 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-4 flex-row">
                  <label class="control-label">用气性质</label>
                  <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-4 flex-row">
                  <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>
                </div>
              </div>
              <div class="row" style="margin-top: 2%">

                <div class="col-sm-4 flex-row" >
                  <label class="control-label">气价名称</label>
                  <v-select :value.sync="newinfo.pricename" v-model="newinfo.pricename"
                            placeholder='气价名称' :options="getPricenames()" @change="priceChange"
                            close-on-select :disabled='newinfo.pricetype.length === 0 ' v-ref:name></v-select>
                 <span class="col-sm-3" v-if="newinfo.pricetype.length === 1 && gasproperties.length === 0"
                        style="color:red;text-align:right">请确定用气性质已选择！！</span>
                </div>

                <div class="col-sm-4 flex-row">
                  <label class="control-label">气价备注</label>
                  <input type="text" class="input_search" style="width:60%" v-model="newinfo.f_price_comments" placeholder='气价备注' disabled>
                </div>

                <div class="col-sm-4 flex-row">
                  <label class="control-label">调价原因</label>
                  <v-select :value.sync="newinfo.f_comments" v-model="newinfo.f_comments"
                            placeholder='调价原因' :options="adjustpricereasons" :value-single="true"
                            close-on-select v-ref:type>
                  </v-select>
                </div>

              </div>

            </div>
          </form>
        </div>

        <upload :blodid="blodid" :businessid="blodid" isremark="true" fusetype="批量调价" v-ref:fileupload></upload>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button class="button_search" @click="modifyUser">确定</button>
        <button type="button" class="button_clear" @click='close'>取消</button>
      </footer>

    </modal>
  </div>
</template>

<script>
  import {HttpResetClass, PagedList} from 'vue-client'

  let loadParamGem = async function (self) {
    await self.$LoadParams.loadParam(self.f_filialeid)
    self.initParams()
  }
  export default {
    title: '气价使用人',
    data () {
      return {
        model: new PagedList('rs/sql/getGasUser', 20, {}),
        condition: '',
        criteriaShow2: false,
        gasproperties1: [],
        getfield: {},
        show: false,
        gasproperties: [],
        f_filialeid: this.$login.f.orgid,
        newinfo: {
          f_user_type: '',
          f_gasproperties: '',
          pricetype: '',
          pricename: '',
          f_comments: ''
        },
        oldinfo: {
          f_user_type: '',
          f_gasproperties: '',
          f_price_type: '',
          f_price_name: '',
          f_price_id: '',
          f_stairprice_id: ''
        },
        areaList: [],
        gongyetype: this.$appdata.getParam('用气类别') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用气类别')] : [],
        usertypes: this.$appdata.getParam('用户类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')] : [],
        pricetypes: this.$appdata.getParam('气价类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('气价类型')] : [],
        meters: this.$appdata.getParam('气表类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')] : [],
        adjustpricereasons: this.$appdata.getParam('批量调价原因'),
        config: {
          excelHeaders: {
            'f_price_name': '气价名称',
            'f_userinfo_code': '客户编号',
            'f_user_name': '客户姓名',
            'f_address': '客户地址',
            'f_orgname': '组织机构'
          }
        },
        blodid: '临时id' + Date.now(),
        meterbrands: []
      }
    },
    props: ['priceid', 'pricename', 'priceorgid'],
    ready () {
      this.search()
      this.getfield = this.config.excelHeaders
      loadParamGem(this)
      this.getAreaList()
    },
    methods: {
      initParams () {
        // 初始化气表品牌
        let brandArr = []
        this.$GetSaleParam.getGasbrand().forEach((item) => {
          let temp = {}
          temp.label = item.label
          temp.value = item.value.f_meter_brand
          brandArr.push(temp)
        })
        this.meterbrands = [{label: '全部', value: ''}, ...brandArr]
      },
      getAreaList (searchText) {
        let condition = ' 1 = 1 '
        if (searchText) {
          condition = ` f_residential_area like '%${searchText}%' `
        }
        let HttpReset = new HttpResetClass()
        HttpReset.load('POST', 'rs/sql/saleSingleTable?pageNo=1&pageSize=100', {
          data: {
            items: 'f_residential_area, id',
            tablename: 't_area',
            orderitem: 'id desc',
            condition: condition
          }
        }, {resolveMsg: null, rejectMsg: '获取小区信息失败!'}).then((req) => {
          let redata = []
          req.data.forEach((row, n) => {
            redata[n] = {
              label: row.f_residential_area,
              value: row.id
            }
          })
          this.areaList = [{label: '全部', value: ''}, ...redata]
        })
      },
      userTypeChange1 () {
        this.gasproperties1 = []
        if (this.$refs.paged.$refs.criteria.model !== null) {
          this.$refs.paged.$refs.criteria.model.f_gasproperties1 = ''
          this.gasproperties1 = this.$appdata.getParam(this.$refs.paged.$refs.criteria.model.f_user_type[0])
        } else {
          this.gasproperties1 = [{label: '全部', value: ''}]
        }
      },
      close () {
        this.show = false
        Object.keys(this.newinfo).forEach(key => {
          this.newinfo[key] = ''
        })
      },
      async modifyUser () {
        let rowdata = this.$refs.paged.$refs.grid.getRowData()
        let condition = rowdata.length == 0 ? this.condition : ''
        let com = rowdata.map((row) => { return row.f_userfiles_id }).join(',')
        let fileuploadid = this.$refs.fileupload.fileInfoData.map((row) => { return row.id }).join(',')

        let param = {
          // 新气价信息
          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_name: this.newinfo.pricename[0].f_price_name,
          f_price_id: this.newinfo.pricename[0].f_price_id,
          f_perform_date: this.newinfo.pricename[0].f_perform_date,
          f_stairprice_id: this.newinfo.pricename[0].id,
          // 修改原因
          f_comments: this.newinfo.f_comments,
          // 操作人组织机构信息
          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,
          // 修改条件
          con: com,
          condition: condition,
          fileuploadid: fileuploadid
        }
        if (this.priceid) {
          if (this.newinfo.pricename[0].f_price_id == this.model.rows[0].f_price_id) {
            this.$showMessage('选择的气价和当前气价相同, 请重新选择')
            return
          }
          // 旧气价信息
          param.f_user_type_old = this.model.rows[0].f_user_type
          param.f_gasproperties_old = this.model.rows[0].f_gasproperties
          param.f_price_type_old = this.model.rows[0].f_price_type
          param.f_price_name_old = this.model.rows[0].f_price_name
          param.f_price_id_old = this.model.rows[0].f_price_id
          param.f_stairprice_id_old = this.model.rows[0].f_stairprice_id
          let res = await this.$resetpost('rs/logic/pricechangeall', {data: param}, {resolveMsg: '更新成功', rejectMsg: '更新失败'})
          this.$showMessage(`成功批量修改了${res.data}位用户的气价`)
        } else {
          param.oldinfo = this.param
          let res = await this.$resetpost('rs/logic/pricechangebatch', {data: param}, {resolveMsg: '更新成功', rejectMsg: '更新失败'})
          this.$showMessage(`成功批量修改了${res.data}位用户的气价`)
        }
        this.criteriaShow = false
        this.close()
        this.search()
      },
      userTypeChange () {
        this.gasproperties = []
        if (this.newinfo.f_user_type.length === 1) {
          this.gasproperties = this.$appdata.getParam(this.newinfo.f_user_type[0])
        }
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      changeprice () {
        let rowdata = this.$refs.paged.$refs.grid.getRowData().length > 0 ? this.$refs.paged.$refs.grid.getRowData() : this.model.rows
        if (this.priceid && this.model.rows.length > 0) {
          this.oldinfo = {
            f_user_type: this.model.rows[0].f_user_type,
            f_gasproperties: this.model.rows[0].f_gasproperties,
            f_price_type: this.model.rows[0].f_price_type,
            f_price_name: this.model.rows[0].f_price_name,
            f_price_id: this.model.rows[0].f_price_id,
            f_stairprice_id: this.model.rows[0].f_stairprice_id
          }
        } else {
          this.oldinfo = {
            f_user_type: rowdata[0].f_user_type,
            f_gasproperties: rowdata[0].f_gasproperties,
            f_price_type: rowdata[0].f_price_type,
            f_price_name: rowdata[0].f_price_name
          }
          for (var i = 1; i < rowdata.length; i++) {
            if (rowdata[i].f_user_type !== rowdata[i - 1].f_user_type) {
              this.oldinfo.f_user_type = ''
            }
            if (rowdata[i].f_gasproperties !== rowdata[i - 1].f_gasproperties) {
              this.oldinfo.f_gasproperties = ''
            }
            if (rowdata[i].f_price_type !== rowdata[i - 1].f_price_type) {
              this.oldinfo.f_price_type = ''
            }
            if (rowdata[i].f_price_name != rowdata[i - 1].f_price_name) {
              this.oldinfo.f_price_name = ''
            }
          }
        }
        this.show = true
      },
      selfSearch (args) {
        this.$refs.paged.$refs.grid.selectInit()
        if (this.priceid) {
          args.condition = `${args.condition} and f_price_id = '${this.priceid}'`
        } else {
          args.condition = `${args.condition} and f_orgid = '${this.$login.f.orgid}'`
        }
        this.condition = args.condition
        this.model.search(args.condition, args.model)
      },
      dealmsg (val) {
        this.$parent.f_userinfo_id = val.f_userinfo_id
        this.$parent.listpage = false
      },
      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]
          }
          rs = this.$GetSaleParam.getPriceAll(params)
        }
        if (rs.length === 0) {
          this.newinfo.pricename = ''
        }
        return rs
      },
      priceChange (val) {
        if (val && val.length > 0) {
          // 展示气价备注
          this.$set('newinfo.f_price_comments', val[0].f_comments ? val[0].f_comments : '无')
        }
      }
    },
    watch: {
      'priceid' () {
        this.search()
      },
      'priceorgid' () {
        this.$LoadParams.loadParam(this.priceorgid ? this.priceorgid : this.f_filialeid)
      }
    },
    computed: {
      userstates () {
        return [{label: '全部', value: ''}, {label: '销户', value: '销户'}, {label: '停用', value: '停用'}, ...this.$appdata.getParam('客户状态')]
      },
      gasStates () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表状态')]
      }
    }
  }
</script>
