<!--
  @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="appName" />
              </td>
              <td colspan="3">
                <el-input v-model="formData.appName" />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="应用状态" prop="appStatus" />
              </td>
              <td colspan="3">
                <el-select v-model="formData.appStatus" placeholder="请选择" style="width:100%">
                  <el-option
                    v-for="(item,index) in appStatusList"
                    :key="index"
                    :label="item.typename"
                    :value="item.typecode"
                  />
                </el-select>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="应用类型" prop="appType" />
              </td>
              <td colspan="3">
                <el-select v-model="formData.appType" placeholder="请选择" style="width:100%">
                  <el-option
                    v-for="(item,index) in appTypeList"
                    :key="index"
                    :label="item.typename"
                    :value="item.typecode"
                  />
                </el-select>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="应用类别" prop="appCategory" />
              </td>
              <td colspan="3">
                <el-select v-model="formData.appCategory" placeholder="请选择" style="width:100%">
                  <el-option
                    v-for="(item,index) in appCategoryList"
                    :key="index"
                    :label="item.typename"
                    :value="item.typecode"
                  />
                </el-select>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="应用版本号" prop="appVersion" />
              </td>
              <td colspan="3">
                <el-input-number v-model="formData.appVersion" :precision="2" :step="0.1" :controls="false" />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="应用图标" prop="appIcon" />
              </td>
              <td colspan="3">
                <upload
                  ref="upload"
                  :data="fileData"
                  :auto-delete="true"
                  :auto-upload="true"
                  title=""
                  file-ref="fileRef"
                  class="fl"
                  accept="image/jpg,image/jpeg,image/png"
                  :success="changeFile"
                  :limit="1"
                />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="应用路径" prop="appUrl" />
              </td>
              <td colspan="3">
                <el-input v-model="formData.appUrl" />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="上新状态" prop="isNew" />
              </td>
              <td colspan="3">
                <el-radio-group v-model="formData.isNew">
                  <el-radio label="01">
                    是
                  </el-radio>
                  <el-radio label="00">
                    否
                  </el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="应用说明" prop="appDescripion" />
              </td>
              <td colspan="3">
                <el-input
                  v-model="formData.appDescripion"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="排序" prop="sort" />
              </td>
              <td colspan="3">
                <el-input-number v-model="formData.sort" :min="0" :max="99" :controls="false" />
              </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 downloadFile from '@comp/common/updownload/downloadFile'

import upload from '@comp/common/updownload/upload'
import { randomData } from '../../../assets/js/utils'
import { saveAppFunction } from '../../../api/appManagement/menu' // 附件上传组件
import { getFileDetail } from '@/api/common/uploadCenter'
import { readImageRoot2 } from '../../../api/common/uploadCenter'
export default {
  components: {
    downloadFile,
    upload,
    getFileDetail
  },
  props: {
    dialogData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {
        id: '',
        appName: '', // 应用名称
        appStatus: '', // 应用状态
        appType: '', // 应用类型
        appCategory: '', // app类别 00:H5;01:小程序;02:原生;
        appVersion: '', // 版本号
        appIcon: '', // 应用图标
        appUrl: '', // app路径
        isNew: '', // 上新状态
        appDescripion: '', // 应用说明
        sort: 0, // 排序
        fileFlag: null
      },
      rules: {
        appName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        appStatus: [{ required: true, message: '请选择', trigger: 'blur' }],
        appType: [{ required: true, message: '请选择', trigger: 'blur' }],
        appCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
        appVersion: [{ required: true, message: '不能为空', trigger: 'blur' }],
        appIcon: [{ required: true, message: '请上传', trigger: 'blur' }],
        appUrl: [{ required: true, message: '请输入', trigger: 'blur' }],
        isNew: [{ required: true, message: '请选择', trigger: 'blur' }],
        appDescripion: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      appTypeList: [],
      appCategoryList: [],
      appStatusList: [
        {
          typename: '下架',
          typecode: '00'
        },
        {
          typename: '上架',
          typecode: '01'
        }
      ],
      fileData: {
        fileType: 'app_function_icon',
        bizId: ''
      },
      readImageUrl: readImageRoot2, // 预览图片
      confirmLoading: false
    }
  },
  created() {
    this.formData.fileFlag = null
    if (!this.dialogData.row) {
      this.formData.id = randomData()
    } else {
      this.formData = this.dialogData.row
    }
    this.fileData.bizId = this.formData.id
    this.initGroup()
  },
  methods: {
    // 获取字典方法
    initGroup() {
      this.$store.dispatch('getGroupType', ['appType', 'appCategory']).then((data) => {
        // 遍历key存储相应的数据
        for (const key in data.bidTypeData) {
          /* 是否有数据*/
          if (data.bidTypeData[key]) {
            this[key] = data.bidTypeData[key]
          }
        }
      })
    },
    // 附件上传
    changeFile(file, fileList) {
      const f = fileList[0]
      console.log('ffffff', f)
      console.log('ffffff', file)
      if (f?.fileData?.fileId) {
        /* this.formData.fileId = f?.fileData?.fileId*/
      }
      getFileDetail(this.fileData).then(response => {
        this.formData.appIcon = this.readImageUrl + response.data[0].path
      })
    },
    sure() {
      // 校验输入内容
      this.$refs['form'].validate((valid, field) => {
        if (valid) { // 校验通过
          this.confirmLoading = true
          saveAppFunction(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>
