<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-dialog title="评论" :visible.sync="selfVisible" width="500px" @close="close" @open="open">
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="进展时间" prop="progDate">
            <el-date-picker
              v-model="form.progDate"
              placeholder="请选择进展时间"
              style="width: 100%"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件" prop="progFile">
            <!-- 此处附件上传组件不可用，等以后再调整 -->
            <!-- <el-button size="mini" type="primary">上传</el-button> -->
            <el-link v-show="form.progFile != ''" @click="showFile(form.progFile)">查看附件</el-link>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="进展说明" prop="progDesc">
            <el-input v-model="form.progDesc" placeholder="请输入进展说明" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <!-- eslint-disable-next-line vue/no-mutating-props -->
      <el-button @click="selfVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import taskApi from '@/api/plat/task'

  export default {
    name: 'CommentAdd',
    props: {
      selfVisible: {
        type: Boolean,
        default: false,
      },
      theTask: {
        type: Object,
        // eslint-disable-next-line vue/require-valid-default-prop
        default: {},
      },
      doRefresh: {
        type: Function,
        default: undefined,
      },
    },
    data() {
      return {
        // 新增数据表单
        form: {
          taskId: '',
          progDate: '',
          progDesc: '',
          progFile: '',
          remark: '',
        },
        // 校验规则
        rules: {
          progDesc: [{ required: true, message: '进展说明不能为空', trigger: 'blur' }],
        },
      }
    },
    watch: {
      selfVisible(val) {
        this.$emit('update:selfVisible', val)
      },
    },
    methods: {
      // 打开弹窗
      open() {
        this.getData()
        if (this.$refs['form']) {
          this.$refs['form'].resetFields()
        }
        this.form.taskId = ''
        this.form.progDate = ''
        this.form.progDesc = ''
        this.form.progFile = ''
        this.form.remark = ''
      },
      // 关闭弹窗
      close() {
        if (this.$refs['form']) {
          this.$refs['form'].resetFields()
        }
        // eslint-disable-next-line vue/no-mutating-props
        this.selfVisible = false
      },
      // 查看附件
      showFile(path) {
        const a = document.createElement('a')
        a.href = path // 文件链接
        a.download = path // 文件名，跨域资源download无效
        a.click()
        a.remove()
      },
      // 保存数据
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            // eslint-disable-next-line vue/no-mutating-props
            this.selfVisible = false
            this.form.taskId = this.theTask.id
            const { msg } = await taskApi.createTaskProgress(this.form)
            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            if (this.doRefresh) {
              this.doRefresh()
            }
          }
        })
      },
    },
  }
</script>
