<template>
  <div class="span">
    <data-grid :model="model" partial='list' v-ref:grid>
      <template partial='head'>
        <tr>
          <th>序号</th>
          <th>总表编号</th>
          <th>用户姓名</th>
          <th>表编号</th>
          <th>表品牌</th>
          <th>表型号</th>
          <th>承担比率</th>
          <th>操作</th>
        </tr>
      </template>
      <template partial='body'>
        <td style="text-align:center">{{$index+1}}</td>
        <td style="text-align:center">{{row.total_id}}</td>
        <td style="text-align:center">{{row.f_user_name}}</td>
        <td style="text-align:center">{{row.f_user_id}}</td>
        <td style="text-align:center">{{row.f_meter_brand}}</td>
        <td style="text-align:center">{{row.f_meter_style}}</td>
        <td style="text-align:center">
          <div class="input-group">
             <input type="number" class="form-control" v-model="row.f_share_ratio" @focus="$parent.$parent.getFocus(row)" @blur="$parent.$parent.updateShareRatio(row)"/>
          </div>
        </td>
        <td style="text-align:center">
          <button type="button" name="button" class="btn btn-danger btn-xs" @click="$parent.$parent.delSplit(row)">删除</button>
        </td>
      </template>
      <template partial='foot'></template>
    </data-grid>
  </div>
</template>

<script>
  /**
   *阶梯水价相关信息组件
   */
  import co from 'co'

  let delGen = function * (self, row) {
    console.log('删除一行数据，，，', row)
    let sql = `update t_userfiles set f_meter_id = null where f_user_id = '${row.f_user_id}'`
    let updateData = yield self.$resetpost('/rs/logic/runSQL', {data: {sql: sql}}, {resolveMsg: '删除成功', rejectMsg: '删除失败!!!'})
    console.log('更新完成', updateData)
    co(getUpdateGen(self, self.data.f_user_id, true))
  }

  let getUpdateGen = function * (self, id, direct) {
    let data = {
      items: 'f_user_id,f_user_name,f_meter_brand,f_meter_style,f_share_ratio',
      condition: 'f_meter_id =' + "'" + id + "'",
      tablename: 'V_user_table',
      orderitem: 'f_user_id'
    }
    let queryData = yield self.$SqlService.singleTableOrderBy(data)
    console.log('总表查询分表数据，，，，', queryData)
    queryData.data.forEach((item) => {
      item.total_id = id
    })
    self.model.rows = queryData.data
    if (direct) {
      if (queryData.data.length === 0) {
        let sql = `update t_userfiles set f_totalsplit_type = '分表' where f_user_id = '${id}'`
        yield self.$resetpost('/rs/logic/runSQL', {data: {sql: sql}}, {resolveMsg: null, rejectMsg: '分表删除完毕，更新总表状态出错！！'})
        self.$dispatch('refresh')
      }
    }
  }

  export default {
    props: ['data'],
    data () {
      return {
        model: {
          rows: []
        },
        tempRatio: 0
      }
    },
    watch: {
      'data' (val) {
        if (val.f_user_id) {
          this.getUpdate(val.f_user_id, false)
        }
      }
    },
    ready () {
      if (this.data && this.data.f_user_id) {
        this.getUpdate(this.data.f_user_id, false)
      }
    },
    methods: {
      // id 总表表编号， direct 是选择总表查询其分表信息, 当值为true时 删除完分表信息需要更新总表信息
      getUpdate (id, direct) {
        co(getUpdateGen(this, id, false))
      },
      delSplit (row) {
        this.$showMessage(`您确定要删除表编号为 ${row.f_user_id} 的分表信息吗？`, ['cancel', 'confirm']).then((res) => {
          if (res === 'confirm') {
            co(delGen(this, row))
          }
        })
      },
      getFocus (row) {
        this.tempRatio = row.f_share_ratio
      },
      updateShareRatio (row) {
        console.log('需要更新承担比率', row, this.tempRatio)
        if (row.f_share_ratio - this.tempRatio !== 0) {
          this.$showMessage(`您确定要修改分表编号为 ${row.f_user_id} 的承担比率吗？`, ['cancel', 'confirm']).then((res) => {
            if (res === 'confirm') {
              let sql = `update t_userfiles set f_share_ratio = '${row.f_share_ratio}' where f_user_id = '${row.f_user_id}'`
              this.$resetpost('/rs/logic/runSQL', {data: {sql: sql}}, {resolveMsg: '修改比率成功', rejectMsg: '修改比率失败!!!'})
            } else {
              row.f_share_ratio = this.tempRatio
            }
          })
        }
      }
    }
  }
</script>
<style>

</style>
