<template>
  <div id="digitalServiceForm">
    <el-row v-if="loading">
      <el-col :span="24">
        <el-col :span="24" class="top">
          <span class="shu"></span><span class="title">{{ formTitle }}</span>
        </el-col>
        <el-col :span="24" class="form">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="title">
              <el-input v-model="ruleForm.title" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="服务" prop="service">
              <el-input v-model="ruleForm.service" type="textarea" placeholder="请输入服务"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="image">
              <uploadImage
                      :limit="1"
                      :data="ruleForm.image"
                      :url="`/files/financial/custom/upload`"
                      @uploadSuccess="uploadSuccess"
                      @remove="remove"
              ></uploadImage>
            </el-form-item>
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="ruleForm.contact" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="ruleForm.email" placeholder="请输入电子邮箱"></el-input>
            </el-form-item>
            <el-form-item label="机构介绍" prop="description">
              <wang-editor v-model="ruleForm.description" placeholder="请输入机构介绍"></wang-editor>
            </el-form-item>
            <el-col :span="24" class="clickBtn">
              <el-button @click="submitForm">提交</el-button>
              <el-button @click="resetForm">取消</el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import uploadImage from '@/layout/custom/uploadImage.vue';
  import WangEditor from '@/components/wang-editor.vue';

  export default {
    name: 'digitalServiceForm',
    props: {
      ruleForm: null,
      loading: null,
    },
    components: {
      uploadImage, //图片
      WangEditor, //富文本
    },
    data: () => ({
      formTitle: '数字化服务管理',
      rules: {
        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        service: [{ required: true, message: '请输入服务', trigger: 'blur' }],
        image: [{ required: true, message: '请上传图片', trigger: 'blur'}],
        contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话'},
                { min: 11, max: 11, message: '请输入11位联系电话', trigger: 'blur' },
        ],
        description: [{ required: true, message: '请输入机构介绍', trigger: 'blur' }],
      },
    }),
    created() {},
    computed: {},
    methods: {
      submitForm() {
        if(!this.ruleForm.image){
          this.$message.error('请上传图片');
          return false;
        }
        if(!this.ruleForm.description){
          this.$message.error('请输入机构介绍');
          return false;
        }
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$emit('submitForm', { data: this.ruleForm });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        /*this.$emit('submitForm', { data: this.ruleForm });*/
      },
      resetForm() {
        this.$emit('resetForm');
      },
      uploadSuccess({ data }) {
        this.$set(this.ruleForm, 'image', data.uri);
      },
      remove(file) {
        this.$set(this.ruleForm, 'image', '')
      },
    },
  };
</script>

<style lang="less" scoped>
  .form {
    padding: 0 200px 0 0;
  }

  p {
    padding: 0;
    margin: 0;
  }

  .top .shu {
    float: left;
    width: 4px;
    height: 20px;
    background: rgba(233, 2, 29, 1);
  }

  .top .title {
    float: left;
    padding: 0 10px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: rgba(40, 40, 40, 1);
  }

  /deep/ .el-textarea__inner {
    min-height: 100px !important;
  }

  /deep/ .select {
    width: 632px;
  }

  .selects {
    width: 473px;
    margin: 0 15px 0 0;
  }

  /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #e9021d;
  }

  /deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #e9021d;
    background: #e9021d;
  }

  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #e9021d;
  }

  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #e9021d;
    border-color: #e9021d;
  }

  /deep/ .el-checkbox-button,
  .el-checkbox-button__inner {
    margin: 0 15px 0 0;
  }

  /deep/ .el-checkbox-button__inner {
    padding: 7px 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button__inner:hover {
    color: #e9021d;
  }

  /deep/ .el-checkbox-button:first-child .el-checkbox-button__inner {
    border-left: 1px solid #ccc;
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button:last-child .el-checkbox-button__inner {
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
    color: #e9021d;
    background-color: #ffffff;
    border-color: #e9021d;
  }

  /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
    box-shadow: none;
  }

  /deep/ .el-switch.is-checked .el-switch__core {
    border-color: #e9021d;
    background-color: #e9021d;
  }

  .clickBtn .el-button {
    width: 100px;
    height: 40px;
    padding: 0;
    color: #ffffff;
    background: #b9b9b9;
    border-radius: 4px;
    margin: 40px;
  }

  .clickBtn {
    text-align: center;
    margin: 40px 0;
    border-top: 1px solid #ccc;
  }

  .clickBtn .el-button:first-child {
    background-color: #e9021d;
  }
</style>
