<template>
<el-tabs type="border-card" class="border-card">
  <el-tab-pane label="扫码核销">
    <el-row>
      <el-col :span="8">
        <div class="grid-content">
          <i class="iconfont icon-erweima"></i>
          <p>1</p>
          <p>请用户出示核销的二维码</p>
          <p>请将网页输入法切换成英文</p>
          
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content ">
          <i class="iconfont icon-iconfontscan"></i>
          <p>2</p>
          <p>点击“立即核销”按钮</p>
          <p>使用扫码枪扫描客户二维码</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <i class="iconfont icon-iconfontzhizuobiaozhun0261"></i>
          <p>3</p>
          <p>根据提示进行核销操作</p>
        </div>
      </el-col>
    </el-row>
    <el-button type="danger" @click="showVerifyDialog = true" style="margin:20px auto 0 auto;display:block" round>立即核销</el-button>
    <el-dialog title="核销数据" :visible.sync="showVerifyDialog">
      <el-form>
        <el-form-item label="扫描二维码数据">
          <el-input v-model="verifyId" @keyup.enter.native="verifyEnter" placeholder="请用扫码枪扫描二维码"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-tab-pane>
  <el-tab-pane label="手机号核销">
    <el-row>
      <el-col :span="12">
        <div class="grid-content">
          <i class="iconfont icon-erweima"></i>
          <p>1</p>
          <p>请输入用户的手机号</p>
          </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <i class="iconfont icon-iconfontzhizuobiaozhun0261"></i>
          <p>2</p>
          <p>点击“立即核销”按钮</p>
        </div>
      </el-col>
    </el-row>
    <el-form :inline="true" style="text-align: center;">
      <el-form-item label="">
        <el-input v-model="verifyPhone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="verifyTel">立即核销</el-button>
      </el-form-item>
    </el-form>
  </el-tab-pane>
</el-tabs>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import dayjs from "dayjs";

const { mapActions: mapExchangeActions } = createNamespacedHelpers("exchange");

export default {
  name: "goods-list",
  data() {
    return {
      filterData: {
        personName: "",
        phone: "",
        personType: "",
        targetName: "",
        startCreateDate: "",
        endCreateDate: "",
        startVerifyDate: "",
        endVerifyDate: "",
        status: ""
      },
      verifyPhone: "",
      verifyId: "",
      showVerifyDialog: false,
      list: [],
      pageNavi: {
        current: 1,
        size: 20,
        total: 0
      }
    };
  },
  computed: {},
  methods: {
    ...mapExchangeActions(["getExchanges", "verifyById"]),
    getList() {
      const pageNumber = this.pageNavi.current || 1;
      const pageSize = this.pageNavi.size;

      this.getExchanges({
        ...this.filterData,
        pageNumber,
        pageSize
      })
        .then(res => {
          const { records, ...pageNavi } = res;

          this.list = records;
          this.pageNavi = pageNavi;
        })
        .catch(err => {
          this.$notify.error(err.msg || err.message);
        });
    },
    addGoods() {
      this.$router.push({ name: "goods.edit" });
    },
    verifyEnter() {
      this.verifyById({
        id: this.verifyId
      })
        .then(res => {
         this.$notify.info("核销成功");
         this.showVerifyDialog = false;
        })
        .catch(err => {
          this.$notify.error(err.msg || err.message);
        });
    },
    verifyTel() {
      if(this.verifyPhone === ""){
        this.$notify.error("请输入手机号");
        return;
      }
      this.$router.push({
        name: "verify.list",
        params: { tel: this.verifyPhone }
      });
    },
    toDetail(row) {
      this.$router.push({
        name: "goods.edit",
        params: { id: row.goodsId }
      });
    },
    changeStatus(row) {
      this.showLoadding("保存中...");
      this.changeGoodsStatus(row)
        .then(res => {
          this.hideLoadding();
          this.$notify.info("保存成功");
          this.search();
        })
        .catch(err => {
          this.hideLoadding();
          this.$notify.error(err.message);
        });
    },
    showLoadding(text) {
      this.loading = this.$loading({
        text,
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)"
      });
    },
    hideLoadding() {
      if (this.loading) this.loading.close();
    },
    search() {
      this.pageNavi.current = 1;
      this.getList();
    },
    newPage(page) {
      this.$router.replace({ name: "goods.list", query: { page } });
    },
    formateDate(dt) {
      return !dt ? "" : dayjs(dt).format("YYYY-MM-DD HH:mm");
    }
  },
  created() {
    this.pageNavi.current = this.$route.query.page || 1;

    this.getList();
  }
};
</script>

<style lang="scss" scoped>
.list {
  .header {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.system-table-search {
  width: calc(100% - 40px);
  margin: 20px auto 0;
}

.system-table-search li {
  margin-right: 20px;
}

.system-table-search ul {
  font-size: 0;
  white-space: nowrap;
}

.system-table-search ul > li {
  display: inline-block;
}

.flex-h {
  display: flex;
  align-items: center;
}

.flex-item {
  flex: 1;
  -webkit-flex: 1;
  position: relative;
  overflow: hidden;
}
.border-card {
  .el-row {
    margin: 60px auto;
  }
  .grid-content {
    text-align: center;

    .iconfont {
      color: #77a5f0;
      font-size: 24px;
      margin-bottom: 8px;
      display: inline-block;
    }
    p {
      font-size: 13px;
      margin: 0;
      line-height: 1.4;
      color: #666;
    }
  }
}
</style>
