<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
      @submit.native.prevent
    >
      <el-form-item label="异常分类" prop="exceptionCategory">
        <el-select v-model="queryParams.exceptionCategory" placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.classification_of_exceptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="异常来源" prop="sourceName">
        <el-input
          v-model="queryParams.sourceName"
          placeholder="请输入异常来源"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="异常类型" prop="exceptionType">
        <el-select v-model="queryParams.exceptionType" placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.type_of_exception"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="严重等级" prop="exceptionLevel">
        <el-select v-model="queryParams.exceptionLevel" placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.severity_level"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上报人" prop="raiserName">
        <el-input
          v-model="queryParams.raiserName"
          placeholder="请输入上报人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="异常发生时间">
        <el-date-picker
          style="width: 215px"
          :default-time="['00:00:00', '23:59:59']"
          v-model="raiseTime"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          @change="handleClearTime"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="异常解除时间">
        <el-date-picker
          style="width: 215px"
          :default-time="['00:00:00', '23:59:59']"
          v-model="handleTime"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          @change="handleClearTime2"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          v-no-more-click
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button
          v-no-more-click
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>
    <el-radio-group v-model="tabPosition" style="margin: 5px">
      <el-radio-button label="first">全部</el-radio-button>
      <el-radio-button label="second">待处理</el-radio-button>
      <el-radio-button label="third">已处理</el-radio-button>
    </el-radio-group>
    <el-table
      v-loading="loading"
      :data="ExceptionList"
    >
      <el-table-column label="编号" align="center" prop="exceptionId">
      </el-table-column>
      <el-table-column label="异常分类" align="center" prop="exceptionCategory">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.classification_of_exceptions" :value="scope.row.exceptionCategory"/>
        </template>
      </el-table-column>
      <el-table-column label="异常来源" align="center" prop="sourceName">
      </el-table-column>
      <el-table-column label="异常类型" align="center" prop="exceptionTypeName">
      </el-table-column>
      <el-table-column label="严重等级" align="center" prop="exceptionLevelName">
      </el-table-column>
      <el-table-column label="上报人" align="center" prop="raiserName">
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.manual_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column
        label="异常发生时间"
        align="center"
        prop="raiseTime"
      >
      </el-table-column>
      <el-table-column label="异常解除时间" align="center" prop="handleTime">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleCheck(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />
    <el-dialog :visible.sync="open" width="550px" append-to-body class="elDialog">
      <div slot="title" class="dialog-title">
        <i></i>
        <span class="title">{{ title }}</span>
      </div>
      <div class="exception-details" v-if="exceptionData">
        <table border="1" cellpadding="10" cellspacing="0" style="width: 100%; border-collapse: collapse;">
          <tbody>
          <!-- 异常分类 -->
          <tr style="border-bottom: 1px solid #ddd;">
            <td style="text-align: right; width: 120px;">
              <strong>异常分类：</strong>
            </td>
            <td style="text-align: left;">
              <dict-tag :options="dict.type.classification_of_exceptions" :value="exceptionData.exceptionCategory"/>
            </td>
          </tr>

          <!-- 异常来源 -->
          <tr style="border-bottom: 1px solid #ddd;">
            <td style="text-align: right;">
              <strong>异常来源：</strong>
            </td>
            <td style="text-align: left;">
              {{ exceptionData.sourceName }}
            </td>
          </tr>

          <!-- 异常类型 -->
          <tr style="border-bottom: 1px solid #ddd;">
            <td style="text-align: right;">
              <strong>异常类型：</strong>
            </td>
            <td style="text-align: left;">
              {{ exceptionData.exceptionTypeName }}
            </td>
          </tr>

          <!-- 严重等级 -->
          <tr style="border-bottom: 1px solid #ddd;">
            <td style="text-align: right;">
              <strong>严重等级：</strong>
            </td>
            <td style="text-align: left;">
              {{ exceptionData.exceptionLevelName }}
            </td>
          </tr>

          <!-- 状态 -->
          <tr style="border-bottom: 1px solid #ddd;">
            <td style="text-align: right;">
              <strong>状态：</strong>
            </td>
            <td style="text-align: left;">
              <dict-tag :options="dict.type.manual_status" :value="exceptionData.status"/>
            </td>
          </tr>

          <!-- 上报人 -->
          <tr style="border-bottom: 1px solid #ddd;">
            <td style="text-align: right;">
              <strong>上报人：</strong>
            </td>
            <td style="text-align: left;">
              {{ exceptionData.raiserName }}
            </td>
          </tr>

          <!-- 异常发生时间 -->
          <tr style="border-bottom: 1px solid #ddd;">
            <td style="text-align: right;">
              <strong>异常发生时间：</strong>
            </td>
            <td style="text-align: left;">
              {{ exceptionData.raiseTime }}
            </td>
          </tr>

          <!-- 异常解除时间 -->
          <tr style="border-bottom: 1px solid #ddd;">
            <td style="text-align: right;">
              <strong>异常解除时间：</strong>
            </td>
            <td style="text-align: left;">
              {{ exceptionData.handleTime }}
            </td>
          </tr>

          <!-- 异常描述 -->
          <tr style="border-bottom: 1px solid #ddd; height: 250px;">
            <td style="text-align: right; vertical-align: top;">
              <strong>异常描述：</strong>
            </td>
            <td style="text-align: left; vertical-align: top;">
              {{ exceptionData.exceptionDescription }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          :disabled="exceptionData.status=='1'"
          v-no-more-click
          type="primary"
          @click="handleDeal"
        >处 理
        </el-button>
        <el-button v-no-more-click type="primary" @click="cancel"
        >关 闭
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Template from '@/views/print/printtemplate/list.vue'
import { MaterialsLoanExceptionPage } from '@/api/mes/material/exception'
import { getIsExceptionPage, selectMaterialsById, updateIsException } from '@/api/mes/material/manualException'

export default {
  name: 'Team',
  components: { Template, Treeselect },
  dicts: ['classification_of_exceptions', 'type_of_exception', 'severity_level', 'manual_status'],
  data() {
    return {
      //自动生成编码
      autoGenFlag: false,
      optType: undefined,

      tabPosition: 'first',
      // 遮罩层
      loading: true,
      loadStatus: '',//弹窗加加载
      // 选中数组
      ids: [],
      codes: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 班组表格数据
      ExceptionList: [],
      // mars树选项
      marsOptions: [],
      // 是否显示弹出层
      open: false,
      // 查询参数
      raiseTime: '',
      handleTime: '',
      queryParams: {
        current: 1,
        size: 10,
        exceptionCategory: '',//异常种类（0-锁控柜 1-物资柜）
        exceptionDescription: '',
        exceptionLevel: '',//异常等级
        exceptionLevelName: '',//异常等级名称
        exceptionType: '',//异常类型
        exceptionTypeName: '',//异常类型名称
        raiseTime: '',//异常发生时间
        raiser: '',//发起人Id
        raiserName: '',//发起人名称
        sourceId: '',//来源Id
        sourceName: '',//来源Name
        startHandleTime: '',//异常处理时间开始
        endHandleTime: '',//异常处理时间结束
        startRaiseTime: '',//异常发生时间开始
        endRaiseTime: '',//异常发生结束时间
        status: ''//待处理0 已处理1
      },
      title: '',
      exceptionData: {  },
      // 表单参数
      form: {},
      cabinets: [], //物资所属柜
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }

    }
  },
  watch: {
    tabPosition: function(val, oldVal) {
      if (val == 'second') {
        this.queryParams.status = '0'
        this.getList()
      }else if(val == 'third') {
        this.queryParams.status = '1'
        this.getList()
      }else {
        this.queryParams.status = ''
        this.getList()
      }
    }
  },
  created() {
    this.getList()
  },

  methods: {
    formatDate(date) {
      const year = date.getFullYear().toString().padStart(2, '0')
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      const seconds = date.getSeconds().toString().padStart(2, '0')

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    /** 查询物资信息列表 */
    getList() {
      this.loading = true
      if (Array.isArray(this.raiseTime) && this.raiseTime.length === 2) {
        this.queryParams.startRaiseTime = this.formatDate(this.raiseTime[0])
        this.queryParams.endRaiseTime = this.formatDate(this.raiseTime[1])
      }
      if (Array.isArray(this.handleTime) && this.handleTime.length === 2) {
        this.queryParams.startHandleTime = this.formatDate(this.handleTime[0])
        this.queryParams.endHandleTime = this.formatDate(this.handleTime[1])
      }
      const data = {
        ...this.queryParams
      }
      getIsExceptionPage(data).then((response) => {
        console.log(response, '获取物资归还异常allList ')
        this.ExceptionList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    // 查看
    handleCheck(row) {
      this.title = '异常详情'
      this.open = true
      this.loadStatus=this.$loading({
        target:".elDialog .el-dialog"
      })
      setTimeout(() => {
        this.loadStatus.close()
      },500)
      selectMaterialsById(row.exceptionId).then(response => {
        this.exceptionData = response.data
      })
    },
    // 处理按钮
    handleDeal() {
      let data
      if(this.exceptionData.status == '0') {
        data={
          ...this.exceptionData,
          status:1
        }
      }else{
        data={
          ...this.exceptionData,
        }
      }

      updateIsException(data).then((response) => {
        console.log(response)
        this.$modal.msgSuccess("修改成功");
        this.open = false
        this.getList()
      })
    },
// 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.resetForm('form')
      this.autoGenFlag = false
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.size = 10
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.startRaiseTime=""
      this.queryParams.endRaiseTime =""
      this.raiseTime = ''
      this.handleTime = ''
      this.queryParams.startHandleTime=""
      this.queryParams.endHandleTime =""
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleClearTime(value) {
      if (value == null) {
        this.queryParams.startTime = null
        this.queryParams.endTime = null
      }
    },
    handleClearTime2(value) {
      if (value == null) {
        this.queryParams.handleStartTime = null
        this.queryParams.handleEndTime = null
      }
    }

  }
}
</script>
<style lang="scss" src="@/assets/styles/dialog-title.scss" scoped>
.el-input-width {
  width: 380px !important;

}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
}

td p {
  margin: 5px 0;
}
</style>
