<template>
  <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item prop="condition">
          <el-input
            v-model="queryParams.name"
            placeholder="农户名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item prop="condition">
          <el-date-picker
            type="daterange"
            v-model="dateRange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            size="mini"
            v-hasPermi="['bankCheck:farmer:create']"
            @click="createOrder"
          >生成需打款名单</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="对象名称" align="center" width="160" prop="name">
          <template slot-scope="scope">
            <span>{{ scope.row.farmerInfoEntity.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="银行名称" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.farmerInfoEntity.bankName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="银行卡号" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.farmerInfoEntity.bankNo}}</span>
          </template>
        </el-table-column>
        <el-table-column label="银行机构代码" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.farmerInfoEntity.bankCode}}</span>
          </template>
        </el-table-column>
        <el-table-column label="清分类型" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.belongType == 1 ? '农户' : '组织' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="打款金额" align="center" prop="ammount" />
        <el-table-column label="地址" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.farmerInfoEntity.address}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  </div>
</template>

<script>
import { listFarmer , clearCreate } from "@/api/bankCheck/farmer";
import addMobiel from './modal/addMobiel'
export default {
  name: "farmer",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 日期范围
      dateRange: "",
      // 表格数据
      list: null,
      checkedList:[],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listFarmer(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
          if(res.retHead.errCode == 0){
            this.list = res.retBody
            this.total = res.retHead.total;
          }
          this.loading = false;
        }
      );
    },
    handleSelectionChange(val){
       this.checkedList = val;
    },
    createOrder(){
       let data = this.checkedList
       if(data.length != 0){
          let arr = []
          let time = {
            startTime:data[0].startTime,
            endTime:data[0].endTime
          }
          for(let i = 0;i < data.length;i++){
             arr.push({
               fcName:data[i].farmerInfoEntity.fkFcId,
               belongType:data[i].belongType,
             })
          }
          let params = {
            ...time,
            clearings:arr
          }
          this.$confirm('是否确定生成需要打款名单?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              return clearCreate(params);
            }).then(() => {
              this.getList();
              this.msgSuccess("清分成功!");
            }).catch(function() {});
       }else{
         this.msgError("请先选择你所要清分的项目!")
       }
    },
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        pageNo:1,
        pageSize:10
      }
      this.handleQuery();
    }
  }
};
</script>
