<template>
  <LayoutApp :title="title" :show-back="true">
    <div class="pane-body" ref="paneBody">
      <FormItem>
        <CInput
          label="收货人"
          place-holder="请写姓名"
          v-model="consignee"
          :textValue="consignee"
          type="text"
        ></CInput>
      </FormItem>
      <FormItem>
        <CInput
          label="手机号"
          place-holder="请填写手机号"
          v-model="mobile"
          :textValue="mobile"
        ></CInput>
      </FormItem>

      <template>
        <FormItem>
          <div class="wrapper-area">
            <label class="input-label">所在区域</label>
            <div class="wrapper-arrow" @click="chooseArea">
              <template v-if="area">
                <label class="text-label">{{ area }}</label>
              </template>
              <template v-else>
                <label class="choose-area">请选择</label>
              </template>
              <div class="arrow"></div>
            </div>
          </div>
        </FormItem>
      </template>

      <FormItem>
        <CInput
          label="详细地址"
          place-holder="请输入详细地址"
          v-model="address"
          :textValue="address"
        ></CInput>
      </FormItem>
      <!--  订单修改地址隐藏 -->
      <div v-if="!orderCode" class="wrapper-tag">
        <p v-if="addressTags.length" class="tag-text">设置标签：</p>
        <div class="radio-container">
          <RadioGroup class="wrapper-radio">
          <div class="radio-scroll" v-for="(tag, index) in addressTags" :key="index">
            <Radio
              class="tag-radio"
              :label="{ text: `${tag.name}`, value: `${tag.code}` }"
              v-model="tag_code"
              :checked="tag.code === tag_code"
            ></Radio>
          </div>
          </RadioGroup>
        </div>
      </div>
        <!--  订单修改地址隐藏 -->
        <div v-if="!orderCode" class="wrapper-del">
          <Radio
            class="radio"
            :label="{ text: '设为默认地址', value: true }"
            style="flex: 0 1 100%;"
            checked="is_default"
            v-model="is_default"
          ></Radio>
        </div>
      </div>
      <div class="white-space"></div>
    <div :class="submitClass" @touchend="onSubmit">确 认</div>

    <AddressAct
      class="address-act"
      ref="addressAct"
      v-show="isShowProvince"
      @popHidden="popHidden"
      @modifyAddressAct="modifyAddressAct"
    ></AddressAct>
  </LayoutApp>
</template>

<script>
import Layout from '../../../components/layout/layout-app';
import Input from './components/input';
import FormItem from './components/form-item';
import Radio from './components/radio';
import AddressAct from './components/address-act';
import RadioGroup from './components/radio-group';
import { Scroll } from 'cube-ui';

import { createNamespacedHelpers } from 'vuex';

const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  'address/address'
);

export default {
  name: 'addressEdit',
  components: {
    LayoutApp: Layout,
    CInput: Input,
    FormItem,
    Radio,
    AddressAct,
    RadioGroup,
    Scroll
  },
  data() {
    return {
      isShowProvince: false,
      isUpdate: false,
      updateMobileNum: '',
      isMobileNumEdit: false,
      title: '',
      orderCode: '',

      consignee: '',
      address_id: '',
      mobile: '',
      area_code: '',
      area: '',
      address: '',
      tag_code: '',
      is_default: false
    };
  },
  watch: {
    mobile: function(val) {
      if (val === this.updateMobileNum) {
        this.isMobileNumEdit = false;
      } else {
        this.isMobileNumEdit = true;
      }
    }
  },
  computed: {
    ...mapState(['addressTags', 'updateAddressInfo']),
    submitClass() {
      return [
        'sure-btn',
        {
          active: this.inNotEmpty
        }
      ];
    },
    inNotEmpty() {
      return (
        this.consignee &&
        this.mobile &&
        this.area &&
        this.address
      );
    }
  },
  methods: {
    ...mapMutations({}),
    ...mapActions([
      'fetchAddressTags',
      'addUserAddress',
      'updateUserAddress',
      'deleteUserAddress',
      'updateReceiptAddressInOrder'
    ]),

    async onSubmit() {
      let data = this.validator();
      // 订单编辑地址
      const orderCode = this.orderCode;

      if (!data) {
        return;
      }

      let result = {};

      if (this.isUpdate) {
        //更新和添加地址接口不同
        if (orderCode) {
          result = await this.updateReceiptAddressInOrder({
            ...data,
            orderCode
          });
        } else {
          result = await this.updateUserAddress(data);
        }
      } else {
        result = await this.addUserAddress(data);
      }

      if (result && result.code === 200) {
        this.$createToast({
          type: 'txt',
          txt: result.message.split('.').join('')
        }).show();

        await this.sleep(1000);
        this.$router.go(-1);
      } else {
        this.$createToast({
          type: 'error',
          txt: result.message,
          mask: true
        }).show();
      }
    },
    validator() {
      let username = this.consignee.replace(/(^\s+)|(\s+$)/g, '');

      // 简单的表单校验
      if (!username) {
        this.showToast('收件人不能为空');
        return false;
      }

      if (!/^[\u4E00-\u9FA5A-Za-z0-9*]+$/gi.test(username)) {
        this.showToast('收货人姓名不支持特殊符号');
        return false;
      }

      let reg;
      if (this.isUpdate && !this.isMobileNumEdit) {
        reg = /^[0123456789*]{11}$/;
      } else {
        reg = /^[0123456789]{11}$/;
      }

      if (!this.mobile) {
        this.showToast('手机号不能为空');
        return false;
      } else {
        if (!reg.test(this.mobile)) {
          this.showToast('请输入正确11位手机号码');
          return;
        }
      }

      if (!this.area_code || !this.area) {
        this.showToast('省市区不能为空');
        return false;
      }
      if (!this.address) {
        this.showToast('地址不能为空');
        return false;
      }

      return {
        id: this.address_id || '',
        consignee: username,
        mobile: this.mobile,
        area_code: this.area_code,
        area: this.area,
        address: this.address,
        is_default: this.is_default ? 'Y' : 'N',
        tag_code: this.tag_code
      };
    },
    async delAddress() {
      const result = await this.deleteUserAddress(this.address_id);
      if (result && result.code === 200) {
        this.$createToast({
          type: 'txt',
          txt: result.message.split('.').join('')
        }).show();

        await this.sleep(1000);
        this.$router.go(-1);
      } else {
        this.$createToast({
          type: 'error',
          txt: result.message,
          mask: true
        }).show();
      }
    },
    chooseArea() {
      this.isShowProvince = true;

      this.$refs.paneBody.style.overflow = 'hidden';

      this.$refs.addressAct.parentHandleclick({
        areaCode: this.area_code
      });
    },
    popHidden() {
      let that = this;
      this.$refs.paneBody.style.overflow = 'auto';
      that.isShowProvince = false;
    },
    modifyAddressAct(info) {
      if (info) {
        let that = this;
        that.area_code = info.code;
        that.area = info.area;
      }
    },
    showToast(tip) {
      this.$createToast({
        type: 'txt',
        txt: tip
      }).show();
    },
    sleep(n) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve();
        }, n);
      });
    }
  },

  activated() {
    let addressInfo = this.updateAddressInfo;

    this.isUpdate = addressInfo.isUpdate;
    this.orderCode = addressInfo.orderCode;
    this.title = addressInfo.isUpdate ? '编辑地址' : '添加地址';

    // 订单编辑 不查标签
    if (!this.orderCode) {
      this.fetchAddressTags();
    }

    if (addressInfo.isUpdate) {
      this.updateMobileNum = addressInfo.mobile;
      this.consignee = addressInfo.consignee;
      this.address_id = addressInfo.address_id;
      this.mobile = addressInfo.mobile;
      this.area_code = addressInfo.area_code || addressInfo.areaCode;
      this.area = addressInfo.area;
      this.address = addressInfo.address;
      this.tag_code = addressInfo.tag_code || '';
      this.is_default = addressInfo.is_default === 'Y' ? true : false;
    } else {
      // 重置data数据
      Object.assign(this.$data, this.$options.data());
    }
  }
};
</script>

<style lang="scss" scoped>

.pane-body {
  height: 100%;
  overflow-y: auto;
  padding-top: 12px;
  padding-left: 40px;
  padding-right: 40px;
}

.wrapper-del {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 80px;

  .del-address {
    width: 150px;
    text-align: center;
    line-height: 80px;
    color: #cd001a;
    font-size: 26px;
  }
}

.wrapper-area {
  display: flex;
  flex-direction: column;

  .input-label {
    font-size: 36px;
    display: inline-block;
    font-weight: bold;
    margin-bottom: 30px;
  }

  .text-label {
    font-size: 28px;
    width: 100%;
    color: #444444;
    display: inline-block;
  }

  .choose-area {
    font-size: 28px;
    width: 100%;
    color: #cccccc;
  }

  .wrapper-arrow {
    display: flex;
    justify-content: space-between;
  }

  .arrow {
    height: 44px;
    width: 44px;
    background: url("~statics/image/address/arrow-right.png");
    background-size: cover;
  }
}

.white-space {
  position: relative;
  display: block;
  overflow: hidden;
  height: 120px;
}

.wrapper-tag {
  margin: 30px 0;

  .tag-text {
    font-size: 36px;
    display: inline-block;
    font-weight: bold;
  }
}

.radio-container {
  width: 100%;
  margin-top: 30px;
  overflow-y: hidden;
  overflow-x: scroll;
}

.wrapper-radio {
    display: inline-block;
    white-space: nowrap;

    .radio-scroll {
      display: inline-block;
      overflow-y: hidden;
      overflow-x: scroll;
      flex-shrink: 0;

      .tag-radio {
        margin-right: 30px;
        height: 100%;
      }
    }
}

.radio {
  margin: 30px 0;
}

.sure-btn {
  height: 80px;
  line-height: 80px;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  background-color: #cccccc;
  color: white;
  border-radius: 40px;
  position: fixed;
  left: 32px;
  right: 32px;
  bottom: 24px;

  &.active {
    background-color: #002b47;
  }
}
</style>