<template>
  <el-dialog title="督办" :visible.sync="detailOpen" width="600px" append-to-body destroy-on-close :close-on-click-modal="false">

    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="督导类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择督导类型" disabled>
          <el-option
            v-for="dict in typeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="督导标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入督导标题" />
      </el-form-item>
      <el-form-item label="督导内容" prop="content">
        <el-input v-model="form.content" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="是否反馈">
        <el-radio-group v-model="form.status">
          <el-radio
            label="0"
          >否</el-radio>
          <el-radio
            label="1"
          >是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图片" prop="imageUrl">
        <imageUpload v-model="form.imageUrl"/>
        <!--<el-input v-model="form.imageUrl" type="textarea" placeholder="请输入内容" />-->
      </el-form-item>
      <el-form-item label="文件" prop="fileUrl">
        <FileUpload
          listType="picture"
          @resFun="getFileInfo"
          @remove="listRemove"
          :fileArr="fileList"
        />
        <el-input v-show="false" disabled v-model="form.fileUrl"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

  </el-dialog>

</template>

<script>
  import { addSupervision } from "@/api/supervision/supervision";
  import { getRef } from "@/api/supervision/spot";
  import FileUpload from '@/components/FileUpload';
  import ImageUpload from '@/components/ImageUpload';
  let uploadfile = require("@/assets/uploadfile.png");
  export default {
    name: "detail-info",
    components: {
      FileUpload,ImageUpload
    },
    data(){
        return{
          detailOpen:false,
          typeOptions:[],
          statusOptions:[],
          fileList:[],
          fileList2:[],
          // 表单参数
          form: {
            status:0,
            supervisionId:null
          },
          // 表单校验
          rules: {
            type: [
              { required: true, message: "督导类型不能为空", trigger: "change" }
            ],
            title: [
              { required: true, message: "督导标题不能为空", trigger: "blur" }
            ],
            content: [
              { required: true, message: "督导内容不能为空", trigger: "blur" }
            ],
          }
        }
    },
    created() {
      this.getDicts("t_supervision_type").then(response => {
        this.typeOptions = response.data;
    });
      this.getDicts("t_supervision_status").then(response => {
        this.statusOptions = response.data;
    });
    },
    methods:{
      getInfo(hiddenId){
        this.detailOpen = true;
        this.form ={
          status:'0',
          type:'4',
          hiddenId:hiddenId
        }
      },
      //上传
      getFileInfo(res){
        //this.form.dealPlan = res.fileName;
        this.form.fileUrl = res.url;
        this.fileList.push({
          name: res.fileName,
          url: uploadfile,
        });
      },
      listRemove(e) {
        this.form.fileUrl = "";
        this.fileList = [];
      },
      // 取消按钮
      cancel() {
        this.fileList = [];
        this.detailOpen = false;
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.supervisionId != null) {
              updateSupervision(this.form).then(response => {
                this.msgSuccess("修改成功");
              this.detailOpen = false;
            });
            } else {
              addSupervision(this.form).then(response => {
                this.msgSuccess("新增成功");
              this.detailOpen = false;
            });
            }
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>
