<template>
  <div class="app-container mes-admin-page">
    <el-card class="topCard">
      <div class="topDiv toolbar">
        <span style="margin-left: 10px">{{ $t('cylinderMaintenance.keywordLabel') }}</span>
        <el-input
          v-model="keyword"
          clearable
          size="small"
          style="width: 240px"
          :placeholder="$t('cylinderMaintenance.keywordPlaceholder')"
          @keyup.enter.native="handleSearch"
        />
        <span style="margin-left: 10px">{{ $t('cylinderMaintenance.productionDateLabel') }}</span>
        <el-date-picker
          v-model="dateTime2"
          align="center"
          format="yyyy-MM-dd"
          :placeholder="$t('cylinderMaintenance.selectProductionDate')"
          size="small"
          style="width: 150px;"
          type="date"
          value-format="yyyy-MM-dd"
        />
        <span style="margin-left: 10px">{{ $t('cylinderMaintenance.productionStatusLabel') }}</span>
        <el-select
          v-model="productStatus"
          :placeholder="$t('cylinderMaintenance.selectProductionStatus')"
          size="small"
          style="width: 150px"
        >
          <el-option
            v-for="item in productStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"
          />
        </el-select>
        <span v-if="productStatus === 1" style="margin-left: 10px">{{ $t('cylinderMaintenance.onlineTimeLabel') }}</span>
        <el-date-picker
          v-if="productStatus === 1"
          v-model="dateTime1"
          align="center"
          :end-placeholder="$t('cylinderMaintenance.endDate')"
          format="yyyy-MM-dd"
          :range-separator="$t('cylinderMaintenance.dateRangeSeparator')"
          size="small"
          :start-placeholder="$t('cylinderMaintenance.startDate')"
          style="width: 240px;"
          type="daterange"
          value-format="yyyy-MM-dd"
        />
        <el-button
          type="primary"
          plain
          size="small"
          icon="el-icon-search"
          style="margin-left: 10px"
          @click="handleSearch"
        >{{ $t('cylinderMaintenance.search') }}</el-button>
        <el-button
          type="warning"
          size="small"
          icon="el-icon-upload2"
          @click="openImportDialog"
        >{{ $t('cylinderMaintenance.importData') }}</el-button>
      </div>
      <div class="tablePanel">
        <el-table
          v-loading="loading"
          :data="tableDataAll"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          :element-loading-text="$t('cylinderMaintenance.loadingData')"
          :empty-text="$t('cylinderMaintenance.noData')"
          border
          height="640px"
          size="mini"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="60"
            align="center"
            :label="$t('cylinderMaintenance.sequence')"
          />
          <el-table-column align="center" :label="$t('cylinderMaintenance.blankNo')">
            <template slot-scope="scope">
              {{ scope.row.毛坯号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('cylinderMaintenance.materialNo')" width="100px">
            <template slot-scope="scope">
              {{ scope.row.物料号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('cylinderMaintenance.groupNo')" width="80px">
            <template slot-scope="scope">
              {{ scope.row.分组号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('cylinderMaintenance.productionMonth')" width="100px">
            <template slot-scope="scope">
              {{ scope.row.生产月份 }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('cylinderMaintenance.crankcaseNo')">
            <template slot-scope="scope">
              {{ scope.row.曲轴箱号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('cylinderMaintenance.bindingTime')">
            <template slot-scope="scope">
              {{ scope.row.绑定时间 }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('cylinderMaintenance.qrCode')">
            <template slot-scope="scope">
              {{ scope.row.二维码 }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('cylinderMaintenance.serialNo')" width="100px">
            <template slot-scope="scope">
              {{ scope.row.流水号 }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block" style="margin-top: 10px">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[30, 50, 100]"
          :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="dialogFormVisible3"
      :title="$t('cylinderMaintenance.importTitle')"
      center
      style="min-height: 200px"
      width="1000px"
    >
      <div class="app-container">
        <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload"/>
        <el-table
          v-loading="loading"
          :data="tableDataListAll"
          :header-cell-style="{ background: '#f5f5f5', color: '#606266' }"
          :element-loading-text="$t('cylinderMaintenance.loadingData')"
          :empty-text="$t('cylinderMaintenance.noImportData')"
          border
          height="320px"
          size="mini"
          style="width: 100%"
        >
          <el-table-column align="center" :label="$t('cylinderMaintenance.blankNo')">
            <template slot-scope="scope">
              {{ scope.row.毛坯号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('cylinderMaintenance.materialNo')">
            <template slot-scope="scope">
              {{ scope.row.物料号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('cylinderMaintenance.groupNo')">
            <template slot-scope="scope">
              {{ scope.row.分组号 }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="materialAddAllCancel">{{ $t('common.cancel') }}</el-button>
        <el-date-picker
          v-model="dateTime"
          :clearable="false"
          align="center"
          format="yyyy-MM-dd"
          size="small"
          style="width: 150px;"
          type="date"
          value-format="yyyy-MM-dd"
        />
        <el-button
          type="primary"
          icon="el-icon-upload"
          size="small"
          @click="materialAddAllSubmit"
        >{{ $t('cylinderMaintenance.confirmImport') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadExcelComponent from './UploadExcel.vue'
import { getNowShotTime } from '../../../utils/tool'
export default {
  name: 'CylinderMaintenance',
  components: { UploadExcelComponent },
  data() {
    return {
      productStatus: 0,
      dateTime: '',
      dateTime2: '',
      dateTime1: [],
      keyword: '',
      loading: false,
      tableDataAll: [],
      tableDataListAll: [],
      dialogFormVisible3: false,
      total: 0,
      pageSize: 30,
      pageCurrent: 1
    }
  },
  computed: {
    productStatusList() {
      return [
        {
          label: this.$t('cylinderMaintenance.statusAll'),
          value: 0
        },
        {
          label: this.$t('cylinderMaintenance.statusCompleted'),
          value: 1
        },
        {
          label: this.$t('cylinderMaintenance.statusPending'),
          value: 2
        }
      ]
    }
  },

  created() {
    this.dateTime1 = [getNowShotTime(), getNowShotTime()]
  },
  mounted() {
    this.searchOrder()
  },
  methods: {
    handleSearch() {
      this.pageCurrent = 1
      this.searchOrder()
    },
    searchOrder() {
      this.loading = true
      var param = []
      let dateTime1_check = 0
      let dateTime1_start = ''
      let dateTime1_end = ''
      if (!this.dateTime1) {
        dateTime1_check = 0
      } else {
        dateTime1_check = 1
        dateTime1_start = this.dateTime1[0]
        dateTime1_end = this.dateTime1[1]
      }
      param[0] = ['生产日期', this.dateTime2]
      param[1] = ['关键字', this.keyword]
      param[2] = ['生产时间_check', dateTime1_check]
      param[3] = ['生产开始时间', dateTime1_start]
      param[4] = ['生产结束时间', dateTime1_end]
      param[5] = ['生产状态', this.productStatus]
      param[6] = ['PageCurrent', this.pageCurrent]
      param[7] = ['PageSize', this.pageSize]
      param[8] = ['PageCount', '1111', 'int', '1']
      param[9] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData(
        '11',
        '缸体分组号_分页查询',
        param
      )
      this.ExecDatabase(Data).then((response) => {
        if (response.data.result.length !== 0) {
          this.tableDataAll = response.data.result
          this.total = parseInt(response.data.output[0].ItemCount)
        } else {
          this.tableDataAll = []
          this.total = 0
        }
      }).catch(() => {
        this.tableDataAll = []
        this.total = 0
        this.$message.error(this.$t('cylinderMaintenance.queryFailed'))
      }).finally(() => {
        this.loading = false
      })
    },
    openImportDialog() {
      this.clearImportData()
      this.dialogFormVisible3 = true
    },
    beforeUpload(file) {
      return true
    },
    handleSuccess({ results, header }) {
      const tableName = `缸体分组号_导入临时表`
      var Data = this.CreateData('7', tableName, results, header)
      this.ExecDatabase(Data).then(response => {
        this.fetchTempTableData()
      })
    },
    fetchTempTableData() {
      this.tableDataListAll = []
      var param = []
      var Data = this.CreateData('11', '缸体分组号_导入临时表_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tableDataListAll = response.data
      }).catch(() => {
        this.tableDataListAll = []
        this.$message.error(this.$t('cylinderMaintenance.importPreviewFailed'))
      })
    },
    materialAddAllSubmit() {
      if (!this.tableDataListAll.length) {
        this.$message.error(this.$t('cylinderMaintenance.noImportData'))
        return
      }
      if (!this.dateTime) {
        this.$message.error(this.$t('cylinderMaintenance.selectProductionDate'))
        return
      }
      this.loading = true
      const param = []
      param[0] = ['生产月份', this.dateTime]
      const Data = this.CreateData('12', '缸体分组号_确认导入_新增', param)
      this.ExecDatabase(Data).then((response) => {
        if (response.data.length > 0 && response.data[0].result === '1') {
          this.$message.success(this.$t('cylinderMaintenance.importSuccess'))
          this.dialogFormVisible3 = false
          this.clearImportData()
          this.searchOrder()
        } else {
          this.$message.error(this.$t('cylinderMaintenance.importFailed'))
        }
      }).catch(() => {
        this.$message.error(this.$t('cylinderMaintenance.importFailed'))
      }).finally(() => {
        this.loading = false
      })
    },
    materialAddAllCancel() {
      this.dialogFormVisible3 = false
      this.clearImportData()
    },
    clearImportData() {
      this.tableDataListAll = []
    },

    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
    }
  }
}
</script>

<style scoped>
.topCard {
  margin: 5px;
}

.topDiv {
  margin-bottom: 10px;
}

.toolbar {
  align-items: center;
}

.tablePanel {
  padding-top: 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(243, 248, 252, 0.92) 100%);
}

.importHint {
  margin: 10px 0;
  color: #909399;
  font-size: 13px;
}

.el-input {
  width: 200px;
}

::v-deep .toolbar .el-button {
  margin-bottom: 2px;
}
</style>
