<template>
  <el-dialog
    v-dialogDrag
    class="planEdit__tool modify-service"
    :title="title"
    :visible.sync="dialogShow"
    width="400px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
    append-to-body
  >
    <div v-if="isModifyServiceNumber">
      <div class="ModifyServiceName">计划号:</div>
      <div class="ModifyServiceInput">
        <el-input v-model="serviceNumber" type="text" :style="{width: '80%'}" :minlength="2" :maxlength="3" />
      </div>
    </div>
    <div v-else>
      <div class="ModifyServiceName">车次号:</div>
      <div class="ModifyServiceInput">
        <el-input v-model="tripNumber" type="text" :style="{width: '80%'}" :maxlength="10" />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
      <el-button type="primary" size="medium" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { updateTripNumber, updateServiceNumber } from '@/api/runplan';
export default {
    name:'ModifyService',
    data() {
        return {
            dialogShow:false,
            isModifyServiceNumber:false,
            serviceNumber:'',
            tripNumber:'',
            title:'',
            oldServiceNumber:'',
            oldTripNumber:''
        };
    },
    methods:{
        doShow(data) {
            if (data.tripNumber) {
                this.oldServiceNumber = data.serviceNumber;
                this.oldTripNumber = data.tripNumber;
                this.isModifyServiceNumber = false;
                this.title = '修改车次号';
                // this.tripNumber = data.tripNumber;
            } else {
                this.oldServiceNumber = data.serviceNumber;
                this.isModifyServiceNumber = true;
                this.title = '修改计划号';
                this.serviceNumber = data.serviceNumber;
            }
            this.dialogShow = true;
        },
        doClose() {
            this.dialogShow = false;
        },
        handleCommit() {
            if (this.isModifyServiceNumber) {
                const result = /^\d{2,}$/.test(this.serviceNumber);
                if (this.serviceNumber && result) {
                    updateServiceNumber(this.$route.query.planId, this.oldServiceNumber, this.serviceNumber).then(res=>{
                        this.$message.success('修改计划号成功');
                        // this.$emit('refresh');
                        this.dialogShow = false;
                        this.$store.dispatch('runPlan/refresh');
                    }).catch(()=>{
                        this.$message.error('修改计划号失败');
                    });
                } else {
                    this.$message.error('请输入正确的计划号(两位以上数字)');
                }

            } else {
                const result = /^\d{2,}$/.test(this.tripNumber);
                if (this.tripNumber && result) {
                    const SDTNumber = this.oldServiceNumber + this.oldTripNumber;
                    updateTripNumber(this.$route.query.planId, SDTNumber, this.tripNumber).then(res=>{
                        this.$message.success('修改车次号成功');
                        // this.$emit('refresh');
                        this.dialogShow = false;
                        this.$store.dispatch('runPlan/refresh');
                    }).catch(()=>{
                        this.$message.error('修改车次号失败');
                    });
                } else {
                    this.$message.error('请输入正确的车次号(两位以上数字)');
                }

            }
        }
    }
};
</script>
<style lang="scss" scoped>
.ModifyServiceName{
    width: 100px;
    display: inline-block;
    float: left;
    text-align: right;
    padding-right: 15px;
    vertical-align: top;
    margin-top: 11px;
    font-size: 15px;
    margin-left: 20px;
}
.ModifyServiceInput{
    width: 180px;
    display: inline-block;
    vertical-align: middle;
}
</style>
