<template>
  <div class="mycard-container">
    <div class="contenttitle">
      <span>我的卡券</span>
    </div>
    <div class="cardbox">
      <div style="text-align: center">
        <a-spin tip="加载中..." :spinning="isspinning"></a-spin>
      </div>
      <div class="nocard" v-if="cardlist.length === 0 && isspinning === false">
        <span
          ><img src="../../../../assets/nocard.png" alt="" /><i
            >暂无可用卡券</i
          ></span
        >
      </div>
      <ul>
        <li
          v-for="(item, index) in cardlist"
          :key="index"
          :class="item.state1 !== '未使用' ? 'used' : ''"
        >
          <div>
            <h1><span>¥</span>{{ item.balance / 100 }}</h1>
            <p>卡券(元)</p>
          </div>
          <div>
            <p>{{ item.couponName }}</p>
            <p>
              有效期至<span>{{ item.pastDueTime }}</span>
            </p>
          </div>
          <div>{{ item.typeName }}</div>
          <div>{{ item.state1 }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { userCardApi } from "../../../../api/userinfo";
import { formatDateYMD } from "../../../../utils/commonUtil";
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      pagination: {
        pageNum: 1,
        pageSize: 6,
      },
      cardlist: [],
      isspinning: false,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getUserCard();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    async getUserCard() {
      this.isspinning = true;
      try {
        const { data } = await userCardApi(this.pagination);
        console.log(data);
        if (data.status === 200) {
          this.cardlist = data.data.recordList;
          this.cardlist.forEach((val) => {
            val.pastDueTime = formatDateYMD(val.pastDueTime);
            if (val.state === 0) {
              val.state1 = "未使用";
            } else if (val.state === 1) {
              val.state1 = "已使用";
            } else if (val.state === 2) {
              val.state1 = "已过期";
            }
          });
        }
        this.cardlist = data.data.recordList;
        this.cardlist.forEach((val) => {
          val.pastDueTime = formatDateYMD(val.pastDueTime);
          if (val.state === 0) {
            val.state1 = "未使用";
          } else if (val.state === 1) {
            val.state1 = "已使用";
          } else if (val.state === 2) {
            val.state1 = "已过期";
          }
        });
        console.log(this.cardlist);
      } catch (error) {
        console.log(error);
      }
      this.isspinning = false;
    },
  },
};
</script>

<style scoped lang="less">
.contenttitle {
  display: flex;
  padding-bottom: 16px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(77, 87, 94, 0.1);
  margin-top: 16px;
  margin-bottom: 16px;
  span {
    font-size: 20px;
    color: #ff6a00;
  }
  div {
    button {
      width: 100px;
      height: 28px;
      font-size: 14px;
      border: 1px solid #cccccc;
      background-color: #fff;
    }
    button:first-child {
      border-radius: 4px 0px 0px 4px;
    }
    button:last-child {
      border-radius: 0px 4px 4px 0px;
    }
  }
}
.cardbox {
  .nocard {
    margin-top: 60px;
    span {
      display: block;
      text-align: center;
      img {
        display: inline-block;
        width: 98px;
        height: 60px;
      }
      i {
        display: block;
        margin-top: 15px;
        font-size: 14px;
      }
    }
  }
  ul {
    li.used {
      // 已使用和已过期的样式
      background: #eeeeee;
      border: 1px solid #cccccc;
      > div:nth-of-type(1) {
        h1 {
          color: #999999;

          span {
            color: #999999;
          }
        }
        p {
          color: #999999;
        }
      }

      > div:nth-of-type(4) {
        background: #cccccc;
      }
    }
    li {
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      position: relative;
      margin-bottom: 16px;
      height: 102px;
      // width: 790px;
      background-color: #fff1e7;
      border: 1px solid #ff6a00;
      border-radius: 8px;
      div {
        float: left;

        vertical-align: middle;
        // flex: 1;
      }
      > div:nth-of-type(1) {
        margin-left: 52px;
        margin-top: 16px;
        color: #ff6a00;
        h1 {
          color: #ff6a00;
          font-size: 44px;
          font-weight: normal;
          line-height: 44px;
          span {
            font-size: 32px;
          }
        }
        p {
          font-size: 16px;
          text-align: right;
        }
      }
      > div:nth-of-type(2) {
        margin-top: 24px;
        margin-left: 83px;
        p:first-child {
          font-size: 20px;
          color: #4d575e;
        }
        p:last-child {
          font-size: 16px;
          color: #999999;
        }
      }
      > div:nth-of-type(3) {
        margin-top: 40px;
        margin-left: 80px;
        font-size: 16px;
        color: #666666;
      }
      > div:nth-of-type(4) {
        margin-top: 38px;
        width: 68px;
        height: 28px;
        font-size: 14px;
        line-height: 28px;
        float: right;
        color: #fff;
        background: #ff6a00;
        text-align: center;
        border-radius: 96px 0px 0px 96px;
      }
    }
  }
}
</style>
