<template>
  <div>
    <xy-dialog ref="dialog" :width='40' :is-show.sync="isShow" type="form" :title="type==='add'?'新增巡查计划':'编辑巡查计划'" :form="form"
      :rules="rules" @submit="submit">
      <template v-slot:wentileixing>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>问题类型：
          </div>
          <div class="xy-table-item-content">
             <el-radio-group v-model="form.wentileixing">
               <el-radio :label="item.value" v-for="item in listQuestion">{{item.value}}</el-radio>
             </el-radio-group>
          </div>
        </div>
      </template>
      <template v-slot:jianchariqi>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>检查日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 300px;" v-model="form.jianchariqi" type="date" placeholder="选择日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:jianchadidian>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>检查地点：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width:300px" v-model="form.jianchadidian"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:shangbaoren>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>上报人：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width:300px" v-model="form.shangbaoren"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:jianyizhenggaikeshi>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>建议整改科室：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.jianyizhenggaikeshi" filterable style="width: 300px;" placeholder="请选择建议整改科室">
              <el-option v-for="item in listDep" :key="item.id" :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:wentimiaoshu>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>问题描述：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea"  style="width: 300px;" v-model="form.wentimiaoshu" ></el-input>
          </div>
        </div>
      </template>
      <template v-slot:zhenggaijianyi>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>整改建议：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea"  style="width: 300px;" v-model="form.zhenggaijianyi" ></el-input>
          </div>
        </div>
      </template>
      <template v-slot:wentizhaopian>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>问题照片：
          </div>
          <div class="xy-table-item-content">
            <el-upload :action="action" multiple  list-type="picture-card" class='upload-demo' :file-list="fileList" ref="pictureUpload"
              style="width:400px" :auto-upload="true" :data="uploadOther" :on-success="handlesuccess"
              :on-remove="handleRemove">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    save,
    show
  } from "@/api/system/baseForm.js"
  import {getparameteritem} from "@/api/system/dictionary.js"
  import {
    Message
  } from 'element-ui'
  import {
    getToken
  } from '@/utils/auth'
  import {
    listdept
  } from "@/api/system/department.js"
  export default {

    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        tableName:'flood_infos',
        listQuestion:[],
        listDep:[],
        fileList:[],
        uploadOther: {
          token: ""
        },
        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
        form: {
          wentileixing:'',
          jianchariqi:'',
          jianchadidian:'',
          shangbaoren:'',
          jianyizhenggaikeshi:'',
          wentimiaoshu:'',
          zhenggaijianyi:'',
          wentizhaopian:[],



          zhuangtai:''
        },
        rules: {

        },

      }
    },
    created() {
      this.uploadOther.token = getToken();
      this.loadQuestion()
      this.loadDeptOptions()
      this.form.nianfen = this.$moment().format('yyyy')
    },
    methods: {
      loadQuestion(){
        getparameteritem("questionType").then(res=>{
          this.listQuestion = res.detail
        })
      },
      loadDeptOptions() {
        listdept().
        then((res) => {
          this.listDep = res;
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      },
      handleRemove(file, fileList) {
        this.fileList = fileList
      },
      handlesuccess(response, file, fileList) {
        this.fileList = fileList
      },
      async getDetail() {
        const res = await show({
          id: this.id,
          table_name: this.tableName
        })
        this.$integrateData(this.form,res)
        if(res.wentizhaopian_upload_details&&res.wentizhaopian_upload_details.length>0){
          res.wentizhaopian_upload_details.map(item=>{
            this.fileList.push({
              url:item.url,
              id:item.id,
              name:item.original_name
            })
          })
        }
      },

      submit() {
        let _files = []
        if (this.fileList.length > 0) {
          for (var h of this.fileList) {
            if (h.response) {
              _files.push(h.response.id)
            } else {
              _files.push(h.id)
            }
          }
          this.form.wentizhaopian = _files
        } else {
          this.form.wentizhaopian = []
        }
        console.log("form",this.form)
        // return
        if (this.type === 'add') {
          this.form.zhuangtai = '待确认'
          save({
            table_name: this.tableName,
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '新增成功'
            })
            this.$emit('refresh')
            this.isShow = false

          })
          return
        }
        if (this.type === 'editor') {
          save({
            id: this.id,
            table_name: this.tableName,
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '编辑成功'
            })
            this.$emit('refresh')
            this.isShow = false
          })
        }
      },

    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.type = ''
          this.fileList=[]
          this.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .xy-table-item-label{
    min-width:160px!important
  }
</style>
