<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>{{setReceiveInfo.provinceName}}{{setReceiveInfo.cityName}}{{setReceiveInfo.countyName}}{{setReceiveInfo.townName}}{{setReceiveInfo.address}}</p>
            <p>{{setReceiveInfo.receiver}} {{setReceiveInfo.receiverMobile}}</p>
          </div>
        </div>
        <div class="dt-wrap" v-if="dtType == 2">
          <span class="dt-title">配送方式:</span>
          <el-radio-group v-model="dtMode"  @change="radioChange">
            <el-radio :label="1">物流配送</el-radio>
            <el-radio :label="2">线下配送</el-radio>
          </el-radio-group>
        </div>
        <div v-if="dtType == 1 || dtMode == 1">
          <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="dtType == 2 && dtMode == 2 ">
          <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 :showChangeInfo="showChangeInfo" @closeChangeInfo="closeChangeInfo" :receiveInfo="setReceiveInfo"></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,
      },
      sendSetFormData: {
        type: Object,
        required: true,
        default: () => {}
      },
      dtType: { // 弹框的类型 1 为发货  2为配送
        type: Number,
        default: 1
      },
    },
    data(){
      return{
        sendGoodsDialogIn: true,
        sendSetForm: {
          expressName: '',
          expressNo: '',
          remark: '',
          sender: '',
          senderMobile: '',
        },
        receiveInfo: {
          receiver: '',
          receiverMobile: '',
          area: [],
          address: '',
          provinceName: '',
          cityName: '',
          countyName: '',
          townName: '',
          provinceId: null,
          cityId: null,
          countyId: null,
          townId: null,
        },
        setReceiveInfo: {},
        showContent: 0,
        showChangeInfo: false,
        dtMode: 1, //1.物流配送 2.线下配送
        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;
          this.setReceiveInfo = Object.assign({}, this.sendSetFormData);
          // console.log('当前订单详情数据',this.receiveInfo)
        }
      },
    },
    computed: {
      dialogTitle(){
        return this.dtType == 1 ? '发货设置' : '配送设置';
      }
    },
    methods: {
      cancelSendSet() {
        this.$refs.sendSetForm.resetFields();
        this.sendSetForm.remark = '';
        this.$emit('closeSendSet',{type: 1})
      },
      submitSendSet() {
        this.$refs.sendSetForm.validate((valid) => {
            if (valid) {
              let para = {...this.setReceiveInfo,...this.sendSetForm};
              if (this.dtType == 1) {//发货设置的type是1，配送设置的type是2，配送完成的type是3
                para.type = 1;
              }else if (this.dtType == 2) {
                para.type = 2;
              }
              if (para.orderNo) {
                para.id = para.orderNo;
              }
              para.expressType = this.dtMode;
              openLoading(this);
              updateExpress(para).then(res => {
                closeLoading(this);
                if (res.code == '000000') {
                  this.$message.success('操作成功')
                  this.$refs.sendSetForm.resetFields();
                  this.sendSetForm.remark = '';
                  // this.$emit('closeSendSet',{type: 2})
                  let timeoutId = null
                  timeoutId && clearTimeout(timeoutId)
                  timeoutId = setTimeout(() => {
                    this.close()
                  }, 500)
                }else {
                  this.$message.error(res.message);
                }
              });
            } else {
              return false;
            }
        })
      },
      close(){
        this.$emit('closeSendSet',{type: 2})
      },
      //修改买家收货信息
      changeInfo() {
        this.showChangeInfo = true;
      },
      closeChangeInfo(val) {
        if (val.type == 2) {//保存
          let receiveData = val.data;
          this.setReceiveInfo.provinceName = receiveData.provinceName;
          this.setReceiveInfo.provinceId = receiveData.provinceId;
          this.setReceiveInfo.cityName = receiveData.cityName;
          this.setReceiveInfo.cityId = receiveData.cityId;
          this.setReceiveInfo.countyName = receiveData.countyName;
          this.setReceiveInfo.countyId = receiveData.countyId;
          this.setReceiveInfo.townName = receiveData.townName;
          this.setReceiveInfo.townId = receiveData.townId;
          this.setReceiveInfo.address = receiveData.address;
          this.setReceiveInfo.receiver = receiveData.receiver;
          this.setReceiveInfo.receiverMobile = receiveData.receiverMobile;
        }
        this.showChangeInfo = false;
      },
      radioChange() {
        this.$refs.sendSetForm.resetFields();
        this.sendSetForm.remark = '';
      }
    },
  }
</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;
        }
      }
    }
    .dt-wrap {
      margin-top: 20px;
      .dt-title {
        margin-right: 16px;
      }
    }
    .form-title{
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .el-dialog__body{
      padding-bottom: 0;
    }
  }
</style>
