<template>
  <div class="order-manage-wrapper" v-if="sendGoodsDialog">
      <el-dialog
          :title="dialogTitle"
          :visible="sendGoodsDialogIn"
          @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>{{receiveInfo.receiverAddr}}</p>-->
            <p>{{receiveInfo.provinceName}}{{receiveInfo.cityName}}{{receiveInfo.countyName}}{{receiveInfo.townName}}{{receiveInfo.address}}</p>
            <p>{{receiveInfo.receiver}} {{receiveInfo.receiverMobile}}</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="expressName">
              <el-input type="text" v-model="sendSetForm.expressName" placeholder="请输入快递公司"></el-input>
            </el-form-item>
            <el-form-item label="快递单号" prop="expressNo">
              <el-input type="text" v-model="sendSetForm.expressNo" placeholder="请输入快递单号"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea"
                        v-model="sendSetForm.remark"
                        rows="5"
                        placeholder="请输入备注内容"
                        style="width: 100%;"></el-input>
              <span class="word-num" style="float: right">{{(sendSetForm.remark).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="sender">
              <el-input type="text" v-model="sendSetForm.sender" placeholder="请输入配送员姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="senderMobile">
              <el-input type="text" maxlength="11" v-model="sendSetForm.senderMobile" placeholder="请输入配送员手机号"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea"
                        v-model="sendSetForm.remark"
                        rows="5"
                        placeholder="请输入备注内容"
                        style="width: 100%;"></el-input>
              <span class="word-num" style="float: right">{{(sendSetForm.remark).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" :receiveInfo="receiveInfo"></change-info>
    </div>
</template>
<script>
  // import { openLoading, closeLoading } from "../../utils/utils";
  import ChangeInfo from "./change-info";
  import { checkMobile } from '@/utils/patients/checkValid';
  import { updateExpress } from "@/utils/shop";

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

    },
    mounted() {

    },
    watch: {
      sendGoodsDialog(val) {
        if (val) {
          this.receiveInfo = this.sendSetFormData;
          console.log('所传的row',this.receiveInfo)
        }
      },
    },
    methods: {
      //发货
      cancelSendSet() {
        this.$emit('closeSendSet',{type: 1})
      },
      submitSendSet() {
        this.$refs.sendSetForm.validate((valid) => {
            if (valid) {
              let para = {...this.receiveInfo,...this.sendSetForm}
              updateExpress(para).then(res => {
                console.log('保存结果',res)
                if (res.code == '000000') {
                  this.$message.success('操作成功')
                  this.$emit('closeSendSet',{type: 2})
                }
              });
            } else {
              return false;
            }
        })

      },
      //修改买家收货信息
      changeInfo() {
        this.showChangeInfo = true;
      },
      closeChangeInfo(val) {
        if (val.type == 2) {//保存
          let receiveData = val.data;
          this.receiveInfo.provinceName = receiveData.provinceName;
          this.receiveInfo.provinceId = receiveData.provinceId;
          this.receiveInfo.cityName = receiveData.cityName;
          this.receiveInfo.cityId = receiveData.cityId;
          this.receiveInfo.countyName = receiveData.countyName;
          this.receiveInfo.countyId = receiveData.countyId;
          this.receiveInfo.townName = receiveData.townName;
          this.receiveInfo.townId = receiveData.townId;
          this.receiveInfo.address = receiveData.address;
          this.receiveInfo.receiver = receiveData.receiver;
          this.receiveInfo.receiverMobile = receiveData.receiverMobile;
        }
        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>
