<template>
  <div class="receipt-machine-container">
    <div class="head">
      <div class="head-add-btn">
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="medium"
          @click="handleShowDialog"
        >
          添加小票机品牌
        </el-button>
      </div>
      <div class="head-content">
        <span class="name">小票机名称：</span>
        <el-input
          placeholder="请输入小票机名称"
          suffix-icon="el-icon-search"
          v-model="brandName"
          size="medium"
          class="input-with-select"
        ></el-input>
        <el-button type="primary" size="medium" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="medium" @click="handleClear">清除条件</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      :height="tableConfig.height"
      style="width: 100%"
      :stripe="true"
    >
      <el-table-column
        align="center"
        v-for="(item, index) in tabColumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
        <template #default="{ row, $index }">
          <div class="" v-if="item.label == '操作'">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(row, $index)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="handleDelectReceipt(row)"
            >
              删除
            </el-button>
            <!-- <el-button type="text" size="small">禁用</el-button> -->
          </div>
          <div v-else-if="item.label == '序号'">
            {{ $index + 1 }}
          </div>
          <div v-else>
            {{ row[item.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      class="receipt-machine-dialog"
      :title="dialogTitle"
      :top="'40vh'"
      :width="'700px'"
      :visible.sync="showDialog"
      :before-close="handleCloseDialog"
    >
      <el-form
        ref="formDialog"
        class="form-dialog"
        :model="formDialog"
        :rules="formDialogRules"
        label-width="160px"
      >
        <el-form-item label="打票机型号" prop="model_name">
          <el-input
            v-model="formDialog.model_name"
            placeholder="飞鹅云打印机PF-V7"
          ></el-input>
        </el-form-item>
        <el-form-item label="打票机型号备注名" prop="intro">
          <el-input
            v-model="formDialog.intro"
            placeholder="飞鹅云打印机PF-V7"
          ></el-input>
        </el-form-item>
        <el-form-item label="品牌名" prop="brand_name">
          <el-input
            v-model="formDialog.brand_name"
            placeholder="飞鹅"
          ></el-input>
        </el-form-item>
        <el-form-item label="官网URL" prop="website_url">
          <el-input
            v-model="formDialog.website_url"
            placeholder="www.feieyun.com"
          ></el-input>
        </el-form-item>
        <el-form-item label="纸张宽度" prop="paper_with">
          <el-input v-model="formDialog.paper_with" placeholder="58"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCloseDialog">取 消</el-button>
        <el-button size="medium" type="primary" @click="handleSubmitForm">
          确 定
        </el-button>
      </span>
    </el-dialog>
    <el-pagination
      background
      :current-page="params.pageNum"
      :layout="layout"
      :page-size="params.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
import {
  getReceiptMachineList,
  addReceiptMachine,
  delectReceiptMachine,
  updateReceiptMachine,
} from '@/api/printer/printer'
export default {
  data() {
    return {
      showDialog: false,
      isEdit: false,
      dialogTitle: '添加小票机品牌',
      formDialog: {
        model_name: '',
        intro: '',
        brand_name: '',
        website_url: '',
        paper_with: '',
      },
      formDialogRules: {
        model_name: [
          { required: true, message: '请输入打票机型号', trigger: 'blur' },
        ],
        intro: [
          {
            required: true,
            message: '请输入打票机型号备注名',
            trigger: 'blur',
          },
        ],
        brand_name: [
          { required: true, message: '请输入品牌名', trigger: 'blur' },
        ],
        website_url: [
          { required: true, message: '请输入官网URL', trigger: 'blur' },
        ],
        paper_with: [
          { required: true, message: '请输入纸张宽度', trigger: 'blur' },
        ],
      },
      tableConfig: {
        height: window.innerHeight - 220 - 150,
      },
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      params: {
        keyword: '',
        pageNum: 1,
        pageSize: 20,
      },
      brandName: null,
      tabColumn: [
        {
          prop: 'index',
          label: '序号',
          width: '51',
        },
        {
          prop: 'brand_name',
          label: '小票机品牌名称',
        },
        {
          prop: 'model_name',
          label: '小票机型号名称',
        },
        {
          prop: 'created_at',
          label: '创建时间',
        },
        {
          prop: 'paper_with',
          label: '纸张宽度',
        },
        {
          prop: 'operation',
          label: '操作',
        },
      ],
      tableData: [
        {
          model_id: 1,
          brand_name: '飞鹅云打印机',
          model_name: '飞鹅云打印机PF-V5',
          intro: '飞鹅云打印机PF-V58-W',
          website_url: 'www.feieyun.com',
          paper_with: 58,
          status: 1,
          created_by: 1,
          updated_by: 1,
          created_at: '2024-10-29 15:17:01',
          updated_at: '2024-10-29 15:17:01',
        },
      ],
    }
  },
  created() {
    this.getReceiptMachineList()
  },
  methods: {
    async getReceiptMachineList() {
      let res = await getReceiptMachineList(this.params)
      if (res && res.status == 200) {
        this.total = res.data.total
        this.tableData = res.data.items
      } else {
        this.$message({
          type: 'error',
          message: res.msg || '服务器异常',
        })
      }
    },
    handleShowDialog() {
      this.showDialog = true
    },
    handleDelectReceipt(row) {
      this.$confirm('您确认删除这个小票机?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let res = await delectReceiptMachine({ model_id: row.model_id })
          if (res && res.status == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
            this.getReceiptMachineList()
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    handleSubmitForm() {
      this.$refs['formDialog'].validate(async (valid) => {
        if (valid) {
          let res = this.isEdit
            ? await updateReceiptMachine(this.formDialog)
            : await addReceiptMachine(this.formDialog)
          if (res && res.status == 200) {
            this.$message({
              type: 'success',
              message: this.isEdit ? '修改成功' : '添加成功!',
            })
            this.showDialog = false
            this.isEdit = false
            this.getReceiptMachineList()
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
            })
          }
        }
      })
    },
    handleSearch() {
      this.params.keyword = this.brandName

      this.getReceiptMachineList()
    },
    handleClear() {
      this.brandName = ''
      this.params = {
        pageNum: 1,
        pageSize: 20,
      }
      this.getReceiptMachineList()
    },
    handleSwitch() {},
    handleEdit(row) {
      this.showDialog = true
      this.isEdit = true
      this.formDialog = row
    },
    handleCloseDialog() {
      this.showDialog = false
      if (this.isEdit) {
        this.formDialog = {
          model_name: '',
          intro: '',
          brand_name: '',
          website_url: '',
          paper_with: '',
        }
        this.isEdit = false
      }
      this.$refs['formDialog'].resetFields()
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.getReceiptMachineList()
    },
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum
      this.getReceiptMachineList()
    },
  },
}
</script>

<style lang="scss">
.receipt-machine-container {
  padding: 0 20px !important;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0 -1px 0 #efefef;

    .head-add-btn {
    }

    .head-content {
      display: flex;
      align-items: center;
      text-align: center;
      margin: 20px 0;

      .name {
        font-weight: bold;
      }

      .input-with-select {
        margin: 0 10px;
        width: 270px;
      }
    }
  }

  .receipt-machine-dialog {
    .el-dialog {
      border: 0;
      border-radius: 6px;
      background-clip: padding-box;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .el-dialog__header {
      padding: 12px 20px;
      border-bottom: 1px solid #f2f2f2;

      .el-dialog__title {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.8);
        font-weight: 600;
      }

      .el-dialog__headerbtn {
        top: 12px;
      }
    }

    .el-dialog__body {
      padding: 40px 20px;
      font-size: 12px;
      line-height: 1.5;
      color: #666;
      min-height: 108px;
      overflow-y: auto;
      max-height: 620px;
      overflow: auto;

      .form-dialog {
        min-height: 150px;
      }

      .el-input__inner {
        height: 38px;
        width: 410px;
      }
    }

    .el-dialog__footer {
      border-top: 1px solid #f2f2f2;
      padding: 10px;
    }

    .el-form-item__label {
      padding: 0 24px 0 0px;
    }
  }
}
</style>