<template>
    <div class="form-inline" style="height: auto">
      <div class="form-group" v-for="btn in operBtns">
        <button :id="btn.name" type="button"
                class="button_new"
                style="width: max-content;"
                @click="business(btn)" :disabled="noButton" >{{btn.name}}</button>
      </div>
    </div>
    <div v-show="isBusiness" class="select-overspread">
      <route v-ref:route></route>
    </div>
</template>

<script>
  import { HttpResetClass } from 'vue-client'
  let getNewmetermsg = async function (self, row) {
    console.log('换表之后界面刷新。。', row.f_userfiles_id, row.f_userfiles_id.length)
    if (row.f_userfiles_id && row.f_userfiles_id.length > 0) {
      // 获取用户信息
      let getUser = await self.$resetpost('rs/sql/sale_getUser', {
        data: {
          condition: `u.f_userfiles_id='${row.f_userfiles_id}' `,
          orderitem: `u.f_userfiles_id Desc`
        }
      }, {resolveMsg: '读卡新的用户成功', rejectMsg: '读卡新的用户失败'})

      console.log('换表之后重新获取界面。。', getUser.data)

      if (getUser.data.length > 0) {
        await self.$showAlert('换表成功', 'success', 200)
        self.data = getUser.data[0]
      }
    }
  }
  let getBtnsGen = async function (self) {
    console.log('22222')
    let http = new HttpResetClass()
    let param = {
      f_userfiles_id: self.data.f_userfiles_id,
      recordType: self.recordType
    }
    if (self.cardInfo) {
      param.cardInfo = self.cardInfo
    }
    let res = await http.load('POST', 'rs/logic/getOtherOperBtns', {
      data: param
    }, {
      resolveMsg: null,
      rejectMsg: '获取业务按钮失败!!'
    })
    let getBtns = res.data

    if (self.$login.r.length === 0) {
      self.$showAlert('您没有相关的业务操作权限, 请联系管理员！！', 'warning', 2000)
    } else {
      self.temp = []
      for (let i = 0; i < getBtns.length; i++) {
        if (self.$login.r.includes(getBtns[i].name)) {
          // 进行权限验证
          self.temp.push(getBtns[i])
        }
      }
      // 如果有未写卡记录，添加线下写卡按钮
      if (self.data.unWriteSell) {
        if (self.data.unWriteSell.length > 0) {
          self.temp.push({name: '线下写卡',
            value: {
              'weight': 0,
              'routeName': 'un-write-card-center'
  }})
        }
      }

      // 如果卡上有气，添加购气撤销按钮
      if (self.cardInfo.Gas > 0 || self.cardInfo.Money > 0) {
        self.temp.push({name: '购气撤销',
          value: {
            'weight': 0,
            'routeName': 'card-meter-charge-cancel'
  }})
      }
      // 根据权重将业务按钮排序
      self.operBtns = self.temp.sort((a, b) => {
        return a.value.weight - b.value.weight
      })

      if (self.operBtns.length > 0) {
        self.isBusiness = true
        self.$refs.route.init(self.operBtns[0].value.routeName, {row: self.data, cardData: self.cardInfo})
        self.$nextTick(function () {
          self.styleChange(self.operBtns[0].name)
        })
      }
    }
  }

  export default {
    title: '业务操作',
    data () {
      return {
        operBtns: [],
        isBusiness: false,
        noButton: false // 业务请求时禁止按钮点击
      }
    },
    props: ['data', 'cardInfo', 'recordType'],
    ready () {
      console.log('11111')
      getBtnsGen(this)
    },
    methods: {
      business (btn) {
        // 处理按钮样式
        this.styleChange(btn.name)
        this.isBusiness = true
        this.$refs.route.init(btn.value.routeName, {row: this.data, cardData: this.cardInfo})
      },

      styleChange (name) {
        this.operBtns.forEach((res) => {
          if (res.name == name) {
            if (document.getElementById(res.name)) {
              document.getElementById(res.name).style.backgroundColor = '#6aa6e2'
              document.getElementById(res.name).style.color = 'white'
            }
          } else {
            if (document.getElementById(res.name)) {
              document.getElementById(res.name).style.backgroundColor = 'white'
              document.getElementById(res.name).style.color = 'black'
            }
          }
        })
      }
    },
    watch: {
      'data' () {
        getBtnsGen(this)
      }
    },
    events: {
      'no-button' () {
        this.noButton = true
      },
      'has-button' () {
        this.noButton = false
      },
      'get-new-row' (row) {
        // 发生换表成功
        getNewmetermsg(this, row)
      },
      'button-specifies' (buttonObj, data) {
        console.log('指定按钮。。', buttonObj)
        // buttonObj  格式：  {name:'机表收费', value: 'machine-meter-center'}
        if (buttonObj) {
          this.styleChange(buttonObj.name)
          this.$refs.route.init(buttonObj.value, {row: data})
        }
      }
    }
  }
</script>

<style scoped>

  .btn-click{
    background-color: #6aa6e2;
    border-radius: 5px;
    color: white;
    /*border-color: black;*/
    border: solid 1px #c7c7c7;
  }

  .btn-un-click{
    background-color: white;
    border-radius: 5px;
    color: black;
    /*border-color: black;*/
    border: solid 1px #c7c7c7;
  }
</style>
