<template>
  <div id="boxlist">
    <div class="up-part">
      <div
        class="adjust-list"
        v-for="(i, v) in model.rows"
        @click="gasGunArrearsCharge(v)"
      >
        <div class="adjust-row">
          <div class="col-sm-8">
            <label class="">{{ v.f_adjustable_name }}</label>
          </div>
        </div>
        <div class="adjust-row">
          <div class="col-sm-8 adjust-row-input">
            <label class="content-row">加气枪状态:</label>
            <input
              class="input_search content-row"
              style="width: 33%"
              type="text"
              v-model="v.f_adjustable_state"
              disabled="disabled"
            />
          </div>
        </div>
        <div class="adjust-row adjust-row-input">
          <div class="col-sm-8">
            <label class="content-row">欠费人数:&nbsp;&nbsp;</label>
            <input
              class="input_search content-row"
              style="width: 33%; color: red"
              type="text"
              v-model="v.counts"
              disabled="disabled"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="down-part">
      <data-grid
        :model="arrears"
        partial="list"
        class="list_area table_sy"
        v-ref:grid
      >
        <template partial="head">
          <tr>
            <th>
              <nobr>客户编号</nobr>
            </th>
            <th>
              <nobr>客户名称</nobr>
            </th>
            <th>
              <nobr>车牌号</nobr>
            </th>
            <th>
              <nobr>应收</nobr>
            </th>
            <th>
              <nobr>欠费</nobr>
            </th>
            <th>
              <nobr>气价</nobr>
            </th>
            <th>
              <nobr>加气时间</nobr>
            </th>
            <th>
              <nobr>操作员</nobr>
            </th>
            <th>
              <nobr>网点</nobr>
            </th>
            <th>
              <nobr>操作</nobr>
            </th>
          </tr>
        </template>
        <template partial="body">
          <td style="text-align: center">
            <nobr><span>{{ row.f_userinfo_code }}</span></nobr>
          </td>
          <td style="text-align: center">
            <nobr>{{ row.f_user_name }}</nobr>
          </td>
          <td style="text-align: center">
            <nobr>{{ row.f_meternumber }}</nobr>
          </td>
          <td style="text-align: center">
            <nobr>{{ row.f_preamount }}</nobr>
          </td>
          <td style="text-align: center">
            <nobr>{{ row.f_arrears }}</nobr>
          </td>
          <td style="text-align: center">
            <nobr>{{ row.f_price }}</nobr>
          </td>
          <td style="text-align: center">
            <nobr>{{ row.f_air_date }}</nobr>
          </td>
          <td style="text-align: center">
            <nobr>{{ row.f_operator }}</nobr>
          </td>
          <td style="text-align: center">
            <nobr>{{ row.f_orgname }}</nobr>
          </td>
          <td style="text-align: center">
            <button class="btn btn-link" @click="$parent.$parent.arrearsConfirm(row)">收费</button>
          </td>
        </template>
        <template partial="foot"></template>
      </data-grid>
    </div>
    <arrears-confirm
      :show.sync="limitShow"
      :arrears-data="arrearsData"
      @cancel-show="cancelShow"
    ></arrears-confirm>
  </div>
</template>
<script>
export default {
  title: '加气枪欠费收费',
  data () {
    return {
      model: {
        rows: []
      },
      arrears: {
        rows: []
      },
      limitShow: false,
      arrearsData: {}
    }
  },
  ready () {
    this.search()
    console.log('model中的数据：', this.model)
  },
  methods: {
    async search () {
      await this.$http.post('rs/sql/getAdjustableNew', {
        data: { condition: this.$login.f.orgid }
      }).then((res) => {
        this.model.rows = res.data
      })
    },
    async gasGunArrearsCharge (value) {
      let par = {
        con: 'ta.f_orgid = ' + this.$login.f.orgid + ' and ta.f_adjustable_id = ' + value.f_adjustable_id
      }
      // let param = {
      //   f_orgid: this.$login.f.orgid,
      //   // f_orgid: "263",
      //   f_adjustable_id: value.f_adjustable_id
      // }
      await this.$http.post("rs/logic/gasGunArrearsCharge", par).then(
        (res) => {
          this.arrears.rows = res.data
        }
      )
    },
    arrearsConfirm (row) {
      console.log(this.arrears)
      this.limitShow = true
      this.arrearsData = row
    },
    async cancelShow (arrearsData) {
      this.limitShow = false
      await this.search()
      this.gasGunArrearsCharge(arrearsData)
    }
  }
}
</script>
<style scoped>
.adjust-list {
  border-color: #00a3f0;
  border-radius: 15px;
  width: 403px;
  height: 200px;
  float: left;
  margin: 14px 8px 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 12px rgba(100, 255, 216, 0.4);
  cursor: pointer;
}

.adjust-row {
  width: 110%;
  height: 28%;
  font-size: 25px;
  padding-left: 23px;
  padding-top: 20px;
}

.adjust-row-input {
  font-size: 18px;
}

.content-row {
  float: left;
}

.adjust-list:hover {
  background: #f5f6f7;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);
}

.up-part {
  height: 35%;
  overflow: auto;
  background-color: white;
}

.down-part {
  height: 64%;
}
</style>
