<template>
  <div class="app-container">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisibl"
      width="60%"
      :before-close="dialog"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <span class="description">客户基本信息</span>
        <div class="customer">
          <el-form-item label="联系人" class="customer-lab">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" class="customer-lab">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="订单标题" class="customer-lab">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="联系人" class="customer-lab">
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              class="customer-lab-icke"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="维修地址" class="customer-lab">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </div>

      </el-form>
      <el-button @click="dialog">取消</el-button>
      <el-button type="primary" @click="onSubmit">保存添加</el-button>
    </el-dialog>
  </div>
</template>

<script>
import comvideo from "./video.vue";

export default {
  name: "modify",
  components: {
    comvideo,
  },
  props: {
    dialogVisibl: {
      type: Boolean,
    },
    title: {
      type: String,
    },
  },
  data() {
    return {
      width: "30%",
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      value1: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  created() {},
  methods: {
    dialog() {
      this.$emit("diaisibl");
    },
    onSubmit() {
      this.$emit("onSubmit");
    },
  },
};
</script>
<style lang="scss" scoped>
.description {
  font-size: 25px;
  margin-top: 10px;
}

.customer {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;

  &-lab {
    width: 33%;

    &-icke {
      width: 100%;
    }
  }
}

.imgdiv {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;

  &-img {
    width: 120px;
  }
}
</style>