import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
// import switchBtn from "@/components/noTemplateComponents/switchBtn";
import request from "@/utils/request";
import { timeFilter } from '@/utils/filters'

// 报表分类小组件
const CategoryList = {
  name: 'CategoryList',
  props: {
    injectData: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  data() {
    return { list: [], calcMaxHeight, pickedId: null }
  },
  mounted() {
    console.log(this.injectData)
    if (categoryOptions.length === 0) {
      // 获取并缓存 categoryOptions
      axios.get('/pms/reportSheetCategory/list').then(({ data: res }) => {
        if (res.code === 0) {
          console.log('[CategoryList小组件]', res.data)
          categoryOptions = res.data
        } else {
          categoryOptions.splice(0)
        }
      })
    } else {
      this.list = categoryOptions
    }

    this.pickedId = this.injectData[this.injectData.head.prop]
  },
  methods: {
    // destroy dialog
    handleDestroyDialog() {
      setTimeout(() => {
        this.addOrUpdateVisible = false
      }, /** after dialog animated */ 200);
    },
    handleChange(id) {
      this.pickedId = id
      this.$emit('emit-data', {
        type: 'change-category',
        data: { id: this.injectData.id, fileName: this.injectData.fileName, name: this.injectData.name, url: this.injectData.url, categoryId: id }
      })
    }
  },
  render: function (h) {
    const childOptions = []
    this.injectData.head.options?.forEach(item => {
      console.log('【报表分类】', item.value)
      childOptions.push(h('el-option', { props: { label: item.label, value: item.value } }, null))
    })
    return h('el-select', { props: { value: this.pickedId }, on: { change: this.handleChange } }, childOptions)
  }
}

export default async function () {
  const categoryList = (await this.$http.get('/pms/reportSheetCategory/list'))?.data?.data


  if (Array.isArray(categoryList)) {
    console.log('category ====> ', categoryList)
    const tableProps = [
      { type: 'index', label: '序号' },
      { prop: "fileName", label: "报表名称" },
      { prop: "category", label: "报表分类", subcomponent: CategoryList, options: categoryList },
      { prop: "createTime", label: "添加时间", width: 180, filter: timeFilter },
      {
        prop: "operations",
        name: "操作",
        fixed: "right",
        width: 90,
        subcomponent: TableOperaionComponent,
        options: [{ name: "edit", label: "编辑", icon: "edit-outline" }, { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:productionLine:delete" }],
      },
    ];

    const headFormFields = [
      {
        prop: 'name',
        label: "报表名称",
        input: true,
        default: { value: "" },
        bind: {
          placeholder: '请输入报表名称'
        }
      },
      {
        button: {
          type: "primary",
          name: "查询",
        },
      },
      {
        button: {
          type: "primary",
          name: "新增",
          permission: "pms:productionLine:save"
        },
        bind: {
          plain: true,
        }
      },
    ];

    const dialogJustFormConfigs = {
      form: {
        rows: [
          [
            {
              input: true,
              label: "产线名称",
              prop: "name",
              rules: { required: true, message: "必填项不能为空", trigger: "blur" },
              elparams: { placeholder: "请输入产线名称" },
            },
            {
              input: true,
              label: "产线编码",
              prop: "code",
              rules: { required: true, message: "必填项不能为空", trigger: "blur" },
              elparams: { placeholder: "请输入产线编码" },
            },
            {
              select: true,
              label: "所属工厂",
              prop: "factoryId",
              fetchData: () => this.$http.get("/pms/factory/page", { params: { limit: 999, page: 1 } }),
              options: [],
              rules: { required: true, message: "必填项不能为空", trigger: "change" },
            },
          ],
          // [
          // {
          //   input: true,
          //   label: "产线TT值",
          //   prop: "tvalue",
          //   rules: [
          //     { required: true, message: "必填项不能为空", trigger: "blur" },
          //     { type: "number", message: "数字", trigger: "blur", transform: (val) => Number(val) },
          //   ],
          //   elparams: { placeholder: "设定TT值（每小时下片数量）" },
          // },
          // ],
          [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
          [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
        ],
        operations: [
          { name: "add", label: "保存", type: "primary", permission: "pms:productionLine:save", showOnEdit: false },
          { name: "update", label: "更新", type: "primary", permission: "pms:productionLine:update", showOnEdit: true },
          { name: "reset", label: "重置", type: "warning", showAlways: true },
          // { name: 'cancel', label: '取消', showAlways: true },
        ],
      },
    };

    return {
      dialogConfigs: dialogJustFormConfigs,
      tableConfig: {
        table: null, column: tableProps
      },
      headFormConfigs: {
        rules: null,
        fields: headFormFields
      },
      urls: {
        base: "/pms/reportSheet",
        page: "/pms/reportSheet/page",
        // subase: '/pms/blenderStepParam',
        // subpage: '/pms/blenderStepParam/page',
        // more...
      }
    }
  }

};