<template>
  <div class="plotterManager-container">
    <div class="head">
      <el-button
        icon="el-icon-plus"
        type="primary"
        size="medium"
        @click="handleSkipAdd"
      >
        添加新模板
      </el-button>
    </div>
    <div class="content">
      <span class="name">模板名称:</span>
      <el-input
        placeholder="请输入模板名称"
        suffix-icon="el-icon-search"
        v-model="inputData"
        size="medium"
        class="input-with-select"
      ></el-input>
      <span class="name">模板类型:</span>
      <el-select
        v-model="optionValue"
        placeholder="全部"
        size="medium"
        class="input-with-select"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button type="primary" size="medium" @click="handleAdd">
        搜索
      </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 }" v-if="item.label == '操作'">
          <el-button type="text" size="small" @click="handleCheck">
            查看
          </el-button>
          <el-button type="text" size="small" @click="handleSkipEdit()">
            编辑
          </el-button>
          <el-button type="text" size="small">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <receiptDialog ref="receiptDialog" />
  </div>
</template>
<script>
import receiptDialog from './receiptDialog'

export default {
  name: 'plotterManager',
  components: { receiptDialog },
  data() {
    return {
      total: 0,
      layout: 'total, sizes, prev, pager, next, jumper',
      queryForm: {
        stime: null,
        etime: null,
        kind_id: null,
        order_state_id: null,
        pageNum: 1,
        pageSize: 20,
      },
      inputData: '',
      optionValue: '',
      tableConfig: {
        height: window.innerHeight - 220 - 150,
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
      ],
      queryForm: {
        stime: null,
        etime: null,
        kind_id: null,
        order_state_id: null,
        pageNum: 1,
        pageSize: 20,
      },
      tabColumn: [
        {
          prop: 'tepName',
          label: '模版名称',
        },
        {
          prop: 'tepType',
          label: '模版类型',
        },
        {
          prop: 'state',
          label: '状态',
        },
        {
          prop: 'createTime',
          label: '创建时间',
        },
        {
          prop: 'operation',
          label: '操作',
        },
      ],
      tableData: [
        {
          tepName: '福家优鲜 线上超市',
          tepType: '订单打印',
          state: '已停用',
          createTime: '2024-05-07 14:47:55',
          operation: '操作',
        },
        {
          tepName: '飞蛾',
          tepType: '365云打印S2(编号kdt2)',
          state: '已使用',
          createTime: '2024-05-07 14:47:55',
          operation: '操作',
        },
      ],
    }
  },
  methods: {
    handleSkipAdd() {
      this.$router.push({ path: '/templateManagementAdd' })
    },
    handleSkipEdit() {
      this.$router.push({ path: '/templateManagementEdit' })
    },
    handleClear() {
      this.inputData = ''
    },
    handleCheck() {
      this.$refs['receiptDialog'].showDialog()
    },
    handleAdd() {},
    handleSizeChange() {},
    handleCurrentChange() {},
    handerColor({ row, column, rowIndex, columnIndex }) {
      if (row) {
        if (row.state == '已使用' && columnIndex == 2) {
          return 'state-on'
        }
        if (row.state == '已停用' && columnIndex == 2) {
          return 'state-off'
        }
      }
    },
  },
}
</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;
    }
  }

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

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