<!--
 * @Author: Do not edit
 * @Date: 2024-01-09 13:49:03
 * @LastEditTime: 2024-01-30 14:59:42
 * @LastEditors: DY
 * @Description:
-->
<template>
  <div class="scrap">
    <!-- <div style="float: right" type="primary" size="small" plain @click="goback()">
      <img class="homeIcon" src="./../assets/home.png" alt="">
    </div>
    <div style="height: 60px;">
      <h2>报废管理</h2>
    </div> -->
    <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="goback" src="./../assets/home.png" alt="">
      </van-col>
    </van-row>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="whiteForm">
            <el-form-item label="工单选择" prop="workOrderId">
              <el-select v-model="ruleForm.workOrderId" filterable clearable @focus="focusInput($event)" placeholder="请选择工单" style="width: 100%; display: block">
                <el-option v-for="(item, index) in workOrderList" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="whiteForm">
            <el-form-item label="报废数量" prop="num">
              <el-input v-model="ruleForm.num" @focus="show = true" controls-position="right" :min="0" style="width: 100%; display: block"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <van-number-keyboard
        v-model="ruleForm.num"
        :show="show"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
      />
      <el-form-item label="报废原因" prop="detName" class="reson">
        <br>
        <div class="resonDiv">
          <el-checkbox-group v-model="ruleForm.detName" style="width: 100%; display: block; text-align: left">
            <el-checkbox v-for="(item, index) in scrapList" :key="index" :label="item.id" :name="item.id">{{ item.content }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="whiteForm">
            <el-form-item label="产线" prop="lineId">
              <el-select v-model="ruleForm.lineId" filterable clearable placeholder="请选择产线" @focus="focusInput1($event)" style="width: 100%; display: block" @change="getSection">
                <el-option v-for="(item, index) in lineArray" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="whiteForm">
            <el-form-item label="工段" prop="sectionId">
              <el-select v-model="ruleForm.sectionId" filterable clearable placeholder="请选择产线" @focus="focusInput2($event)" style="width: 100%; display: block">
                <el-option v-for="(item, index) in sectionArray" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="whiteForm">
            <el-form-item label="时间" prop="logTime">
              <el-date-picker type="datetime" placeholder="选择日期" value-format="timestamp" v-model="ruleForm.logTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="whiteForm">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="ruleForm.remark" @focus="focusInput3($event)"></el-input>
              <!-- <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.logTime" style="width: 100%;"></el-date-picker> -->
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <!-- <el-button @click="resetForm('ruleForm')">取消</el-button> -->
          <el-button class="subButton" :disabled="disabled" type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <SimpleKeyboard
      v-show="simpleShow"
      v-model="inputValue"
      ref="keyboardClass"
      keyboardClass="keyboardClass"
      @on-change="onChange"
      @on-key-press="onKeyPress"
      @close="simpleShow = false"
      :input="inputValue"
      :maxLength="30"
    />
    <SimpleKeyboard
      v-show="simpleShow1"
      v-model="inputValue1"
      ref="keyboardClass1"
      keyboardClass="keyboardClass1"
      @on-change="onChange1"
      @on-key-press="onKeyPress1"
      @close="simpleShow1 = false"
      :input="inputValue1"
      :maxLength="30"
    />
    <SimpleKeyboard
      v-show="simpleShow2"
      v-model="inputValue2"
      ref="keyboardClass2"
      keyboardClass="keyboardClass2"
      @on-change="onChange2"
      @on-key-press="onKeyPress2"
      @close="simpleShow2 = false"
      :input="inputValue2"
      :maxLength="30"
    />
    <SimpleKeyboard
      v-show="simpleShow3"
      v-model="inputValue3"
      ref="keyboardClass3"
      keyboardClass="keyboardClass3"
      @on-change="onChange3"
      @on-key-press="onKeyPress3"
      @close="simpleShow3 = false"
      :input="inputValue3"
      :maxLength="30"
    />
  </div>
</template>

<script>
import { workOrderList, scrapDetList, createScrap, authList } from '@/api/quality'
import SimpleKeyboard from './components/simpleKeyboard.vue'
import { getUserId } from '@/utils/auth'

export default {
  components: { SimpleKeyboard },
  data () {
    return {
      ruleForm: {
        workOrderId: '',
        num: '',
        detId: '',
        detName: [],
        lineId: undefined,
        sectionId: undefined,
        remark: undefined,
        source: 1,
        logTime: new Date().getTime()
      },
      show: false,
      simpleShow: false,
      simpleShow1: false,
      simpleShow2: false,
      simpleShow3: false,
      input: null,
      inputEle: null,
      inputEle1: null,
      inputEle2: null,
      inputEle3: null,
      // field: '',
      workOrderList: [],
      lineArray: [],
      scrapList: [],
      sectionArray: [],
      disabled: true,
      rules: {
        // workOrderId: [
        //   { required: true, message: '请选择工单', trigger: 'change' }
        // ],
        // num: [
        //   { required: true, message: '请输入报废数量', trigger: 'blur' }
        // ],
        // detName: [
        //   { required: true, message: '请选择报废原因', trigger: 'change' }
        // ]
      }
    }
  },
  watch: {
    ruleForm: {
      handler (val) {
        console.log('场次', val)
        if (val.workOrderId && val.num && val.detName.length > 0) {
          this.disabled = false
        }
      },
      deep: true
      // immediate: true
    }
  },
  computed: {
    inputValue: {
      get () {
        return this.value
      },
      set (value) {
        this.ruleForm.workOrderId = value
        // this.$emit('inputChange', value, this.field)
      }
    },
    inputValue1: {
      get () {
        return this.value
      },
      set (value) {
        this.ruleForm.lineId = value
      }
    },
    inputValue2: {
      get () {
        return this.value
      },
      set (value) {
        this.ruleForm.sectionId = value
      }
    },
    inputValue3: {
      get () {
        return this.value
      },
      set (value) {
        this.ruleForm.remark = value
      }
    }
  },
  mounted () {
    this.getDict()
    this.ruleForm = {
      workOrderId: '',
      num: '',
      detId: '',
      detName: [],
      lineId: undefined,
      sectionId: undefined,
      remark: undefined,
      source: 1,
      logTime: new Date().getTime()
    }
  },
  methods: {
    getSection (value) {
      const temp = this.lineArray.filter(item => {
        return item.id === value
      })
      this.sectionArray = temp[0].children
      if (this.sectionArray.length > 0) {
        this.ruleForm.sectionId = this.sectionArray[0].id
      } else {
        this.ruleForm.sectionId = ''
      }
      // workshopSectionListByLine({ id: this.ruleForm.lineId }).then(res => {
      //   this.sectionArray = res.data.data
      // })
    },
    inputFun () {
      this.$emit('input')
    },
    focusInput (e) {
      this.inputEle = e.srcElement
      // 关闭所有keyboard
      // const arr = document.querySelectorAll('.hg-theme-default')
      // arr.forEach((ele) => {
      //   ele.style.visibility = 'hidden'
      // })
      // // 打开当前输入框的keyboard
      // const currentKeyborad = this.$refs[this.keyboardClass]
      // currentKeyborad.$el.style.visibility = 'visible'
      this.simpleShow = true
      this.simpleShow1 = false
      this.simpleShow2 = false
      this.simpleShow3 = false
      // this.$emit('focus')
    },
    focusInput1 (e) {
      this.inputEle1 = e.srcElement
      this.simpleShow1 = true
      this.simpleShow = false
      this.simpleShow2 = false
      this.simpleShow3 = false
    },
    focusInput2 (e) {
      this.inputEle2 = e.srcElement
      this.simpleShow2 = true
      this.simpleShow1 = false
      this.simpleShow = false
      this.simpleShow3 = false
    },
    focusInput3 (e) {
      this.inputEle3 = e.srcElement
      this.simpleShow3 = true
      this.simpleShow2 = false
      this.simpleShow1 = false
      this.simpleShow = false
    },
    onChange1 (input) {
      this.inputValue1 = input
      this.$set(this.ruleForm, 'lineId', input)
      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
      this.inputEle1.focus()
    },
    onChange2 (input) {
      this.inputValue2 = input
      this.$set(this.ruleForm, 'sectionId', input)
      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
      this.inputEle2.focus()
    },
    onChange3 (input) {
      this.inputValue3 = input
      // this.$set(this.ruleForm, 'remark', input)
      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
      this.inputEle3.focus()
    },
    onChange (input) {
      this.inputValue = input
      this.$set(this.ruleForm, 'workOrderId', input)
      console.log('输出', input)
      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
      // this.inputEle.focus()
    },
    onKeyPress3 (button) {
      console.log('onKeyPress', button)
    },
    onKeyPress2 (button) {
      console.log('onKeyPress', button)
    },
    onKeyPress1 (button) {
      console.log('onKeyPress', button)
    },
    onKeyPress (button) {
      console.log('onKeyPress', button)
    },
    onInput (value) {
      // Toast(value);
      console.log('value', value, this.ruleForm.num)
    },
    onDelete () {
      // Toast('删除');
    },
    goback () {
      // this.$router.go(-1)
      this.$router.push({
        path: 'home'
      })
    },
    async getDict () {
      const workRes = await workOrderList()
      this.workOrderList = workRes?.data?.data
      // await lineList().then(res => {
      //   this.lineArray = res?.data?.data.map(item => {
      //     return {
      //       name: item.name,
      //       id: item.id
      //     }
      //   })
      // })
      await authList({ userId: getUserId() }).then(res => {
        console.log('res', res.data.data)
        if (res && res.data.data.datas.length > 0) {
          this.lineArray = res.data.data.datas
          this.ruleForm.lineId = this.lineArray[0].id
          this.getSection(this.ruleForm.lineId)
        } else {
          this.lineArray = []
        }
      })
      const scrapRes = await scrapDetList()
      this.scrapList = scrapRes?.data?.data
      // this.scrapList.push({
      //   content: '其他',
      //   id: '10086'
      // })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.detId = this.ruleForm.detName.join(',')
          createScrap(this.ruleForm).then(res => {
            console.log(res.data)
            if (res.data.code === 0) {
              this.$message({
                message: '提交成功！',
                type: 'success'
              })
              this.$router.push({
                path: 'list'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
.subButton {
  background-color: #456DFF;
  width: 168px;
  height: 56px;
  box-shadow: 0px 16px 16px 0px rgba(25,70,170,0.31);
  border-radius: 31px;
}
.el-checkbox {
  background: #EDF0FD;
  box-shadow: 0px 6px 8px 0px #D2D9E8, inset 0px 6px 6px 0px #FFFFFF;
  width: 216px;
  height: 56px;
  border-radius: 7px;
  line-height: 56px;
  padding: 5px;
  box-sizing: border-box;
}
.reson {
  background-color: #FFFFFF;
  border-radius: 8px;
  margin-bottom: 8px !important;
  padding-bottom: 15px;
}
.el-checkbox__label {
  padding-right: 10px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 160px;
  line-height: 1;
}
.demo-ruleForm .reson .el-form-item__content {
  margin-left: 20px !important;
}
.resonDiv {
  display: flex;
  width: 100%;
}
.whiteForm {
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 8px;
}
.el-input__inner {
  border: none;
}
.el-form-item {
  margin: 0;
}
.demo-ruleForm .reson .el-form-item__label {
  border: none;
}
.demo-ruleForm .el-form-item__label {
  color: #276BFF;
  border-right: 1px solid #000000;
  height: 18px;
  line-height: 18px;
  margin: 11px 0;
}
.homeIcon {
  width: 84px;
  height: 84px;
}
.scrap {
  background-image: url('./../assets/quality-bg.png');
  height: 100vh;
  width: 100vw;
  padding: 20px 24px;
  box-sizing: border-box;
  /* font-size: 20px; */
}
</style>
