<template>
  <div id="unit" class="flex-row three" v-show="listpage">
    <div class="three-left" style="overflow: auto;width:20%" >
      <mulitinfo style="height:auto" @deal-msg="dealMsg" :data="row" :card-data="cardInfo" v-ref:info></mulitinfo>
    </div>
    <div class="three-center" style="width:60%;overflow-y: auto" >
      <div :style="{height:(row?'auto':'100%')}">
        <charge-list :row="row" @select-oper="showWork" @dblclick="toBusiness" @deal-msg="dealMsg"
                     v-ref:list></charge-list>

        <div class="auto" style="margin-top: 1%;" v-if="row">
          <charge-other-oper :data.sync="row" :card-info="cardInfo"  :record-type="recordType"></charge-other-oper>
        </div>
      </div>
    </div>
    <div class="three-right" style="width:25%" >
      <tabset v-ref:tabs :active="0" :close="false">
        <tab header="其他信息" id="clickMe" v-ref:tab>
          <otherinfo style="height:auto" @deal-msg="dealMsg" :data="row" :card-data="cardInfo" v-ref:info></otherinfo>
        </tab>
        <tab header="历史操作">
          <card-list :btns="operatebtn" :userinfoid="row ? row.f_userinfo_code : ''" @list-select-oper="recordCancel"
                     v-ref:card></card-list>
        </tab>
      </tabset>

    </div>

  </div>

  <modal v-if="!listpage" :show.sync="!listpage" v-ref:modal backdrop="false" width="90%">
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="listpage=!listpage"><span>&times;</span></button>
      <h4 class="modal-title">用户详细信息</h4>
    </header>
    <article slot="modal-body" class="modal-body" style="height: 750px;padding: 0">
      <user-info-detail-manage :f_userinfo_id="rowData.f_userinfo_id" @cancel-main="cancel"></user-info-detail-manage>
    </article>
    <footer slot="modal-footer" class="modal-footer">
    </footer>
  </modal>

  <div v-if="showModal">
    <charge-modal  :data="modaldata" :row = "modalrow" :modal-show.sync="showModal" @close="close" @modalsuccess="modalsuccess"></charge-modal>
  </div>
</template>
<script>
  import ChargeList from './ChargeList'
  import {HttpResetClass} from 'vue-client'

export default {
    title: '用户操作',
    components: {
      ChargeList
    },
    data () {
      return {
        // 页面开关
        listpage: true,
        row: null,
        cardInfo: null,
        recordType: 'sell',
        modaldata: null,
        modalrow: null,
        showModal: false,
        rowData: {},
        dibao_remind: this.$appdata.getSingleValue('低保快到期提醒') ? this.$appdata.getSingleValue('低保快到期提醒') : 0,
        show: [true]
      }
    },
    methods: {
      async toBusiness (obj) {
        if (!(obj instanceof Event)) {
          // 对此数据进行验证
          if (await this.validateRow(obj)) {
            this.row = obj
            this.cardInfo = this.$refs.list.cardInfo
            this.$refs.list.criteriaShow = false
            // 将列表只显示该条数据
            this.$refs.list.refreshRow(obj)
          }
        }
      },
      close () {
        this.showModal = false
        this.modaldata = null
        this.modalrow = null
        this.clean()
        this.$refs.list.search()
        // this.$refs.card.search()
      },
      async validateRow (obj) {
        // 验证卡上次数是否和系统次数一直
        // if (this.cardInfo) {
        //   if ((this.cardInfo.Times - 0) - (obj.f_times - 0) != 0) {
        //     this.$showAlert('此卡上的次数和')
        //   }
        // }

        // 验证是否有低保户/黑名单/档案完善等
        let self = this
        let expiration = await this.$resetpost('rs/sql/sale_getUserProperties', {
          data: {
            f_userinfo_id: `${obj.f_userinfo_id}`
          }
        }, {resolveMsg: '', rejectMsg: ''})
        let isbasicliving = false
        let isBlackList = false
        expiration.data.forEach(function (value) {
          if (value.f_parameter_key === 'dibaohu_endDate' && value.days < parseInt(self.dibao_remind)) {
            isbasicliving = true
          } else if (value.f_parameter_key === 'blackList') {
            isBlackList = true
          }
        })
        // 报建等第三方导入进来的档案可能会出现无气表品牌，气价等信息的情况,此时不能进行业务操作，需提示完善col-sm-4 form-group
        if (!obj.f_price_id || !obj.f_gasmodel_id || !obj.f_gasbrand_id || isbasicliving || isBlackList) {
          this.modaldata = expiration
          this.modalrow = obj
          this.showModal = true
          return false
        } else {
          return true
        }
      },
      clean () {
        this.row = null
        this.cardInfo = 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', [])
      },
      dealMsg (obj) {
        this.listpage = false
        this.rowData = obj
      },
      cancel (obj) {
        this.listpage = true
      },
      modalsuccess (obj) {
        this.showModal = false
        this.$refs.list.criteriaShow = false
        this.row = obj
        this.cardInfo = this.$refs.list.cardInfo
        // 将列表只显示该条数据
        this.$refs.list.refreshRow(obj)
      }
    },
    events: {
      'error' (name, row, res) {
        this.clean()
      },
      'row' (val) {
        console.log('观察row..', val)
      },
      'success' (name, row, res) {
        // name === '发卡售气' ? this.$refs.list.toNext(this.index) : null
        console.log('成功事件')
        this.clean()
        this.clearCondition()
        this.$refs.list.searchNoData()
        // this.$refs.card.search()
        // this.$refs.info.$refs.recordstoryinfo.getdata()
      },
      'clean' (row) {
        // this.$refs.list.singleRefresh(row)
        this.clean()
      },
      'refresh' () {
        this.clean()
        this.clearCondition()
        this.$refs.list.searchNoData()
        this.$refs.card.search()
      },
      'refreshrow' (val) {
        console.log(val)
        this.row = val
        this.$refs.list.refreshRow(val)
        // this.$refs.card.search()
      },
      'cancelclean' (row) {
        this.clean()
        this.$refs.list.searchNoData()
        // this.$refs.card.search()
      }
    },
    watch: {
      'row' () {
        // this.$refs.tab.$el.click()
      }
    }
  }
</script>
<style>
  .basic-main {
    width: 79%;
  }
</style>
