<template>
  <div class="fruitDetail">
    <div class="top">
      <div class="left">
        <div class="icon"></div>
        <div class="title">线上兑换历史</div>
      </div>
      <van-button round size="small" type="danger" @click="instruction">使用说明</van-button>
    </div>
    <div class="center" style="magin-top: 10px">
      <van-field
        :value="fruitsName"
        label="水果名称"
        placeholder="请选择水果名称"
        readonly
        clickable
        :rules="[
          { required: true, message: '请选择水果名称', trigger: 'onChange' },
        ]"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="
            fruitList.map((item) => {
              return item.fruitsName;
            })
          "
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        :value="name"
        label="使用状态"
        placeholder="请选择使用状态"
        readonly
        clickable
        :rules="[
          { required: true, message: '请选择使用状态', trigger: 'onChange' },
        ]"
        @click="showPicker1 = true"
      />
      <van-popup v-model="showPicker1" position="bottom">
        <van-picker
          show-toolbar
          :columns="
            exchangeList.map((item) => {
              return item.name;
            })
          "
          @confirm="onConfirm1"
          @cancel="showPicker1 = false"
        />
      </van-popup>
    </div>
    <div class="bottom">
      <div class="card" v-for="(item, index) in list" :key="index">
        <div class="smallTop">
          <div class="left">
            <div class="img"></div>
            <div class="name">{{ item.fruitsName }}</div>
            <div class="num">{{ item.weight }}kg</div>
          </div>
          <div class="right" v-if="item.exchangeState == 0">未使用</div>
          <div class="right" v-else>已使用</div>
        </div>
        <div class="smallBottom">
          <div class="title">兑换码：</div>
          <div class="time" style="margin-right: 20px; color: #1989fa">
            {{ item.exchangeCode }}
          </div>
          <van-button
            plain
            hairline
            round
            type="info"
            size="mini"
            @click="copyClick(item.exchangeCode)"
          >
            点击复制
          </van-button>
        </div>
        <div class="smallBottom">
          <div class="title">提货用户：</div>
          <div class="time">{{ item.userMobile }}</div>
        </div>
        <div class="smallBottom" style="justify-content: space-between">
          <div style="display: flex; align-items: center">
            <div class="title">提货时间：</div>
            <div class="time" style="margin-right: 20px">
              {{ item.createTime }}
            </div>
            <button
              v-if="item.exchangeState == 0"
              style="width: 80px; background: #07c160; border-radius: 5px"
            >
              <a style="color: #fff" href="weixin://dl/business/?t=i8DMFbqGUng"
                >去使用</a
              >
            </button>
            <button
              v-if="item.exchangeState != 0"
              style="width: 80px; background: #07c160; border-radius: 5px"
            >
              <a style="color: #fff" href="weixin://dl/business/?t=i8DMFbqGUng"
                >订单查询</a
              >
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Field, Popup, Picker, Button, Dialog } from "vant";
Vue.use(Field).use(Popup).use(Picker).use(Button).use(Dialog);
import { getFruits, userOnlineRecord } from "@/api/fruit.js";
export default {
  name: "fruitDetail",
  data() {
    return {
      userInfo: {},
      fruitsName: "",
      name: "",
      code: "",
      exchangeState: "",
      showPicker: false,
      showPicker1: false,
      fruitList: [
        {
          code: "",
          fruitsName: "全部",
        },
      ],
      exchangeList: [
        {
          exchangeState: "",
          name: "全部",
        },
        {
          exchangeState: "0",
          name: "未使用",
        },
        {
          exchangeState: "1",
          name: "已使用",
        },
      ],
      list: [],
    };
  },
  created() {
    if (window.android !== undefined) {
      const res = window.android.getUserInfo(); // 这是一个json字符串
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
      if (this.userInfo) {
        this.init();
        this.initList();
      }
    } else if (window.webkit) {
      window.webkit &&
        window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
    } else {
      this.$toast("请先登录镇合意app");
    }
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  methods: {
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
      if (window.webkit) {
        if (this.userInfo) {
          this.init();
          this.initList();
        }
      }
    },
    init() {
      getFruits().then((res) => {
        res.map((item) => {
          this.fruitList.push(item);
        });
      });
    },
    initList() {
      let params = {
        userId: this.userInfo.userId,
        fruitsCode: this.code,
        exchangeState: this.exchangeState,
      };
      userOnlineRecord(params).then((res) => {
        this.list = res;
      });
    },
    onConfirm(value, index) {
      this.fruitsName = value;
      this.code = this.fruitList[index].code;
      this.showPicker = false;
      this.initList();
    },
    onConfirm1(value, index) {
      this.name = value;
      this.exchangeState = this.exchangeList[index].exchangeState;
      this.showPicker1 = false;
      this.initList();
    },
    // 新增一个input标签，设置其value为复制的内容，再使用execCommand()方法实现复制功能
    copyClick(val) {
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.setAttribute("value", val);
      input.select();
      if (document.execCommand("copy")) {
        // IOS不支持此方法，所以复制不成功
        document.execCommand("copy");
      }
      document.body.removeChild(input);
      Dialog.alert({
        message: "复制成功！",
      }).then(() => {
        // on close
      });
    },
    instruction() {
      Dialog.alert({
        messageAlign: 'left',
        title: '使用说明',
        message:"1.您已成功领取扶贫水果线上兑换券，可复制以下兑换码，点击去使用进入供应商页面进行兑换。\n2. 如有APP中领券的使用问题，可拔打0511-87050298进行咨询；水果领取等相关问题，请拨打水果兑换券背面联系电话。",
      }).then(() => {
        // on close
      });
    }
  },
};
</script>

<style lang="stylus" scoped>
.fruitDetail {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: scroll;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 30px;

    .left {
      display: flex;
      align-items: center;

      .icon {
        width: 6px;
        height: 30px;
        background: #EB4E3F;
      }

      .title {
        font-size: 30px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-left: 10px;
      }
    }
  }

  .bottom {
    .card {
      display: flex;
      flex-direction: column;
      padding: 30px;
      margin-top: 10px;
      background: #fff;

      .smallTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;

        .left {
          display: flex;
          align-items: center;

          .img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #EB4E3F;
          }

          .name {
            margin: 0 20px;
          }
        }

        .right {
          color: #EB4E3F;
        }
      }

      .smallBottom {
        display: flex;
        align-items: center;
        margin-top: 20px;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #999;

        .title {
          width: 180px;
        }
      }
    }
  }
}
</style>