<template>
  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
    <el-button type="primary" @click="addTicket" native-type="button">新增</el-button>
    <el-table
      class="common-table"
      :data="tableData"
      stripe
      max-height="500px"
      style="width: 100%;margin-top: 25px">
      <el-table-column
        width="150"
        prop="ticketNo"
        label="工单号">
      </el-table-column>
      <el-table-column
        prop="title"
        label="工单标题"
      >
      </el-table-column>
      <el-table-column
        prop="content"
        show-overflow-tooltip
        min-width="120"
        label="问题描述">
      </el-table-column>
      <el-table-column
        prop="status"
        label="处理状态">
        <template slot-scope="scope">
          {{ticketStatusOptions[scope.row.status]}}
        </template>
      </el-table-column>
      <el-table-column
        prop="userName"
        label="提交人">
      </el-table-column>
      <el-table-column
        prop="workName"
        label="处理人">
      </el-table-column>
      <el-table-column
        min-width="90"
        prop="createTime"
        label="提交时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button
            @click="editTicket(scope.row)"
            type="warning"
            size="mini">
            编辑
          </el-button>
          <el-button
            @click="deleteTicket(scope.row)"
            type="danger"
            size="small">
            废弃
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="tableData.length>0"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      style="margin-top:15px;text-align: center"
    >
    </el-pagination>
    <add-ticket ref="addTicket" :mode="mode" :id="editTicketId" @update="getData" @clear="clearEditTicketData"/>
  </div>
</template>

<script>
import {listTicket,delTicket} from '@/api/ems/ticket'
import AddTicket from './AddTicket.vue'
import {mapState} from "vuex";
export default {
  name: "Ticket",
  components: {AddTicket},
  computed: {
    ...mapState({
      ticketStatusOptions: state => state?.ems?.ticketStatusOptions || {},
    })
  },
  data() {
    return {
      mode:'',//新增、修改工单
      editTicketId:'',
      loading:false,
      tableData:[],
      pageSize:10,//分页栏当前每个数据总数
      pageNum:1,//分页栏当前页数
      totalSize:0,//table表格数据总数
    }
  },
  methods:{
    getData(){
      const {pageNum,pageSize} =this
      this.loading=true;
      listTicket({pageNum,pageSize}).then(response => {
        this.tableData = JSON.parse(JSON.stringify(response?.rows || []))
        this.totalSize = response?.total || 0
      }).finally(() => {this.loading=false})
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(()=>{
        this.getData()
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.$nextTick(()=>{
        this.getData()
      })
    },
    clearEditTicketData(){
      this.mode = '';
      this.editTicketId=''
    },
    addTicket(){
      this.mode = 'add';
      this.$refs.addTicket.dialogTableVisible = true;
    },
    editTicket(row){
      this.mode = 'edit';
      this.editTicketId = row.id
      this.$refs.addTicket.dialogTableVisible = true;
    },
    deleteTicket(row){
      this.$confirm(`确认要废弃工单${row.title}吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose:false,
        closeOnClickModal:false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            delTicket({id:row.id}).then(response => {
              response.code === 200 && done();
            }).finally(() => {
              instance.confirmButtonLoading = false;
            })
          } else {
            done();
          }
        }
      }).then(() => {
        //只有在废弃成功的情况下会走到这里
        this.$message({
          type: 'success',
          message: '废弃成功!'
        });
        this.getData()
        //调用接口 更新表格数据
      }).catch(() => {
        //取消关机
      });
    },
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.ems-content-container{
  display: flex;
  padding:24px;
  padding-right: 0;
  .map-container{
    flex:auto;
  }
  .zd-msg-container{
    width: 500px;
    padding: 24px;
    .single-zd-name{
      font-weight: 500;
      line-height: 23px;
      color: #FFBD00;
      font-size: 16px;
      margin-bottom: 24px;
    }
    .single-square-box-container{
      height: 78px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }
    .single-zd-info-container{
      font-size: 12px;
      margin-top: 10px;
      color:#666666;
    }
  }
}
</style>
