<!-- 自定义配置 -->
<template>
  <div>
    <el-form-item label="数据分类">
      <avue-select :dic="DIC.fillType"
                   :empty-values="[undefined]"
                   placeholder="请选择分类"
                   @change="(params)=>{handleFillTypeChange(params,item)}"
                   :props="{label:'categoryKey',value:'categoryValue'}"
                   v-model="main.activeOption.type"></avue-select>

    </el-form-item>
    <el-form-item label="数据表单">
      <avue-select :dic="DIC.fill"
                   filterable
                   placeholder="请选择数据填报"
                   v-model="main.activeOption.id"></avue-select>
    </el-form-item>
  </div>
</template>
<script>
import { getList as getFillList } from "@/api/fill";
import { getList as getCategoryList } from '@/api/category'
export default {
  name: 'fill',
  inject: ["main"],
  data () {
    return {
      DIC: {
        fill: [],
        fillType: []
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      getCategoryList({
        categoryModule: 'fill',
        current: 1,
        size: 99,
      }).then(res => {
        this.loading = false
        const data = res.data.data;
        this.DIC.fillType = [{ categoryKey: '全部', categoryValue: '' }].concat(data);
      })
    },
    handleFillTypeChange (params, item) {
      getFillList({
        type: params.value,
        current: 1,
        size: 100,
      }).then(res => {
        const data = res.data.data;
        this.DIC.fill = data.records.map(ele => {
          return {
            label: ele.name,
            value: ele.id
          }
        })
      });
    },
  }
}
</script>

<style>
</style>