<template>
    <div>
        <el-card style="height: 958px">
            <div style="display: flex">
                <div class="toolInfo" style="background: #009e1c">
                    <span>正常数量</span>
                    <br />
                    <span style="line-height: 0">{{toolInfo.ok}}</span>
                </div>
                <div class="toolInfo" style="background: #ffc823">
                    <span>磨损过度</span>
                    <br />
                    <span>{{toolInfo.normal}}</span>
                </div>
                <div class="toolInfo" style="background: #ff2020">
                    <span>寿命达到</span>
                    <br />
                    <span>{{toolInfo.destroy}}</span>
                </div>
            </div>
            <el-divider></el-divider>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="刀具总览" name="first" style="height: 767px">
                        <el-button :disabled="loading" type="text" icon="el-icon-setting" style="float: right;margin-right:20px;font-size: 20px" title="设定当前工位刀具" @click="editToolInfo()"></el-button>
                        <div style="display: flex;flex-wrap: wrap;height: 740px;overflow-y: auto">
                            <div v-for="(item, index) in toolList" :key="index" class="toolCard">
                                <div style="width: 520px;height: 240px;border: 1px solid #afafaf;border-radius: 5px">
                                    <div style="font-size: 20px;font-weight: bold;padding: 5px;color: #fff" :style="{backgroundColor: toolInfoColor(item)}">{{item.设备名称}} {{'【刀位' + item.toolNum + '】' }}</div>
                                    <div style="text-align: left;margin-left: 20px;font-size: 18px">
                                      <el-col :span="16">
                                        <div style="height: 40px;line-height: 40px">刀具名称：{{ item.刀具名称 }}</div>
                                        <div style="height: 40px;line-height: 40px">额定寿命：{{ item.toolLife }}</div>
                                        <div style="height: 40px;line-height: 40px">使用计数：{{ item.toolCount }}</div>
                                        <div style="height: 40px;line-height: 40px">更新时间：{{ item.操作时间 }}</div>
                                      </el-col>
                                      <el-col :span="8">
                                        <el-row style="margin-top: 50px">
                                          <el-col :span="7">
                                            <img v-if="item['刀具状态'] === 1" src="../../img/tool_ok.png">
                                            <img v-if="item['刀具状态'] === 2" src="../../img/tool_normal.png">
                                            <img v-if="item['刀具状态'] === 3" src="../../img/tool_destroy.png">
                                          </el-col>
                                          <el-col :span="12" style="font-size: 34px;font-weight: bolder">
                                            <div v-if="item['刀具状态'] === 1" style="color: #009e1c">{{ item.toolLife - item.toolCount }}</div>
                                            <div v-if="item['刀具状态'] === 2" style="color: #ffc823">{{ item.toolLife - item.toolCount }}</div>
                                            <div v-if="item['刀具状态'] === 3" style="color: #ff2020">{{ item.toolLife - item.toolCount }}</div>
                                          </el-col>
                                        </el-row>
                                        <el-row>剩余寿命</el-row>
                                      </el-col>
                                    </div>
                                    <div style="margin-left: 20px;">
                                        <el-tooltip effect="light" placement="top">
                                            <div slot="content" style="color: black">使用计数：{{item.toolCount}}</div>
                                            <el-progress
                                              style="width: 95%"
                                              :text-inside="true"
                                              :stroke-width="18"
                                                :percentage="Math.floor((100 - item.residue >= 100 ? 100 : item.residue) * 100) / 100"
                                              :color="toolInfoColor(item)"
                                            ></el-progress>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="刀具历史" name="second" style="height: 867px">
                        <span>设备名称：</span>
                      <el-input v-model="deviceName" style="width:250px;margin-left: 10px" clearable placeholder="设备名称"></el-input>
                        <span style="margin-left: 10px">日期：</span>
                        <el-date-picker v-model="deliveryDate" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期" style="width:250px;margin-left: 10px"/>
                        <el-button :disabled="loading" type="success" plain icon="el-icon-search" style="margin-left: 10px" @click="searchTableHis()">查询</el-button>
<!--                        <el-button :disabled="loading" type="warning" plain icon="el-icon-download" style="margin-left: 10px" @click="searchTableHisExport()">导出</el-button>-->
                        <div style="margin-top: 10px">
                            <el-table
                              v-loading="loading"
                              :data="tableData"
                              :header-cell-style="{background:'#F5F5F5'}"
                              element-loading-text="数据加载中"
                              element-loading-spinner="el-icon-loading"
                              element-loading-background="rgba(0, 0, 0, 0.2)"
                              tooltip-effect="dark"
                              style="width: 100%"
                              height="580"
                              border
                              highlight-current-row
                              stripe>
                                <el-table-column
                                  type="index"
                                  align="center"
                                  width="50">
                                </el-table-column>
                                <el-table-column align="center" label="设备名称" min-width="100">
                                    <template slot-scope="scope">
                                        {{ scope.row.设备名称 }}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="刀具号" min-width="60">
                                    <template slot-scope="scope">
                                        {{ scope.row.刀具代码 }}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="额定寿命" min-width="100">
                                    <template slot-scope="scope">
                                        {{ scope.row.刀具额定寿命 }}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="累计使用" min-width="100">
                                    <template slot-scope="scope">
                                        {{ scope.row.已用寿命 }}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="本次使用" min-width="100">
                                  <template slot-scope="scope">
                                    {{ scope.row.使用寿命 }}
                                  </template>
                                </el-table-column>
                                <el-table-column align="center" label="预警值1(%)" min-width="100">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.预警值1 }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="预警值2(%)" min-width="100">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.预警值2 }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="更换时间" min-width="100">
                                    <template slot-scope="scope">
                                        {{ scope.row.OperationTime }}
                                    </template>
                                </el-table-column>
                              <el-table-column align="center" label="更换人" min-width="100">
                                <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, 70, 100, 150]"
                                  :page-size="pageSize"
                                  :total="total"
                                  layout="total, sizes, prev, pager, next, jumper"
                                  @size-change="handleSizeChange"
                                  @current-change="handleCurrentChange"/>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
        </el-card>
        <el-dialog :title="title" :visible.sync="dialogVisibleTool" center width="1300px" :modal-append-to-body="false" append-to-body>
            <el-table
              v-loading="loading"
              :data="toolListCopy"
              :header-cell-style="{background:'#F5F5F5'}"
              element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.2)"
              tooltip-effect="dark"
              style="width: 100%"
              border
              height="500"
              highlight-current-row
              stripe>
                <el-table-column
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column align="center" label="机床名称" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.设备名称 }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="刀具号" min-width="60">
                    <template slot-scope="scope">
                        {{ scope.row.toolNum }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="刀具名称" min-width="60">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.edit">{{ scope.row.刀具名称 }}</span>
                        <el-input v-else v-model="scope.row.刀具名称" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="额定寿命" min-width="60">
                    <template slot-scope="scope">
                        {{ scope.row.toolLife }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="已用寿命" min-width="60">
                    <template slot-scope="scope">
                        {{ scope.row.toolCount }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="预警值1(%)" min-width="100">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.edit">{{ scope.row.thresholdValue1 }}</span>
                        <el-input-number v-else v-model="scope.row.thresholdValue1" controls-position="right" :step="1" size="mini" :min="1" :max="(parseInt(scope.row.thresholdValue2) - 1)"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="预警值2(%)" min-width="100">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.edit">{{ scope.row.thresholdValue2 }}</span>
                        <el-col :span="24" v-else>
                            <el-input-number v-model="scope.row.thresholdValue2" controls-position="right" :step="1" size="mini" :max="100" :min="(parseInt(scope.row.thresholdValue1) + 1)"></el-input-number>
                        </el-col>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="采购日期" min-width="100">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.edit">{{ scope.row.采购日期 }}</span>
                        <el-col v-else :span="18">
                            <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 150px" v-model="scope.row.采购日期" size="mini"></el-date-picker>
                        </el-col>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="编辑" min-width="60">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.edit" type="text" size="mini" icon="el-icon-circle-check-outline" @click="toolManagementSubmit(scope.row)">确定</el-button>
                        <el-button v-if="scope.row.edit" class="cancel-btn" size="mini" type="text" @click="cancelEdit(scope.$index, scope.row)">取消</el-button>
                        <el-button v-else type="text" size="mini" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import { getNowTime2 } from '@/utils/tool'

export default {
  data() {
    return {
      selectTool: [],
      toolNums: [
        { label: '1#', value: 1 },
        { label: '2#', value: 2 },
        { label: '3#', value: 3 },
        { label: '4#', value: 4 },
        { label: '5#', value: 5 },
        { label: '6#', value: 6 },
        { label: '7#', value: 7 },
        { label: '8#', value: 8 },
        { label: '9#', value: 9 },
        { label: '10#', value: 10 },
        { label: '11#', value: 11 },
        { label: '12#', value: 12 },
        { label: '13#', value: 13 },
        { label: '14#', value: 14 },
        { label: '15#', value: 15 },
        { label: '16#', value: 16 },
        { label: '17#', value: 17 },
        { label: '18#', value: 18 },
        { label: '19#', value: 19 },
        { label: '20#', value: 20 },
        { label: '21#', value: 21 },
        { label: '22#', value: 22 },
        { label: '23#', value: 23 },
        { label: '24#', value: 24 },
        { label: '25#', value: 25 },
        { label: '26#', value: 26 },
        { label: '27#', value: 27 },
        { label: '28#', value: 28 },
        { label: '29#', value: 29 },
        { label: '30#', value: 30 },
        { label: '31#', value: 31 },
        { label: '32#', value: 32 }
      ],
      activeName: 'first',
      deliveryDate: [],
      toolInfoOrder: false,
      opnames: [],
      opnameThis: '',
      deviceName: '',
      toolInfo: {
        ok: 0,
        normal: 0,
        destroy: 0
      },
      toolList: [],
      toolListCopy: [],
      numberOfPeopleInWorkshop: '57',
      // stationNumber: '',
      title: '刀具管理',
      realTo: '56',
      planToday: 90,
      completeNumber: 120,
      loading: false,
      dialogVisibleAccount: false, // 编辑台账信息
      dialogVisibleAccount1: false, // 新增台账信息
      dialogVisibleLife: false, // 编辑寿命信息
      dialogVisibleLife1: false, // 新增寿命信息
      dialogVisibleTool: false, // 编辑刀具信息
      dialogVisibleTool1: false, // 新增刀具信息
      tableData: [],
      tableData1: [],
      tableData2: [],
      flag: 0,
      timer: null,
      date: new Date(),
      month: '',
      day: '',
      minute: '',
      hour: '',
      year: '',
      second: '',
      stationNumber: '',
      station: '',
      week: '',
      total: 0, // 总条数
      pageSize: 50, // 每页显示条数
      PageCurrent: 1 // 后台获取页
    }
  },
  props: ['opname'],
  computed: {
    pickerOptions({ $props }) {
      return {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    },
    check: {
      get() {
        return this.selectTool.length === this.toolNums.length
      },
      set() {}
    }

  },
  mounted() {
    const scope = this
    this.searchTable()
    this.timer = setInterval(() => {
      scope.searchTable()
    }, 5000)
  },
  created() {
    this.opnameThis = this.opname
    const start = new Date()
    const end = new Date(start.getTime() - 3600 * 1000 * 24 * 15)
    this.deliveryDate[0] = getNowTime2(end)
    this.deliveryDate[1] = getNowTime2(start)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    editToolInfo() {
      this.title = '设定刀具参数'
      this.searchTableCopy()
      this.dialogVisibleTool = true
    },
    toolInfoColor(info) {
      const status = info['刀具状态']
      if (status === 1) {
        return '#009e1c'
      }
      if (status === 2) {
        return '#ffc823'
      }
      if (status === 3) {
        return '#ff2020'
      }
    },
    searchTable() {
      var param = []
      var Data = this.CreateData('11', '刀具管理_刀具信息查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.toolList = []
          this.toolInfo.ok = 0
          this.toolInfo.normal = 0
          this.toolInfo.destroy = 0
          for (let i = 0; i < response.data.length; i++) {
            const toolLife = parseInt(response.data[i].刀具额定寿命) === 0 ? 1 : parseInt(response.data[i].刀具额定寿命)
            if (response.data[i].刀具状态 === 1) this.toolInfo.ok += 1
            if (response.data[i].刀具状态 === 2) this.toolInfo.normal += 1
            if (response.data[i].刀具状态 === 3) this.toolInfo.destroy += 1
            this.toolList.push({
              toolNum: response.data[i].刀具代码,
              刀具ID: response.data[i].刀具ID,
              toolGroup: response.data[i].刀具组号,
              toolCount: response.data[i].已用寿命,
              toolLife: toolLife,
              thresholdValue1: response.data[i].预警值1,
              thresholdValue1_yuan: response.data[i].预警值1,
              thresholdValue2: response.data[i].预警值2,
              thresholdValue2_yuan: response.data[i].预警值2,
              residue: Math.floor((1 - response.data[i].已用寿命 / toolLife) * 100 * 100) / 100,
              工位名称: response.data[i].工位名称,
              刀具名称: response.data[i].名称,
              刀具名称_yuan: response.data[i].名称,
              规格型号: response.data[i].型号,
              刀具状态: response.data[i].刀具状态,
              采购日期: response.data[i].采购日期.substring(0, 10),
              设备名称: response.data[i].设备名称,
              操作时间: response.data[i].操作时间,
              采购日期_yuan: response.data[i].采购日期.substring(0, 10),
              edit: false
            })
          }
          console.log(this.toolList)
        }
      })
    },
    searchTableCopy() {
      var param = []
      var Data = this.CreateData('11', '刀具管理_刀具信息查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.toolListCopy = []
          for (let i = 0; i < response.data.length; i++) {
            const toolLife = parseInt(response.data[i].刀具额定寿命) === 0 ? 1 : parseInt(response.data[i].刀具额定寿命)
            this.toolListCopy.push({
              toolNum: response.data[i].刀具代码,
              刀具ID: response.data[i].刀具ID,
              toolGroup: response.data[i].刀具组号,
              toolCount: response.data[i].已用寿命,
              toolLife: toolLife,
              thresholdValue1: response.data[i].预警值1,
              thresholdValue1_yuan: response.data[i].预警值1,
              thresholdValue2: response.data[i].预警值2,
              thresholdValue2_yuan: response.data[i].预警值2,
              residue: Math.floor((1 - response.data[i].已用寿命 / toolLife) * 100 * 100) / 100,
              工位名称: response.data[i].工位名称,
              刀具名称: response.data[i].名称,
              刀具名称_yuan: response.data[i].名称,
              规格型号: response.data[i].型号,
              刀具状态: response.data[i].刀具状态,
              采购日期: response.data[i].采购日期.substring(0, 10),
              设备名称: response.data[i].设备名称,
              操作时间: response.data[i].操作时间,
              采购日期_yuan: response.data[i].采购日期.substring(0, 10),
              edit: false
            })
          }
          this.dialogVisibleTool = true
        }
      })
    },
    // 确定编辑设备台账信息
    toolManagementSubmit(row) {
      var param = []
      param[0] = ['刀具ID', row.刀具ID]
      param[1] = ['thresholdValue1', row.thresholdValue1]
      param[2] = ['thresholdValue2', row.thresholdValue2]
      param[3] = ['刀具名称', row.刀具名称]
      param[4] = ['采购日期', row.采购日期]
      var Data = this.CreateData('12', '刀具管理_刀具设备台账编辑', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          if (response.data[0]['result'] === '1') {
            this.$message.success('编辑成功！')
            row.edit = false
            this.searchTable()
          } else {
            this.$message.error('编辑失败！')
          }
        } else {
          this.$message.error('编辑失败！')
        }
      })
    },
    // 取消编辑设备台账信息
    cancelEdit(index, row) {
      row.thresholdValue1	=	row.thresholdValue1_yuan
      row.thresholdValue2	=	row.thresholdValue2_yuan
      row.刀具名称	=	row.刀具名称_yuan
      row.采购日期	=	row.采购日期_yuan
      row.edit	=	false
      this.dialogVisibleAccount = true
    },
    searchTableHis() {
      if (!this.deliveryDate) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate.length < 2) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate[0] === '') {
        this.$message.warning('请选择查询时间')
        return
      }
      this.loading = true
      this.tableData = []
      var param = []
      param[0] = ['开始时间', this.deliveryDate[0]]
      param[1] = ['结束时间', this.deliveryDate[1]]
      param[2] = ['设备名称', this.deviceName]
      param[3] = ['PageCurrent', this.PageCurrent]
      param[4] = ['PageSize', this.pageSize]
      param[5] = ['PageCount', '1111', 'int', '1']
      param[6] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '刀具管理_刀具设备台账历史查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableData = response.data.result
          this.total = parseInt(response.data.output[0].ItemCount)
        }
        this.loading = false
      })
    },
    searchTableHisExport() {
      if (this.tableData.length === 0) {
        this.$message.warning('请查询要导出的数据')
        return
      }
      if (!this.deliveryDate) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate.length < 2) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate[0] === '') {
        this.$message.warning('请选择查询时间')
        return
      }
      var param = []
      var toolString = ''
      for (let i = 0; i < this.selectTool.length; i++) {
        toolString += this.selectTool[i] + ','
      }
      toolString = toolString.substring(0, toolString.length - 1)
      const blob = 'data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7'
      param[0] = ['开始时间', this.deliveryDate[0]]
      param[1] = ['结束时间', this.deliveryDate[1]]
      param[2] = ['opName', this.opnameThis]
      param[3] = ['ToolGroup', toolString]
      var Data = this.CreateData('2003', 'LG_刀具管理_刀具设备台账历史导出', param)
      this.exportExcel_NPOI(Data, blob)
    },
    handleSizeChange(val) {
      this.PageCurrent = 1
      this.pageSize = val
      this.searchTableHis()
    },
    handleCurrentChange(val) {
      this.PageCurrent = val
      this.searchTableHis()
    }
  }
}
</script>
<style scoped>
    .toolInfo{
        height: 100px;
        line-height: 50px;
        text-align: center;
        font-size: 32px;
        color: white;
        flex: 1;
        margin: 0 100px;
    }
    .toolCard {
        text-align: center;
        font-size: 30px;
        margin: 10px 0 0 10px;
    }
    ::v-deep .el-progress-bar__inner{
        line-height: 0;
    }
</style>
