<template>
  <div class="flex-column">
    <!-- <a-form :form="form">
      <div :key="index" style="width: 100%" v-for="(item, index) in caseList">
        <a-form-item
          :label="item.name"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label-align="left"
          class="mb-2"
        >
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            v-if="item.optionStatus === 1"
          >
            <a-input-number
              :min="0"
              @change="onChange($event, item.code, 'min')"
              placeholder="最小值"
              style="width: 100px; margin-left: 40px"
            />~
            <a-input-number
              :min="0"
              @change="onChange($event, item.code, 'max')"
              placeholder="最大值"
              style="width: 100px"
            />
          </a-form-item>
          <CaseKTTwo
            :case-list="item.children"
            style="margin-top: 40px"
            v-if="item.children.length > 0"
          />
        </a-form-item>
      </div>
    </a-form>-->
    <a-form :form="form">
      <div :key="index" style="width: 100%" v-for="(item, index) in caseList">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          class="d-flex align-center mb-3"
          label-align="left"
        >
          <div class="d-flex flex-row">
            <h3 class="font-bold">{{ item.name }}：</h3>
            <div class="d-flex flex-row" v-if="item.optionStatus === 1">
              <a-input-number
                :min="0"
                @change="onChange($event, item.code, 'min')"
                placeholder="最小值"
                style="width: 150px"
                v-model="item.minValue"
              />
              <div class="px-2">~</div>
              <a-input-number
                :min="0"
                @change="onChange($event, item.code, 'max')"
                placeholder="最大值"
                style="width: 150px"
                v-model="item.maxValue"
              />
            </div>
          </div>
          <case-KT-two :case-list="item.children" v-show="item.children.length > 0" />
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { searchParam } from 'config/api';
import CaseKTTwo from './CaseKTTwo';
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 18 },
};
const tailItemLayout = { wrapperCol: { span: 18, offset: 4 } };
export default {
  name: 'CaseKTOne',
  components: { CaseKTTwo },
  props: {
    caseList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      formItemLayout,
      tailItemLayout,
      form: this.$form.createForm(this, { name: 'page-add' }),
      form1: this.$form.createForm(this, { name: 'search' }),
    };
  },

  methods: {
    ...mapMutations('home', ['setCaseData']),
    onChange(e, code, str) {
      let obj = {};
      if (str === 'min') {
        obj = {
          code,
          start: e,
        };
      } else {
        obj = {
          code,
          end: e,
        };
      }
      this.setCaseData(obj);
    },
  },
};
</script>

<style lang="stylus" scoped></style>
