<template>
  <div id="unit" class="flex-row">
    <mulitinfo :data="row" :card-data="$refs.list.cardInfo" v-ref:info v-if="row"></mulitinfo>
    <div class="flex" style="flex: 1">
      <user-list v-ref:list excelurl="rs/excel/report/testexcel/测试模板"  @select-oper="showWork"  @select-changed="selected"
      @bulk-oper="showBulkWork" :component-name="comps ? comps.name : ''"  :row="row" :no-read="noRead" :no-batch="noBatch" :no-charge="noCharge" :defbtn="defbtn"></user-list>
      <div v-show="comps" v-el:route class="span select-overspread" style="margin-top: 10px;border: 1px solid #EEF3F6;"> <!-- flex: 0.8; -->
        <route  v-ref:route></route>
      </div>
    </div>
    <card-list :btns="operatebtn" :userinfoid="row ? row.f_userinfo_code : ''" @list-select-oper="recordCancel" v-ref:card></card-list>
  </div>
</template>
<script>
// import cardlisten from '../../plugins/CardListen'

export default {
  title: '客户操作',
  data () {
    return {
      comps: null,
      row: null,
      environment: 'PC'
    }
  },
  props: {
    defbtn: {
      type: String
    },
    noRead: {
      type: Boolean,
      default: false
    },
    noBatch: {
      type: Boolean,
      default: false
    },
    noCharge: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    selected (obj) {
      this.row = obj.val
      if (this.$refs.list.cardInfo) {
        this.row.cardInfo = this.$refs.list.cardInfo
        console.log('cardinfo', this.row.cardInfo)
        this.defbtn = '收费'
      }
      // this.comps = null
      // 如果有批量操作，清除批量操作的业务界面
      if (this.$refs.list.bulkType) {
        this.comps = null
      }
      if (this.defbtn === '发卡售气') {
        if (this.row.f_whether_hairpin === '未发') {
          this.showWork('发卡售气', 'show-card-sell-gas', this.row)
        } else {
          this.comps = null
        }
      } else if (this.defbtn === '收费' && this.row.f_states !== '停用') {
        if (this.row.f_meter_type.includes('卡表')) {
          // 如果未发卡，不能弹出业务界面
          if (this.row.f_whether_hairpin === '已发' && this.$refs.list.cardInfo.CardID === this.row.f_card_id) {
            if (this.$refs.list.cardInfo.Gas > 0 || this.$refs.list.cardInfo.Money > 0) {
              this.showWork('购气撤销', 'card-meter-charge-cancel', this.row)
            } else if (this.row.unWriteSell.length === 1) {
              this.showWork('线下写卡', 'un-write-card-center', this.row)
            } else {
              this.showWork('卡表收费', 'card-meter-center', this.row)
            }
          } else {
            this.comps = null
          }
        }
      } else if (this.defbtn === '表具启用') {
        this.showWork('表具启用', 'enable-manage', this.row)
      } else if (this.defbtn === '补卡管理') {
        this.showWork('补卡管理', 'replace-card-manage', this.row)
      } else if (this.defbtn === '换表管理') {
        this.showWork('换表管理', 'change-meter', this.row)
      } else if (this.defbtn === '过户管理') {
        this.showWork('过户管理', 'transfer-manage', this.row)
      } else if (this.defbtn === '表具停用') {
        this.showWork('表具停用', 'disable-manage', this.row)
      } else if (this.defbtn === '购气撤销') {
        this.showWork('购气撤销', 'card-meter-charge-cancel', this.row)
      }
    },
    showWork (title, name, row) {
      this.$els.route.style.height = 350 + 'px'
      this.row = row
      this.comps = {name: name, props: {row: row, environment: this.environment}}
      this.$refs.route.init(name, {row: row, environment: this.environment})
    },
    // 只针对批量操作
    showBulkWork (title, name, data) {
      this.$els.route.style.height = 260 + 'px'
      // 清除row的选择
      this.row = null
      this.comps = {name: name, props: {data: data}}
      this.$refs.route.init(name, {data: data})
    },
    // 操作记录点击撤销时间调用方法
    recordCancel (title, name, row) {
      this.$refs.list.bulkType = '操作记录撤销'
      this.$els.route.style.height = 260 + 'px'
      // 清除row的选择
      this.row = null
      // this.$refs.list.search()
      this.comps = {name: name, props: {data: row}}
      this.$refs.route.init(name, {data: row})
    },
    clean () {
      this.comps = null
      this.row = null
      // this.$refs.list.clean()
      this.$refs.route.init(null)
    },
    clearCondition () {
      Object.keys(this.$refs.list.$refs.paged.$refs.cri.model).forEach((key) => {
        this.$refs.list.$refs.paged.$refs.cri.model[key] = ''
      })
      console.log('清数据。。。', this.$refs.list.$refs.paged.$refs.grid.model.rows)
      this.$set('$refs.list.$refs.paged.$refs.grid.model.rows', [])
    }
  },
  events: {
    'error' (name, row, res) {
      this.clean()
    },
    'success' (name, row, res) {
      // name === '发卡售气' ? this.$refs.list.toNext(this.index) : null
      this.clean()
      this.clearCondition()
      this.$refs.list.search()
      this.$refs.card.search()
      // this.$refs.info.$refs.recordstoryinfo.getdata()
    },
    'clean' (row) {
      // this.$refs.list.singleRefresh(row)
      this.clean()
    },
    'refresh' () {
      this.clean()
      this.$refs.list.search()
      this.$refs.card.search()
    },
    'refreshrow' (val) {
      this.row = val
      this.$refs.list.refreshRow(val)
      this.$refs.card.search()
    },
    'cancelclean' (row) {
      this.clean()
      this.$refs.list.search()
      this.$refs.card.search()
    }
  }
}
</script>
