<template>
  <!-- 我的积分 -->
  <div class="integral">
    <div class="user-com-titl">
      <div class="l">
        我的积分
        <div class="xxtext">
          <img src="~assets/images/xx.png" alt srcset />
          当前积分：{{ IntegralInfo.point }}
        </div>
      </div>
      <div class="r" @click="clickgz">
        <img src="~assets/images/gz.png" alt />
        积分规则
      </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="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>

    <el-dialog
      title="提示"
      :visible.sync="dialogRuler"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div slot="title" style="display: flex; margin-top: 20px">
        <img
          style="width: 24px; height: 24px; margin-right: 10px"
          src="~assets/images/Tips.png"
          alt
        />
        <div class="tipsTexe">签到规则</div>
      </div>
      <div class="gz">
        <div class="gztext">
          <p>
            1.连续签到{{
              awardData.cycle
            }}天为一个周期，连续签到天数签满一个周期或者签到中断，将清空连签天数重新计算签到天数
          </p>
          <div v-for="(item, index) in awardData.reward" :key="index">
            <p v-if="index == 0">
              2.每{{ item.day == 1 ? "日" : item.day }}天签到奖励: {{ item.point }}积分
              {{ item.growth }}成长值
              <span></span>
            </p>
            <p v-if="index == 1">
              3.连续签到{{ item.day }}天额外奖励: {{ item.point }}积分
              {{ item.growth }}成长值
            </p>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogRuler = false" size="small">知道了</el-button>
      </span>
    </el-dialog>

    <Dialog
      ref="dialog"
      :contentText="contentText"
      :cancleBtnShow="cancleBtnShow"
    ></Dialog>
  </div>
</template>

<script>
export default {
  name: "integral",
  auth: "guest",
  data() {
    return {
      dialogRuler: false,
      awardData: {},
      cancleBtnShow: false,
      value1: "",
      contentText:
        "规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容",
      page: 1,
      limit: 5,
      total: 0,
      IntegralInfo: {},
      tableData: [
        {
          date: "签到",
          name: "1984-08-02  19:23:12",
          address: "+230",
        },
        {
          date: "签到",
          name: "1984-08-02  19:23:12",
          address: "+230",
        },
      ],
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "我的积分-" + this.$store.state.titleCon,
    };
  },
  created() {
    this.getIntegralList();
    this.getIntegralInfo();
    this.getAward();
  },
  mounted() {},
  methods: {
    // 获取规则
    getAward() {
      this.$axios
        .post(`/membersignin/award`)
        .then((res) => {
          this.awardData = res.data;
          console.log(res.data, `award`);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getIntegralInfo() {
      let obj = {
        account_type: "point",
      };
      this.$axios.post("/memberaccount/info", obj).then((res) => {
        this.IntegralInfo = res.data;
        console.log(this.IntegralInfo, `pointInfo`);
      });
    },
    getIntegralList() {
      let obj = {
        page: this.page,
        page_size: this.limit,
        account_type: "point",
      };
      this.$axios
        .post(`/memberaccount/page`, obj)
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.count;
          console.log(res, `point`);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    clickgz() {
      this.dialogRuler = true;
      // this.$refs.dialog.dialogShow = true;
    },
    // 分页点击
    currentChange(e) {
      this.page = e;
      this.getIntegralList();
    },
  },
};
</script>

<style lang="scss" scoped>
.integral {
  padding: 0 30px;
  .user-com-titl {
    display: flex;
    justify-content: space-between;
    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;
      img {
        width: 17px;
        height: 17px;
        margin-right: 8px;
      }
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }
  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;
            }
          }
        }
      }
    }
  }
  .gz {
    p {
      margin: 20px 0 10px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 20px;
    }
    .gztext {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      padding-bottom: 20px;
      line-height: 22px;
      p {
        color: #999999;
      }
    }
  }
}
</style>
