<template>
  <div class="order-manage-wrapper" v-if="sendGoodsDialog">
      <el-dialog
          :title="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>
        <div v-if="dialogTitle == '发货设置'">
          <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>
        </div>
        <div v-if="dialogTitle == '配送设置'">
          <p class="form-title">填写配送员信息</p>
          <el-form ref="sendSetForm" :model="sendSetForm" :rules="rules" label-width="75px" label-suffix=":">
            <el-form-item label="姓名" prop="sendName">
              <el-input type="text" v-model="sendSetForm.sendName" placeholder="请输入配送员姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="sendPhone">
              <el-input type="text" maxlength="11" v-model="sendSetForm.sendPhone" placeholder="请输入配送员手机号"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea"
                        v-model="sendSetForm.sendContent"
                        rows="5"
                        placeholder="请输入备注内容"
                        style="width: 100%;"></el-input>
              <span class="word-num" style="float: right">{{(sendSetForm.sendContent).replace(/\s+/g,"").length}}/400</span>
            </el-form-item>
          </el-form>
        </div>
        <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";
  import { checkMobile } from '@/utils/patients/checkValid'

  export default {
    components: {
      ChangeInfo
    },
    props: {
      sendGoodsDialog: {
        type: Boolean,
        default: false,
      },
      dialogTitle: {
        type: String,
        default: ''
      },
      sendSetFormData: {
        type: Object,
        required: true,
        default: () => {}
      },
    },
    data(){
      return{
        sendSetForm: {
          name: '',
          orderNum: '',
          content: '',
          sendName: '',
          sendPhone: '',
          sendContent: '',
        },
        showContent: 0,
        showChangeInfo: false,
        rules: {
          name: [
            { required: true, message: '请输入快递公司', trigger: "blur"},
          ],
          orderNum: [
            { required: true, message: '请输入快递单号', trigger: "blur"},
          ],
          sendName: [
            { required: true, message: '请输入配送员姓名', trigger: "blur"},
          ],
          sendPhone: [
            { required: true, message: '请输入配送员手机号', trigger: "blur"},
            {validator: checkMobile, trigger: ['change','blur']}
          ],
        },
      }
    },
    created() {

    },
    mounted() {

    },
    watch: {},
    methods: {
      //发货
      cancelSendSet() {
        this.$emit('closeSendSet',{type: 1})
      },
      submitSendSet() {
        this.$refs.sendSetForm.validate((valid) => {
            if (valid) {
              // this.submit();
              this.$message.success('操作成功')
              this.$emit('closeSendSet',{type: 2})
            } else {
              console.log('error submit!!');
              return false;
            }
        })

      },
      //修改买家收货信息
      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>
