<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="particulars.linkman" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" class="customer-lab">
            <el-input v-model="particulars.phone" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="订单标题" class="customer-lab">
            <el-input v-model="particulars.title" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="维修时间" class="customer-lab">
            <el-date-picker v-model="particulars.repairTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
              class="customer-lab-icke" :disabled="disabled">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="维修地址" class="customer-lab">
            <el-input v-model="particulars.repairAddress" :disabled="disabled"></el-input>
          </el-form-item>
        </div>
        <div class="description">
          <span>图片说明</span>
          <div style="display: flex;">
            <div class="imgdiv" v-for="v in particulars.pictureList">
              <el-image class="imgdiv-img" style="margin: 5px;" :src="v.url" :preview-src-list="srcList">
              </el-image>
            </div>
          </div>

        </div>
        <div class="description">
          <span>视频说明</span>
          <div class="imgdiv">
            <comvideo :width="width" :videoUrl="video" :videoCover="videoCover"></comvideo>
          </div>
        </div>
        <div class="description">
          <span>语音描述</span>
          <div class="imgdiv">
            <audio ref="audio" controls  class="aud">
              <source :src="particulars.voice" type="audio/ogg">
            </audio>
          </div>
        </div>
        <div class="description">
          <span>备注说明</span>
          <div class="imgdiv">
            <el-input type="textarea" v-model="particulars.remark" :disabled="disabled"></el-input>
          </div>
        </div>
        <el-form-item>

        </el-form-item>
      </el-form>
      <el-button @click="dialog">返回</el-button>
      <el-button v-if="title == '修改订单'" type="primary" @click="onSubmit">确认修改</el-button>
    </el-dialog>
  </div>
</template>

<script>
import comvideo from './video.vue'
import { particularsGET, editPOST } from '@/api/orderform/index'

export default {
  name: "modify",
  components: {
    comvideo
  },
  props: {
    dialogVisibl: {
      type: Boolean
    },
    title: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      width: '200',
      videoCover:'',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [],
      value1: '',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      video:'',
      particulars: {
        video: '',
        voice: ''
      },
      idt: ''
    };
  },
  created() { },
  methods: {
    partic(val) {
      let self = this
      particularsGET({ id: val }).then((res) => {
        if (res.code == 200) {
          this.$nextTick(() => {
            if (res.data.videoList && res.data.videoList.length) {
              self.video = res.data.videoList[0].url
              self.videoCover = res.data.videoList[0].cropImage
              console.log(self.particulars.video,'self.particulars.video')
            } else {
              self.video = ''
              self.videoCover = ''
            }
            if (res.data.voiceList && res.data.voiceList.length) {
              // this.idt = require(res.data.voiceList[0].url)
              this.$refs.audio.src = res.data.voiceList[0].url
              // self.idt = 
            } else {
              this.$refs.audio.src = ''
            }
            self.particulars = res.data
            if (res.data.repairTime != null) {
              res.data.repairTime = res.data.repairTime.slice(0, 10)
            }
            self.srcList = []
            self.particulars.pictureList.forEach((item)=>{
                 self.srcList.push(item.url)
            })
          })
          console.log(self.particulars,self.srcList,'itd===========')
        }
      })
    },

    dialog() {
      this.$emit('diaisibl')
    },
    onSubmit() {

      editPOST({ ...this.particulars }).then((res) => {
        console.log(res, 'res===========')
      })
      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>