<template>
  <div>
    <el-dialog :visible.sync="modals" width="720px" :title="titleFrom" :close-on-click-modal="false" append-to-body>
      <el-form ref="formValidate" :model="formValidate" label-width="100px" :rules="ruleValidate" @submit.native.prevent>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="数据组名称：" prop="name">
              <el-input v-model="formValidate.name" placeholder="请输入数据组名称" style="width: 90%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数据字段：" prop="configName">
              <el-input v-model="formValidate.configName" placeholder="请输入数据字段" style="width: 90%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数据简介：" prop="info">
              <el-input v-model="formValidate.info" placeholder="请输入数据简介" style="width: 90%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-for="(item, index) in formValidate.fieldsArr" :key="index">
            <el-col v-bind="grid">
              <el-form-item :label="'字段' + (index + 1) + '：'" label-width="90px" :prop="'fieldsArr.' + index + '.name'"
                :rules="{ required: true, message: '请输入字段名称：姓名', trigger: 'blur' }">
                <el-input v-model="item.name" placeholder="字段名称：姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col v-bind="grid" class="goupBox">
              <el-form-item label-width="0" :prop="'fieldsArr.' + index + '.title'"
                :rules="{ required: true, message: '请输入字段配置名', trigger: 'blur' }">
                <el-input v-model="item.title" placeholder="字段配置名：name"></el-input>
              </el-form-item>
            </el-col>
            <el-col v-bind="grid" prop="type" class="goupBox mr15">
              <el-form-item :prop="'fieldsArr.' + index + '.type'" :rules="{ required: true, message: '请选择字段类型', trigger: 'change' }"
                label-width="0">
                <el-select placeholder="字段类型" v-model="item.type">
                  <el-option value="input">文本框</el-option>
                  <el-option value="textarea">多行文本框</el-option>
                  <el-option value="radio">单选框</el-option>
                  <el-option value="checkbox">多选框</el-option>
                  <el-option value="select">下拉选择</el-option>
                  <el-option value="upload">单图</el-option>
                  <el-option value="uploads">多图</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <i class="el-icon-close cur" @click="delGroup(index)"></i>
            </el-col>
            <el-col :span="24" v-if="item.type === 'radio' || item.type === 'checkbox' || item.type === 'select'">
              <el-form-item :prop="'fieldsArr.' + index + '.param'" :rules="{ required: true, message: '请输入参数方式', trigger: 'blur' }">
                <el-input type="textarea" :rows="4" placeholder="参数方式例如:\n1=白色\n2=红色\n3=黑色" v-model="item.param" style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col>
            <el-form-item>
              <el-button type="primary"  @click="addType">添加字段</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="handleReset">取 消</el-button>
        <el-button type="primary"  @click="handleSubmit('formValidate')" :disabled="valids">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { groupAddApi, groupInfoApi } from "@/api/system/group";
export default {
  name: 'menusFrom',
  props: {
    groupId: {
      type: Number,
      default: 0,
    },
    titleFrom: {
      type: String,
      default: '',
    },
    addId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      iconVal: '',
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      modal12: false,
      ruleValidate: {
        name: [{ required: true, message: '请输入数据组名称', trigger: 'blur' }],
        configName: [{ required: true, message: '请输入数据字段', trigger: 'blur' }],
        info: [{ required: true, message: '请输入数据简介', trigger: 'blur' }],
        names: [{ required: true, message: '请输入字段名称', trigger: 'blur' }],
      },
      FromData: [],
      valids: false,
      list2: [],
      formValidate: {
        name: '',
        configName: '',
        info: '',
        fieldsArr: [],
        cate_id: 0,
      },
    };
  },
  watch: {
    addId(n) {
      if (n === 'addId') {
        this.formValidate.fieldsArr = [];
      }
    },
  },
  methods: {
    // 点击添加字段
    addType() {
      this.formValidate.fieldsArr.push({
        name: '',
        title: '',
        type: '',
        param: '',
      });
    },
    // 删除字段
    delGroup(index) {
      this.formValidate.fieldsArr.splice(index, 1);
    },
    // 详情
    fromData(id) {
      groupInfoApi(id)
        .then(async (res) => {
          this.formValidate.name = res.data.name;
          this.formValidate.configName = res.data.configName;
          this.formValidate.info = res.data.info;
          this.formValidate.fieldsArr = JSON.parse(res.data.fields)
          this.formValidate.fields = ''
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    // 提交
    handleSubmit(name) {
      this.formValidate.fields =  JSON.stringify(this.formValidate.fieldsArr)
      let data = {
        url: this.groupId ? `/mapi/system/group/${this.groupId}` : '/mapi/system/group',
        method: 'post',
        datas: this.formValidate,
      };
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.formValidate.fieldsArr.length === 0) return this.$message.error('请添加字段');
          groupAddApi(data)
            .then(async (res) => {
              this.$modal.msgSuccess('添加成功')
              this.modals = false;
              this.$refs[name].resetFields();
              this.formValidate.fieldsArr = [];
              this.$emit('getList');
            })
            .catch((res) => {
              console.log("结果", res)
              this.$message.error("重试");
            });
        } else {
          if (!this.formValidate.name) return this.$message.error('请添加数据组名称！');
          if (!this.formValidate.configName) return this.$message.error('请添加数据字段！');
          if (!this.formValidate.info) return this.$message.error('请添加数据简介！');
        }
      });
    },
    handleReset() {
      this.modals = false;
      this.$refs['formValidate'].resetFields();
      this.$emit('clearFrom');
    },
  },
  created() { },
  mounted() { },
};
</script>

<style scoped>
.cur {
  cursor: pointer;
}

.goupBox ::v-deep .ivu-form-item-content {
  margin-left: 43px !important;
}
</style>
