<template>
  <el-dialog
    title="灌溉记录"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
    width="1400px"
  >
  <div style="margin-bottom: 20px">
     <el-date-picker
        v-model="dateValue"
        clearable
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00', '23:59:59']"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    <el-button
      type="primary"
      size="small"
      style="margin-left: 16px;"
      @click="handleSearch"
      >查询</el-button
    >
  </div>
  <b-table
    ref="tableRef"
    :args="{ 'highlight-current-row': true }"
    :data="loadData"
    :columns="columns"
    showIndex
  >
  </b-table>
  </el-dialog>
</template>

<script>
import { getCardusercdList } from '@/api/card/index.js'
import { assign, omit } from 'lodash-es';
import LeftImg from '../assets/img.svg'
import BTable from '@/components/Table'
export default {
  name: 'IrrigationRecord',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    irrigationDetail: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      LeftImg: LeftImg,
      dateValue: '',
      columns: [
        {
          label: '水源编号',
          prop: 'waterNum',
          customRender: '',
          align: 'center',
        },
        {
          label: '水源名称',
          prop: 'waterName',
          customRender: '',
          align: 'center'
        },
        {
          label: '本次耗水量（m³）',
          prop: 'cardusercdWaternum',
          customRender: '',
          align: 'center'
        },
        {
          label: '本次用电量（度）',
          prop: 'cardusercdElectricnum',
          customRender: '',
          align: 'center'
        },
        {
          label: '开始时间',
          prop: 'cardusercdStarttime',
          customRender: '',
          align: 'center'
        },
        {
          label: '结束时间',
          prop: 'cardusercdEndtime',
          customRender: '',
          align: 'center'
        },
        {
          label: '使用时长',
          prop: 'cardusercdDuration',
          customRender: '',
          align: 'center'
        },
        {
          label: '计费方式',
          prop: 'cardusercdBillingtype',
          customRender: '',
          align: 'center'
        },
        {
          label: '计费标准',
          prop: 'cardusercdPriceinfo',
          customRender: '',
          align: 'center'
        },
        {
          label: '扣除金额',
          prop: 'cardusercdUsemoney',
          customRender: '',
          align: 'center'
        }
      ],
      dialogVisible: false,
    };
  },
  components:{
    BTable
  },
  watch: {
    visible(val) {
      if (val !== this.dialogVisible) {
        this.dialogVisible = val;
      }
    },
    irrigationDetail: {
      handler(val) {
        console.log(val,'valvalval')
        const farmerId  = val?.farmerId
        this.farmerId = farmerId
        this.handleSearch()
       },
      deep: true
    }
  },
  methods: {
    loadData(parameter) {
      const payload = omit(assign({}, parameter), []);
      return this.getTableData(payload);
    },
    handleSearch() {
      this.$refs.tableRef && this.$refs.tableRef.refresh(true);
    },
    getTableData() {
      const [startTime, endTime] = this.dateValue
      return getCardusercdList({
        farmerId: this.farmerId,
        startTime,
        endTime
      })
    },
    handleClose() {
      this.$emit('update:visible', false);
    },
  }
};
</script>

<style lang="scss" scoped>
.input-number {
  width: 100%;
}
h3{
  height: 14px;
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  margin:0 0 20px 0;
}
.right_content{
  margin-bottom: 10px;
  label{
    color: #999;
    font-size: 14px;
    font-weight: 400;
  }
  span{
    color: #333333;
    font-size: 14px;
  }
}
.base-form {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 20px;
}
</style>
<style lang="css" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ebeef5;
}
</style>
