<template>
  <LayoutApp class="order-deliver-page" title="发货" :show-back="true">
    <div class="main-content">
      <div class="identify-center-address">
        <div class="left-icon">
          <i class="iconfont iconaddress"></i>
        </div>
        <div class="address-info">
          <div class="consignee">
            <span>{{stateCenterAddress.address_name}}</span>
            <span class="tag">有货鉴定中心</span>
          </div>
          <p class="location">{{stateCenterAddress.address}}</p>
          <p>{{stateCenterAddress.mobile}}</p>
        </div>
      </div>
      <div class="deliver-express">
        <div class="left-icon">
          <div class="express-logo"></div>
        </div>
        <div class="express-info">
          <div class="express-name">顺丰快运</div>
          <CubeInput class="express-input" v-model="expressCode" placeholder="请填写顺丰运单号"></CubeInput>
          <span v-if="canScan" class="iconfont iconscan scan-btn" @click="scanCode"></span>
        </div>
      </div>
      <div v-if="stateCenterAddress.deliverDesc" class="deliver-tip">
        <span class="iconfont iconwarn"></span>
        <p>{{stateCenterAddress.deliverDesc}}</p>
      </div>
      <div class="submit-warp">
        <div class="contract-check">
          <i class="iconfont" :class="readContract ? 'iconcheck_full checked' : 'iconcheck_default'" @click="changeReadContract"></i>
          <span>我已阅读并同意</span>
          <a href="//activity.yoho.cn/feature/4049.html?share_id=6729&title=UFO卖家商品质检标准">《UFO卖家商品质检标准》</a>
        </div>
        <p v-if="stateCenterAddress.warnTips" class="warn-tip">{{stateCenterAddress.warnTips}}</p>
        <CubeButton class="deliver-btn" :disabled="deliverDisable" @click="submitDeliver">发货</CubeButton>
      </div>
    </div>
  </LayoutApp>
</template>

<script>
import { get } from 'lodash';
import { Button, Input } from 'cube-ui';
import { createNamespacedHelpers } from 'vuex';

const { mapState, mapActions } = createNamespacedHelpers('order/orderDeliver');

export default {
  name: 'OrderDeliver',
  data() {
    return {
      canScan: false,
      centerAddress: {},
      expressCode: '',
      readContract: false
    };
  },
  created() {
    let { skup, code } = this.$route.params || {};

    this.orderCode = code;
    if (process.env.VUE_ENV !== 'server') {
      this.fetchAppraiseAddress({
        skup,
        orderCode: code
      });
    }
  },
  computed: {
    ...mapState(['appraiseAddress']),
    stateCenterAddress() {
      if (!this.centerAddress.address) {
        this.centerAddress = get(this.appraiseAddress, this.orderCode) || {};
      }

      return this.centerAddress;
    },
    deliverDisable() {
      return !(this.expressCode && this.readContract);
    }
  },
  mounted() {
    if (this.$yoho.isAliApp) {
      this.canScan = true;
    }

    this.fetchAppraiseAddressChangeNotice({orderCode: this.orderCode}).then(res => {
      let isChanged = get(res, 'data.isChanged');
      let isForceShow = get(res, 'data.isForceShow');

      if (!isChanged && !isForceShow) {
        return;
      }

      let { title = '', tips, alert_address_name, alert_address, alert_mobile } = res.data || {};
      let info = [
        alert_address_name || '',
        alert_address || '',
        alert_mobile || ''
      ];

      if (isChanged && tips) {
        info.unshift(tips);
      }

      this.$createDialog({
        type: 'alert',
        confirmBtn: {
          text: '我知道了'
        },
        onConfirm() {
          // Todo report()
          console.log('Todo Report', res.data);
        }
      }, (createElement) => {
        return [
          createElement('div', {
            class: {
              'dg-notice-content': true
            },
            slot: 'content'
          }, [
            createElement('div', {
              class: {
                'dg-notice-content-title': true
              }
            }, isChanged ? 'UFO仓库调整公告' : title),
            ...info.map(val => {
              return createElement('p', {
                class: {
                  'dg-notice-content-info': true
                },
              }, val);
            })
          ])
        ];
      }).show();
    });
  },
  methods: {
    ...mapActions(['fetchAppraiseAddress', 'fetchAppraiseAddressChangeNotice', 'deliverOrderToDepot']),
    toast(msg, time = 1500) {
      this.$createToast && this.$createToast({
        txt: msg,
        type: 'txt',
        time
      }).show();
    },
    scanCode() {
      if (window && window.WindVane) {
        window.WindVane.call('Scancode', 'scan', {}, e => {
          if (e && e.code) {
            this.expressCode = e.code;
          }
        });
      }
    },
    changeReadContract() {
      this.readContract = !this.readContract;
    },
    submitDeliver() {
      if (/^[a-zA-Z0-9]+$/.test(this.expressCode)) {
        if (this.loading) {
          return;
        }

        this.loading = true;

        setTimeout(() => {
          this.loading = false;
        }, 2000);

        this.deliverOrderToDepot({
          orderCode: this.orderCode,
          wayBillCode: this.expressCode,
          depotNum: this.stateCenterAddress.id
        }).then(res => {
          if (res.code === 200) {
            this.$router.go(-1);
            // Todo report()
          } else {
            this.toast(res.message || '网络异常，请稍后重试');
          }
        });
      } else {
        this.toast('请输入正确的快递单号');
      }
    }
  },
  components: {
    CubeButton: Button,
    CubeInput: Input
  }
};
</script>

<style lang="scss">
.dg-notice-content {
  padding: 10px 44px 40px;
  font-size: 28px;
  line-height: 42px;
  color: #444;
  margin-bottom: -32px;
  border-bottom: 1px solid #f5f5f5;

  .dg-notice-content-title {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 20px;
    color: #000;
  }
}

</style>

<style lang="scss" scoped>
.order-deliver-page {
  .main-content {
    padding: 20px 40px 0;
  }

  .left-icon {
    width: 88px;
    flex-shrink: 0;
  }

  .identify-center-address {
    padding: 40px 0;
    display: flex;
    align-items: center;
    font-size: 28px;
    border-bottom: 1px solid #eee;

    .iconfont {
      font-size: 48px;
    }

    .consignee {
      font-size: 32px;
      display: flex;
      align-items: center;

      > * {
        line-height: 44px;
        font-weight: 800;
        display: inline-block;
        vertical-align: top;
      }

      .tag {
        font-size: 24px;
        height: 48px;
        line-height: 48px;
        font-weight: 300;
        padding: 0 14px;
        margin-left: 6px;
        color: #002B47;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-sizing: border-box;
        transform: scale(0.8);
      }
    }

    .location {
      font-size: 24px;
      line-height: 1.4;
      color: #999;
      margin: 6px 0 12px;
    }
  }

  .deliver-express {
    display: flex;
    padding: 36px 0;
    border-bottom: 1px solid #eee;
    align-items: center;

    .express-logo {
      width: 48px;
      height: 48px;
      background: url("~statics/image/order/sf-logo.png");
      background-size: 100% 100%;
    }

    .express-info {
      font-size: 32px;
      line-height: 44px;
      display: flex;
      align-items: center;
      flex-grow: 1;
    }

    .express-name {
      white-space: nowrap;
      flex-shrink: 0;
    }

    .express-input {
      flex-grow: 1;
      margin-left: 20px;

      &:after {
        border: 0;
      }

      /deep/ .cube-input-field {
        text-align: right;
        padding: 0;
      }
    }

    .scan-btn {
      font-size: 40px;
      color: #444;
      font-weight: 500;
      margin-left: 10px;

    }
  }

  .deliver-tip {
    color: #ccc;
    display: flex;
    align-items: flex-start;
    padding-top: 16px;

    .iconfont {
      font-size: 32px;
      margin-right: 10px;
      margin-top: -6px;
    }

    p {
      font-size: 24px;
      line-height: 1.4;
      font-weight: 300;
      color: #bbb;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }

  .submit-warp {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 38px 40px;
    background-color: #fff;
  }

  .contract-check {
    font-size: 24px;
    line-height: 40px;
    color: #999;
    display: flex;
    align-items: center;

    .iconfont {
      margin-right: 16px;
      font-size: 30px;
      position: relative;

      &:after {
        content: "";
        width: 200%;
        height: 150%;
        position: absolute;
        top: -25%;
        left: -50%;
      }
    }

    .checked {
      color: #022c46;
    }

    a {
      color: #65ab85;
      margin-left: 20px;
      text-decoration: underline;
    }
  }

  .warn-tip {
    font-size: 24px;
    line-height: 1.3;
    color: red;
    padding: 6px 0;
    letter-spacing: 0;
  }

  .deliver-btn {
    height: 88px;
    padding: 0;
    border-radius: 44px;
    background: #022b47;
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:after {
      display: none;
    }

    &.cube-btn_disabled {
      background: #ccc;
    }
  }
}
</style>