<template>
    <el-dialog
      class="xt-edit-dialog"
      :title="'物流轨迹'"
      :visible.sync="dialogShow"
      @close="close"
    >
      <div>
        <headTrace></headTrace>
        <!-- 轨迹 -->
        <div>
          <Trace :gjData="form.traceList"></Trace>
        </div>
        <div class="mgt20">
          <el-button @click="submit">确定</el-button>
        </div>
      </div>
    </el-dialog>
</template>

<script>
import Trace from "./trace.vue";
import headTrace from "./head.vue";
export default {
  props: {
    dialogShow: {
      type: Boolean,
      default: false,
    },
    dialogData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    Trace,
    headTrace
  },
  watch: {
    // dialogShow(val){
    //   console.log('dialogShow',val)
    // },
    dialogData: {
      handler(newVal) {
        console.log(newVal)
        this.title = newVal;
        this.form = newVal;
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      title: '',
      form: {name:'',mobile:''},
    };
  },
  // 销毁组件时执行
  methods: {
    submit(){
      this.$emit('submit')
    },
    close() {
      this.$emit("update:dialogShow", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.xt-edit-dialog {
  text-align: left;
  /deep/ .el-dialog__body {
    padding: 10px 20px 30px 20px;
    .xt-form {
      width: 100%;
      .line {
        text-align: left;
      }
    }
  }
  .mgt20{
    margin-top:20px;
    text-align:right
  }
}

</style>
