<template>
  <!-- 账号语=余额 -->
  <div class="balance">
    <div class="user-com-titl">
      <div class="l">
        账户余额
        <div class="xxtext">
          <img src="~assets/images/money.png" alt srcset />
          当前余额：{{ BalanceInfo.balance }}
        </div>
      </div>
      <!-- <div class="r">
        <el-button size="mini" @click="dialogShow">充值</el-button>
      </div> -->
    </div>
    <div style="margin: 20px 0">
      <el-date-picker
        v-model="value1"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['12:00:00']"
      ></el-date-picker>
    </div>

    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#FAFAFA' }"
      >
        <el-table-column
          prop="type_name"
          label="收入/支出"
          align="center"
        ></el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
        <el-table-column prop="create_time" label="时间" align="center" width="160">
          <template slot-scope="scope">{{
            $dayjs(scope.row.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
          }}</template>
        </el-table-column>
        <el-table-column
          prop="account_data"
          label="余额变动"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <Page
      @currentChange="currentChange"
      :total="total"
      :pageSize="limit"
      :currentPage="page"
    ></Page>
    <DialogSlot
      :tipsText="tipsText"
      :dialogSlotShow.sync="dialogSlotShow"
      @clickConfirm="clickConfirm"
      @clickCancel="clickCancel"
      :confirmBtnShow="confirmBtnShow"
      :cancelText="cancelText"
      width="432px"
    >
      <template v-slot:contentSlot>
        <div v-if="state == 1">
          <el-form :model="form" ref="form" label-width="120px" hide-required-asterisk>
            <el-form-item
              label="充值金额"
              prop="monery"
              type="number"
              :rules="[{ required: true, message: '金额不能为空' }]"
            >
              <el-input
                v-model.number="form.monery"
                autocomplete="off"
                clearable
              ></el-input>
              <div class="czText">充值500送60优惠券：充值1000送180优惠券</div>
            </el-form-item>

            <el-form-item label="请选择支付方式" prop="moneryType">
              <div class="zf" style="margin-top: 8px">
                <div class="l">
                  <el-radio v-model="payType" :label="1">
                    <div class="radio">
                      <img src="~assets/images/wxpay.png" alt />
                      <p>微信</p>
                    </div>
                  </el-radio>
                </div>
                <span class="rr">
                  <span>使用微信扫描二维码即可付款</span>
                </span>
              </div>
              <div class="zf" style="margin-top: 20px">
                <div class="l">
                  <el-radio v-model="payType" :label="2">
                    <div class="radio">
                      <img src="~assets/images/AlipayTag.png" alt />
                      <p>支付宝</p>
                    </div>
                  </el-radio>
                </div>
                <span class="rr">使用手机支付宝扫描二维码付款</span>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="state == 2" class="smzf">
          <div class="code">
            <img src="~assets/images/code.png" alt />
          </div>
          <p>请使用微信“扫一扫”扫描二维码支付</p>
        </div>
        <div v-if="state == 3" class="zfcg">
          <div class="code">
            <img src="~assets/images/paySuccess.png" alt />
          </div>
          <p>充值成功</p>
        </div>
      </template>
    </DialogSlot>
  </div>
</template>

<script>
export default {
  name: "integral",
  auth: "guest",
  data() {
    return {
      BalanceInfo: {},
      cancelText: "取消",
      confirmBtnShow: true,
      tipsText: "充值",
      state: 1,
      payType: undefined,
      form: {
        monery: undefined,
      },
      dialogSlotShow: false,
      value1: "",
      contentText:
        "规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容",
      page: 1,
      limit: 5,
      total: 0,
      tableData: [],
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "账户余额-" + this.$store.state.titleCon,
    };
  },
  created() {},
  mounted() {
    this.getBalanceInfo();
    this.getBalanceList();
  },
  methods: {
    dialogShow() {
      this.dialogSlotShow = true;
      this.form.monery = sessionStorage.getItem("pay_monery");
    },
    clickConfirm() {
      this.tipsText = "微信扫码支付";
      this.state = 2;
      this.confirmBtnShow = false;
      this.cancelText = "返回";
      // this.dialogSlotShow = false;
      sessionStorage.setItem("pay_monery", this.form.monery);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.dialogSlotShow = false;
          this.state = 1;
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    clickCancel() {
      this.confirmBtnShow = true;
      this.dialogSlotShow = false;
      this.state = 1;
    },
    // 查询账户余额
    getBalanceInfo() {
      this.$axios
        .post("/memberaccount/info")
        .then((res) => {
          this.BalanceInfo = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 查询账户余额流水
    getBalanceList() {
      let obj = {
        page: this.page,
        page_size: this.limit,
        account_type: "balance",
      };
      this.$axios
        .post(`/memberaccount/page`, obj)
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.count;
          console.log(this.tableData);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 分页点击
    currentChange(e) {
      this.page = e;
      this.getBalanceList();
    },
    clickgz() {
      this.$refs.dialog.dialogShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-radio {
    display: flex;
    align-items: center;
  }
}
.balance {
  padding: 0 30px;
  .user-com-titl {
    display: flex;
    border-bottom: 1px solid #ececec;

    .l {
      display: flex;
      height: 60px;
      font-size: 18px;
      color: #282828;
      display: flex;
      align-items: center;
      .xxtext {
        display: flex;
        align-items: center;
        margin-left: 20px;
        img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ff7d02;
      }
    }
    .r {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-left: 40px;
    }
  }
  ul {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    margin-top: 20px;
    li {
      width: 290px;
      height: 142px;
      background: #fbfbfb;
      border-radius: 8px;
      border: 1px solid #e7e7e7;
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      margin-bottom: 20px;
      cursor: pointer;

      .left {
        img {
          width: 80px;
          height: 80px;
        }
      }
      .right {
        margin-left: 20px;
        .title {
          width: 160px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #222222;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          // 必须加不然隐藏不了
          /*! autoprefixer: ignore next */
          -webkit-box-orient: vertical;
        }
        p {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #585858;
          margin-top: 10px;
        }
        .cad {
          margin-top: 13px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .l {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #585858;
            span {
              color: #ff1919;
            }
          }
        }
      }
    }
  }
  .czText {
    height: 20px;
    line-height: 20px;
    background: #fff5eb;
    border-radius: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff7d02;
    margin-top: 14px;
    text-align: center;
    letter-spacing: 1px;
  }
  .zf {
    width: 100%;
    .l {
      display: flex;
      align-items: center;
      .radio {
        display: flex;
        align-items: center;
      }
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
      p {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
      }
    }
    .rr {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-left: 54px;
    }
  }
  .smzf {
    display: flex;
    flex-direction: column;
    align-items: center;
    .code {
      width: 186px;
      height: 186px;
      border: 1px solid #e0e0e0;
      im {
        width: 100%;
        height: 100%;
      }
    }

    p {
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #585858;
      margin: 20px 0 30px;
    }
  }
  .zfcg {
    display: flex;
    flex-direction: column;
    align-items: center;
    .code {
      width: 110px;
      height: 110px;
      im {
        width: 100%;
        height: 100%;
      }
    }

    p {
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #585858;
      margin: 30px 0 50px;
    }
  }
}
</style>
