<template>
  <el-dialog :title="title" :visible.sync="isVisible" width="600px" class="send-main">
    <div class="invoice-item" v-if="oneRow.orderEInvoice && title=='发票发货'">
      <div class="flex-aic-jcb">
        <div class="invoice-item-text"><label>{{ oneRow.orderEInvoice.titleType == 1 ? "公司名称" : "个人名称" }}：{{ oneRow.orderEInvoice.titleName }}</label> </div>
        <div
          style="
          color: #0a84ff;
          font-size: 12px;
          background: #d9eafa;
          border-radius: 2px;
          padding: 2px 5px;
        ">
          {{ oneRow.orderEInvoice.type == 1 ? "普通发票" : "增值税专用发票" }}-{{
          oneRow.orderEInvoice.titleType == 1 ? "企业" : "个人" }}
        </div>
      </div>
      <div class="invoice-item-text" v-if="oneRow.orderEInvoice.titleType == 1 && oneRow.orderEInvoice.type == 2" ><label>地址：{{ oneRow.orderEInvoice.province }}{{ oneRow.orderEInvoice.city }}{{ oneRow.orderEInvoice.town}}{{ oneRow.orderEInvoice.address }}</label> </div>
      <div class="invoice-item-text" v-if="oneRow.orderEInvoice.titleType == 1 && oneRow.orderEInvoice.type == 2"> <label>电话：{{ oneRow.orderEInvoice.phone }}</label> </div>
      <div class="invoice-item-text" v-if="oneRow.orderEInvoice.titleType == 1 && oneRow.orderEInvoice.type == 2"> <label>开户行：{{ oneRow.orderEInvoice.openBank }}</label></div>
      <div class="invoice-item-text" v-if="oneRow.orderEInvoice.titleType == 1 && oneRow.orderEInvoice.type == 2"><label>账号：{{ oneRow.orderEInvoice.account }}</label></div>
      <div class="flex-aic-jcb">
        <span class="invoice-item-text" v-if="oneRow.orderEInvoice.titleType == 1"><label>税号：{{ oneRow.orderEInvoice.taxCode }}</label></span>
      </div>
    </div>
    <div class="send-info">
      <div class="flex-aic-jcb">
        <label>联系人：{{oneRow.receiveName}}</label>
        <label style="border:1px solid #409EFF;color: #409EFF;font-size: 12px;padding: 2px 6px;border-radius:4px;">个人信息</label>
      </div>
      <div style="margin: 10px 0;"><label>手机号：{{oneRow.receivePhone}}</label></div>
      <div><label>地址：{{oneRow.receiveAddress}}</label></div>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-form-item label="快递公司" prop="trackingImg">
          <el-input style="width:300px" v-model="form.trackingImg" placeholder="请输入快递公司" :maxlength="40"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="快递单号" prop="trackingNumber">
          <el-input style="width:300px" v-model="form.trackingNumber" placeholder="请输入快递单号" :maxlength="40"></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" v-if="!isClick" @click="okSend('form')">发 货</el-button>
      <el-button type="primary" v-else style="opacity: 0.6;" disabled>发 货</el-button>
    </div>
  </el-dialog>
</template>
<script type="javascript">
  import {sendGoods, invoiceSend} from 'api/website/order/index'
  export default {
    props: ['oneRow', 'title'],
    name: 'send',
    data() {
      return {
        isClick: false, // 是否点击了发货
        rules: {
          trackingImg: { required:  true, message: '请输入快递公司', trigger: 'blur' },
          trackingNumber: {required:  true, message: '请输入快递单号', trigger: 'blur'}
        },
        form: {
          orderId: this.oneRow.orderId,
          trackingNumber: undefined, // 快递单号
          trackingImg: undefined // 快递公司
        },
        isVisible: false,
      }
    },
    watch: {
      isVisible(newValue, oldValue) {
        if (!newValue) {
          this.$emit('sendEvent', false)
        }
      }
    },
    mounted() {
      this.isVisible = true
    },
    methods: {
      /**
       * 弹框-取消
       * */
      cancel() {
        this.$emit('sendEvent', false)
      },
      /**
       * 发货
       */
      okSend(formName) {
        let _this = this
        if(this.isClick){
          return
        }
        this.isClick = true
        setTimeout(function(){
          _this.isClick = false
        }, 2000)
        const set = this.$refs;
        set[formName].validate((valid) => {
          if (valid) {
            if(this.title == '发票发货'){
              invoiceSend(this.form).then((response) => {
                if(response.status == 200){
                  this.$notify({
                    title: "成功",
                    message: "操作成功",
                    type: "success",
                    duration: 2000
                  });
                  this.$emit('sendEvent', true)
                } else {
                  this.$notify({
                    title: '失败',
                    message: response.message,
                    type: 'error',
                    duration: 2000
                  })
                }
              });
            } else {
              // 订单发货
              sendGoods(this.form).then((response) => {
                if(response.status == 200){
                  this.$notify({
                    title: "成功",
                    message: "操作成功",
                    type: "success",
                    duration: 2000
                  });
                  this.$emit('sendEvent', true)
                } else {
                  this.$notify({
                    title: '失败',
                    message: response.message,
                    type: 'error',
                    duration: 2000
                  })
                }
              });
            }
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .send-main{
    .send-info{
      border: 1px solid #eee;
      padding: 20px;
      margin-bottom: 20px;
      margin-top: 20px;
    }
    .invoice-item{
      padding: 20px;
      border: 1px solid #eee;
      .invoice-item-text{
        margin-top: 10px;
      }
    }
  }
</style>
