<!--
  @description:
  @author: zxl
  @routerPath:
  @date: 2022-12-28 15:21
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogData.flag"
      :close-on-click-modal="false"
      title="帮助中心"
      width="40vw"
      custom-class="el-dialog__body-p0"
      top="10vh"
    >
      <div class="p16">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          :inline-message="true"
        >
          <table class="from_table">
            <tr>
              <td>
                <el-form-item label="标题" prop="title" />
              </td>
              <td colspan="3">
                <el-input v-model="formData.title" maxlength="200" show-word-limit />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="详情地址" prop="detailUrl" />
              </td>
              <td colspan="3">
                <el-input v-model="formData.detailUrl" maxlength="200" show-word-limit />
              </td>
            </tr>

            <tr>
              <td>
                <el-form-item label="内容" prop="content" />
              </td>
              <td colspan="3">
                <el-input
                  v-model="formData.content"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="请输入内容"
                  maxlength="10000"
                />
              </td>
            </tr>
          </table>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button :loading="confirmLoading" type="primary" @click="sure()">
          确认
        </el-button>
        <el-button @click="dialogData.flag=false">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { saveAppHelpCenter } from '../../../api/appManagement/helpCenter'

export default {
  components: {

  },
  props: {
    dialogData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {
        id: '',
        title: '', // 标题
        detailUrl: '', // 详情地址
        content: '' // 内容
      },
      rules: {
        title: [{ required: true, message: '不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      confirmLoading: false
    }
  },
  created() {
    if (this.dialogData.row) {
      this.formData = this.dialogData.row
    }
  },
  methods: {
    // 附件上传
    changeFile(file, fileList) {
      const f = fileList[0]
      console.log('ffffff', f)
      if (f?.fileData?.fileId) {
        /* this.formData.fileId = f?.fileData?.fileId*/
      }
    },
    sure() {
      // 校验输入内容
      this.$refs['form'].validate((valid, field) => {
        if (valid) { // 校验通过
          this.confirmLoading = true
          saveAppHelpCenter(this.formData).then(res => {
            this.confirmLoading = false
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.$emit('change', true)
            this.dialogData.flag = false
          }).catch(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  }

}
</script>

<style scoped>

</style>
