<template>
  <div class="app-delivery-module">
    <!-- 配送公共组件 -->
    <!-- 收花人 -->
    <div class="module-com">
      <tui-list-cell class="line-cell" :hover="false">
        <div class="tui-title">收花人姓名</div>
        <input
          v-model="form.receiveUserName"
          placeholder-class="phcolor"
          placeholder-style="color:#ccc"
          class="tui-input"
          name="receiveUserName"
          placeholder="请填写姓名"
        />
      </tui-list-cell>
      <tui-list-cell class="line-cell" :hover="false">
        <div class="tui-title">收花人电话</div>
        <input
          v-model="form.receiveMobile"
          placeholder-class="phcolor"
          placeholder-style="color:#ccc"
          class="tui-input"
          name="receiveMobile"
          placeholder="请填写电话"
          type="number"
        />
      </tui-list-cell>
      <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
        <div class="tui-title">所在城市</div>
        <div
          class="tui-input"
          v-if="form.receiveProvince || form.receiveCity"
        >{{ form.receiveProvince + '-' + form.receiveCity }}</div>
        <div class="tui-placeholder" v-else>请选择</div>
      </tui-list-cell>
      <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
        <div class="tui-title">详细地址</div>
        <div class="tui-input" v-if="form.receiveAddress">{{ form.receiveAddress }}</div>
        <div class="tui-placeholder" v-else>请选择地址</div>
      </tui-list-cell>
      <tui-list-cell class="line-cell" :hover="false">
        <div class="tui-title">门牌号</div>
        <input
          v-model="form.receiveFloor"
          placeholder-class="phcolor"
          placeholder-style="color:#ccc"
          class="tui-input"
          name="receiveFloor"
          placeholder="楼号门牌号（选填）"
        />
      </tui-list-cell>
    </div>
    <!-- 订花人 -->
    <div class="module-com">
      <tui-list-cell class="line-cell" :hover="false" :arrow="true">
        <div class="tui-title">送达时间</div>
        <picker 
          mode="date" 
          :value="form.reachDate" 
          @change="selTimeFn" 
          class="tui-input">
          <div v-if="form.reachDate">{{ form.reachDate }}</div>
          <div class="tui-placeholder" v-else>请选择送达时间</div>
        </picker>
      </tui-list-cell>
      <!-- 具体时间 -->
      <div class="delivery-time">
        <button
          class="button-com"
          :class="[form.reachPeriod == 0 ? 'red' : 'default']"
          @click="timeTodaySelFn(0)"
        >上午</button>
        <button
          class="button-com"
          :class="[form.reachPeriod == 1 ? 'red' : 'default']"
          @click="timeTodaySelFn(1)"
        >下午</button>
        <button
          class="button-com"
          :class="[form.reachPeriod == 2 ? 'red' : 'default']"
          @click="timeTodaySelFn(2)"
        >晚上</button>
      </div>
      <tui-list-cell class="line-cell" :hover="false">
        <div class="tui-title">我的电话</div>
        <!-- #ifdef MP-WEIXIN -->
        <input
          v-model="form.bookMobile"
          placeholder-class="phcolor"
          placeholder-style="color:#ccc"
          style="width:330rpx;"
          disabled
          class="tui-input"
          name="bookMobile"
          placeholder="送到了通知您（选填）"
          type="number"
        />
        <button
          class="button-com mini-btn"
          open-type="getPhoneNumber"
          @getphonenumber="getWxMobile"
          v-if="shopUser.mobile == ''"
          style="padding:12rpx 25rpx;font-size:22rpx;"
        >帮我填</button>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <input
          v-model="form.bookMobile"
          placeholder-class="phcolor"
          placeholder-style="color:#ccc"
          class="tui-input"
          name="bookMobile"
          placeholder="送到了通知您（选填）"
          type="number"
        />
        <!-- #endif -->
      </tui-list-cell>
    </div>

    <!-- 贺卡 -->
    <div class="module-com gift-wrap input-line-wrap">
      <tui-list-cell class="line-cell" :hover="false">
        <div class="tui-title">选择贺卡</div>
        <div class="gift-content">
          <div class="flex-center">
              <radio-group @change="needCardChange">
                <label class="radio"><radio value="1" checked="true" />需要</label>
                <label class="radio"><radio value="0" />不需要</label>
                </radio-group>
          </div>
        </div>
      </tui-list-cell>

      <tui-list-cell class="line-cell" :hover="false" v-show="showCardInfo">
        <div class="tui-title">贺卡内容</div>
        <input
          v-model="form.cardInfo"
          placeholder-class="phcolor"
          placeholder-style="color:#ccc"
          class="tui-input"
          name="cardInfo"
          style="width:100%;"
          placeholder="请填写内容，留空寄出空白贺卡"
        />

      </tui-list-cell>

      <!-- <block v-if="form.anonymity"> -->
      <tui-list-cell class="line-cell" :hover="false">
        <div class="none-name-delivery flex-center" style="padding-left:0rpx;">
          <div class="tui-title">派送方式</div>
 <checkbox-group @change="anonymityChange">
          <checkbox class="ljd-checkbox" value="1" id="noneNameText" ></checkbox>
          <label for="noneNameText" class="none-name-text">匿名派送</label>
</checkbox-group>
        </div>
      </tui-list-cell>
      <!-- </block> -->
    </div>
    <!-- 备注 -->
    <div class="module-com remark-wrap">
      <tui-list-cell class="line-cell" :hover="false">
        <div class="tui-title">其它备注</div>
        <input
          v-model="form.remark"
          placeholder-class="phcolor"
          placeholder-style="color:#ccc"
          class="tui-input"
          name="remark"
          placeholder="请填写备注信息（选填）"
        />
      </tui-list-cell>
    </div>
    <!-- 省市联动 -->
    <simple-address
      ref="simpleAddress"
      :region="orderShop.region"
      :pickerValueDefault="cityPickerValueDefault"
      @onConfirm="onCityConfirm"
    ></simple-address>
    <!-- 选择地区 -->
    <app-area-sel
      :isFocus="false"
      :show.sync="showRegion" 
      :city="form.city" 
      @change="changeAreaFn" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TuiListCell from "@/components/plugin/list-cell";
import AppDatePicker from "@/components/app-date-picker";
import SimpleAddress from "@/components/plugin/simple-address";
import { getUser, wxLoginFn } from "@/utils/auth";
import AppAreaSel from "@/components/app-area-sel";
import { getWxPhone } from "@/api/mini";
export default {
  name: "app-delivery-module",
  components: {
    AppAreaSel,
    TuiListCell,
    AppDatePicker,
    SimpleAddress
  },
  props: {
    anonymity: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      region: [],
      showRegion: false,
      showCardInfo:true,
      form: {
        receiveUserName: "", // 收花人姓名；到店自提的姓名
        receiveMobile: "", // 收花人手机；到店自提的电话；
        receiveProvince: "", // 收花人省份
        receiveCity: "", // 收花人城市
        receiveAddress: "", // 收花人城市
        receiveFloor: "", // 收花人门楼号和牌号
        showAddress: "", // 收花人完整地址，从腾讯地图接口获取
        bookMobile: "", // 订花人手机号
        reachDate: 0, // 配送时间
        reachPeriod: "0", // 配送时段，0上午1下午2晚上
        needCard: "1", // 是否要贺卡 0不要 1要
        cardInfo: "", // 贺卡信息
        remark: "" // 备注
      },
      region: {
        latitude: 0,
        longitude: 0
      },
      // 省市联动
      cityPickerValueDefault: [0, 0]
    };
  },
  computed: {
    ...mapGetters({ orderShop: "getOrderShop" }),
    ...mapGetters({ shopUser: "getShopUser" })
  },
  watch: {
    orderShop(val) {
      console.log("val", val);
      this.form.receiveProvince = val.shop.province ? val.shop.province : "";
      this.form.receiveCity = val.shop.city ? val.shop.city : "";
    }
  },
  mounted() {
    if (!this.$util.isEmpty(this.orderShop)) {
      this.form.receiveProvince = this.orderShop.shop.province
        ? this.orderShop.shop.province
        : "";
      this.form.receiveCity = this.orderShop.shop.city
        ? this.orderShop.shop.city
        : "";
    }
    this.form.anonymity = "0"
    //自动填写已有手机号
    this.$set(this.form, "bookMobile", this.shopUser.mobile);
  },
  methods: {
    selTimeFn(e) {
      this.form.reachDate = e.detail.value;
    },
    // 选择地址
    selRegionFn() {
      if (!this.form.receiveCity) {
        this.$msg("请先选择地址！");
        return false;
      }
      this.showRegion = true;
    },
    changeAreaFn(e) {
      console.log("changeAreaFn", e);
      this.form.receiveAddress = e.title;
      this.form.showAddress = e.address;
      this.region.latitude = e.location.lat;
      this.region.longitude = e.location.lng;
      this.$emit("changeAddress", e);
    },
    timeTodaySelFn(index) {
      this.form.reachPeriod = index;
    },
    needCardChange(e) {
      this.form.needCard = e.target.value;
      this.showCardInfo = e.target.value == 0 ? false : true;
      this.form.cardInfo = '';
    },
    anonymityChange(e) {
      this.form.anonymity = e.detail.value == 1 ? 1 : 0;
    },
    // 省市联动
    openAddres() {
      //城市暂时不可修改 shish 2020.5.11
      return false;
      this.$refs.simpleAddress.open();
    },
    onCityConfirm(e) {
      this.form.receiveAddress = e.label;
      this.form.receiveProvince = e.provinceName;
      this.form.receiveCity = e.cityName;
    },
    // 获取微信手机号
    getWxMobile(e) {
      console.log(e);
      if (e.detail.errMsg === "getPhoneNumber:ok") {
        getWxPhone({
          iv: e.detail.iv,
          encryptedData: e.detail.encryptedData
        }).then(res => {
          console.log("用户信息", res);
          uni.showToast({
            icon: "success"
          });
          this.form.bookMobile = res.data.mobile;
        });
      } else {
        this.$msg("获取信息失败！");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app-delivery-module {
  .module-com {
    margin-bottom: 20px;
    background-color: #fff;
    .module-tit {
      padding: 20px 18px;
      font-size: 28px;
      font-weight: 600;
      border-bottom: 1px solid $borderColor;
    }
    .module-det {
      padding: 0 30px;
    }
  }
  // 公共
  .line-cell {
    .tui-title {
      width: 210px;
      color: $fontColor2;
    }
    .tui-input {
      width: calc(100% - 210px);
      font-size: 28px;
    }
    .tui-placeholder {
      color: #ccc;
    }
    .phcolor {
      color: green;
    }
  }
  // 今天时间选择
  .delivery-time {
    @include disFlex(center, center);
    background-color: #fff;
    padding: 20px 0;
    // border-top: 1px solid $borderColor;
    .button-com {
      padding-top: 14px;
      padding-bottom: 10px;
      margin: 0 10px;
    }
  }
  // 贺卡
  .gift-wrap {
    .gift-content {
      width: 100%;
    }
    .need-gift {
      margin-left: 14px;
      color: $fontColor2;
    }
    .gitf-textarea {
      margin-top: 40px;
    }
  }

  // 匿名派送
  .none-name-delivery {
    // padding-left: 30px;
    // padding: 26px 30px;
    // margin-top: 40px;
    margin-bottom: 20px;
    background-color: #fff;
    .none-name-text {
      margin-left: 14px;
      color: $fontColor2;
    }
  }
}
</style>