<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row :span="24" type="flex" align="middle" justify="space-between">
          <el-col :span="20">
            <p style="font-size: 18px;">账户管理</p>
          </el-col>
          <el-col :span="4">
            <el-button
              style='float:right'
              :disabled="isAddbank"
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增
            </el-button>
          </el-col>
        </el-row>
      </div>

      <el-table v-loading="loading" :height="tableHeight" :data="bankcardList"
                @selection-change="handleSelectionChange">
        <el-table-column label="商户ID" align="center" prop="Id"/>
        <el-table-column label="开户名" align="center" prop="BankAccountName"/>
        <el-table-column label="城市名" align="center" prop="ProvinceCity"/>
        <el-table-column label="银行名称" align="center" prop="BankName"/>
        <el-table-column label="开户行" align="center" prop="Kaihuhang"/>
        <el-table-column label="户名" align="center" prop="BankAccountName"/>
        <el-table-column label="账号" align="center" prop="BankAccountNo"/>
        <!--             <el-table-column label="支付宝账户名称" align="center" prop="ZfbAccountName" />-->
        <!--             <el-table-column label="支付宝账户" align="center" prop="ZfbAccount" />-->
        <el-table-column label="类型" :formatter="btypa" align="center" prop="State"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 添加或修改商户银行卡对话框 -->
<!--      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!--        <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--          <el-form-item label="类型">-->
<!--            <el-select @change="selectChanged" v-model="form.txType" placeholder="类型">-->
<!--              <el-option v-for="item in state" :key="item.value" :label="item.label"-->
<!--                         :value="item.value"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--          <el-button @click="cancel">取 消</el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->

      <el-dialog :visible.sync="bank" :title="banktitle">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px">
          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="开户城市" prop="ProvinceCity">
                <el-input v-model="form.ProvinceCity" placeholder="请输入城市名和商户提交时一致"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="银行名称">
                <el-select v-model="form.BankName" placeholder="状态" style="width: 100%">
                  <el-option v-for="item in bankList" :key="item.value" :label="item.value"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="开户行" prop="kaihuhang">
                <el-input v-model="form.kaihuhang" placeholder="请输入开户行"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="户名" prop="BankAccountName">
                <el-input v-model="form.BankAccountName" placeholder="请输入户名"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="账号" prop="BankAccountNo">
                <el-input v-model="form.BankAccountNo" placeholder="请输入账号"/>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

<!--      <el-dialog :visible.sync="zfb" :title="banktitle">-->
<!--        <el-form ref="form" :model="form" :rules="rules2" label-width="80px">-->
<!--          <el-form-item label="支付宝账户名称" prop="ZfbAccountName">-->
<!--            <el-input v-model="form.ZfbAccountName" placeholder="请输入支付宝账户名称"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="支付宝账户" prop="ZfbAccount">-->
<!--            <el-input v-model="form.ZfbAccount" placeholder="请输入支付宝账户"/>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--          <el-button @click="cancel">取 消</el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->

    </el-card>
  </div>
</template>
<script>
  import {listBankcard, getBankcard, delBankcard, addBankcard, listBankname} from '@/api/module/bankcard'

  export default {
    name: "bankcard",
    data() {
      return {
        fullHeight: 0,
        tableHeight: 0,
        state: [
          // {label: "支付宝", value: 2},
          {label: "银行卡", value: 1},
        ],
        //银行
        bankList: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 商户银行卡表格数据
        bankcardList: [],
        // 弹出层标题
        title: "",
        banktitle: "对公账户（数量最多为3个）",
        // 是否显示弹出层
        open: false,
        isAddbank: false,
        bank: false,
        zfb: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          sellerId: 0,
        },
        // 表单参数
        form: {

        },
        // 表单校验
        rules: {},
        rules2: {
          ZfbAccountName: [
            {required: true, message: "支付宝账户名称不能为空", trigger: "blur"}
          ],
          ZfbAccount: [
            {required: true, message: "支付宝账号不能为空", trigger: "blur"}
          ],
          // zfb_account_name: [
          //   { required: true, message: "支付宝账户名称不能为空", trigger: "blur" }
          // ],
        }
      };
    },
    created() {
      this.queryParams.sellerId = this.$store.state.user.sellerid;
      this.getList();
      this.getBankNameList();
      // this.getBankname();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
      })

    },
    watch: {
      fullHeight(val) {
        this.tableHeight = val
      }
    },
    methods: {
      //获取银行名称列表
      getBankNameList() {
        listBankname().then(response => {
          this.bankList = response.data
        });
      },
      //类型改变
      // selectChanged(v) {
      //   if (v == 1) {
      //     this.bank = true
      //     this.zfb = false
      //   } else if (v == 2) {
      //     this.bank = false
      //     this.zfb = true
      //   } else {
      //     this.bank = false
      //     this.zfb = true
      //   }
      // },
      //根据银行类别判断
      btypa(row) {
        var lx = ""
        if (row.TxType == 1) {
          lx = "银行卡"
        } else if (row.TxType == 2) {
          lx = "支付宝"
        }
        return lx
      },
      /** 查询商户银行卡列表 */
      getList() {
        this.loading = true;
        listBankcard(this.queryParams).then(response => {
          this.bankcardList = response.data.list;
          //console.log(this.bankcardList)
          this.total = response.data.total;
          if (this.total >= 3) {
            this.isAddbank = true;
          }else {
            this.isAddbank = false;
          }
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.bank = false;
        this.zfb = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.bank = true;
        this.title = "添加商户银行卡";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getBankcard(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改商户银行卡";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.sellerId = this.queryParams.sellerId;
            this.form.TxType = 1;
            addBankcard(this.form).then(response => {
              if (response.code === 0) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.bank = false;
                this.zfb = false;
                this.getList();
              }
            });

          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.Id
        this.$confirm('是否确认删除商户银行卡编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delBankcard(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
    } //methods结束
  };
</script>
<style scoped>

</style>
