<!--
 * @Description: 发货 弹框
 * @Author: dijia
 * @Date: 2021/7/27
-->
<template>
  <div>
    <!-- 新增的dialog -->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="600px"
      custom-class="shop_mall_dialog"
    >
      <el-form
        ref="formDataRef"
        :rules="rules"
        :model="formData"
        :inline-message="true"
        style="padding-bottom: 10px"
      >
        <table class="advert_table">
          <tr>
            <td>
              <el-form-item label="快递公司" prop="trackingDepartName" />
            </td>
            <td>
              <el-input v-model.trim="formData.trackingDepartName" placeholder="请输入快递公司" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="快递单号" prop="trackingNumber" />
            </td>
            <td>
              <el-input v-model.trim="formData.trackingNumber" placeholder="请输入快递单号" maxlength="15" show-word-limit />
            </td>
          </tr>
        </table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="purple" style="margin-right:50px" @click="saveAdvert()">确定</el-button>
        <el-button @click="cancelSave">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// api
import {
  orderShipping
} from '@/api/shoppingmall/order'
/* 常用方法 */
import { characters1_auto } from '@/assets/js/validate'
export default {
  name: 'SendOrderDialog',
  components: {
  },
  props: {
  },
  data() {
    return {
      dialogTitle: '发货信息',
      dialogVisible: false,
      // 表单对象
      formData: {},
      // 检验规则
      rules: {
        trackingDepartName: [
          { required: true, validator: characters1_auto, trigger: 'blur' }
        ],
        trackingNumber: [
          { required: true, validator: this.En_NumTest, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  watch: {
    // 判断dialog关闭，resetField
    'dialogVisible'(val) {
      if (!val) { // 关闭dialog
        this.resetDialog()
      }
    }
  },
  methods: {
    // 打开弹框时
    open(dialogData) {
      this.dialogVisible = dialogData.visible
      this.formData = {
        trackingDepartName: '', // 快递公司
        trackingNumber: '', // 快递单号
        id: dialogData.id // 订单id
      }
    },
    // 重置dialog
    resetDialog() {
      this.$refs.formDataRef.resetFields()
      this.$refs.formDataRef.clearValidate()
    },
    // 新增/编辑
    saveAdvert() {
      this.$refs.formDataRef.validate(valid => {
        if (!valid) return
        orderShipping(this.formData).then(res => {
          if (res.header.ret === '0') {
            this.$emit('repload')
            this.$message.success('填写发货信息成功！')
            // 关闭dialog
            this.dialogVisible = false
          }
        })
      })
    },
    // 取消
    cancelSave() {
      this.dialogVisible = false
    },
    En_NumTest(rule, value, callback) {
      const regName = /^[a-zA-Z0-9]*$/
      if (value === '') {
        callback(new Error('不能为空'))
      } else if (!regName.test(value)) {
        callback(new Error('请输入英文字母和数字'))
      } else {
        callback()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.advert_table {
  width: 100%;

  td {
    border: 1px solid #E0E0E0;
    line-height: 20px;
    padding: 6px;

    .el-form-item--small.el-form-item {
      margin: 0;
    }

    .el-input {
      width: 90%;
    }
  }

  >tr td:nth-child(odd) {
    background-color: #F5F7F9;
    width: 20%;
  }

  >tr td:nth-child(even) {
    width: 30%;
  }
}
</style>
