<!--
  @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="platformName" />
              </td>
              <td colspan="3">
                <el-input v-model="formData.platformName" placeholder="最多允许输入20个字符" maxlength="20" show-word-limit />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="客服电话" prop="serviceTel" />
              </td>
              <td colspan="3">
                <el-input v-model="formData.serviceTel" placeholder="最多允许输入20个字符" maxlength="20" show-word-limit />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="客服qq" prop="serviceQq" />
              </td>
              <td colspan="3">
                <el-input v-model="formData.serviceQq" placeholder="最多允许输入20个字符" maxlength="20" show-word-limit />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="平台说明" prop="platformDesc" />
              </td>
              <td colspan="3">
                <el-input
                  v-model="formData.platformDesc"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </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 { saveAppPlatformConfig } from '../../../api/appManagement/platform'
import { checkLinktel } from '../../../assets/js/validate'

export default {
  components: {

  },
  props: {
    dialogData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {
        id: '',
        platformName: '', //  平台名称
        platformDesc: '', // 平台说明
        serviceTel: '', // 客服电话
        serviceQq: ''// 客服qq
      },
      rules: {
        platformName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        platformDesc: [{ required: true, message: '不能为空', trigger: 'blur' }],
        serviceQq: [{ required: true, message: '不能为空', trigger: 'blur' }],
        serviceTel: [{ required: true, validator: checkLinktel, 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
          saveAppPlatformConfig(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>
