<template>
  <div id="detail">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="top">
          <detailTopInfo :topTitle="topTitle" :display="display"></detailTopInfo>
        </el-col>
        <el-col :span="24" class="main">
          <mainForm
            :formTitle="formTitle"
            :ruleForm="ruleForm"
            @yi="syi"
            :yiji="yiji"
            :erji="erji"
            :sanji="sanji"
            :siji="siji"
            @er="ser"
            @san="ssan"
          ></mainForm>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import detailTopInfo from '@/components/test/detailTopInfo.vue';
import mainForm from '@/components/test/mainForm.vue';
export default {
  name: 'detail',
  props: {},
  components: {
    detailTopInfo, //表单头部按钮
    mainForm, //表单内容
  },
  data: () => ({
    topTitle: '二级菜单',
    display: 'block',
    formTitle: '头部标题',
    ruleForm: {
      checkbox: [],
      term: [],
    },
    yiji: [
      { code: '1', name: '1' },
      { code: '2', name: '2' },
    ],

    erji: [
      { pcode: '1', code: '3', name: '2.2' },
      { pcode: '2', code: '4', name: '2.2' },
    ],
    sanji: [
      { pcode: '3', code: '5', name: '3.1' },
      { pcode: '4', code: '6', name: '3.2' },
    ],
    siji: [
      { pcode: '5', code: '7', name: '4.1' },
      { pcode: '6', code: '8', name: '4.2' },
    ],
  }),
  created() {},
  computed: {},
  methods: {
    async syi(code) {
      let pcode = code;
      console.log(pcode);

      // const ess = await this.query({ pcode });
      // console.log(ess.data);

      // this.$set(this, `erji`, ess.data);
    },
    async ser(code) {
      let pcode = code;

      const ess = await this.query({ pcode });
      console.log(ess.data);

      this.$set(this, `sanji`, ess.data);
    },
    async ssan(code) {
      let pcode = code;

      const ess = await this.query({ pcode });
      console.log(ess.data);

      this.$set(this, `siji`, ess.data);
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  height: 50px;
  margin: 0 0 10px 0;
}
.main {
  min-height: 765px;
  background: #ffffff;
  padding: 20px;
}
</style>
