<template>
  <div>
    <Modal v-model="showEditModal" v-drag :mask-closable="false" width="700" class="zIndex-1100">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <div>
        <Form
          id="edit-form-qc-sub-edit"
          ref="formObj"
          :model="formObj"
          :rules="ruleValidate"
          :label-width="90"
        >
          <Form-item label="监控方法" prop="method" class="width-48">
            <Input v-model="formObj.method" name="method" placeholder="请输入监控方法" /></Input>
          </Form-item>
          <Form-item label="监控项目名称及参数" prop="name" class="width-48">
            <input name="mainPlanId" type="hidden">
            <Input v-model="formObj.name" name="name" placeholder="请输入监控项目名称及参数" /></Input>
          </Form-item>
          <Form-item label="频次" prop="frequency" class="width-48">
            <InputNumber
              v-model="formObj.frequency"
              :min="0"
              :step="1"
              name="frequency"
              style="width:100%"
              placeholder="请输入频次"
            />
          </Form-item>
          <Form-item label="时间" prop="time" class="width-48">
            <DatePicker
              v-model="formObj.time"
              type="date"
              format="yyyy-MM-dd"
              placeholder="请选择时间"
              style="width: 230px"
              @on-change="_dateChange"
            />
          </Form-item>
          <Form-item label="监控单位" prop="monitorUnit">
            <Input v-model="formObj.monitorUnit" name="monitorUnit" placeholder="请输入监控单位" /></Input>
          </Form-item>
          <Form-item label="责任人" prop="monitorMan">
            <Input v-model="formObj.monitorMan" name="monitorMan" placeholder="请输入责任人" /></Input>
          </Form-item>
          <Form-item label="参加人员/部门" prop="department">
            <Input v-model="formObj.department" name="department" placeholder="请输入参加人员/部门" /></Input>
          </Form-item>
          <Form-item label="备注" prop="remark">
            <Input v-model="formObj.remark" name="remark" placeholder="请输入备注" /></Input>
          </Form-item>
          <Form-item label="监控结果" prop="monitorResult">
            <Input v-model="formObj.monitorResult" name="monitorResult" placeholder="请输入监控结果" /></Input>
          </Form-item>
          <Form-item label="实施人员" prop="implementer">
            <Input v-model="formObj.implementer" name="implementer" placeholder="请输入实施人员" /></Input>
          </Form-item>
          <Form-item label="完成日期" prop="completion">
            <Date-picker
              v-model="formObj.completion"
              type="date"
              placeholder="完成日期"
              name="completion"
              style="width: 100%;"
              :editable="false"
              @on-change="_datefinishChange"
            />
          </Form-item>
        </Form>
      </div>
      <div slot="footer">
        <Button type="ghost" style="margin-left: 8px" @click="_cancel">
          取消
        </Button>
        <Button type="primary" @click="_ok">
          提交
        </Button>
      </div>
    </Modal>
    <Modal v-model="visible" title="查看图片" class="zIndex-1200">
      <img v-if="visible" :src="fileUrl" style="width: 100%">
    </Modal>
    <!--弹框-->
    <ModalConfirm
      ref="confirmModal"
      :content="modalContent"
      :btn-modal-list="btnModalList"
      @on-result-change="_modalResult"
    />
    <ModalConfirm
      ref="confirmModalDownload"
      :content="content"
      :btn-modal-list="btnModalList"
      @on-result-change="_downloadResult"
    />
  </div>
</template>
<script>
/**
 * 添加编辑人员证书表
 */
import global from '../../../api/config'
import ModalConfirm from '../../../components/base/ModalConfirm'
import { qcSubPlan } from '../../../api'
export default {
  components: { ModalConfirm },
  data() {
    return {
      id: '',
      modalTitle: '',
      formObj: {
        name: undefined,
        frequency: 0,
        beginDate: undefined,
        time: undefined,
        monitorUnit: undefined,
        monitorMan: undefined,
        department: undefined,
        remark: undefined,
        monitorResult: undefined,
        implementer: undefined,
        completion: undefined,
        method: undefined
      },
      warningPeriod: 1,
      ruleValidate: {
        name: [
          {
            required: true,
            message: '监控项目名称及参数不能为空',
            trigger: 'blur'
          }
        ]
      },
      showEditModal: false,
      fileAction: global.baseURL + '/v1/staff_professional/uploadFile',
      fileObj: {
        relId: 0,
        type: 2
      },
      fileList: [],
      visible: false,
      fileUrl: '',
      fileIds: [],
      modalContent: '',
      btnModalList: [
        { type: '', name: '取消' },
        { type: 'primary', name: '确定' }
      ],
      fileDel: '',
      fileDownload: '',
      content: '确认下载该文件?'
    }
  },
  methods: {
    _closeModal() {
      this.$refs.confirmModal._closeModal()
    },
    _modalResult(msg) {
      switch (msg) {
        case '取消':
          this._closeModal()
          break
        case '确定':
          this._deteleFile(this.fileDel)
          break
      }
    },
    _downloadResult(msg) {
      switch (msg) {
        case '取消':
          this._closeModal()
          break
        case '确定':
          this._downloadOk(this.fileDownload)
          break
      }
    },
    _resultChange(msg) {
      this.formObj = {}
      this.showEditModal = false
      this.$Message.success(msg)
      this.$emit('on-result-change')
    },

    _datefinishChange(data) {
      this.formObj.completion = data
    },
    _dateChange(data) {
      this.formObj.time = data
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          if (this.$string(this.id).isEmpty()) {
            this._save(this.formObj)
          } else {
            // 编辑
            this._edit({ id: this.formObj.id, obj: this.formObj })
          }
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    // 添加保存
    _save: async function(data) {
      // 添加
      const result = await qcSubPlan.add(data)
      this._resultChange(result, '添加成功')
    },
    // 编辑保存
    _edit: async function(data) {
      // 添加
      const result = await qcSubPlan.edit(data)
      // this._resultChange(result, '编辑成功')
      if (result) {
        this.formObj = {}
        this.showEditModal = false
        this.$Message.success('编辑成功')
        this.$emit('on-result-change')
      }
    },
    _cancel() {
      this.showEditModal = false
    },
    _open(mainPlanId, formObj) {
      $('input[name=mainPlanId]').val(mainPlanId)
      this.showEditModal = true
      this.$refs.formObj.resetFields()
      this.formObj.mainPlanId = mainPlanId
      if (formObj === '' || undefined === formObj) {
        this.id = ''
        this.fileList = []
        this.modalTitle = '添加计划详情'
      } else {
        this.id = formObj.id
        this.formObj = formObj
        this._showTime(formObj)
        this.modalTitle = '编辑计划详情'
      }
    },
    _showTime(formObj) {
      // 回显时间
      if (formObj.completion === undefined) {
        this.formObj.completion = ''
      } else {
        this.formObj.completion = new Date(formObj.completion)
        $('input[name="completion"]').val(
          this.$dateformat(formObj.completion, 'yyyy-mm-dd')
        )
      }
      if (formObj.time === undefined) {
        this.formObj.time = ''
      } else {
        this.formObj.time = new Date(formObj.time)
        $('input[name="time"]').val(
          this.$dateformat(formObj.time, 'yyyy-mm-dd')
        )
      }
      this.formObj.ctime = undefined
      if (formObj.endDate === undefined) {
        this.formObj.endDate = ''
      } else {
        this.formObj.endDate = new Date(formObj.endDate)
        $('input[name="endDate"]').val(
          this.$dateformat(formObj.endDate, 'yyyy-mm-dd')
        )
      }

      if (formObj.beginDate === undefined) {
        this.formObj.beginDate = ''
      } else {
        this.formObj.beginDate = new Date(formObj.beginDate)
        $('input[name="beginDate"]').val(
          this.$dateformat(formObj.beginDate, 'yyyy-mm-dd')
        )
      }
    },
    _handleView(data) {
      this.fileUrl = data.fileUrl
      if (
        this.fileUrl.indexOf('jpg') > -1 ||
        this.fileUrl.indexOf('png') > -1 ||
        this.fileUrl.indexOf('jpeg') > -1
      ) {
        this.visible = true
      } else {
        this.$Message.warning({
          content: '非图片文件无法查看，请下载查看',
          duration: 3
        })
        this.visible = false
      }
    },
    _downloadFile(file) {
      // 下载文件
      this.fileDownload = file
      this.$refs.confirmModalDownload._openModal()
    },
    _downloadOk(file) {
      const url =
        global.baseURL + '/res/v1/staff_professional/downLoadFile?id=' + file.id
      window.open(url)
      this.$refs.confirmModalDownload._closeModal()
    },
    _handleRemove(file, content) {
      // 删除
      this.fileDel = file
      this.modalContent = content || '确定删除该文件？'
      this.$refs.confirmModal._openModal()
    },
    _handleBeforeUpload() {},
    _handleSuccess(response, file, fileList) {
      if (response.success) {
        this.$Message.success('上传成功！')
        this.fileList.push(response.data)
      } else {
        this.$Message.error('上传失败！')
      }
    }
  }
}
</script>
