<template>
  <div class="gift">
    <div class="logo_box">
      <img src="/img/b_logo.png" alt="">
    </div>
    <div class="gift_box">
      <img class="tit_icon" src="/img/gift_title.png" alt="">
      <img style="width: 81.33vw;margin-top: 8vw;" src="/img/gift_qy.png" alt="">

      <!-- <div class="big_box"> -->
      <div class="choose">
        <img class="choose_img" :src="selected.id ? $file(selected.img) : '/img/gift_i1.png'">
        <div class="choose_box">
          <span class="title">
            {{ selected.id ? selected.name : '泰古润报单礼包' }}
          </span>
          <div>
            <img class="choose_icon" src="/img/fire.png" alt="">
            <b>购买即可升级VIP</b>
          </div>
          <div class="choose_item" @click="showSelect = true">
            <div class="btn1" v-if="selected.id">
              <span>
                ￥<b>{{ selected.saleprice }}</b>
              </span>
            </div>
            <div class="btn1" v-else>
              <span>
                <span style="font-size: 4vw;padding: 0 3vw;">待选</span>
              </span>
            </div>
            <div class="btn2">
              <span>
                选择产品礼包
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- v-if="selected.id"  -->
      <div class="detail" v-if="selected.id">
        <div v-if="selected.jifen">
          <span class="title">
            赠送积分数额
          </span>
          <b class="r">
            {{ selected.jifen?.toFixed(2) }}
          </b>
        </div>
        <div v-if="selected.huiyuanka">
          <span class="title">
            赠送会员卡额
          </span>
          <b class="r">
            <span>￥</span> {{ selected.huiyuanka?.toFixed(2) }}
          </b>
        </div>
      </div>

      <div class="address">
        <!-- <div class="input">
                    <div class="img">
                        <img src="/img/gift_i2.png" alt="">
                    </div>
                    <van-field v-model="address.username" placeholder="请填写报单人账号" type="phone"
                        :rules="[{ required: true, message: '请填写报单人账号' }]" />
                </div> -->
        <div class="input">
          <div class="img">
            <img src="/img/gift_i3.png" alt="">
          </div>
          <van-field v-model="address.ReceiveName" placeholder="请填写收货人姓名"
            :rules="[{ required: true, message: '请填写收货人姓名' }]" />
          <button class="btn" @click="$refs.ad_selector.showSelector()">
            导入已有地址
          </button>
        </div>
        <div class="input">
          <div class="img">
            <img src="/img/gift_i4.png" alt="">
          </div>
          <van-field v-model="address.ReceivePhone" placeholder="请填写收货人电话" type="phone"
            :rules="[{ required: true, message: '请填写收货人电话' }]" />
        </div>
        <div class="input">
          <div class="img">
            <img src="/img/gift_i5.png" alt="">
          </div>
          <van-field v-model="address.ReceiveRegionName" placeholder="请选择 / 省市 / 县" is-link
            :rules="[{ required: true, message: '请选择 / 省市 / 县' }]" @click="showRegion = true" />
        </div>
        <div class="input">
          <div class="img">
          </div>
          <van-field v-model="address.ReceiveAddress" placeholder="请填写收货人详细地址"
            :rules="[{ required: true, message: '请填写收货人详细地址' }]" />
        </div>
        <div class="input">
          <div class="img">
            <img src="/img/gift_i6.png" alt="">
          </div>
          <van-field v-model="address.Remark" placeholder="备注选填，请先与商家协商一致" />
        </div>
      </div>

      <button class="commit" @click="onShow()">
        立即购买
      </button>

      <span class="toList" @click="$navigate('TradeList?TradeArea=1')">
        购买记录
      </span>

      <!-- <van-checkbox icon-size="2.667vw" class="agreement" v-model="checked" checked-color="#85cb58">
        已阅读并同意<a @click.stop="showContract = true">《保供臻选商务权益礼包电子协议》</a>
        </van-checkbox> -->
    </div>
  </div>
  <!-- </div> -->

  <van-action-sheet v-model:show="showSelect" class="popup-tuoke" safe-area-inset-bottom title=" " closeable
    style="padding: 0 0 0; min-height: 60%">
    <div class="s_select" style="padding-bottom: 13.333vw;">
      <div class="t" style="justify-content: center; align-items: center;">
        <img src="/img/s_select-cart.png" />
        <div style="flex-direction: column; line-height: 6.667vw; align-items: flex-start;">
          <div style="line-height: 10.267vw;">
            请选择礼包产品
          </div>
          <b style="color: #f00;font-size: 3.2vw;">
            礼包产品为活动产品，不支持退货退款！
          </b>
        </div>
      </div>
      <div class="l" style="height: 85vw">
        <van-radio-group v-model="active">
          <van-cell-group>
            <BaseList class="mall-list" ref="BaseList" url="/v1/client/EProsClient" :params="searchParams">
              <template #default="{ item }">
                <van-cell clickable @click="selecting = item; active = item.id">
                  <template #icon>
                    <van-radio checked-color="#19954d" :name="item.id" />
                  </template>
                  <template #title>
                    <div class="list">
                      <img :src="$file(item.img)" />
                      <div style="width:59vw;">
                        <div class="name">
                          <b>{{ item.name }}</b>
                          <div class="text">
                            {{ item.skuname }}
                            <b style="line-height: 5.6vw;">
                              <span><span>￥</span>{{ item.saleprice }}</span>
                              <!-- <span> /{{ item.skuname }}</span> -->
                              <a @click.stop="onShowDetail(item)" style="float: right">
                                查看详情
                              </a>
                            </b>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </van-cell>
              </template>
            </BaseList>
          </van-cell-group>
        </van-radio-group>
      </div>
    </div>
    <van-action-bar safe-area-inset-bottom style="border-top: solid 1px #f1f1f1;">
      <van-action-bar-button color="#ca2904" :disabled="active == 0" text="确 定"
        @click="onSelectGoods"></van-action-bar-button>
    </van-action-bar>
  </van-action-sheet>

  <AddressSelector ref="ad_selector" @confirm="onAddressConfirm" />

  <!-- <van-popup v-model:show="showRegion" round position="bottom">
    <van-cascader v-model="region" title="请选择地区" :options="options" :field-names="defaultProps" @change="onChange"
      @finish="onFinish" @close="showRegion = false" />
  </van-popup> -->

  <van-popup v-model:show="showRegion" round position="bottom">
    <van-cascader v-model="region" title="请选择地区" :options="options" @close="showRegion = false" @finish="onFinish" />
  </van-popup>


  <!-- <BasePwd v-model:show="showPayPwd" :title="`交易密码`" @val="submitOrder" /> -->

  <van-action-sheet v-model:show="showDetail" title="权益详情" style="min-height: 60vh;padding: 3.333vw;">
    <div class="w100 html" v-html="data.SpuDetail"></div>
  </van-action-sheet>

  <van-action-sheet v-model:show="showContract" safe-area-inset-bottom title="保供臻选商务权益礼包电子协议" closeable
    style="min-height: 50%; padding: 0px 10px 10px 10px">
    <div class="w100 html">
      <p>用户协议内容...</p>
      <p>这里是用户协议的详细条款...</p>
    </div>
  </van-action-sheet>

</template>

<script>
import { useCascaderAreaData } from '@vant/area-data';

export default {
  name: 'Gift',
  activated() {
    this.init();
  },
  mounted() {
    this.config = { FruitPrice: 10 };
    this.options = useCascaderAreaData();
  },
  data() {
    return {
      data: {},
      active: 0,
      checked: false,
      showContract: false,
      selecting: {},
      selected: {},
      config: {},
      value: 1,
      searchParams: {
        mallstate: 1,
      },
      address: {},
      showSelect: false,
      showRegion: false,
      region: '',
      options: [],
      defaultProps: {
        value: "id",
        text: "name",
      },
      showPayPwd: false,
      showDetail: false,
    }
  },
  methods: {
    init() {
      Promise.all([
      ])
    },
    onAddressConfirm(address) {
      this.address.ReceiveName = address.ReceiveName;
      this.address.ReceivePhone = address.ReceivePhone;
      this.address.ReceiveRegionName = address.ReceiveRegionName;
      this.address.city = address.city;
      this.address.province = address.province;
      this.address.county = address.county;
      this.address.ReceiveAddress = address.ReceiveAddress;
    },
    onShow() {
      if (!this.$valid(this.selected.id, '请选择礼包产品'))
        return;
      if (!this.$valid(this.address.ReceivePhone, '请输入收货人电话'))
        return;
      if (!this.$valid(this.address.ReceiveName, '请输入收货人姓名'))
        return;
      if (!this.$valid(this.address.ReceiveRegionName, '请选择省市县'))
        return;
      if (!this.$valid(this.address.ReceiveAddress, '请输入详细地址'))
        return;
      // if (!this.checked) {
      //   this.$showFailToast('请同意协议');
      //   return;
      // }
      this.submitOrder();
    },
    onShowDetail(e) {
      this.$get(`/v1/client/EProsClient/${e.id}`)
        .then(res => {
          this.data.SpuDetail = res.data.contents;
          this.showDetail = true;
        })
        .catch(() => {
          this.$showFailToast('数据加载失败');
        });
      // this.data.SpuDetail = e.SpuDetail;
      // this.spuid = e.id;
      // this.showDetail = true;
    },
    onRefresh() {
      this.$refs.BaseList.refresh()
    },
    loadData(e) {
      this.data.Level = e.total.Level;
      this.data.LevelName = this.toChinese(e.total.Level);
    },
    onSelectGoods() {
      this.selected = this.selecting;
      this.showSelect = false;
    },
    // onChange(e) {
    //   if (e.selectedOptions[e.tabIndex].leaf) {
    //     e.selectedOptions[e.tabIndex].children = null;
    //     this.showRegion = false;
    //     return;
    //   }
    //   else if (!e.selectedOptions[e.tabIndex].children || e.selectedOptions[e.tabIndex].children.length == 0) {
    //     this.$CommonAPI.Post('GetRegions', e.value).then(data => {
    //       if (data.length > 0) {
    //         data.forEach(x => { x.children = [] });
    //         e.selectedOptions[e.tabIndex].children = data;
    //       }
    //       else {
    //         e.selectedOptions[e.tabIndex].children = null;
    //         this.showRegion = false;
    //       }
    //     });
    //   }
    // },
    onFinish(e) {
      this.showRegion = false;
      // console.log(e);

      this.address.ReceiveRegion = e.selectedOptions.map(x => x.id).join(';');
      this.address.ReceiveRegionName = e.selectedOptions.map(x => x.text).join('');
    },
    submitOrder(e) {
      // {
      //   "info": [
      //     {
      //       "proid": 0,
      //       "skuname": "string",
      //       "buynums": 0
      //     }
      //   ],
      //     "expresstype": true,
      //       "name": "string",
      //         "phone": "string",
      //           "province": "string",
      //             "city": "string",
      //               "county": "string",
      //                 "address": "string",
      //                   "isquan": true
      // }
      this.$post('/v1/client/FOrdersClient', {
        info: [
          {
            proid: this.selected.id,
            skuname: this.selected.skuname,
            buynums: this.value
          }
        ],
        name: this.address.ReceiveName,
        phone: this.address.ReceivePhone,
        province: this.address.province,
        city: this.address.city,
        county: this.address.county,
        address: this.address.ReceiveAddress,
      }).then(data => {
        // this.$showSuccessToast('权益购买成功');
        // console.log(data);
        this.$navigate('pay?ordernum=' + data.data);
        // this.$navigate(`TradeList?TradeArea=gift&TradeStates=99`);
      }).catch(err => {
        this.$showFailToast(err.message || '购买失败');
      });
    },
  }
}
</script>