<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>
        <div class="description">
          <span>图片说明</span>
          <div class="imgdiv">
            <el-image class="imgdiv-img" :src="url" :preview-src-list="srcList">
            </el-image>
          </div>
        </div>
        <div class="description">
          <span>视频说明</span>
          <div class="imgdiv">
            <comvideo :width="width"></comvideo>
          </div>
        </div>
        <div class="description">
          <span>语音描述</span>
          <div class="imgdiv">
            <audio controls ref="audio" class="aud">
              <source src="" />
            </audio>
          </div>
        </div>
        <div class="description">
          <span>备注说明</span>
          <div class="imgdiv">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </div>
        </div>
        <el-form-item>

        </el-form-item>
      </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>