<template>
<mu-container class="demo-container is-stripe">
  <el-form :label-width="'150px'" label-position="right">
    <template v-for="(item, index) in rule">
    
      <el-form-item
        :key="index"
        :label="item.label ? item.label : ''"
        style="width: 100%"
      
      >
     
        <el-select v-model="item.ans" placeholder="请选择">
          <el-option
            v-for="(option, option_index) in item.content"
            :key="option.label"
            :label="option.label"
            :value="option_index"
          ></el-option>
        </el-select>
      </el-form-item>

    </template>
    <el-form-item>
      <div style="text-align: center; width: 500px">
        <el-button
          size="small"
          type="primary"
          style="margin-right: 50px"
          @click="submitAns"
          >确定</el-button
        >
        <el-button size="small">取消</el-button>
      </div>
    </el-form-item>
  </el-form>

</mu-container>
</template>


<script>
let self = null;
export default {
  components: {},
  created() {
    self = this;
  },
  methods: {
    submitAns() {
      console.log(this.rule)
      let ans = {};
      for (let i = 0; i < this.rule.length; i++) {
        let item = this.rule[i];
        if ((!item.fa && item.fa != 0) || this.rule[item.fa].ans == item.faV) {
          if (!item.ans && item.ans != 0) {
            this.$message({
              type: "warning",
              message: "请检查您的" + item.label + "是否填写",
            });
            return false;
          }
          ans[item.name] = item.ans;
        }
      }
      console.log(ans);
    },
  },
  data() {
    return {
      rule: [
        {
          type: "select",
          name: "w1",
          label: "问题1",
          ans: null,
          fa: null,
          content: [
            {
              value: "w11",
              label: "问题1-答案1",
            },
            {
              value: "w12",
              label: "问题1-答案2",
            },
          ],
        },
        {
          type: "select",
          name: "w2",
          label: "问题2",
          ans: null,
          fa: 0,
          faV: 0,
          content: [
            {
              value: "w21",
              label: "问题2-答案1",
            },
            {
              value: "w22",
              label: "问题2-答案2",
            },
          ],
        },
      ],
      text: "11",
      form: "22",
      table: "",
    };
  },
};
</script>


<style lang="less">
</style>