<style scoped>
.customerDialogBox.add-box .add-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
}
.customerDialogBox.add-box .add-tit p {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: rgba(17, 17, 17, 1);
  font-size: 14px;
}
.customerDialogBox.add-box .add-tit p span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #409efe;
  border-radius: 50%;
  margin-right: 10px;
}
.customerDialogBox.add-box .el-dialog__header {
  padding: 15px 20px;
  background: rgba(255, 255, 255, 1);
}
.customerDialogBox.add-box .dialog-footer {
  text-align: center;
  background-color: rgba(248, 250, 251, 1);
  padding-bottom: 20px;
}
.customerDialogBox.add-box .el-dialog__footer {
  padding: 0;
}
.customerDialogBox.add-box .el-dialog__body {
  background-color: rgba(248, 250, 251, 1);
  padding-top: 20px;
  max-height: 500px;
  overflow: auto;
}
.customerDialogBox .add-box-btn.el-button {
  border-radius: 0;
  background-color: #409efecc;
  border-color: #409efecc;
  color: white;
  padding: 12px 43px;
}
.customerDialogBox .add-box-btn.el-button:hover {
  background-color: #409efe;
  border-color: #409efe;
  color: white;
}
.customerDialogBox .add-box-btn.el-button.add-box-cancel {
  color: #409efecc;
  background-color: white;
}
.customerDialogBox .add-box-btn.el-button.add-box-cancel:hover {
  color: #409efe;
  background-color: white;
}
.customerDialogBox .el-input .el-input-group__append {
  background-color: #409efe;
  border-color: #409efe;
  color: #fff;
}
.customerDialogBox .form-box .form-box-tit {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.customerDialogBox .form-box .radius {
  display: flex;
  width: 4px;
  height: 4px;
  background: rgba(255, 164, 117, 1);
  border-radius: 50%;
  margin-right: 10px;
}
.customerDialogBox .up-img-box .uib-item {
  margin-right: 30px;
  width: 120px;
  height: 120px;
  background-color: white;
  position: relative;
  margin-bottom: 30px;
}
.customerDialogBox .up-img-box .uib-item p {
  position: absolute;
  bottom: -30px;
  font-size: 12px;
  text-align: center;
  width: 100%;
}
.customerDialogBox .up-img-box .uib-item:hover .imgzhe-btn {
  opacity: 1;
}
.customerDialogBox .imgzhe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.customerDialogBox .imgzhe .imgzhe-btn {
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 120px;
  position: absolute;
  top: 0;
  opacity: 1;
  transition: all linear 0.5s;
}
.customerDialogBox .imgzhe .imgzhe-btn i {
  font-size: 22px;
  margin-right: 5px;
  color: white;
  cursor: pointer;
}
.customerDialogBox .up-ctrl {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.customerDialogBox .up-ctrl > div {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 140px;
}
.el-upload-dragger{
  width: 100% !important;
}
.certificate-img-box{
  display: flex;
  flex-wrap: wrap;
}
.img-box{
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
.form-box-log{
  border-left: 1px solid #E9E9E9;
}
.form-log-title{
  width: 100%;
  position: relative;
}
.form-log-text{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.form-log-text span:first-child{
  color: #409efe;
  font-size: 15px;
}
.form-log-text span:last-child{
  color: #555;
}
.form-log-text,.form-log-center{
  padding: 0 0 0 20px;
}
.log-radius{
    position:absolute;
    width: 5px;
    height: 5px;
    left: -3px;
    border-radius: 100%;
    top: 15px;
    background: rgba(255, 164, 117, 1);
    border-radius: 50%;
    margin-right: 10px;
}
.form-log-center{
  margin-bottom: 20px;
  letter-spacing: 2px;
}
</style>
<template>
    <el-dialog :visible.sync="dialogTableVisible" 
    @closed="closedDialog" 
    :close-on-click-modal="false" 
    class="add-box add-box1 customerDialogBox"
    :width="width">
        <div class="add-tit" slot="title">
            <p><span></span>{{name}}</p>
            <span icon="el-icon-close"></span>
        </div>
        <div class="form-box" v-if="show">
            <el-form :model="form" ref="form" class="MyEditForm" :rules="rules">
                <p class="form-box-tit" v-if="name!='操作日志'"><span class="radius"></span>
                {{name!='修改出票状态'?' 基本信息':' 上传'+text+'凭证'}}</p>
                <el-row :gutter="30" v-if="name=='新建机票订单'||name=='编辑机票订单'">
                  <el-col :span="8">
                        <div class="MyEditForm-item">
                            <el-form-item label="预计人数" prop="GuestCount">
                                <el-input placeholder="请输入预计人数" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" v-model="form.GuestCount"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="MyEditForm-item">
                            <el-form-item label="出发城市" prop="StartCityName">
                                <el-input placeholder="请输入出发城市" v-model="form.StartCityName"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="MyEditForm-item">
                            <el-form-item label="到达城市" prop="EndCityName">
                                <el-input placeholder="请输入到达城市" v-model="form.EndCityName"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                 <el-row :gutter="30" v-if="name=='新建机票订单'||name=='编辑订单金额'||name=='编辑机票订单'">
                     <el-col :span="8">
                        <div class="MyEditForm-item">
                            <el-form-item label="报价金额" prop="Money">
                                <el-input placeholder="请输入报价金额" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" v-model="form.Money"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-if="name=='新建机票订单'||name=='编辑订单金额'||name=='编辑机票订单'">
                    <el-col :span="24">
                        <div class="MyEditForm-item label-pad-left">
                            <el-form-item v-if="name=='新建机票订单'||name=='编辑机票订单'" label="备注">
                                <el-input type="textarea" placeholder="订单备注" v-model="form.Remark"></el-input>
                            </el-form-item>
                            <el-form-item v-if="name=='编辑订单金额'" label="备注" prop="Remark">
                                <el-input type="textarea" placeholder="订单备注" v-model="form.Remark"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-if="name=='修改出票状态'">
                  <el-col v-if="obj.TicketStatus==2" :span="24">
                    <div class="MyEditForm-item">
                      <el-form-item label="出票状态" prop="Type">
                          <el-radio-group v-model="form.Type">
                            <el-radio v-for="(item,index) in radioList"
                            @change="radioChange"
                            :key="index"
                            :label="item.id">{{item.name}}</el-radio>
                        </el-radio-group>
                      </el-form-item> 
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="MyEditForm-item">
                      <el-form-item label="凭证/图片" prop="">
                        <div class="certificate-img-box">
                          <div class="img-box" v-for="(item,index) in form.Voucher" :key="index">
                              <el-image 
                                style="width: 100px; height: 100px"
                                :src="item" 
                                :preview-src-list="form.Voucher">
                              </el-image>
                            </div>
                        </div>    
                      </el-form-item> 
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="MyEditForm-item">
                      <el-form-item label="上传图片" prop="Voucher">
                          <el-upload
                            ref="ticketUpload"
                            class="upload-demo"
                            drag
                            action=""
                            :file-list="fileList"
                            :http-request="uploadImg"
                            :multiple="true"
                            accept="image/jpeg,image/gif,image/png,image/bmp"
                            :on-success="handleAvatarSuccess"
                            >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                      </el-form-item> 
                        
                    </div>
                    
                  </el-col>
                </el-row>
                <el-row v-if="name=='订单转交'">
                     <el-col>
                        <div class="MyEditForm-item">
                            <el-form-item label="转交id" prop="EnterId">
                                <el-input placeholder="请输入转交人id" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" v-model="form.EnterId"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div v-if="name=='操作日志'">
              <div v-for="(item,index) in logData" :key="index">
                <div class="form-box-log">
                  <div class="form-log-title">
                    <span class="log-radius"></span>
                    <div class="form-log-text">
                      <span>
                        {{item.CreateByName}}
                      </span>
                      <span>
                        {{item.CreateTime}}
                      </span>
                    </div>
                  </div>
                  <div class="form-log-center">
                    {{item.LogContent}}
                  </div>
                </div>
              </div>
            </div>
            
            <div v-if="total>0">
              <el-pagination class="Mypagination" background @current-change="handleCurrentChange"
                  :page-sizes="[10, 20, 60, 90, 100]" :page-size="msg.pageSize" layout="sizes, prev, pager, next"
                  @size-change="handleSizeChange" :total="total">
              </el-pagination>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="add-box-btn" @click="submitForm('form')">确 定</el-button>
            <el-button class="add-box-btn add-box-cancel" @click="dialogTableVisible = false, resetForm('form')">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
  props:{
    ID:{
      type: Number,
      default : 0
    },
    name:{
      type: String,
      default : ""
    },
    CustomerId:{
      type: Number,
      default : 0
    },
    GuestId:{
      type: Number,
      default : 0
    },
    OrderId:{
      type: String,
      default : ""
    },
    obj:{
      type: Object,
      default : {}
    }
  },
  data() {
    return {
      width:"",
      logData:[],
      total:0,
      msg:{
        pageIndex: 1,
        pageSize: 10,
        OrderId:"",
      },
      Voucher:[],
      fileList:[],
      radioList:[
          {name:'航班熔断',id:'3'},
          {name:'用户取消航班',id:'4'},
      ],
      text:'',
      CustomerList: [],
      LineList: [],
      LineTeamList: [],
      dialogTableVisible: false,
      form: {
        OrderId: 0,
        GuestId: null,
        GuestCount: 1,
        StartCityName: "",
        EndCityName: "",
        Money: null,
        Remark: "",
        Type: "",
        Voucher: [],
        EnterId: ""
      },
      BusinessStatusEnum: [],
      rules: {
        GuestCount: [
          { required: true, message: "请选择客户", trigger: "change" },
        ],
        StartCityName: [
          { required: true, message: "请输入出发城市", trigger: "blur" },
        ],
        EndCityName: [
          { required: true, message: "请输入到达城市", trigger: "blur" },
        ],
        Money: [
          { required: true, message: "请输入报价金额", trigger: "change" },
        ],
        Remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        Type: [
          { required: true, message: "选择出票状态", trigger: "change" },
        ],
        Voucher: [{ required: true, message: "上传凭据", trigger: "blur" }],
        EnterId: [{ required: true, message: "请输入转交人id", trigger: "blur" }],
      },
      show: true,
    };
  },
  watch: {
    ID: {
      handler(val, oldVal) {
        
      },
      deep: true,
    },
    GuestId: {
      handler(val, oldVal) {
        this.form.GuestId = val
      },
      deep: true,
    },
    CustomerId: {
      handler(val, oldVal) {

      },
      deep: true,
    },
    obj:{
      handler(val, oldVal) {
        this.getList()
      },
      deep: true,
    }
  },
  mounted() { 
    this.form.GuestId = this.GuestId
    if(this.name=="编辑机票订单"){
      this.form = {
        GuestId: this.GuestId,
        OrderId: this.obj.OrderId,
        GuestCount: this.obj.GuestCount,
        StartCityName: this.obj.StartCityName,
        EndCityName: this.obj.EndCityName,
        Money: this.obj.Money,
        Remark: this.obj.Remark,
      }
      
    }
    if(this.obj.TicketStatus==1){
      this.text = '出票'
    }
    if(this.name=='操作日志'){
      this.width="600px"
      this.getList()
    }
    if(this.name=='订单转交'){
      this.width="400px"
    }
    if(this.name=='编辑订单金额'){
      this.width="600px"
    }
    let $this = this;
    setTimeout(() => {
      $this.dialogTableVisible = true;
    }, 50);
  },
  methods: {
    closedDialog() {
      this.MsgBus.$emit("closeTicketOrderDialogBox");
    },
    // 操作日志
    getList(){
      if(this.name=='操作日志'){
        this.msg.OrderId = this.obj.OrderId
        
      }
      this.apipost("/api/Order/GetOrderLogPageList", this.msg, (res) => {
        if (res.data.resultCode == 1) {
          this.logData = res.data.data.pageData
          this.total = res.data.data.count
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //上传文件后清空文件队列
    handleAvatarSuccess(res, file) {
      this.$refs.ticketUpload.clearFiles();
      if (res.resultCode == 1) {
        this.Success(res.message);
      }
    },
    //上传图片
    uploadImg(file) {
      let newArr = [];
      newArr.push(file.file);
      let path = "/Upload/Temporary/";
      this.UploadSelfFileT(path, newArr, (x) => {
        let url = this.domainManager().ViittoFileUrl + x.data.FilePath;
        let data = x.data.FilePath
        // this.form.Voucher.push({
        //   name: file.file.name,
        //   url: url,
        //   size: (file.file.size / 1024).toFixed(2) + "kb",
        // });
        this.Voucher.push(data)
        this.form.Voucher.push(url);
      });
    },
    radioChange(){
      if(this.form.Type=='3'){
        this.text = '航班熔断'
      }if(this.form.Type=='4'){
        this.text = '用户取消航班'
      }
    },
    // 修改订单状态
    reviseData() {
      if(this.obj.TicketStatus==1){
        this.form.Type = '2'
      }
      if(this.obj.OrderId){
        this.form.OrderId = this.obj.OrderId
      }
      let data = {
        OrderId: this.form.OrderId,
        Type: this.form.Type,
        Voucher: this.Voucher
      }
      this.apipost("/api/Order/SetGuestOrderState", data, (res) => {
        if (res.data.resultCode == 1) {
          this.dialogTableVisible = false;
          this.$message.success("操作成功");
          this.MsgBus.$emit("closeTicketOrderDialogBox");
          this.MsgBus.$emit("closeGetList");
          this.resetForm("form");
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // 编辑金额
    editData(){
      if(this.obj.OrderId){
        this.form.OrderId = this.obj.OrderId
      }
      let data = {
        OrderId: this.form.OrderId,
        Money: this.form.Money,
        Remark: this.form.Remark
      }
      this.apipost("/api/Order/SetGuestOrderMoney", data, (res) => {
        if (res.data.resultCode == 1) {
          this.dialogTableVisible = false;
          this.$message.success("操作成功");
          this.MsgBus.$emit("closeTicketOrderDialogBox");
          this.MsgBus.$emit("closeGetList");
          this.resetForm("form");
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // 新增订单
    addData() {
      let data
      if(this.name=='新建机票订单'){
        data = {
          OrderId: this.form.OrderId,
          GuestId: this.form.GuestId,
          GuestCount: this.form.GuestCount,
          StartCityName: this.form.StartCityName,
          EndCityName: this.form.EndCityName,
          Money: this.form.Money,
          Remark: this.form.Remark,
        }
      }
      if(this.name=='编辑机票订单'){
        data = {
          OrderId: this.form.OrderId,
          GuestId: this.form.GuestId,
          GuestCount: this.form.GuestCount,
          StartCityName: this.form.StartCityName,
          EndCityName: this.form.EndCityName,
          Money: this.form.Money,
          Remark: this.form.Remark,
        }
      }
      this.apipost("/api/Order/SetGuestOrderInfo", data, (res) => {
        if (res.data.resultCode == 1) {
          this.dialogTableVisible = false;
          this.$message.success("操作成功");
          this.MsgBus.$emit("closeTicketOrderDialogBox");
          this.MsgBus.$emit("closeGetList");
          this.resetForm("form");
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    ConvertData(){
      if(this.obj.OrderId){
        this.form.OrderId = this.obj.OrderId
      }
      let data = {
        OrderId: this.form.OrderId,
        EnterId	: this.form.EnterId,
      }
      this.apipost("/api/Order/SetGuestOrderCareOf", data, (res) => {
        if (res.data.resultCode == 1) {
          this.dialogTableVisible = false;
          this.$message.success("操作成功");
          this.MsgBus.$emit("closeTicketOrderDialogBox");
          this.MsgBus.$emit("closeGetList");
          this.resetForm("form");
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      if(this.name=='新建机票订单'||this.name=='编辑机票订单'){
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addData();
          } else {
            return false;
          }
        });
      }if(this.name=='编辑订单金额'){
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.editData();
          } else {
            return false;
          }
        });
      }if(this.name=='修改出票状态'){
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.reviseData();
          } else {
            return false;
          }
        });
      }
      if(this.name=='操作日志'){
        this.dialogTableVisible = false;
        this.MsgBus.$emit("closeTicketOrderDialogBox");
      }
      if(this.name=='订单转交'){
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.ConvertData();
          } else {
            return false;
          }
        });
      }
      
    },
    resetForm(formName) {
      this.dialogTableVisible = false;
      this.MsgBus.$emit("closeTicketOrderDialogBox");
      // 重置表单
      this.form = {
        OrderId: 0,
        GuestId: null,
        GuestCount: 1,
        StartCityName: "",
        EndCityName: "",
        Money: null,
        Remark: "",
        EnterId: ""
      };
      this.$refs[formName].resetFields();
    },
    handleSizeChange(val) {
        this.msg.pageSize = val;
        this.getList();
    },
    handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
    },
  },
};
</script>
