<!--
 * @Author: Do not edit
 * @Date: 2024-01-09 13:49:03
 * @LastEditTime: 2024-01-17 17:07:21
 * @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.content" :name="item.id"></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="请选择产线" style="width: 100%; display: block">
                <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="logTime">
              <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 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="10"
    />
  </div>
</template>

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

export default {
  components: { SimpleKeyboard },
  data () {
    return {
      ruleForm: {
        workOrderId: '',
        num: '',
        detId: '',
        detName: [],
        lineId: undefined,
        logTime: new Date()
      },
      show: false,
      simpleShow: false,
      input: null,
      inputEle: null,
      field: '',
      workOrderList: [],
      lineArray: [],
      scrapList: [],
      rules: {
        workOrderId: [
          { required: true, message: '请选择工单', trigger: 'change' }
        ],
        num: [
          { required: true, message: '请输入报废数量', trigger: 'blur' }
        ],
        detName: [
          { required: true, message: '请选择报废原因', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    inputValue: {
      get () {
        return this.value
      },
      set (value) {
        this.ruleForm.workOrderId = value
        // this.$emit('inputChange', value, this.field)
      }
    }
  },
  mounted () {
    this.getDict()
    this.ruleForm = {
      workOrderId: '',
      num: '',
      detId: '',
      detName: [],
      lineId: undefined,
      logTime: new Date()
    }
  },
  methods: {
    // formItemChange (val, formItemField) {
    //   this.form[formItemField] = val
    //   this.validataForm(formItemField)
    // },
    setWorkOrder (value) {
      console.log('1111', value)
    },
    inputChange () {
      // this.field =
      // this.$emit('input-change')
    },
    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.$emit('focus')
    },
    onChange (input) {
      this.inputValue = input
      this.$set(this.ruleForm, 'workOrderId', input)
      console.log('输出', input)
      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
      this.inputEle.focus()
    },
    onKeyPress (button) {
      console.log('onKeyPress', button)
    },
    onInput (value) {
      // Toast(value);
      console.log('value', value, this.ruleForm.num)
    },
    onDelete () {
      // Toast('删除');
    },
    goback () {
      this.$router.go(-1)
    },
    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
          }
        })
      })
      const scrapRes = await scrapDetList()
      this.scrapList = scrapRes.data.data
    },
    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: 'home'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
.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;
}
.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>
