<template>
  <div class="order-manage-wrapper">
      <el-dialog
          :title="sendSetFormData.dialogTitle"
          :visible="sendGoodsDialog"
          @close="cancelSendSet"
          width="600px"
          center
          class="send-set-body">
        <div class="address-content">
          <div class="address-title">
            <span class="title">买家收货信息</span>
            <el-button type="text" size="small" @click="changeInfo">修改</el-button>
          </div>
          <div class="address-info">
            <p>上海市浦东新区花木路世纪大厦22楼</p>
            <p>张三 15829738940</p>
          </div>
        </div>
        <p class="form-title">填写物流信息</p>
        <el-form ref="sendSetForm" :model="sendSetForm" :rules="rules" label-width="75px" label-suffix=":">
          <el-form-item label="快递公司" prop="name">
            <el-input type="text" v-model="sendSetForm.name" placeholder="请输入快递公司"></el-input>
          </el-form-item>
          <el-form-item label="快递单号" prop="orderNum">
            <el-input type="text" v-model="sendSetForm.orderNum" placeholder="请输入快递单号"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea"
                      v-model="sendSetForm.content"
                      rows="5"
                      placeholder="请输入备注内容"
                      style="width: 100%;"></el-input>
            <span class="word-num" style="float: right">{{(sendSetForm.content).replace(/\s+/g,"").length}}/400</span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <!--<el-button size="small" @click="cancelSendSet">取 消</el-button>-->
        <el-button size="small" type="primary" @click="submitSendSet">完成</el-button>
      </span>
      </el-dialog>
      <change-info v-if="showChangeInfo" @closeChangeInfo="closeChangeInfo"></change-info>
    </div>
</template>
<script>
  // import { openLoading, closeLoading } from "../../utils/utils";
  import ChangeInfo from "./change-info";

  export default {
    components: {
      ChangeInfo
    },
    props: {
      sendSetFormData: {
        type: Object,
        required: true,
        default: () => {}
      },
    },
    data(){
      return{
        sendGoodsDialog: true,
        sendSetForm: {
          name: '',
          orderNum: '',
          content: '',
        },
        showChangeInfo: false,
        rules: {
          name: [
            { required: true, message: '请输入快递公司', trigger: "blur"},
          ],
          orderNum: [
            { required: true, message: '请输入快递单号', trigger: "blur"},
          ],
        },
      }
    },
    created() {

    },
    methods: {
      //发货
      cancelSendSet() {
        this.$emit('closeSendSet',{type: 1})
      },
      submitSendSet() {
        this.$emit('closeSendSet',{type: 2})
      },
      //修改买家收货信息
      changeInfo() {
        this.showChangeInfo = true;
      },
      closeChangeInfo(val) {
        this.showChangeInfo = false;
      },
    },
  }
</script>
<style lang="scss">
  .send-set-body{
    .address-content{
      width: 100%;
      background-color: #F0F2F5;
      border: 1px solid #E4E7ED;
      border-radius: 4px;
      padding: 10px 15px;
      .address-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
          font-size: 13px;
          color: #999999;
        }
      }
      .address-info{
        p{
          line-height: 26px;
        }
      }
    }
    .form-title{
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .el-dialog__body{
      padding-bottom: 0;
    }
  }
</style>
