<!--
 * @Author: Do not edit
 * @Date: 2024-01-09 13:48:42
 * @LastEditTime: 2024-04-28 16:55:37
 * @LastEditors: DY
 * @Description:
-->
<template>
  <div class="quality">
    <van-row type="flex" justify="space-between">
      <van-col span="5" style="text-align: left">
        <h2>质量管理器</h2>
      </van-col>
      <van-col span="4" style="text-align: right">
        <img class="homeIcon" @click="toHome" src="./../assets/home.png" alt="">
      </van-col>
    </van-row>
    <van-row gutter="10" style="margin-top: -20px;">
      <van-col span="12">
        <van-dropdown-menu >
          <van-dropdown-item v-model="listQuery.productionLineId" :options="lineArray" @change="getSection" />
        </van-dropdown-menu>
      </van-col>
      <van-col span="12">
        <van-dropdown-menu>
          <van-dropdown-item v-model="listQuery.sectionId" :options="sectionArray" @change="getQuality()" />
        </van-dropdown-menu>
      </van-col>
    </van-row>
    <!-- <div class="count"> -->
    <van-row gutter="10">
      <van-col span="12">
        <div class="count">本班次合计数量：{{ count }}</div>
      </van-col>
      <van-col span="12">
        <van-row gutter="10" style="font-size: 9px">
          <van-col span="8">
            <div class="count" @click="getQuality">
              <img style="width: 15px; height: 15px" src="./../assets/refresh.png" alt="">
              <span style="margin-left: 10px">刷 新</span>
            </div>
          </van-col>
          <van-col span="8">
            <div class="count" :style="[{ background: isCancel ? '#FFA927' : '#FFFFFF' }]" @click="isCancel = !isCancel">
              <img style="width: 15px; height: 15px" src="./../assets/cancel.png" alt="">
              <span style="margin-left: 10px">撤 销</span>
            </div>
          </van-col>
          <van-col span="8">
            <div v-show="showReset" class="count" @click="reset">
              <img style="width: 15px; height: 15px" src="./../assets/reset.png" alt="">
              <span style="margin-left: 10px">重 置</span>
            </div>
          </van-col>
        </van-row>
      </van-col>
    </van-row>
    <div style="height: 7px"></div>
    <el-scrollbar class="scollbar" ref="scrollbar" style="height: 75%;" >
      <el-backtop target=".scollbar .el-scrollbar__wrap" :visibility-height="10" :bottom="50">
        <i class="el-icon-caret-top" />
      </el-backtop>
      <div class="content" v-for="(item, index) in typeList" :key="index">
        <van-row type="flex" align="center" style="margin-left: -20px">
          <van-col span="1">
            <img style="width: 20px; height: 20px;" src="./../assets/icon.png" alt="">
          </van-col>
          <van-col span="8">
            <p style="text-align: left; color: #276BFF">{{ item[0].typeName }}</p>
          </van-col>
        </van-row>
        <van-row type="flex">
          <van-col span="6" v-for="it in item" :key="it.id">
            <div :class=" isCancel ? 'flexCancelItem' : 'flexItem'">
            <!-- <div class="flexItem"> -->
              <!-- <div> -->
                <div class="contain">
                  <div class="leftDiv">{{ it.count }}</div>
                </div>
              <!-- </div> -->
              <!-- <div> -->
                <div class="rightDiv" @click="addRecord(it)">{{ it.detContent }}</div>
              <!-- </div> -->
            </div>
          </van-col>
        </van-row>
      </div>
    </el-scrollbar>
    <!-- <div class="ext"></div> -->
    <!-- <el-backtop target=".quality" :visibility-height="10" :bottom="10">
      <i class="el-icon-caret-top" />
    </el-backtop> -->
  </div>
</template>

<script>
import { qualityManage, createInspection, deleteByCancel, authList, resetBtn } from '@/api/quality'
import { getUserId } from '@/utils/auth'

export default {
  name: 'Quality',
  data () {
    return {
      isCancel: false,
      lineArray: [],
      sectionArray: [],
      listQuery: {
        productionLineId: '',
        sectionId: ''
      },
      count: 0,
      typeList: [],
      showReset: false
    }
  },
  mounted () {
    this.getLine()
  },
  methods: {
    reset () {
      resetBtn(this.listQuery).then(res => {
        if (res.data.data === true) {
          this.typeList.forEach(item => {
            item.forEach(it => {
              it.count = 0
            })
          })
          this.count = 0
          this.$message.success('重置完成！')
        } else {
          this.typeList = []
          this.count = 0
        }
      })
    },
    addRecord (value) {
      const now = new Date() // 创建一个表示当前时间的Date对象
      const formattedTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
      // console.log(formattedTime)
      if (!this.isCancel) {
        createInspection({
          ...this.listQuery,
          inspectionDetId: value.detId,
          checkTime: formattedTime
        }).then(res => {
          if (res.data.code === 0) {
            // this.typeList.forEach(element => {
            //   element.forEach(el => {
            //     el.active = false
            //   })
            // })
            // value.active = true
            // this.$set(value, 'active', true)
            value.count++
            this.count++
          }
        })
      } else {
        if (value.count > 0) {
          deleteByCancel({
            ...this.listQuery,
            inspectionDetId: value.detId,
            checkTime: formattedTime
          }).then(res => {
            if (res.data.code === 0) {
              // this.typeList.forEach(element => {
              //   element.forEach(el => {
              //     el.active = false
              //   })
              // })
              // value.active = true
              // this.$set(value, 'active', true)
              value.count--
              this.count--
            }
          })
        } else {
          this.$message.warning('数量小于0，不可操作')
        }
      }
    },
    toHome () {
      this.$router.push({
        path: 'home'
      })
    },
    getQuality () {
      // qualityManage().then(res => {
      qualityManage(this.listQuery).then(res => {
        if (res.data.code === 0 && JSON.stringify(res.data.data) !== '{}') {
          this.typeList = Object.values(res.data.data)
          this.count = this.typeList[0][0].sunCount
          if (this.typeList[0][0]?.resetMethod === 1) {
            this.showReset = true
          }
        } else {
          this.typeList = []
          this.count = 0
        }
      })
    },
    getLine () {
      authList({ userId: getUserId() }).then(res => {
        if (res && res?.data?.data?.datas?.length > 0) {
          this.lineArray = res.data.data.datas.map(item => {
            item.text = item.name
            item.value = item.id
            return item
          })
          this.listQuery.productionLineId = this.lineArray[0].value
          this.getSection(this.listQuery.productionLineId)
        } else {
          this.lineArray = []
          this.listQuery.productionLineId = ''
        }
      })
    },
    getSection (value) {
      const temp = this.lineArray.filter(item => {
        return item.id === value
      })
      this.sectionArray = temp[0].children.map(it => {
        return {
          text: it.name,
          value: it.id
        }
      })
      if (this.sectionArray.length > 0) {
        this.listQuery.sectionId = this.sectionArray[0].value
        this.getQuality()
      } else {
        this.listQuery.sectionId = ''
      }
      // workshopSectionListByLine({ id: this.listQuery.productionLineId }).then(res => {
      //   this.sectionArray = res.data.data.map(item => {
      //     return {
      //       text: item.name,
      //       value: item.id
      //     }
      //   })
      // })
    }
  }
}
</script>

<style scoped>
.flexItem {
  display: flex;
  margin-right: 20px;
  width: 226px;
  line-height: 72px;
  box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
  /* background-color: #FFFFFF; */
   background-image: url('./../assets/2.png');
   background-size: 100%;
}
.flexItem:active {
  background-image: url('./../assets/1.png');
  background-size: cover;
}
.flexCancelItem {
  display: flex;
  margin-right: 20px;
  width: 226px;
  line-height: 72px;
  box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
  /* background-color: #FFFFFF; */
   background-image: url('./../assets/cancel1.png');
   background-size: 100%;
}
.flexCancelItem:active {
  background-image: url('./../assets/cancel2.png');
  background-size: cover;
}
.flexActive {
  display: flex;
  margin-right: 20px;
  width: 226px;
  line-height: 72px;
  box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
  /* background-color: #456DFF; */
  background-image: url('./../assets/1.png');
  background-size: cover;
}
.rightDiv {
  border-radius: 7px;
  /* height: 72px; */
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 24px;
  width: 140px;
  text-align: left;
  padding-left: 10px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  /* text-align: justify; */
  text-overflow: ellipsis;
  /* background-color: #276BFF; */
}
/* .rightDiv::after {
  content: "...";
} */
.contain {
  border-radius: 7px 36px 36px 7px;
  height: 72px;
  width: 80px;
  line-height: 72px;
  /* background-color: #FFFFFF; */
  /* margin: 5px 0 5px 0; */
}
.leftDiv {
  border-radius: 7px 36px 36px 7px;
  /* background-color: #456DFF; */
  height: 72px;
  width: 77px;
  color: white;
  line-height: 72px;
  /* margin: 5px 0 5px 0; */
}
.content {
  width: 100%;
  /* height: 40px; */
  /* display: flex; */
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  background: #FFFFFF;
  border-radius: 8px;
  opacity: 0.7;
  backdrop-filter: blur(50px);
  line-height: 40px;
  font-size: 18px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #000000;
  margin-bottom: 7px;
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
  /* overflow: scroll;
  height: 100%; */
}
.count {
  width: 100%;
  height: 40px;
  background: #FFFFFF;
  border-radius: 8px;
  opacity: 0.7;
  backdrop-filter: blur(50px);
  line-height: 40px;
  font-size: 18px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  color: #000000;
  margin-top: 7px;
}
.homeIcon {
  width: 84px;
  height: 84px;
}
.quality {
  background-image: url('./../assets/quality-bg.png');
  background-size: cover;
  height: 100vh;
  width: 100vw;
  padding: 20px 20px;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
