<template>
  <div class="table-wrapper">
    <div class="title">
      <h1>Ticket List</h1>
      <div class="btn-group">
        <el-button type="primary" size="small" @click="showTicketDialog">Add New Ticket</el-button>
        <el-button type="danger" size="small" @click="deleteAll">Delete</el-button>
      </div>
    </div>
    <div class="search">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="item">
            <label>Ticket Name</label>
            <el-input v-model="ticketName" placeholder="Please input group name"/>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item">
            <label>Status</label>
            <el-select v-model="status" placeholder="Please select status">
              <el-option
                v-for="(item, i) in statusList"
                :key="i"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item">
            <label>Vin Number</label>
            <el-input v-model="vin" placeholder="Please input vin"/>
            <!-- <el-input v-model="totalMin" onkeyup="this.value=this.value.replace(/\D/g,'')" clearable style="width: 100px;"/>
            <span style="display: inline-block; margin: 0 10px;">-</span>
            <el-input v-model="totalMax" onkeyup="this.value=this.value.replace(/\D/g,'')" clearable style="width: 100px;"/> -->
          </div>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="getTableData">Search</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData" @selection-change="handleSelectionChange"  style="min-height:500px">
      <el-table-column type="selection"  width="60" align="center"></el-table-column>
      <el-table-column
        prop="ticketName"
        label="Ticket Name"
      ></el-table-column>
      <el-table-column prop="total" label="Vehicle Number"></el-table-column>
      <el-table-column prop="createBy" label="Creator"></el-table-column>
      <el-table-column prop="creationDate" label="Create Time"></el-table-column>
      <el-table-column prop="lastModifiedDate" label="Update Time"></el-table-column>
      <el-table-column
        prop="ticketDetail"
        label="Description" show-overflow-tooltip
      ></el-table-column>
      <el-table-column prop="status" label="Status" width="150">
        <template v-slot="scope">
          <el-tooltip :content="scope.row.statusDes" placement="top">
            <el-tag v-if="scope.row.status == 'DONE'" type="success" style="width: 65px; text-align: center">{{ scope.row.status }}</el-tag>
            <el-tag v-else-if="scope.row.status == 'HOLD'" type="warning" style="width: 65px; text-align: center">{{ scope.row.status }}</el-tag>
            <el-tag v-else type="danger" style="width: 65px; text-align: center">{{ scope.row.status }}</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="Action" width="170px">
        <template v-slot="scope">
          <el-button type="primary" size="mini" @click="jumpDetail(scope.row.id)" class="mr-10">View</el-button>
          <el-popconfirm
            confirm-button-text="Yes"
            cancel-button-text="No"
            icon="el-icon-info"
            icon-color="red"
            title="Are you sure to delete this ticket?"
            @confirm="deleteItem(scope.row.id)"
          >
            <el-button type="danger" slot="reference" size="mini">Delete</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
      <template slot="empty" v-if="tableData.length == 0">
        <span>No data available</span>
      </template>
    </el-table>
    <el-pagination
      v-if="total > 0"
      :page-size="limit"
      :current-page.sync="page"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      background
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next"
      ></el-pagination>
      <el-dialog title="Create Ticket" :visible.sync="visible" width="600px">
        <el-form
          :model="form"
          ref="ruleForm"
          label-width="100px"
          :rules="rules"
        >
          <el-form-item label="Ticket Name" prop="name">
            <el-input v-model="form.name" placeholder="Please input ticket name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="visible = false">Cancel</el-button>
          <el-button type="primary" size="small" @click="addTicket">Confirm</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { GetTicketList, DeleteTicket, CreateTicket, DeleteAllTicket } from "@/api/ticket";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      visible: false,
      form: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "Please input ticket name", trigger: "blur" },
        ],
      },
      ticketName: '',
      status: 'ALL',
      statusList: ['ALL', 'NONE', 'RUN', 'HOLD', 'DONE'],
      // totalMin: '',
      // totalMax: '',
      vin: '',
      page: 1,
      limit: 10,
      total: 0,
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      const { ticketName, status, vin, page, limit } = this;
      GetTicketList({
        ticketName,
        status,
        // totalMin,
        // totalMax,
        vin,
        pageNo: page,
        pageSize: limit
      }).then((res) => {
        const { content, totalElements } = res;
        this.tableData = content;
        this.total = totalElements;
        if (page > 1 && content.length === 0) {
          this.handleCurrentChange(page - 1);
        }
      });
    },
    showTicketDialog() {
      this.visible = true;
      setTimeout(() => {
        this.$refs.ruleForm.resetFields();
      }, 100)
    },
    addTicket() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          CreateTicket({ ticketName: this.form.name }).then((res) => {
            if (res.id) {
              this.visible = false;
              this.handleCurrentChange(1);
            }
          });
        }
      });
    },
    deleteItem(id) {
      DeleteTicket(id).then(() => {
        this.getTableData();
      });
    },
    deleteAll(){
      if(!this.multipleSelection.length){
        this.$message.error("Please select some tickets!");
        return;
      }
      this.$confirm('Are you sure to delete these tickets?', 'Warning', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        DeleteAllTicket({
          idList: this.multipleSelection.map(item => item.id)
        }).then(() => {
          this.$message.success("Delete successfully!");
          this.handleCurrentChange(this.page);
        })
      })
    },
    jumpDetail(id) {
      this.$router.push({path: "/ticketManagement/detail",query: {id}});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.handleCurrentChange(1);
    }
  },
};
</script>
