<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <!--<span style="margin-left: 10px">日志类型：</span>-->
        <!--<el-select v-model="dataTypeValue" placeholder="日志类型" clearable size="small" style="width:150px">-->
        <!--  <el-option-->
        <!--    v-for="item in dataType"-->
        <!--    :key="item.value"-->
        <!--    :label="item.label"-->
        <!--    :value="item.value"/>-->
        <!--</el-select>-->
        <!--<span style="margin-left: 10px">日志描述：</span>-->
        <!--<el-select v-model="valueTypeValue" placeholder="日志描述" clearable size="small" style="width:100px">-->
        <!--  <el-option-->
        <!--    v-for="item in valueType"-->
        <!--    :key="item.value"-->
        <!--    :label="item.label"-->
        <!--    :value="item.value"/>-->
        <!--</el-select>-->
        <span style="margin-left: 10px">时间：</span>
        <el-date-picker
          :clearable="false"
          v-model="dateTime"
          size="small"
          type="daterange"
          align="center"
          style="width: 240px;"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="～"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
        <el-button
          type="primary"
          plain
          size="small"
          icon="el-icon-search"
          style="margin-left: 5px"
          @click="pageSize=50;pageCurrent=1;searchTable()">查询
        </el-button>
        <el-button type="info" plain size="small" icon="el-icon-download" @click="exportExcel()">导出</el-button>
        <!--        <el-button type="success" plain icon="el-icon-document-copy" size="small" @click="copyData('form4')">复制</el-button>-->
        <!--        <el-button type="success" plain icon="el-icon-document-copy" size="small" @click="copyData('form4')">录入数据</el-button>-->
        <el-button type="success" plain icon="el-icon-document-copy" size="small" @click="addData()">录入数据
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        border
        size="mini"
        height="740"
        center
        style="width: 70%">
        <el-table-column width="60" label="序号" type="index" align="center"/>
        <el-table-column label="工位号" width="80px" align="center">
          <template slot-scope="scope">
            {{ scope.row.巡检工位 }}
          </template>
        </el-table-column>
        <el-table-column label="工位名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.工位名称 }}
          </template>
        </el-table-column>
        <el-table-column label="巡检项目" align="center">
          <template slot-scope="scope">
            {{ scope.row.巡检项目 }}
          </template>
        </el-table-column>
        <el-table-column label="巡检结果" align="center">
          <template slot-scope="scope">
            {{ scope.row.巡检结果 }}
          </template>
        </el-table-column>
        <el-table-column label="是否通过" align="center" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.通过状态 == 1" size="mini" type="success">通过</el-tag>
            <el-tag v-else size="mini" type="danger">不合格</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="巡检时间" align="center" width="140">
          <template slot-scope="scope">
            {{ scope.row.操作时间 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          v-if="!loading"
          :current-page="pageCurrent"
          :page-sizes="[50, 100, 200]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogFormVisible" :title="title" center style="min-height: 200px;" width="400px">
      <el-form ref="rules" :model="rules" label-position="right" label-width="110px">
        <el-form-item label="工位号" prop="opName" style="display: inline-block">
          <el-select
            v-model="inspectionObj.opName"
            placeholder="请选择工位号"
            clearable
            size="small"
            style="width: 185px">
            <el-option
              v-for="item in opNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini"/>
          </el-select>
        </el-form-item>
        <el-form-item label="检验项目" prop="checkItem" style="display: inline-block">
          <el-input v-model="inspectionObj.checkItem" size="small" placeholder="检验项目"/>
        </el-form-item>
        <el-form-item label="巡检结果" prop="checkResult" style="display: inline-block">
          <el-input
            v-model="inspectionObj.checkResult"
            size="small"
            placeholder="巡检结果"/>
        </el-form-item>
        <el-form-item label="是否通过" prop="isOk" style="display: inline-block">
          <el-select
            v-model="inspectionObj.isOk"
            placeholder="请选择"
            clearable
            size="small"
            style="width: 185px">
            <el-option
              label="通过"
              value="1"
              size="mini"/>
            <el-option
              label="不合格"
              value="0"
              size="mini"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff('form')">取消</el-button>
        <el-button type="primary" size="small" @click="submitAdd('form')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      dataType: [], // 日志类型数组
      opNameList: [],
      dataTypeValue: '', // 日志类型
      valueType: [],
      valueTypeValue: '',
      alarmType: [],
      alarmTypeValue: '',
      dateTime: '', // 时间
      dialogFormVisible: false,
      dialogFormVisible4: false,
      form4: {
        engineTypeValue: ''
      },
      rules4: { // 订单下发验证
        engineTypeValue: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      title: '',
      form: {
        tagID: '',
        stationNo: '',
        measurementItems: '',
        valueName: ''
      },
      rules: { // 表单验证规则
        opName: [{ required: true, message: '请选择', trigger: 'blur' }],
        checkItem: [{ required: true, message: '请输入', trigger: 'blur' }],
        checkResult: [{ required: true, message: '请输入', trigger: 'blur' }],
        isOk: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      total: 0, // 总条数
      pageList: 50, // 每页显示条数
      pageSize: 50, // 每页显示条数
      pageCurrent: 1, // 后台获取页,
      // 巡检记录增加对象
      inspectionObj: {
        opName: '', // 工位号
        checkItem: '', // 巡检项目
        checkResult: '', // 巡检结果
        isOk: '' // 是否通过
      }
    }
  },
  created() {
    var year, month, day, audiTime
    this.date = new Date() // 修改数据date
    year = new Date().getFullYear()
    month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
    day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
    audiTime = year + '-' + month + '-' + day
    console.log(audiTime, 'audiTime')
    this.dateTime = [audiTime, audiTime]
    // this.getDataType()
    // this.getValueType()
    this.getStationNumber()
    this.searchTable()
  },
  methods: {
    addData() {
      // 清空 对象数据
      this.inspectionObj = {
        opName: '', // 工位号
        checkItem: '', // 巡检项目
        checkResult: '', // 巡检结果
        isOk: '' // 是否通过
      }
      this.dialogFormVisible = true
    },
    submitAdd() {
      // 值非空校验 判断每个属性不为空
      if (this.inspectionObj.opName == '' || this.inspectionObj.checkItem == '' || this.inspectionObj.checkResult == '' || this.inspectionObj.isOk == '') {
        this.$message.error('请填写完整')
        return
      }

      // 执行存储过程保存数据
      var param = []
      param[0] = ['巡检工位', this.inspectionObj.opName]
      param[1] = ['巡检项目', this.inspectionObj.checkItem]
      param[2] = ['巡检结果', this.inspectionObj.checkResult]
      param[3] = ['通过状态', this.inspectionObj.isOk]
      var Data = this.CreateData('11', '合力_巡检记录_增加', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response)
        if (response.data[0].result == 1) {
          this.dialogFormVisible = false
          this.searchTable()
          this.$message.success('巡检记录增加成功')
        } else {
          this.$message.error('巡检记录增加失败')
        }
      })
    },
    getStationNumber() {
      this.opNameList = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.opNameList.push({
            label: response.data[i].工位号,
            value: response.data[i].工位号,
            labelName: response.data[i].工位名称
          })
        }
      })
    },
    // 初始化获取日志类型
    getDataType() {
      this.dataType = []
      var param = []
      var Data = this.CreateData('11', '_日志_描述表_查询模块类型', param)
      this.ExecDatabase(Data).then(response => {
        for (const item of response.data) {
          this.dataType.push({
            lable: item.操作模块,
            value: item.操作模块
          })
        }
      })
    }, // 初始化日志描述
    getValueType() {
      this.valueType = []
      var param = []
      var Data = this.CreateData('11', '_日志_描述表_查询模块描述', param)
      this.ExecDatabase(Data).then(response => {
        for (const item of response.data) {
          this.valueType.push({
            lable: item.描述,
            value: item.描述
          })
        }
      })
    },
    searchTable() {
      this.loading = true
      this.tableData = []
      var param = []
      param[0] = ['PageCurrent', this.pageCurrent]
      param[1] = ['PageSize', this.pageSize]
      param[2] = ['PageCount', '1111', 'int', '1']
      param[3] = ['ItemCount', '1111', 'int', '1']
      param[4] = ['开始时间', this.dateTime[0] + ' ' + '00:00:00']
      param[5] = ['结束时间', this.dateTime[1] + ' ' + '23:59:59']
      var Data = this.CreateData('11', '合力_巡检记录_视图_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.result.length !== 0) {
          this.tableData = response.data.result
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    exportExcel() {
      if (this.tableData.length !== 0) {
        var param = []
        param[0] = ['PageCurrent', 1]
        param[1] = ['PageSize', 9999999]
        param[2] = ['PageCount', '1111', 'int', '1']
        param[3] = ['ItemCount', '1111', 'int', '1']
        param[4] = ['开始时间', this.dateTime[0] + ' ' + '00:00:00']
        param[5] = ['结束时间', this.dateTime[1] + ' ' + '23:59:59']
        var Data = this.CreateData('2001', '合力_巡检记录_视图_查询', param)
        this.exportExcel_NPOI(Data)
      } else {
        this.$message.warning('暂无数据')
      }
    },
    callOff() {
      this.dialogFormVisible = false
    },
    // 分页
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

<style scoped>
.topDiv {
  margin-bottom: 10px;
}
</style>
