<template>
  <div class="printerStyle">
    <search @queryClick="handleQuery" />
    <content :tableData="datas.tableData" @addClick="handleAdd" />
    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addmodalConfig" @submit-click="handleSubmitClick">
      <template #gender="scope">
        <Dict v-model="scope.formData[scope.prop]" code="gender" />
      </template>
    </page-modal>
  </div>
</template>

<script setup>
import search from "./config/search.vue";
import content from "./config/content.vue";
import UserAPI from "@/api/system/user";
let datas = reactive({
  query: {
    name: "",
    type: "",
  },
  tableData: [],
});
// 搜索-重置
function handleQuery(d) {
  datas.query = d;
  getlist();
}
onMounted(() => {
  getlist();
});
function getlist() {
  console.log(datas.query, "获取列表");
}
let addModalRef = ref(null)
// 新增


const addmodalConfig = {
  pageName: "sys:user",
  dialog: {
    title: "新增打印机",
    width: 800,
    draggable: true,
  },
  form: {
    labelWidth: 100,
  },
  formAction: UserAPI.add,
  beforeSubmit(data) {
    console.log("提交之前处理", data);
  },
  formItems: [
    // {
    //   label: "用户名",
    //   prop: "username",
    //   rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
    //   type: "input",
    //   attrs: {
    //     placeholder: "请输入用户名",
    //   },
    //   col: {
    //     xs: 24,
    //     sm: 12,
    //   },
    // },
    // {
    //   label: "用户昵称",
    //   prop: "nickname",
    //   rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
    //   type: "input",
    //   attrs: {
    //     placeholder: "请输入用户昵称",
    //   },
    //   col: {
    //     xs: 24,
    //     sm: 12,
    //   },
    // },
    {
      label: "打印机品牌",
      prop: "deptId",
      // rules: [{ required: true, message: "打印机品牌不能为空", trigger: "blur" }],
      type: "tree-select",
      attrs: {
        placeholder: "请选择打印机品牌",
        data: [],
        filterable: true,
        "check-strictly": true,
        "render-after-expand": false,
      },
    },
    {
      type: "custom",
      label: "性别",
      prop: "gender",
      initialValue: 1,
    },
    {
      label: "角色",
      prop: "roleIds",
      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
      type: "select",
      attrs: {
        placeholder: "请选择",
        multiple: true,
      },
      options: [],
      initialValue: [],
    },
    {
      type: "input",
      label: "手机号码",
      prop: "mobile",
      rules: [
        {
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: "请输入正确的手机号码",
          trigger: "blur",
        },
      ],
      attrs: {
        placeholder: "请输入手机号码",
        maxlength: 11,
      },
    },
    {
      label: "邮箱",
      prop: "email",
      rules: [
        {
          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
          message: "请输入正确的邮箱地址",
          trigger: "blur",
        },
      ],
      type: "input",
      attrs: {
        placeholder: "请输入邮箱",
        maxlength: 50,
      },
    },
    {
      label: "状态",
      prop: "status",
      type: "radio",
      options: [
        { label: "正常", value: 1 },
        { label: "禁用", value: 0 },
        { label: "禁用2", value: 3 },
      ],
      initialValue: 1,
    }, {
      label: "状态",
      prop: "status2",
      type: "checkbox",
      options: [
        { label: "正常", value: 1 },
        { label: "禁用", value: 0 },
        { label: "禁用2", value: 3 },
      ],
      initialValue: 1,
    },

  ],
};
function handleAdd() {
  addModalRef.value?.setModalVisible();
}
// 新增的回调
function handleSubmitClick(data) {
  console.log(data)
}
//   import { devices, models, subTypes } from './devices'
// import addDevice from './components/addDevice'
// import { tbPrintMachineGet, switchtbPrintMachine, delTableHandle } from '@/api/devices'
// import dayjs from 'dayjs'
// export default {
//   components: {
//     addDevice
//   },
//   data() {
//     return {
//       query: {
//         name: '',
//         type: ''
//       },
//       devices,
//       tableData: {
//         data: [],
//         page: 0,
//         size: 10,
//         loading: false,
//         total: 0
//       }
//     }
//   },
//   filters: {
//     devicesName(value) {
//       if (value == 'yxyPrinter') {
//         return '云想印'
//       } else if (value == 'fePrinter') '飞鹅'
//       // const item=devices.find(item => item.value == value)
//       // return item?item.name:''
//     },
//     modelsName(value) {
//       const item = models.find(item => item.value == value)
//       return item ? item.name : ''
//     },
//     subTypesName(value) {
//       if (value == "label") return '标签'
//       else if (value == 'kitchen') return '出品'
//       else if (value == 'cash') return '小票'
//     },
//     timeFilter(s) {
//       return dayjs(s).format('YYYY-MM-DD HH:mm:ss')
//     }
//   },
//   mounted() {
//     this.getTableData()
//   },
//   methods: {
//     toUrl(item) {
//       this.$router.push({ path: '/devices/details', query: { id: item.id } })
//     },
//     // 切换状态
//     async statusChange(e, row) {
//       try {
//         this.tableData.loading = true
//         const data = { ...row }
//         data.status = e
//         if (data.id) {
//           delete data.createdAt
//           delete data.updatedAt
//         }
//         await switchtbPrintMachine(data)
//         this.getTableData()
//       } catch (error) {
//         console.log(error)
//         this.tableData.loading = false
//       }
//     },
//     // 重置查询
//     resetHandle() {
//       this.query.name = ''
//       this.query.type = ''
//       this.getTableData()
//     },
//     // 分页回调
//     paginationChange(e) {
//       this.tableData.page = e - 1
//       this.getTableData()
//     },
//     // 删除
//     async delTableHandle(item) {
//       const res = await delTableHandle(item)
//       this.getTableData()
//     },
//     // 获取商品列表
//     async getTableData() {
//       this.tableData.loading = true
//       try {
//         const res = await tbPrintMachineGet({
//           name: this.query.name,
//           shopId: localStorage.getItem('shopId'),
//           contentType: this.query.type,
//           sort: '',
//         })
//         this.tableData.loading = false
//         this.tableData.data = res
//         this.tableData.total = res.length
//       } catch (error) {
//         console.log(error)
//       }
//     }
//   }
// }
</script>
<style scoped lang="scss">
.printerStyle {
  padding: 20px;
  background-color: #fff;
}
</style>
