<template>
  <div class="right_con">
    <div class="news_info_fgx fl"></div>
    <p class="honor_look fl">荣誉明细</p>
    <div class="search fr pad_T_15">
      <Input placeholder="申请账号" class="wid_120" v-model="search.applyusername" @on-enter="getHonorLookInfo()"></Input>
      <Button type="primary" @click="getHonorLookInfo()">搜索</Button>
      <Button class="clear_btn" @click="removeSearch">清空</Button>
    </div>
    <Table :columns="honorInfoList" :data="honorInfoData" border class="tables clear"></Table>
    <div class="page">
      <Page :total="count" :page-size="10" size="small" show-total show-elevator @on-change="getHonorLookInfo"/>
    </div>
    <exchangeDetail :is_exchange.sync="is_exchange" :honor_id="honor_id"></exchangeDetail>
  </div>
</template>
<script>
import exchangeDetail from "@@/honor/exchange_detail";
import { getNewtoday, removeSearch } from "@/assets/js/common";
export default {
  name: "honor_look",
  components: { exchangeDetail },
  data() {
    return {
      is_exchange: false,
      honor_id: null,
      count: 0,
      pindex: 1,
      search: {
        bg_date: "",
        ed_date: "",
        applyusername: "",
        status: ""
      },
      bg_date_op: {},
      ed_date_op: {},
      honorInfoList: [
        {
          title: "账号ID",
          key: "id"
        },
        {
          title: "账号",
          key: "name"
        },
        {
          title: "等级",
          key: "honor_name"
        },
        {
          title: "总荣誉值",
          key: "total_honor_num"
        },
        {
          title: "已使用荣耀值",
          key: "use_honor_num"
        },
        {
          title: "未使用荣耀值",
          key: "current_honor_num"
        },
        {
          title: "兑换记录",
          render: (h, params) => {
            if (Number(params.row.apply_num) > 0) {
              return h(
                "span",
                {
                  class: "a_text",
                  on: {
                    click: () => {
                      this.honor_id = params.row.id;
                      this.is_exchange = true;
                    }
                  }
                },
                params.row.apply_num
              );
            } else {
              return h("span", 0);
            }
          }
        },
        {
          title: "手机号",
          key: "mobile"
        },
        {
          title: "操作",
          render: (h, parmas) => {
              return h(
                "span",
                {
                  class: "operate-btn",
                  style: {
                    color: "rgb(0, 156, 255)"
                  },
                  on: {
                    click: () => {
                      this.sendSms(parmas.row.id);
                    }
                  }
                },
                "短信通知"
              );
          }
        }
      ],
      honorInfoData: []
    };
  },
  watch: {
    "search.bg_date"(n) {
      if (n) {
        let yest = getNewtoday(n);
        this.ed_date_op = {
          disabledDate: date => {
            return date && date.valueOf() < new Date(yest);
          }
        };
      } else {
        this.ed_date_op = {};
      }
    },
    "search.ed_date"(n) {
      if (n) {
        this.bg_date_op = {
          disabledDate: date => {
            return date && date.valueOf() > new Date(n);
          }
        };
      } else {
        this.bg_date_op = {};
      }
    }
  },
  methods: {
    // 获取数据
    getHonorLookInfo(page = 1) {
      this.$store.commit("changeloading", true);
      this.pindex = page;
      this.$api.getHonorLookInfo({
          limit: 10,
          page: this.pindex,
          name: this.search.applyusername
        })
        .then(data => {
          if (data.code == 200) {
            this.honorInfoData = data.data;
            this.count = data.count;
            this.$store.commit("changeloading", false);
          } else {
            this.$Message.info(data.msg);
            this.$store.commit("changeloading", false);
          }
        });
    },
    // 清空
    removeSearch() {
      this.search = { ...removeSearch({ ...this.search }) };
    },
    // 时间选择--开始时间
    bgdatechange(date) {
      this.search.bg_date = date;
    },
    // 时间选择--结束时间
    eddatechange(date) {
      this.search.ed_date = date;
    },
    sendSms(id) {
      this.$api.sendSms({ id }).then(data => {
        if (data.code == 200) {
          this.$Message.info(data.msg);
        } else {
          this.$Message.info(data.msg);
        }
      });
    }
  },
  created() {
    this.getHonorLookInfo();
  }
};
</script>
<style>
.honor_look {
  margin-top: 15px;
  margin-left: 5px;
  font-size: 15px;
}
</style>


