<template>
  <div class="popup">
    <van-popup v-model="show" style="width: 95%;height: calc(100% - 50px);" closeable :zIndex="10">
			<div class="popupTitle">
				<span v-if="type==1">添加应用</span>
				<span v-if="type==2">修改应用</span>
			</div>
      <div class="box" v-loading="loading">
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <el-form-item label="应用名称" prop="nname">
            <el-input v-model="form.nname" placeholder="请输入应用名称"></el-input>
          </el-form-item>
          <div style="display: flex;width: 100%;justify-content: space-between;">
            <el-form-item label="应用标签" prop="nlabel">
              <el-input v-model="form.nlabel" placeholder="请输入应用标签" style="width: 170px"></el-input>
            </el-form-item>
            <el-form-item label="应用类型" prop="ntype">
              <el-select v-model="form.ntype" placeholder="请选择应用类型" style="width: 170px;">
                <el-option  style="z-index: 2024;" v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="应用链接" prop="nurl">
            <el-input v-model="form.nurl" placeholder="请输入应用链接"></el-input>
          </el-form-item>
          <el-form-item label="应用简介" prop="ndetail">
            <el-input
              type="textarea"
              v-model="form.ndetail"
              style="width: 100%;"
              :rows="3"
              resize="none"
              placeholder="请输入应用简介"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限管理" style="display: flex;flex-direction: column;align-items: flex-start;">
            <el-radio-group v-model="form.njuri">
              <el-radio label="1">私有</el-radio>
              <el-radio label="2">公开组织</el-radio>
              <el-radio label="3">公开所有人</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

				<div class="b_bottom">
					<el-button size="mini" @click="close()">取消</el-button>
					<el-button size="mini" type="primary" @click="submitBtn('ruleForm')">确定</el-button>
				</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
let validUrl = (rule, value, callback) => {
  if (value) {
    // 验证链接是否有效
    try {
      new URL(value)
      callback()
    } catch (error) {
      return callback(new Error('请输入有效的链接'))
    }
  }
}

export default {
  props: {
    typeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: false,
			loading:false,
			type:1,
      form: {
        nname: '',
        nlabel: '',
        nurl: '',
        ntype: '',
        njuri: '1',
        nstand: '',
        njson: ''
      },
      rules: {
        nname: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
        nurl: [{ required: true, message: '请输入应用链接', trigger: 'blur' }],
        nlabel: [{ required: true, message: '请输入应用标签', trigger: 'blur' }],
        ntype: [{ required: true, message: '请选择应用类型', trigger: 'blur' }],
        // ndetail:[{required:true,message:"请输入应用简介",trigger:"blur"}],
        njuri: [{ required: true, message: '请选择权限管理', trigger: 'blur' }],
        nurl: [
          { required: true, message: '请输入应用链接', trigger: 'blur' },
          { validator: validUrl, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    open(data) {
      if (data && data.type === 2) {
        this.form = data.form
        this.type = data.type
      } else {
        this.form = {
          nname: '',
          nlabel: '',
          ndetail: '',
          nurl: '',
          ntype: '',
          njuri: '1',
          nstand: 'cn',
          njson: ''
        }
      }
      this.loading = false
      this.show = true
    },
    close(flag = false) {
      if (this.loading && !flag) return this.$message.info('请稍等...')
      this.show = false
      this.init()
    },
    init() {
      this.form = {
        nname: '',
        nlabel: '',
        ndetail: '',
        nurl: '',
        ntype: '',
        njuri: '1',
        nstand: 'cn',
        njson: ''
      }
      this.loading = false
    },
    submitBtn(ref) {
      if (this.loading) return this.$message.info('请稍等...')
      this.$refs[ref].validate(valid => {
        if (valid) {
          this.loading = true
          this.$emit('success', this.form, this.type)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  padding: 40px 20px 20px 20px;
  overflow: auto;
	box-sizing: border-box
}

.popupTitle{
	font-size: 18px;
	font-weight: bold;
	position: absolute;
	top: 10px;
	left:20px;
}

.b_bottom{
	position: absolute;
	right: 20px;
	bottom:20px;
}

:deep(.el-select-dropdown){
	z-index: 2003 !important;
}
</style>
