<template>
  <div>
    <div class="title">选择支付方式</div>
    <div class="btn_group">
      <div class="price_select">
        <div class="pay_btns">
          <el-button
            size="medium"
            @click="changeSel(item)"
            v-for="(item, index) in list"
            :key="index"
            :type="sel === item.payType ? 'primary' : ''"
          >
            {{ item.payName }}
          </el-button>
          <!-- <el-button size="medium"> 余额支付 </el-button>
          <el-button size="medium"> 现金支付 </el-button>
          <el-button size="medium"> 挂账 </el-button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { $getPayType } from "@/api/table";
export default {
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      list: [],
      sel: "",
    };
  },
  watch: {
    sel(newval) {
      console.log(newval);
      this.$emit("input", newval);
    },
  },
  methods: {
    changeSel(item) {
      this.sel = item.payType;
      this.$emit("itemClick", item);
    },
    async init() {
      const res = await $getPayType();
      this.list = res.filter(v=>v.isDisplay);
      console.log(res[0]);
      this.sel = this.sel ? this.sel : res[0].payType;
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 18px;
  color: #000;
  font-weight: 600;
  padding: 20px 0;
}
.pay_btns .el-button {
  margin-left: 0;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>