<template>
  <div class="plotterManager-container">
    <div class="head">
      <el-button
        icon="el-icon-plus"
        type="primary"
        size="medium"
        @click="handleSkip"
      >
        添加打印机
      </el-button>
    </div>
    <div class="content">
      <span class="name">打印机名称：</span>
      <el-input
        placeholder="请输入打印机名称"
        suffix-icon="el-icon-search"
        v-model="printerName"
        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>
    <el-table
      :data="tableData"
      :height="tableConfig.height"
      :cell-class-name="handerColor"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        v-for="(item, index) in tabColumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
        <template #default="{ row, $index }" v-if="item.label == '操作'">
          <el-button
            type="text"
            size="small"
            @click="handleSkipEdit(row, $index)"
          >
            编辑
          </el-button>
          <el-button type="text" size="small" @click="handerDelectPrint(row)">
            删除
          </el-button>
          <el-button type="text" size="small" @click="handerDisabledPrint(row)">
            {{ row.status == '停用' ? '启用' : '禁用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <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 {
  getPrinterList,
  delectPrinter,
  updatePrnterStatus,
} from '@/api/printer/printer'
export default {
  name: 'plotterManager',
  data() {
    return {
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      printerName: '',
      tableConfig: {
        height: window.innerHeight - 220 - 150,
      },
      params: {
        keyword: '',
        pageNum: 1,
        pageSize: 20,
      },
      tabColumn: [
        {
          prop: 'printer_name',
          label: '打印机名称',
        },
        {
          prop: 'model_name',
          label: '设备品牌',
        },
        {
          prop: 'printer_sn',
          label: '打印机编号',
        },
        {
          prop: 'printer_key',
          label: '打印机密钥',
        },
        {
          prop: 'website_url',
          label: '官网地址',
        },
        {
          prop: 'region',
          label: '打印来源',
        },
        {
          prop: 'paper_with',
          label: '纸张大小',
        },
        {
          prop: 'printReceipt',
          label: '打印小票',
        },
        {
          prop: 'status',
          label: '状态',
        },
        {
          prop: 'operation',
          label: '操作',
        },
      ],
      tableData: [
        {
          printer_name: '飞蛾',
          model_name: '365云打印S2(编号kdt2)',
          region: '收银台',
          paper_with: 58,
          printReceipt: '',
          status: 1,
          operation: '操作',
        },
      ],
    }
  },
  created() {
    this.getPrinterList()
  },
  methods: {
    async handerDisabledPrint(item) {
      let res = await updatePrnterStatus({
        printer_id: item.printer_id,
        status: item.status == '停用' ? 1 : 0,
      })
      if (res && res.status == 200) {
        this.$message({
          type: 'success',
          message: item.status == '停用' ? '启动成功' : '停用成功',
        })
        this.getPrinterList()
      } else {
        this.$message({
          type: 'error',
          message: res.msg,
        })
      }
    },
    handerDelectPrint(item) {
      this.$confirm('您确认删除这个打印机吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let res = await delectPrinter({ printer_id: item.printer_id })
          if (res && res.status == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
            await this.getPrinterList()
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    async getPrinterList() {
      let res = await getPrinterList(this.params)
      if (res.status == 200) {
        this.total = res.data.total
        this.tableData = res.data.items
        this.tableData.forEach((item) => {
          item.paper_with += 'mm'
          if (item.status == 1) {
            item.status = '启用'
          } else {
            item.status = '停用'
          }
        })
      } else {
        this.$message({
          type: 'error',
          message: res.msg || '服务器异常',
        })
      }
    },
    handleSkip() {
      this.$router.push({ path: '/addCloudPrint' })
    },
    async handleClear() {
      this.printerName = ''
      this.params = {
        pageNum: 1,
        paper_with: 20,
      }
      await this.getPrinterList()
    },
    handleSkipEdit(row, index) {
      this.$router.push({
        path: '/editCloudPrint',
        query: { id: row.printer_id },
      })
    },
    handerColor({ row, column, rowIndex, columnIndex }) {
      if (row) {
        if (row.status == '启用' && columnIndex == 8) {
          return 'status-on'
        }
        if (row.status == '停用' && columnIndex == 8) {
          return 'status-off'
        }
      }
    },
    handleSearch() {
      this.params.keyword = this.printerName

      this.getPrinterList()
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.getPrinterList()
    },
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum
      this.getPrinterList()
    },
  },
}
</script>

<style lang="scss">
.plotterManager-container {
  .head {
    padding-bottom: 20px;
    box-shadow: inset 0 -1px 0 #efefef;
  }

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

    .name {
      font-weight: bold;
    }

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

  .status- {
    &on {
      .cell {
        color: #48c978 !important;
      }
    }

    &off {
      .cell {
        color: red !important;
      }
    }
  }
}
</style>