<template>
  <div>
    <xy-dialog ref="dialog" :width='40' :is-show.sync="isShow" type="form" :title="type==='add'?'巡查计划':'巡查计划'"
      :form="form" :rules="rules">
      <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">
            <div style="width:300px">{{form.wentileixing}}</div>
          </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">
            <div style="width:300px">{{form.jianchariqi}}</div>
          </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">
            <div style="width:300px">{{form.jianchadidian}}</div>
          </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">
            <div style="width:300px">{{form.shangbaoren}}</div>
          </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">
            <div v-for="item in listDep">
              <div style="width:300px" v-if="form.jianyizhenggaikeshi===item.id">
                {{item.name}}
              </div>
            </div>
          </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">
            <div style="width:300px">{{form.wentimiaoshu}}</div>
          </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">
            <div style="width:300px">{{form.zhenggaijianyi}}</div>
          </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-image v-for="url in fileList"
              style="width: 146px; height: 146px;display:inline-block;margin-right:5px;margin-bottom:5px"
              :src="url.url">
            </el-image>
          </div>
        </div>
      </template>
      <template v-slot:shifouxuyaozhenggai>
        <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.shifouxuyaozhenggai" v-if="type==='check'">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
            <div v-else style="width:300px">{{form.shifouxuyaozhenggai||'-'}}</div>
          </div>
        </div>
      </template>
      <template v-slot:shijizhenggaikeshi>
        <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-if="type==='check'" v-model="form.shijizhenggaikeshi" 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 v-else v-for="item in listDep">
              <div style="width:300px" v-if="form.shijizhenggaikeshi===item.id">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:wanchengriqi>
        <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-if="type==='need'" v-model="form.wanchengriqi" type="date"
              placeholder="选择日期" value-format="yyyy-MM-dd">
            </el-date-picker>
            <div v-else style="width:300px">{{form.wanchengriqi||'-'}}</div>

          </div>
        </div>
      </template>
      <template v-slot:wanchengqingkuang>
        <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" v-if="type==='need'" style="width: 300px;"
              v-model="form.wanchengqingkuang"></el-input>
            <div v-else style="width:300px">{{form.wanchengqingkuang||'-'}}</div>

          </div>
        </div>
      </template>
      <template v-slot:wanchengzhaopian>
        <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" v-if="type==='need'" multiple list-type="picture-card" class='upload-demo'
              :file-list="fileNeedList" ref="pictureUpload" style="width:400px" :auto-upload="true" :data="uploadOther"
              :on-success="handleNeedsuccess" :on-remove="handleNeedRemove">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <el-image v-else v-for="url in fileNeedList"
              style="width: 146px; height: 146px;display:inline-block;margin-right:5px;margin-bottom:5px"
              :src="url.url">
            </el-image>
          </div>
        </div>
      </template>

      <template v-slot:shenhe>
        <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-if="type==='complete'" v-model="form.shenhe">
              <el-radio label="整改完成">整改完成</el-radio>
              <el-radio label="重新整改">重新整改</el-radio>
            </el-radio-group>
            <div v-else style="width:300px">{{form.shenhe||'-'}}</div>
          </div>
        </div>
      </template>
      <template v-slot:footerContent>
        <Button type="primary" v-if="type!='end'"
          style='margin-left:5px;margin-bottom:5px;' @click="submit">确认</Button>
        <Button type="primary" ghost style='margin-left:5px;margin-bottom:5px;' @click="isShow=false">关闭</Button>

      </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() {
      //  待确认check  无需整改end  待整改need  已整改complete 重新整改need 已完成end
      return {
        isShow: false,
        type: 'add',
        id: '',
        tableName: 'flood_infos',
        listQuestion: [],
        listDep: [],
        fileList: [],
        fileNeedList: [],
        uploadOther: {
          token: ""
        },
        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
        form: {
          wentileixing: '',
          jianchariqi: '',
          jianchadidian: '',
          shangbaoren: '',
          jianyizhenggaikeshi: '',
          wentimiaoshu: '',
          zhenggaijianyi: '',
          wentizhaopian: [],
          // 待确认状态
          shifouxuyaozhenggai: '',
          shijizhenggaikeshi: '',
          // 待整改/重新整改
          wanchengriqi: '',
          wanchengqingkuang: '',
          wanchengzhaopian: [],

          // 已整改待审核
          shenhe: '',

          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
      },
      handleNeedRemove(file, fileList) {
        this.fileNeedList = fileList
      },
      handleNeedsuccess(response, file, fileList) {
        this.fileNeedList = 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
            })
          })
        }
        if (res.wanchengzhaopian_upload_details && res.wanchengzhaopian_upload_details.length > 0) {
          res.wanchengzhaopian_upload_details.map(item => {
            this.fileNeedList.push({
              url: item.url,
              id: item.id,
              name: item.original_name
            })
          })
        }
      },

      submit() {
        let _files = []
        let need_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 = []
        }
        if (this.fileNeedList.length > 0) {
          for (var h of this.fileNeedList) {
            if (h.response) {
              need_files.push(h.response.id)
            } else {
              need_files.push(h.id)
            }
          }
          this.form.wanchengzhaopian = need_files
        } else {
          this.form.wanchengzhaopian = []
        }

        //  待确认check  无需整改end  待整改need  已整改complete 重新整改need 已完成end

        switch (this.type) {
          case 'check':
            if(this.form.shifouxuyaozhenggai==='是'){
              this.form.zhuangtai = '待整改'
            }else{
              this.form.zhuangtai = '无需整改'
            }
            break;
          case 'need':
            this.form.zhuangtai = '已整改'
            break;
          case 'complete':
            if(this.form.shenhe==='整改完成'){
              this.form.zhuangtai = '已完成'
            }else{
              this.form.zhuangtai = '重新整改'
            }
            break;
        }

                console.log("this.form",this.form)

        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) {
          this.getDetail()
        } else {
          this.id = ''
          this.type = ''
          this.fileList = []
          this.fileNeedList  = []
          this.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

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