<template>
  <div class="container">
    <div class="queryWrap">
      <a-form
        :model="formState"
        name="basic"
        ref="formRef"
        layout="inline"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
        class="ant-row"
      >
        <a-form-item label="商品名称" name="goodsName">
          <a-input v-model:value="formState.goodsName" />
        </a-form-item>
        <a-form-item label="分类" name="classify">
          <a-input v-model:value="formState.classify" />
        </a-form-item>
        <a-form-item label="产品线" name="productLine">
          <a-input v-model:value="formState.productLine" />
        </a-form-item>
        <a-form-item label="产品编码" name="productCode">
          <a-input v-model:value="formState.productCode" />
        </a-form-item>
        <a-form-item label="是否为促销" name="promotion">
          <a-input v-model:value="formState.promotion" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button @click="handleReset">重置</a-button>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-item>
        <a-form-item class="checkBoxWrap">
          <a-checkbox-group v-model:value="stateChange" name="checkboxgroup" :options="stateOption" />
        </a-form-item>
      </a-form>
    </div>
    <div class="tableWrap">
      <div class="titleWrap">
        <span class="title">商品分类</span>
        <a-button type="primary" @click="handleAdd">新增</a-button>
      </div>
      <a-table :dataSource="dataSource" :columns="columns" :pagination="pagination">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link">编辑</a-button>
            <a-button type="link">删除</a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup name="DeviceIndex">
  import { ref, reactive } from 'vue';
  import { useGo } from '/@/hooks/web/usePage';
  import { usePermission } from '/@/hooks/web/usePermission';

  interface FormState {
    goodsName: string;
    classify: string;
    productLine: string;
    productCode: string;
    promotion: boolean | null;
  }

  const { hasPermission } = usePermission();
  const go = useGo();

  const formRef = ref();

  const formState = reactive<FormState>({
    goodsName: '',
    classify: '',
    productLine: '',
    productCode: '',
    promotion: null,
  });

  const stateChange = ref([]);

  const dataSource = [
    {
      index: '1',
      name: '胡彦斌',
      classify: '分类1',
      line: '产品线1',
      grounding: 1,
      emphasis: 1,
      new: 1,
      unconventionality: 1,
    },
  ];

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
    },
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '分类',
      dataIndex: 'classify',
      key: 'classify',
    },
    {
      title: '产品线',
      dataIndex: 'line',
      key: 'line',
    },
    {
      title: '上架',
      dataIndex: 'grounding',
      key: 'grounding',
    },
    {
      title: '重点',
      dataIndex: 'emphasis',
      key: 'emphasis',
    },
    {
      title: '新品',
      dataIndex: 'new',
      key: 'new',
    },
    {
      title: '非常规',
      dataIndex: 'unconventionality',
      key: 'unconventionality',
    },
    {
      title: '操作',
      key: 'action',
    },
  ];

  const stateOption = ['上架', '重点', '非常规', '新品'];

  const pagination = {
    current: 1,
    pageSize: 10,
    total: 85,
    showTotal: (total) => `共 ${total} 条数据`,
    onChange: (page, pageSize) => {
      console.log(page, pageSize);
    },
    size: 'small',
  };

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const handleReset = () => {
    formRef.value.resetFields();
  };

  const handleAdd = () => {};

  const handleView = (record) => {
    go('/product/goods/' + record.id);
  };
</script>

<style lang="less" scoped>
  @import url('/@/style/index.less');
</style>
