<template>
  <!-- #ifdef H5 -->
  <zj-page-layout :hasFooter="true">
    <view class="form-container">
      <view class="item" @tap="toChooseWebsite">
        <view class="label"><text>*</text>购买网点</view>
        <view class="picker">
          <text class="value" v-if="websit">{{ websit.name }}</text>
          <text class="placeholder" v-else>请选择</text>
          <text class="iconfont icon-jinru"></text>
        </view>
      </view>
      <view class="item">
        <view class="label"><text>*</text>申领人员</view>
        <view class="value">{{ userInfo.nickName }}</view>
      </view>
      <!-- <view class="item">
        <view class="label"><text>*</text>产品类别</view>
        <u-radio-group v-model="type">
          <u-radio shape="circle" label="辅材" :name="'M'"></u-radio>
          <u-radio shape="circle" label="配件" :name="'P'"></u-radio>
        </u-radio-group>
      </view> -->
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
        <u-button type="primary" text="选择产品" @click="toChooseProduct"></u-button>
      </view>
    </template>
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view
    :src="webViewHref(`/packageMaterial/pages/apply/index`, pam, crossPagePam)"
    @message="crossPage.$listener"
  ></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
export default {
  data() {
    return {
      userInfo: {},
      websit: null,
      type: 'M',
    }
  },

  async onLoad({type}) {
    this.type = type || 'M';
	this.userInfo = await this.$getUserInfo();
    this.getWebsitList();

    this.crossPage.$on('chooseMaterialApplyWebsit', data => {
      this.websit = data;
    });
  },

  methods: {
    getWebsitList() {
      this.$api.get('/user/apply/websit')
      .then(res => {
        this.websit = res.data.find(o => o.isDefaultWebsit)
      })
    },

    toChooseWebsite() {
      this.$navToPage({
        url: `/packageMaterial/pages/apply/website`
      })
    },

    toChooseProduct() {
      if(!this.websit) return this.$toast('请选择购买网点');
      this.$navToPage({
        url: `/packageMaterial/pages/apply/product?type=${this.type}&websitId=${this.websit.websitId}&websitName=${this.websit.name}`
      })
    },
  },
}

// #endif
// #ifndef H5
export default {
  data() {
    return {
      pam: {},
    }
  },
  onLoad(pam) {
    this.pam = pam;
  }
}
// #endif
</script>

<style lang="scss" scoped>
.form-container {
  background: #ffffff;
  margin-top: 20rpx;
  border-top: 1px solid #f5f5f5;
  .item {
    height: 108rpx;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    .label {
      margin-right: 30rpx;
      min-width: 200rpx;
      text {
        color: $error-color;
      }
    }
    .picker {
      .placeholder {
        color: $sec-font;
      }
      .iconfont {
        margin-left: 12rpx;
        color: $sec-font;
      }
    }
    ::v-deep .u-radio-group {
      flex: unset;
      .u-radio {
        margin-left: 50rpx;
      }
    }
  }
}
</style>
