<template>
  <!-- 钢瓶状态 -->
  <div class="card_cylinder_condition">
    <!-- 重瓶区域 -->
    <div class="card_bottle">
      <div class="card_district">
        <div class="herderArea center_in title_green">重瓶区</div>
        <div class="same_row_in card_add_cylinder">
          <el-input style="margin-right: 10px;" v-model="input" placeholder="输入单位内编号搜索"
            @input="cylinderSearch"></el-input>
          <el-button type="primary" size="medium" icon="el-icon-plus" @click="AddCylinder(1)">添加</el-button>
        </div>
        <div style="width: calc(100% - 30px);padding: 0px 15px 15px 15px;" v-if="bottleData.length > 0">
          <div class="card_item_condition" v-for="(item,index) in bottleData" :key="index">
            <div class="same_row_in">
              <span class="item_index">{{index + 1}}</span>
              <div class="card_item_code">{{item.inner_code}}</div>
            </div>
            <div class="card_red" @click="delSteelCylinder(item,1)">删除</div>
          </div>
        </div>
        <div v-else><el-empty :image="require('../../assets/image/empty.png')" description="暂无燃气瓶"></el-empty></div>
        <div class="card_pagination center_in" v-if="bottleData.length > 0">
          <el-pagination :total="Pagination.Total" :page-size="Pagination.PageSize" :pager-count="5"
            layout="prev, pager, next, jumper" :current-page="Pagination.PageIndex" @size-change="changeSize"
            @current-change="changeCurrent">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 空瓶区 -->
    <div class="card_bottle">
      <div class="card_district">
        <div class="herderArea center_in title_yellow">空瓶区</div>
        <div class="same_row_in card_add_cylinder">
          <el-input style="margin-right: 10px;" v-model="input1" placeholder="输入单位内编号搜索"
            @input="cylinderSearch1"></el-input>
          <el-button type="primary" size="medium" icon="el-icon-plus" @click="AddCylinder(2)">添加</el-button>
        </div>
        <div style="width: calc(100% - 30px);padding: 0px 15px 15px 15px;" v-if="bottleData1.length > 0">
          <div class="card_item_condition" v-for="(item,index) in bottleData1" :key="index">
            <div class="same_row_in">
              <span class="item_index">{{index + 1}}</span>
              <div class="card_item_code">{{item.inner_code}}</div>
            </div>
            <div style="display: flex;align-items: center;">
              <div class="card_yellow" @click="overdueScrapping(item,'extended')">超期</div>
              <div class="card_pale_red" @click="overdueScrapping(item,'scrap')">报废</div>
              <div class="card_red" @click="delSteelCylinder(item,2)">删除</div>
            </div>
          </div>
        </div>
        <div v-else><el-empty :image="require('../../assets/image/empty.png')" description="暂无燃气瓶"></el-empty></div>
        <div class="card_pagination center_in" v-if="bottleData1.length > 0">
          <el-pagination :total="Pagination1.Total" :page-size="Pagination1.PageSize" :pager-count="5"
            layout="prev, pager, next, jumper" :current-page="Pagination1.PageIndex" @size-change="changeSize1"
            @current-change="changeCurrent1">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 不合格瓶区 -->
    <div class="card_bottle">
      <div class="card_district">
        <div class="herderArea center_in title_red">不合格瓶区</div>
        <div class="card_tabs_abnormal">
          <div class="title_tabs_abnormal" :class="tabsStatus == 'extended' ? 'title_blue':''"
            @click="getTabsStatus('extended')">超期</div>
          <div class="title_tabs_abnormal" :class="tabsStatus == 'scrap' ?'title_blue':''"
            @click="getTabsStatus('scrap')">报废</div>
        </div>
        <div class="same_row_in card_add_cylinder">
          <el-input style="margin-right: 10px;" v-model="input2" placeholder="输入单位内编号搜索"
            @input="cylinderSearch2"></el-input>
          <el-button type="primary" size="medium" icon="el-icon-plus" @click="AddCylinder(3)">添加</el-button>
        </div>
        <div style="width: calc(100% - 30px);padding: 0px 15px 15px 15px;" v-if="bottleData2.length > 0">
          <div class="card_item_condition" v-for="(item,index) in bottleData2" :key="index">
            <div class="same_row_in">
              <span class="item_index">{{index + 1}}</span>
              <div class="card_item_code">{{item.inner_code}}</div>
            </div>
            <div class="card_red" @click="delSteelCylinder(item,3)">删除</div>
          </div>
        </div>
        <div v-else><el-empty :image="require('../../assets/image/empty.png')" description="暂无燃气瓶"></el-empty></div>
        <div class="card_pagination center_in" v-if="bottleData2.length > 0">
          <el-pagination :total="Pagination2.Total" :page-size="Pagination2.PageSize" :pager-count="5"
            layout="prev, pager, next, jumper" :current-page="Pagination2.PageIndex" @size-change="changeSize2"
            @changeCurrent="changeCurrent1">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 添加钢瓶 -->
    <el-dialog :title="addTitle" :visible.sync="staffDialogVisible" width="600px" :close-on-click-modal="false"
      @close="closeDialog">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="单位内编号" prop="code" :rules="formRuleList[0].rules">
              <el-input v-model="ruleForm.code" placeholder="请输入单位内编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div style="display: flex;align-items: center;">
              <el-button type="primary" @click="addCode">添加</el-button>
              <div style="display: flex;margin-left: 10px;">
                <el-upload :auto-upload="false" :file-list="fileList" :on-change="handleChange"
                  :on-remove="handleRemove" accept=".xlsx, .xls" :show-file-list="false" action class="upload-box">
                  <el-button type="success" plain>批量上传</el-button>
                </el-upload>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="card_Code_list">
              <div class="space_between_in card_item_codeil" v-for="(item,index) in numData" :key="index">
                <div style="display: flex;">
                  <span class="fontsize_17 title_num_code center_in">{{index + 1}}</span>
                  <div class="fontsize_17" style="margin-left: 10px;">{{item}}</div>
                </div>
                <div class="title_red fontsize_17" style="cursor: pointer;" @click="delCode(item)">删除</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="staffDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="handleAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getCylinderStatus,
    addCylinderStatus,
    delCylinderStatus,
    putCylinderStatus
  } from '@/api/condition'
  import pagination from '@/components/pagination'
  import forms from '@/components/forms'
  import * as XLSX from 'xlsx/xlsx.mjs'
  import {
    number
  } from 'echarts'
  export default {
    components: {
      pagination,
      forms
    },
    data() {
      return {
        input: '',
        input1: '',
        input2: '',
        // 重瓶
        Pagination: {
          PageIndex: 1,
          PageSize: 14,
          Total: 0,
        },
        bottleData: [],
        // 空瓶
        Pagination1: {
          PageIndex: 1,
          PageSize: 14,
          Total: 0,
        },
        bottleData1: [],
        // 不合格瓶区
        Pagination2: {
          PageIndex: 1,
          PageSize: 14,
          Total: 0,
        },
        bottleData2: [],
        staffDialogVisible: false,
        formRuleList: [{
          field: 'code',
          label: '单位内编号',
          placeholder: '单位内编号',
          type: 'input',
          colWidth: 24,
          rules: [{
            required: true,
            message: '请输入单位内编号',
            trigger: 'blur'
          }]
        }],
        ruleForm: {
          code: '',
        },
        confirmLoading: false,
        lastUid: null,
        fileList: [],
        numData: [],
        addTitle: '添加',
        codeType: 1,
        // 报废(scrap）超期(extended)
        tabsStatus: 'extended',
      }
    },
    mounted() {
      this.getList(1)
      this.getList1(2)
      this.getList2(this.tabsStatus)
    },
    methods: {
      getList(state) {
        getCylinderStatus({
          page: this.Pagination.PageIndex,
          pageSize: this.Pagination.PageSize,
          status: String(state),
          inner_code: this.input,
        }).then(res => {
          if (res.code == 200) {
            this.bottleData = res.data.list
            this.Pagination.Total = res.data.count
          }
        })
      },
      getList1(state) {
        getCylinderStatus({
          page: this.Pagination1.PageIndex,
          pageSize: this.Pagination1.PageSize,
          status: String(state),
          inner_code: this.input1,
        }).then(res => {
          if (res.code == 200) {
            this.bottleData1 = res.data.list
            this.Pagination1.Total = res.data.count
          }
        })
      },
      getList2(state) {
        getCylinderStatus({
          page: this.Pagination2.PageIndex,
          pageSize: this.Pagination2.PageSize,
          status: String(state),
          inner_code: this.input2,
        }).then(res => {
          if (res.code == 200) {
            this.bottleData2 = res.data.list
            this.Pagination2.Total = res.data.count
          }
        })
      },
      // 切换显示不合格瓶/超期。报废
      getTabsStatus(value) {
        this.tabsStatus = value
        this.getList2(this.tabsStatus)
      },
      cylinderSearch(value) {
        this.getList(1)
      },
      cylinderSearch1(value) {
        this.getList1(2)
      },
      cylinderSearch2(value) {
        this.getList2(this.tabsStatus)
      },
      // 添加钢瓶
      AddCylinder(type) {
        if (type == 1) {
          this.addTitle = '重瓶添加'
        } else if (type == 2) {
          this.addTitle = '空瓶添加'
        } else if (type == 3) {
          this.addTitle = '不合格瓶添加'
        }
        this.codeType = type
        this.staffDialogVisible = true
      },
      handleAdd() {
        if (this.numData.length > 0) {
          this.getAddCode()
        } else {
          this.$refs['ruleForm'].validate((valid) => {
            if (valid) {
              this.numData.push(this.ruleForm.code)
              this.numData = Array.from(new Set(this.numData));
              this.getAddCode()
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }
      },
      // 添加钢瓶
      getAddCode() {
        let arr = ''
        if (this.codeType == '3') {
          arr = this.tabsStatus
        } else {
          arr = String(this.codeType)
        }
        addCylinderStatus({
          status: arr,
          innerCodeList: this.numData,
        }).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.staffDialogVisible = false
            if (this.codeType == 1) {
              this.getList(1)
            } else if (this.codeType == 2) {
              this.getList1(2)
            } else if (this.codeType == 3) {
              this.getList2(this.tabsStatus)
            }
          }
        })
      },
      // 上传钢瓶文件
      async handleChange(ev, fileList) {
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]]
        } else {
          this.fileList = fileList[0]
        }
        let file = ev.raw
        if (this.lastUid == file.uid) {
          return
        }
        this.lastUid = file.uid
        if (file) {
          // console.log(file)
          if (
            file.name.indexOf('.xls') != -1 ||
            file.name.indexOf('.xlsx') != -1
          ) {
            let data = await this.readFile(file)
            let workbook = XLSX.read(data, {
              type: 'binary',
              cellDates: true
            })
            let worksheet = workbook.Sheets[workbook.SheetNames[0]]
            let secondsheet = workbook.Sheets[workbook.SheetNames[1]]
            let resultExcel = XLSX.utils.sheet_to_json(worksheet)
            let tableHead = Object.keys(resultExcel[0]);
            let numarr = String(tableHead)
            this.numData.push(numarr)
            resultExcel.forEach(item => {
              const arr = String(item[tableHead])
              this.numData.push(arr)
            })
            this.numData = Array.from(new Set(this.numData));
          }
        }
      },
      readFile(file) {
        return new Promise(resolve => {
          let reader = new FileReader()
          reader.readAsBinaryString(file)
          reader.onload = ev => {
            resolve(ev.target.result)
          }
        })
      },
      handleRemove(file, fileList) {
        this.fileList = []
        this.resultExcel = []
      },
      // 添加编号
      addCode() {
        if (this.ruleForm.code) {
          this.numData.push(this.ruleForm.code)
          this.numData = Array.from(new Set(this.numData));
          this.ruleForm.code = ''
        }
      },
      // 删除编号数组
      delCode(num) {
        var index = this.numData.indexOf(num);
        if (index !== -1) {
          this.numData.splice(index, 1);
        }
      },
      // 超期\报废
      overdueScrapping(value, type) {
        let arr = []
        arr.push(value.inner_code)
        putCylinderStatus({
          status: type,
          innerCodeList: arr,
        }).then(res => {
          if (res.code == 200) {
            this.getList1(2)
            if (type == this.tabsStatus) {
              this.getList2(this.tabsStatus)
            }
          }
        })
      },
      // 删除钢瓶
      delSteelCylinder(value, type) {
        this.$confirm('此操作将永久删除该钢瓶, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delCylinderStatus({
            id: value.id
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              if (type == 1) {
                const precisePage = Math.ceil((this.Pagination.Total - 1) / this.Pagination.PageSize)
                this.Pagination.PageIndex > precisePage ? precisePage : this
                  .Pagination.PageIndex
                this.Pagination.PageIndex = this.Pagination.PageIndex < 1 ? 1 : this.Pagination.PageIndex
                this.getList(1)
              } else if (type == 2) {
                const precisePage = Math.ceil((this.Pagination1.Total - 1) / this.Pagination1.PageSize)
                this.Pagination1.PageIndex > precisePage ? precisePage : this
                  .Pagination1.PageIndex
                this.Pagination1.PageIndex = this.Pagination1.PageIndex < 1 ? 1 : this.Pagination1.PageIndex
                this.getList1(2)
              } else if (type == 3) {
                const precisePage = Math.ceil((this.Pagination2.Total - 1) / this.Pagination2.PageSize)
                this.Pagination2.PageIndex > precisePage ? precisePage : this
                  .Pagination2.PageIndex
                this.Pagination2.PageIndex = this.Pagination2.PageIndex < 1 ? 1 : this.Pagination2.PageIndex
                this.getList2(this.tabsStatus)
              }
            }
          })
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
      },
      // 重瓶区域
      changeSize(val) {
        this.Pagination.PageSize = val
        this.getList(1)
      },
      changeCurrent(val) {
        this.Pagination.PageIndex = val
        this.getList(1)
      },
      // 空瓶区
      changeSize1(val) {
        this.Pagination1.PageSize = val
        this.getList1(2)
      },
      changeCurrent1(val) {
        this.Pagination1.PageIndex = val
        this.getList1(2)
      },
      // 不合格瓶区
      changeSize2(val) {
        this.Pagination2.PageSize = val
        this.getList2(this.tabsStatus)
      },
      changeCurrent2(val) {
        this.Pagination2.PageIndex = val
        this.getList2(this.tabsStatus)
      },
      // 弹窗关闭
      closeDialog() {
        this.ruleForm.code = ''
        this.numData = []
        this.staffDialogVisible = false
      }
    }
  }
</script>
<style>
  .el-tabs__item.is-active {
    color: #409EFF !important;
  }

  .el-tabs__item {
    color: #fff !important;
  }
</style>
<style lang="scss" scoped>
  .card_cylinder_condition {
    display: flex;
    width: 100%;
    height: 100%;
  }

  .card_bottle {
    padding: 10px 10px 15px 10px;
    flex: 1;
  }

  .card_district {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    // background-color: #354233;
    background-color: rgba(13, 162, 203, 0.1);
    border-radius: 10px;
  }

  .herderArea {
    font-size: 22px;
    font-weight: 500;
    margin-top: 15px;
    width: 250px;
    height: 35px;
    background: url(../../assets/image/decorate.png) no-repeat;
    background-size: 100% 100%;
  }

  .card_add_cylinder {
    width: calc(100% - 30px);
    margin: 15px;
  }

  .card_pagination {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    overflow: hidden;
  }

  .card_item_condition {
    margin: 10px 0px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .2) !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .item_index {
    color: #fff;
    font-size: 18px;
  }

  .card_item_code {
    margin-left: 10px;
    color: #fff;
    font-size: 18px;
  }

  .card_item_codeil {
    padding-right: 8px;
    margin: 10px 0px;
  }

  .card_Code_list {
    max-height: 500px;
    overflow-y: auto;
  }

  .card_red {
    cursor: pointer;
    color: #F56C6C;
    font-size: 17px;
    margin-left: 10px;
  }

  .card_yellow {
    cursor: pointer;
    color: #E6A23C;
    font-size: 17px;
    margin-left: 10px;
  }

  .card_pale_red {
    cursor: pointer;
    color: #b73333;
    font-size: 17px;
    margin-left: 10px;
  }

  .title_num_code {
    width: 20px;
  }

  .fontsize_17 {
    font-size: 17px;
  }

  /* 自定义滚动条整体样式 */
  ::-webkit-scrollbar {
    width: 5px;
    /* 设置滚动条的宽度 */
  }

  /* 自定义滚动条滑块样式 */
  ::-webkit-scrollbar-thumb {
    background-color: #66b1ff;
    /* 设置滑块的颜色 */
    border-radius: 5px;
    /* 设置滑块的圆角 */
  }

  /* 自定义滚动条轨道样式 */
  ::-webkit-scrollbar-track {
    background-color: rgba(102, 177, 255, 0.5) !important;
    border-radius: 5px;
    /* 设置轨道的颜色 */
  }

  .title_green {
    color: #67C23A;
  }

  .title_yellow {
    color: #E6A23C;
  }

  .title_red {
    color: #F56C6C;
  }



  ::v-deep .el-pagination .el-select .el-input .el-input__inner {
    background-color: rgba(2, 59, 115, .8);
  }

  ::v-deep .el-pagination__jump .el-input__inner {
    border: 1px solid rgba(139, 191, 216, .5) !important;
  }

  .el-pagination {
    background-color: rgba(2, 59, 115, .5);
    margin-top: 10px;
    color: #fff;
    border: 1px solid rgba(2, 59, 115, .8);
    padding: 5px 10px;
    border-radius: 3px;
  }

  ::v-deep .el-pagination__editor.el-input .el-input__inner {
    border: 1px solid rgba(139, 191, 216, .5) !important;
    background-color: unset;
    color: #fff;
  }

  ::v-deep .el-pagination .el-select .el-input .el-input__inner {
    border: 1px solid rgba(139, 191, 216, .5) !important;
    background-color: unset;
    color: #fff;
  }

  ::v-deep .el-pagination button {
    color: #fff !important;
    background-color: unset;
  }

  ::v-deep .el-pager li.btn-quicknext {
    color: #fff !important;
  }

  ::v-deep .el-pager li.btn-quickprev {
    color: #fff !important;
  }

  ::v-deep .el-pager li:hover {
    color: #409EFF !important;
  }

  .card_tabs_abnormal {
    width: 100%;
    display: flex;
    align-items: center;
    height: 40px;
    margin-top: 15px;
    background-color: rgba(13, 162, 203, 0.2);
  }

  .title_tabs_abnormal {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
    flex: 1;
    height: 100%;
    cursor: pointer;
  }

  .title_blue {
    // color: #409eff;
    background-color: #409EFF;
  }
</style>
