<template>
  <el-form v-model="formModel" :rules="createRules">
    <el-form-item prop="" label="分组">
      <el-select v-model="formModel.itemGroupId" @change="onGroupChanged">
        <el-option v-for="group in groupList"
                   :key="group.groupId"
                   :label="group.groupLabel"
                   :value="group.groupId">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="parentItemId" label="父组件">
    <el-select v-model="formModel.parentItemId">
      <el-option v-for="pi in parentItemsList"
                 :key="pi.id"
                 :label="pi.label"
                 :value="pi.id">
      </el-option>
    </el-select>
    </el-form-item>
  </el-form>
</template>
<script>

export default {
  data() {
    return {
      // 表单内容
      formModel: {
        customerId: null,
        formId: null,
        itemGroupId: null,
        parentItemId: null,
        label: null,
        itemType: null,
        required: null,
        optionSourceType: null,
        optionSourceValue: null
      },

      createRules: {},

      formList: [],
      // 分组列表
      groupList: [],

      parentItemsList: []
    }


  },

  activated() {
  },

  methods: {
    initData({formId: formId, customerId: customerId}) {
      this.formModel.formId = formId;
      this.formModel.customerId = customerId;
      this.loadGroups();
    },

    // 加载分组列表
    loadGroups() {
      this.$http.get(`/oper/customize/icform/config/listGroups?formId=${this.formModel.formId}&customerId=${this.formModel.customerId}`)
          .then((resp) => {
            let { data: result } = resp;
            if (result.code !== 0) {
              this.$message({
                type: 'error',
                message: result.msg
              })
              return;
            }

            this.groupList = result.data;
          })
    },

    // /**
    //  * 加载表单列表
    //  */
    // loadFormList() {
    //   debugger
    //   this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formModel.customerId}&formName=&pageNo=1&pageSize=100`)
    //       .then(({data: httpdata, status: httpStatus}) => {
    //         if (httpdata.code === 0) {
    //           this.formList = httpdata.data.list;
    //         } else {
    //           this.$message({
    //             type: 'error',
    //             nessage: res.msg
    //           })
    //         }
    //       })
    // },

    /**
     * 分组选中
     */
    onGroupChanged() {
      this.$http.get(`/oper/customize/icform/config/listItems?customerId=${this.formModel.customerId}&formId=${this.formModel.formId}&itemGroupId=${this.formModel.itemGroupId}`)
          .then((resp) => {
            let result = resp.data
            if (result.code !== 0) {
              this.$message({
                message: result.msg,
                type: 'error'
              });
              return;
            }

            this.parentItemsList = result.data;
          })
    },

    onFormChanged() {
      this.loadGroups();
    }
  }


}

</script>
