<template>
  <div id="mainForm">
    <el-row>
      <el-col :span="24" class="mainForm">
        <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-col :span="12">
              <el-form-item label="名称名称:" prop="name1">
                <el-input v-model="ruleForm.name1" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="禁止输入:" prop="name2">
                <el-input v-model="ruleForm.name2" placeholder="请输入" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名称名称:" prop="name3">
                <el-input v-model="ruleForm.name3" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名称名称:" prop="name4">
                <el-input v-model="ruleForm.name4" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="文本框:" prop="textarea">
                <el-input v-model="ruleForm.textarea" type="textarea" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="选择" prop="change">
                <el-select class="select" v-model="ruleForm.change" placeholder="请选择">
                  <el-option label="选择一" value="0"></el-option>
                  <el-option label="选择二" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="选择" prop="change1">
                <el-select class="select" v-model="ruleForm.change1" placeholder="请选择">
                  <el-option label="选择一" value="0"></el-option>
                  <el-option label="选择二" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="多选联动:">
                <el-select class="selects" v-model="ruleForm.profession_one" placeholder="请选择" @change="changeyi">
                  <el-option v-for="item in yiji" :key="item.value" :label="item.name" :value="item.code"> </el-option>
                </el-select>
                <el-select class="selects" v-model="ruleForm.profession_two" placeholder="请选择" @change="changeer">
                  <el-option v-for="item in erji" :key="item.value" :label="item.name" :value="item.code"> </el-option>
                </el-select>
                <el-select class="selects" v-model="ruleForm.profession_three" placeholder="请选择" @change="changesan">
                  <el-option v-for="item in sanji" :key="item.value" :label="item.name" :value="item.code"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="单选" prop="radio">
                <el-radio-group v-model="ruleForm.radio">
                  <el-radio label="选择1"></el-radio>
                  <el-radio label="选择2"></el-radio>
                  <el-radio label="选择3"></el-radio>
                  <el-radio label="选择4"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="多选" prop="checkbox">
                <el-checkbox-group v-model="ruleForm.checkbox">
                  <el-checkbox label="选择1" name="checkbox"></el-checkbox>
                  <el-checkbox label="选择2" name="checkbox"></el-checkbox>
                  <el-checkbox label="选择3" name="checkbox"></el-checkbox>
                  <el-checkbox label="选择4" name="checkbox"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="条件" prop="term">
                <el-checkbox-group v-model="ruleForm.term">
                  <el-checkbox-button v-for="termName in termList" :label="termName" :key="termName">{{ termName }}</el-checkbox-button>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="开关" prop="onDown">
                <el-switch v-model="ruleForm.onDown"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="上传文件" prop="file">
                <upload
                  :limit="1"
                  :data="ruleForm.file"
                  type="file"
                  :isBtn="true"
                  tip="上传说明上传说明上传说明"
                  list-type="text"
                  :url="`/files/test/upload`"
                  @upload="uploadSuccess"
                ></upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="上传文件" prop="file1">
                <upload
                  :limit="1"
                  :data="ruleForm.file1"
                  type="file1"
                  :isBtn="true"
                  :downBtn="true"
                  @clickDown="clickDown"
                  list-type="text"
                  :url="`/files/test/upload`"
                  @upload="uploadSuccess"
                ></upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="上传图片" prop="file2">
                <upload
                  :limit="1"
                  :data="ruleForm.file2"
                  type="file2"
                  tip="请上传500×500px的图片，大小不超过2M"
                  :url="`/files/test/upload`"
                  @upload="uploadSuccess"
                ></upload>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="clickBtn">
              <el-button>确定</el-button>
              <el-button>取消</el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/upload.vue';
export default {
  name: 'mainForm',
  props: {
    formTitle: null,
    ruleForm: null,
    yiji: null,
    erji: null,
    sanji: null,
    siji: null,
  },
  components: {
    upload, //图片上传
  },
  data: () => ({
    rules: {
      name1: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      name2: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      textarea: [{ required: true, message: '请输入文本框', trigger: 'blur' }],
      change: [{ required: true, message: '请选择', trigger: 'blur' }],
      radio: [{ required: true, message: '请选择', trigger: 'blur' }],
      checkbox: [{ required: true, message: '请选择', trigger: 'blur' }],
      term: [{ required: true, message: '请选择', trigger: 'blur' }],
      onDown: [{ required: true, message: '请选择', trigger: 'blur' }],
      file: [{ required: true, message: '请选择', trigger: 'blur' }],
      file1: [{ required: true, message: '请选择', trigger: 'blur' }],
      file2: [{ required: true, message: '请选择', trigger: 'blur' }],
    },
    termList: ['条件1', '条件2', '条件3', '条件4'],
  }),
  created() {},
  computed: {},
  methods: {
    changeyi(code) {
      console.log(code);
      this.$emit('yi', code);
    },

    changeer(code) {
      console.log(code);
      this.$emit('er', code);
    },
    changesan(code) {
      this.$emit('san', code);
    },

    uploadSuccess({ type, data }) {
      if (type !== 'file') {
        let arr = _.get(this.ruleForm, type);
        if (arr !== undefined) {
          this.ruleForm[type].push({ name: data.name, uri: data.uri });
        } else {
          let newArr = [{ name: data.name, uri: data.uri }];
          this.$set(this.ruleForm, `${type}`, newArr);
        }
      } else {
        this.$set(this.ruleForm, `${type}`, data.uri);
      }
    },
    clickDown() {
      console.log('山川');
    },
  },
};
</script>

<style lang="less" scoped>
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>
