<template>
  <div class="container">
    <el-dialog
      :title="opType=='edit'?'编辑项目':'新增项目'"
      width="540px"
      top="30vh"
      :visible.sync="show"
      :close-on-click-modal="false"
      @close="close"
    >
      <el-form ref="formDialog" key="areaform" :model="form" label-width="130px" :rules="rules" label-suffix="：">
        <!-- <el-form-item label="所属企业">
          <span>{{ company.name }}</span>
        </el-form-item> -->
         <!-- <CompanySelect v-model="searchForm.companyId" @change="(e) => Object.assign(searchForm, e)" /> -->
        <el-form-item label="所属企业" prop="companyId">
              <!-- <el-select
              :disabled="opType == 'edit'"
              v-model="form.companyId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="filterEnt"
              clearable
              :loading="loading">
              <el-option
                v-for="item in entList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>

            </el-select> -->
            <span v-if="opType == 'edit'">{{form.companyName}}</span>
            <CompanySelect v-else :disabled="opType == 'edit'" v-model="form.companyId" @change="(e) => Object.assign(form, e)" />

          </el-form-item>
        <el-form-item label="项目名称" prop="name">
          <el-input v-model.trim="form.name" min=2 maxlength=50 placeholder="请输入项目名称" />
        </el-form-item>
        <!-- <el-form-item label="线下是否上传图片" prop="isUploadPic" v-if="opType=='add'">
           <el-radio v-model="form.isUploadPic" :label="true">是</el-radio>
           <el-radio v-model="form.isUploadPic" :label="false">否</el-radio>
        </el-form-item> -->
        <!-- <el-form-item label="网关" prop="gwflag">
          <el-switch
            v-model.trim="form.gwflag"
            :active-value="1"
            :inactive-value="0"
            active-color="#427cff"
            inactive-color="#dcdfe6"
          />
        </el-form-item> -->
        <!-- <el-form-item v-if="form.gwflag" label="网关产品" prop="productid">
          <el-select v-model.trim="form.productid" placeholder="请选择网关产品">
            <el-option v-for="item in productList" :key="item.id" :value="item.id" :label="item.pname" />
          </el-select>
        </el-form-item>
        <el-form-item label="访问次数限制" prop="visitstime">
          <el-input v-model.trim="form.visitstime" :min="1" :maxlength="9" placeholder="请输入访问次数限制" />
        </el-form-item> -->
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model.trim="form.remark"
            :rows="4"
            resize="none"
            show-word-limit
            maxlength="100"
            type="textarea"
            clearable
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitBtn">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { genNameValidator } from '@/utils/validator'
export default {
  props: {
    form: {
      type: Object,
      default: () => {
        return {}
      }
    },
    company: {
      type: Object,
      default: () => {
        return {}
      }
    },
    productList: {
      type: Object,
      default: () => {
        return []
      }
    },
    opType:{
      type:String,
      default:""
    }
  },
  data() {
    return {
      loading:false,
      entList:[],
      rules: {
        companyId:[{
            required: true,
            message: '请选择所属企业',
            trigger: 'blur'
          }],
        // 名称
        name: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          },{ validator: genNameValidator([2, 50]), trigger: 'blur' }
        ],
        // 项目编号
        // code: [
        //   {
        //     required: true,
        //     message: '请输入项目编号',
        //     trigger: 'blur'
        //   }
        // ],
        // // 授权密钥
        // accesssecret: [
        //   {
        //     required: true,
        //     message: '请生成授权密钥',
        //     trigger: 'blur'
        //   }
        // ],
        // // 访问次数限制
        // visitstime: [
        //   {
        //     required: true,
        //     message: '请输入访问次数限制',
        //     trigger: 'blur'
        //   },
        //   {
        //     pattern: /^\d+$/,
        //     message: '请输入数字',
        //     trigger: 'blur'
        //   },
        //   { validator: checkVisitstime, trigger: 'blur' }
        // ],
        // productid: [
        //   { required: true, message: '请选择网关产品', trigger: 'change' }
        // ]
      },
      show: false,
      // form:{
      //   companyId:"",
      //   name:"",
      //   isUploadPic:false,
      //   remark:""
      // }
    }
  },
  created() {

  },
  methods: {
    // filterEnt(query){
    //   this.entList =  this.or_entList.filter(item=>{
    //     return item.name.indexOf(query)>-1
    //   })
    // },
    // 所属项目树选择
    // handleDialogNodeClick(a) {
    //   this.$set(this.form, 'parentname', a.areaname)
    //   this.$set(this.form, 'parentid', a.id)
    //   this.$refs.areaSelect.blur()
    //   this.$refs.formDialog.validateField('parentname')
    // },
    submitBtn() {
      this.$refs['formDialog'].validate((valid) => {
        if (valid) {
          // if (!this.form.gwflag) {
          //   this.form.productid = ''
          // }
          this.$emit('submitBtn', this.form)
          // this.close()
        }
      })
    },
    open() {
      this.show = true
      this.$nextTick(() => {
        this.$refs['formDialog'].clearValidate()
        // this.entList=this.or_entList
      })
    },
    close() {
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
>>>.el-dialog .el-dialog__body {
    padding-top: 22px;
}

.withBtn_Slect {
    width: 85%;
}
</style>
