<!--
 * @Author: gtz
 * @Date: 2022-07-28 10:22:30
 * @LastEditors: gtz
 * @LastEditTime: 2022-08-05 09:55:48
 * @Description: file content
 * @FilePath: \hf-pda\src\pages\material\material-edit.vue
-->
<template>
  <div class="materialEdit">
    <!-- navbar -->
    <van-sticky :offset-top="0">
      <van-nav-bar
        title="PDA换料信息"
        left-arrow
        sticky
        class="eq-header"
        @click-left="onClickLeft"
      />
      <!-- @click-right="onClickRight" -->
    </van-sticky>
    <div class="eq-edit-main">
      <div class="eq-main-item">
        <!-- <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            批次
          </van-col>
          <van-col :span="15" :offset="1" class="eq-field-item-input">
            <van-field
              v-model="dataForm.materialDateName"
              disabled
              class="canInput"
              placeholder="请选择批次"
              @click="handleSelectBatch"
              right-icon="arrow-down"
            />
          </van-col>
        </van-row> -->
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            物料名称
          </van-col>
          <van-col :span="15" :offset="1" class="eq-field-item-input">
            <van-field
              v-model="dataForm.materialName"
              class="canInput"
              disabled
              placeholder="请选择物料"
              @click="handleSelectMaterial"
              right-icon="arrow-down"
            />
          </van-col>
        </van-row>
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            物料编码
          </van-col>
          <van-col :span="15" :offset="1" class="eq-field-item-input">
            <van-field
              v-model="dataForm.materialCode"
              disabled
              placeholder="请选择物料"
            />
          </van-col>
        </van-row>
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            数量
          </van-col>
          <van-col :span="15" :offset="1" class="eq-field-item-input">
            <van-field
              v-model="dataForm.num"
              type="number"
              placeholder="请输入数量"
            />
          </van-col>
        </van-row>
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            换料时间
          </van-col>
          <van-col :span="15" :offset="1" class="eq-field-item-input">
            <van-field
              v-model="formatTime"
              disabled
              class="canInput"
              placeholder="请选择换料时间"
              @click="handleDate"
              right-icon="arrow-down"
            />
          </van-col>
        </van-row>
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            设备名
          </van-col>
          <van-col :span="15" :offset="1" class="eq-field-item-input">
            <van-field
              v-model="dataForm.equipmentName"
              disabled
              class="canInput"
              placeholder="请选择设备"
              @click="handleSelectEq"
              right-icon="arrow-down"
            />
          </van-col>
        </van-row>
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            数据来源
          </van-col>
          <van-col :span="15" :offset="1" class="eq-field-item-input">
            <van-field
              v-model="dataForm.source"
              disabled
              class="canInput"
              placeholder="请选择数据来源"
              right-icon="arrow-down"
              @click="handleSelectSource"
            />
          </van-col>
        </van-row>
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            操作员
          </van-col>
          <van-col :span="15" :offset="1" class="eq-field-item-input">
            <van-field
              v-model="dataForm.operator"
              disabled
              class="canInput"
              placeholder="请选择操作员"
              right-icon="arrow-down"
              @click="handleSelectWorker"
            />
          </van-col>
        </van-row>
      </div>
      <div class="eq-main-edit-item">
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            备注
          </van-col>
          <van-col :span="15" :offset="1" />
          <van-field
            v-model="dataForm.remark"
            type="textarea"
            rows="5"
            autosize
          />
          <van-col style="margin-top: .2rem" :span="10" :offset="1">
            <van-button type="primary" round size="large" @click="resetForm">
              重置
            </van-button>
          </van-col>
          <van-col style="margin-top: .2rem" :span="10" :offset="2">
            <van-button type="info" round size="large" @click="handleSubmit">
              提交
            </van-button>
          </van-col>
        </van-row>
      </div>
    </div>
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        title="换料时间"
        :min-date="minDate"
        @confirm="setDate"
        @cancel="showDate = false"
      />
    </van-popup>
    <material-popup ref="eqPopup" :eq-list="eqList" @changeEq="changeEq" />
    <material-popup-material ref="materialPopup" :material-list="materialList" @changeMaterial="changeMaterial" />
    <material-popup-worker ref="workerPopup" :worker-list="workerList" @changeWorker="changeWorker" />
    <material-popup-source ref="sourcePopup" :source-list="sourceList" @changeSource="changeSource" />
  </div>
</template>

<script>
import moment from 'moment'
import { detail, eqList, materialList, workerList, add, update } from '@/api/material'
import shortLine from '@/components/shortLine.vue'
import materialPopup from './components/materialPopup'
import materialPopupMaterial from './components/materialPopup-material'
import materialPopupWorker from './components/materialPopup-worker'
import materialPopupSource from './components/materialPopup-source'
import { Toast } from 'vant'

export default {
  name: 'materialEdit',
  components: { shortLine, materialPopup, materialPopupMaterial, materialPopupWorker, materialPopupSource },
  data () {
    return {
      eqList: [],
      materialList: [],
      workerList: [],
      sourceList: ['手动', 'PDA'],
      dataForm: {
        id: null,
        equipmentId: null,
        equipmentName: null,
        // materialDateId: null,
        // materialDateName: null,
        // materialDateCode: null,
        materialId: null,
        materialName: null,
        materialCode: null,
        replaceTime: null,
        operator: null,
        num: null,
        source: 'PDA',
        remark: null
      },
      minDate: new Date(2020, 0, 1),
      formatTime: null,
      showDate: false,
      currentDate: null
    }
  },
  mounted () {
    if (this.$route.query.equipmentName) {
      this.dataForm.equipmentName = this.$route.query.equipmentName
    }
    this.getDictList()
  },
  methods: {
    // 返回上一页
    onClickLeft () {
      this.$router.goBack()
    },
    async getDictList () {
      const listQuery = {
        current: 1,
        size: 999
      }
      const resultEq = await eqList(listQuery)
      if (resultEq.success) {
        this.eqList = resultEq.data
      }
      const resultMaterial = await materialList(listQuery)
      if (resultMaterial.success) {
        this.materialList = resultMaterial.data.records
      }
      const resultWorker = await workerList(listQuery)
      if (resultWorker.success) {
        this.workerList = resultWorker.data.records
      }
      if (this.$route.query.id) {
        this.getDetail()
      } else {
        this.dataForm.equipmentId = this.$route.query.equipmentId
        this.dataForm.equipmentName = this.$route.query.equipmentName
      }
    },
    // 获取详情
    async getDetail () {
      const result = await detail({
        id: this.$route.query.id
      })
      if (result.success) {
        this.dataForm = result.data
        this.formatTime = moment(result.data.replaceTime).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    // 更新时间
    setDate (v) {
      this.dataForm.replaceTime = moment(v).format('YYYY-MM-DDTHH:mm:ss')
      this.formatTime = moment(v).format('YYYY-MM-DD HH:mm:ss')
      this.showDate = false
    },
    // 弹出日期选择器
    handleDate () {
      this.showDate = true
    },
    // 修改设备
    changeEq (index) {
      this.dataForm.equipmentId = this.eqList[index].id
      this.dataForm.equipmentName = this.eqList[index].name
    },
    // 弹出设备选择框
    handleSelectEq () {
      this.$refs.eqPopup.init(this.dataForm.equipmentName)
    },
    // 修改批次
    async changeMaterial (index) {
      console.log()
      this.dataForm.materialName = this.materialList[index].name
      this.dataForm.materialCode = this.materialList[index].code
      this.dataForm.materialId = this.materialList[index].id
      // const result = await materialInfo({
      //   externalCode: this.materialList[index].code
      // })
      // if (result.success) {
      //   // this.dataForm.materialDateId = result.data.id
      //   // this.dataForm.materialDateName = result.data.name
      //   // this.dataForm.materialDateCode = result.data.code
      //   this.dataForm.materialName = result.data.materialName
      //   this.dataForm.materialCode = result.data.materialCode
      //   this.dataForm.materialId = result.data.materialId
      // }
    },
    // 弹出批次选择框
    handleSelectMaterial () {
      this.$refs.materialPopup.init(this.dataForm.materialName)
    },
    // 修改操作员
    changeWorker (val) {
      this.dataForm.operator = val
    },
    // 弹出操作员选择框
    handleSelectWorker () {
      this.$refs.workerPopup.init(this.dataForm.operator)
    },
    changeSource (val) {
      this.dataForm.source = val
    },
    handleSelectSource () {
      this.$refs.sourcePopup.init(this.dataForm.source)
    },
    // 提交表单
    async handleSubmit () {
      if (this.dataForm.replaceTime && this.dataForm.materialId && this.dataForm.equipmentId && this.dataForm.num) {
        let result = {}
        if (this.$route.query.id) {
          result = await update(this.dataForm)
        } else {
          result = await add(this.dataForm)
        }
        if (result.success) {
          Toast.success({
            message: '操作成功',
            onClose: () => {
              this.$router.push({
                name: 'material'
              })
            }
          })
        }
      } else {
        this.$notify('物料、设备、换料时间、数量必填！')
      }
    },
    // 重置表单
    resetForm () {
      const id = this.dataForm.id
      this.formatTime = null
      this.dataForm = {
        id,
        equipmentId: null,
        equipmentName: null,
        // materialDateId: null,
        // materialDateName: null,
        // materialDateCode: null,
        materialId: null,
        materialName: null,
        materialCode: null,
        replaceTime: null,
        operator: null,
        source: 'PDA',
        num: null,
        remark: null
      }
    }
  }
}
</script>

<style lang="scss">
.materialEdit {
  width: 100%;
  background: #F6F6F6;
  .eq-header {
    background: #4271FF;
    .van-icon {
      color: #fff;
      font-size: .4375rem;
    }
    .van-nav-bar__content {
      height: 1.5rem;
      line-height: 1.5rem;
      .van-nav-bar__title {
        color: #fff;
        font-size: .4375rem;
      }
    }
  }
  .eq-edit-main {
    width: 100%;
    position: absolute;
    top: 1.5rem;
    bottom: 0;
    overflow: scroll;
    .eq-main-item {
      background: #fff;
      padding-bottom: .25rem;
      margin-bottom: .25rem;
      .eq-field-item {
        padding-top: .25rem;
        line-height: .875rem;
        .eq-field-item-lable {
          text-indent: .375rem;
          font-size: .375rem;
        }
        .van-cell {
          padding: 0 .25rem;
          height: .875rem;
          background: #F6F6F6;
          border-radius: .1875rem;
          .van-field__body {
            height: .875rem;
            .van-field__control {
              height: .875rem;
            }
          }
        }
      }
    }
    .eq-main-edit-item {
      background: #fff;
      padding-bottom: .25rem;
      margin-bottom: .25rem;
      .eq-field-item {
        padding-top: .25rem;
        line-height: .875rem;
        .eq-field-item-lable {
          text-indent: .375rem;
          font-size: .375rem;
        }
        .van-cell {
          width: calc(100% - .75rem);
          margin: 0 .375rem;
          padding: 0 .25rem;
          background: #F6F6F6;
          border-radius: .125rem;
        }
      }
    }
    .eq-main-edit-neirong-item {
      background: #fff;
      padding-bottom: .25rem;
      margin-bottom: .25rem;
      .eq-field-item {
        padding-top: .25rem;
        line-height: .875rem;
        .eq-field-item-lable {
          text-indent: .375rem;
          font-size: .375rem;
        }
        .eq-main-edit-neirong-item-item {
          border-bottom: 1px solid #F6F6F6;
          .van-cell__title {
            font-size: .3125rem;
          }
          .van-cell__label {
            font-size: .3125rem;
          }
          .van-button {
            height: 100%;
            border: 0;
            background: #42D1A5;
            color: #fff;
            font-size: .3125rem;
            .van-icon {
              font-size: .5rem;
              margin-bottom: .1rem;
            }
          }
        }
      }
    }
  }
}
</style>
