<template>
  <div class="detail_contain">
    <p class="now_page_title">
      我的服务 / 注册发布的服务 /
      <span>服务编辑</span>
    </p>
    <div class="info_contain">
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item>
          <p class="formname">服务名称：</p>
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <p class="formname">服务描述：</p>
          <el-input v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <p class="formname">服务领域：</p>
          <el-input v-model="form.area"></el-input>
        </el-form-item>
        <el-form-item>
          <p class="formname">所属组织：</p>
          <el-input v-model="form.origin"></el-input>
        </el-form-item>
        <el-form-item>
          <p class="formname">服务封面：</p>
          <upload-file
            :multiple="false"
            :max="1"
            type="picture"
            :readOnly="false"
            fit="fill"
            :list="imgList"
            @getNewList="getNewList"
          ></upload-file>
        </el-form-item>
        <el-form-item>
          <p class="formname">接口编码：</p>
          <el-input v-model="form.code"></el-input>
        </el-form-item>   
        <el-form-item>
          <p class="formname">开放程度：</p>
          <el-radio-group v-model="form.resource">
            <el-radio label="共享"></el-radio>
            <el-radio label="受限"></el-radio>
            <el-radio label="敏感"></el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import uploadFile from '../components/upload_file'
export default {
  props: {},
  components: {
    uploadFile
  },
  data() {
    return {
        form: {
          name: '',
          desc:'',
          area:'',
          origin:'',
          code:'',
          resource: '',
        },
        imgList: [],
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
      onSubmit() {
        console.log('submit!');
      },
      getNewList(val) {
        console.log(val);
      }
  }
};
</script>


<style>
.info_contain .el-input__inner{
  background-color: #f7f8f9;
}
</style>

<style scoped>
.detail_contain {
  width: 100%;
  padding: 0 20px;
}
.info_contain {
  padding: 25px 20px;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
}
.now_page_title {
  margin: 15px 0;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
}
.formname{
  color: #58617a;
}
</style>
