<template>
    <div class="form-inline" style="height: auto">
      <div class="form-group" v-for="btn in operBtns">
        <button :id="btn.name" type="button" :style="btn.name=='其他欠费' ?'color:red':'color:black'" :class="[($index === 0) ? 'btn btn-click' : 'btn btn-un-click']" @click="business(btn)" :disabled="noButton" ><span :style="btn.name=='其他欠费' ?'color:red':'color:black'">{{btn.name}}</span></button>

      </div>
    </div>
    <div v-show="isBusiness" style="height: auto" class="select-overspread">
      <route v-ref:route></route>
    </div>
</template>

<script>
  import { HttpResetClass } from 'vue-client'
  let getNewmetermsg = async function (self, row) {
    self.cardInfo = undefined
    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: '读卡新的用户失败'})
      if (getUser.data.length > 0) {
        await self.$showAlert('换表成功', 'success', 200)
        self.data = getUser.data[0]
      }
    }
  }
  let getBtnsGen = async function (self) {
    let http = new HttpResetClass()
    let param = {
      f_userfiles_id: self.data.f_userfiles_id
    }
    if (self.cardInfo) {
      param.cardInfo = self.cardInfo
    }
    let res = await http.load('POST', 'rs/logic/getOperBtns', {
      data: param
    }, {
      resolveMsg: null,
      rejectMsg: '获取业务按钮失败!!'
    })
    let getBtns = res.data
    console.log('获取的业务按钮', getBtns)
    console.log('有没有用户信息', self.data)
    if (self.$login.r.length === 0) {
      self.$showAlert('您没有相关的业务操作权限, 请联系管理员！！', 'warning', 2000)
    } else {
      self.temp = []
      for (let i = 0; i < getBtns.length; i++) {
        // 不需要权限的按钮
        let noInclude = getBtns[i].name === '垃圾费收费'
        if (noInclude || self.$login.r.includes(getBtns[i].name)) {
          // 进行权限验证
          if(getBtns[i].name === '换表&清零'){
            self.temp.push({
              name: '换表',
              value: getBtns[i].value
            })
            self.temp.push({
              name: '清零',
              value: {
                'weight': getBtns[i].value.weight,
                'routeName': 'reset-meter'
              }
            })
          }else{
            self.temp.push(getBtns[i])
          }
          console.log(self.temp[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.data.f_user_nature == '单位') {
        self.temp.push({name: '维管收费',
          value: {
            'weight': 5,
            'routeName': 'repair-charge'
  }})
      }
      if (self.data.f_meter_type == '物联网表') {
        if (self.data.f_hascard == '是') {
          if (self.data.f_whether_hairpin == '未发') {
            if(self.data.f_share_times != '' && self.data.f_share_times == '是' && self.data.f_times>0){
              self.temp.push({
                name: '补卡',
                value: {
                  'weight': 2,
                  'routeName': 'replace-card-manage'
                }
              })
            }else{
            }

          }
        }
      }
      // 如果卡上有气，添加购气撤销按钮
      if (self.cardInfo && (self.cardInfo.Gas > 0 || self.cardInfo.Money > 0 || (self.cardInfo.TotalMoney > 0 && self.data.f_support_purchase === '是'))) {
        self.temp.push({
          name: '购气撤销',
          value: {
            'weight': 0,
            'routeName': 'card-meter-charge-cancel'
          }
        })
        if (self.data.unWriteSell && self.data.unWriteSell.length > 0) {
          // 过滤掉线下写卡
          self.temp = self.temp.filter((item) => {
            return item.name !== '线下写卡'
          })
          self.data.unWriteSell.forEach(
            async (item) => {
              let sql = `update t_sellinggas set f_write_card = null where id = '${item.id}' and f_write_card ='写卡失败'`
              await self.$resetpost('rs/logic/runSQL', { sql: sql })
            }
          )
        }
      }
/*      // 如果是预备户,删除发卡售气按钮
      if (self.data.f_user_state == '预备') {
        self.temp.splice(self.temp.findIndex(item => item.name === '发卡售气'), 1)
      } */

      // 根据权重将业务按钮排序
      self.operBtns = self.temp.sort((a, b) => {
        return a.value.weight - b.value.weight
      })

      // 当有调价补差时,只展示调价补差按钮
      let adjustSenders = self.operBtns.find((row) => {
        return row.name == '调价补差'
      })
      if (adjustSenders) {
        self.operBtns = []
        self.operBtns.push(adjustSenders)
      }
      let remanent_gas = self.data.f_remanent_gas
      if (self.data.f_remanent_gas === 0 && self.data.f_newtable_fillgas > 0 && self.data.f_remanent_money > 0){
        remanent_gas = self.data.f_newtable_fillgas
      }
      if (self.operBtns.length > 0) {
        self.isBusiness = true
        if(remanent_gas > 0 ){
          let confirm = await self.$showMessage(`用户${self.data.f_userfiles_id}还有${remanent_gas}方旧表余气未补,是否要补气`, ['confirm', 'cancel'])
          if (confirm === 'confirm'){
            let id1 = self.operBtns.findIndex((arr) => arr.name === '补气购气')
            self.$refs.route.init(self.operBtns[id1].value.routeName, {row: self.data, cardData: self.cardInfo})
            self.styleChange(self.operBtns[id1])
          }else {
            self.$refs.route.init(self.operBtns[0].value.routeName, {row: self.data, cardData: self.cardInfo})
            self.styleChange(self.operBtns[0])
          }
        }else {
          self.$refs.route.init(self.operBtns[0].value.routeName, {row: self.data, cardData: self.cardInfo})
          self.styleChange(self.operBtns[0])
        }
      }
    }
  }

  export default {
    title: '业务操作',
    data () {
      return {
        operBtns: [],
        isBusiness: false,
        noButton: false // 业务请求时禁止按钮点击
      }
    },
    props: ['data', 'cardInfo'],
    ready () {
      getBtnsGen(this)
      console.log('data,cardInfo', this.data, this.cardInfo)

    },
    methods: {
      business (btn) {
        // // 处理按钮样式
        // this.styleChange(btn.name)
        // this.isBusiness = true
        // this.$refs.route.init(btn.value.routeName, {row: this.data, cardData: this.cardInfo})
        if(this.$refs.route.cards.length>0){
          if(this.$refs.route.cards[0].title == '增值服务管理'){
            this.$showMessage('切换页面后,当前页面数据会丢失,是否切换?',['confirm','cancel']).then(res=>{
              if(res == 'cancel'){
                return;
              }else{
                // 处理按钮样式
                this.styleChange(btn.name)
                this.isBusiness = true
                this.$refs.route.init(btn.value.routeName, {row: this.data, cardData: this.cardInfo})
              }
            })
          }else{
            // 处理按钮样式
            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) {
        console.log('xxxxxx', 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>
