<template>
	<view>
    <u-sticky
        class="sticky"
        :custom-nav-height="0"
    >
      <u-navbar
          title="生产报工"
          bg-color="transparent"
          :title-style="{ fontWeight: 'bold' }"
          :auto-back="true"
          safe-area-inset-top
          placeholder
      />
    </u-sticky>
		<uni-card :is-shadow="false" is-full>
			<el-text type="warning" class="uni-h6">如个人无法填报，请寻找主管代为报工</el-text>
		</uni-card>
    <view class="container">
      <!-- 自定义表单校验 -->
      <uni-forms ref="customForm" :rules="customRules"  label-width="75px" :modelValue="customFormData">
        <uni-forms-item label="工序" required name="orgType">
          <uni-data-checkbox v-model="customFormData.orgType" :localdata="processTypes()"  @change="handleOrgTypeChange" />
        </uni-forms-item>
        <uni-forms-item label="班别" required name="groupType"  label-width="75px">
          <uni-data-checkbox v-model="customFormData.groupType" :localdata="groupTypes()"  />
        </uni-forms-item>
        <uni-forms-item label="日期" required name="reportDateString"  label-width="75px">
          <uni-datetime-picker v-model="customFormData.reportDateString" type="date" :clear-icon="true"  @change="maskClick" />
        </uni-forms-item>
        <uni-forms-item label="工位" required name="orgId"  label-width="75px">
          <uni-data-select v-model="customFormData.orgId" :localdata="orgIdList"></uni-data-select>
        </uni-forms-item>
        <uni-forms-item label="计时时段" name="reportTime" label-width="75px">
          <uni-easyinput type="text" v-model="customFormData.reportTime" placeholder="如:8:00-12:00" />
        </uni-forms-item>
        <uni-forms-item label="总计时/h" required name="totalTime" label-width="75px">
          <uni-easyinput type="number" v-model="customFormData.totalTime" placeholder="" />
        </uni-forms-item>
        <uni-group title="card 模式" mode="card" v-for="(item,index) in customFormData.produceReportDetails" :key="item.id"
                   :name="['produceReportDetails',index,'value']">
          <template v-slot:title>
            <view class="uni-group-title">
              <uni-row>
                <uni-col :span="22">
                  <uni-forms-item  label="产品" required name="planId" label-width="50px">
                    <uni-data-select v-model="customFormData.produceReportDetails[index].planId" :localdata="planProductList"></uni-data-select>
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="2" class="u-p-t-10">
<!--                  <button class="button" size="mini" type="warn" @click="del(item.id)">删除</button>-->
                  <uni-icons type="trash" size="25" color="red" @click="del(item.id)"></uni-icons>
                </uni-col>
              </uni-row>
            </view>
          </template>
          <uni-row>
            <uni-col :span="12" class="u-p-r-30">
              <uni-forms-item label="成品数" required name="qualityNumber">
                <uni-easyinput  type="number" v-model="customFormData.produceReportDetails[index].qualityNumber" @change="changeNumber(item.id)"/>
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="废品数" name="wasteNumber">
                <uni-easyinput type="number" v-model="customFormData.produceReportDetails[index].wasteNumber" @change="changeNumber(item.id)"/>
              </uni-forms-item>
            </uni-col>
          </uni-row>
          <uni-row>
            <uni-col :span="12"  class="u-p-r-30">
              <uni-forms-item label="总数" name="totalNumber">
                <uni-easyinput disabled v-model="customFormData.produceReportDetails[index].totalNumber" placeholder="" />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="成品率%" required name="qualityRate">
                <uni-easyinput disabled type="number" v-model="customFormData.produceReportDetails[index].qualityRate" />
              </uni-forms-item>
            </uni-col>
          </uni-row>
          <uni-row>
            <uni-col :span="12"  class="u-p-r-30">
              <uni-forms-item label="打包数" name="packageNumber">
                <uni-easyinput type="number" v-model="customFormData.produceReportDetails[index].packageNumber" />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="备注" name="remark">
                <uni-easyinput type="text" v-model="customFormData.produceReportDetails[index].remark" />
              </uni-forms-item>
            </uni-col>
          </uni-row>
        </uni-group>
      </uni-forms>
      <view class="u-flex justify-end">
        <view class="u-flex u-m-t-30">
          <u-button type="primary" @click="add" class="u-m-r-30">
            <uni-icons type="plus" class="u-m-r-10"/>新增产品
          </u-button>
          <u-button type="success" @click="submit('customForm')">
            <uni-icons type="checkbox" class="u-m-r-10"/>保存
          </u-button>
        </view>
      </view>
    </view>
	</view>
</template>

<script>

import useUserStore from "@/store/modules/user";
import { processTypes, groupTypes } from "@/api/system/dict/data";
import { getOrgList, createReport, getPlanProductList} from "@/api/mes/organization"
import { getCurrentDate, timestampToTime } from "@/utils/dateUtil"
import { showConfirm } from "@/utils/common";
import tab from "@/plugins/tab";
import modal from "@/plugins/modal";
import { getById, getDetailByReportId, update } from "@/api/mes/report";

export default {
  components: {},
  data() {
    return {
      // 自定义表单数据
      customFormData: {
        id: undefined,
        name: this.getUserInfo().name,
        userId: this.getUserInfo().userId,
        orgId: undefined,
        orgType: undefined,
        reportTime: undefined,
        totalTime: 0,
        reportStatus: undefined,
        remark: undefined,
        groupType: undefined,
        reportType: undefined,
        reportDateString: getCurrentDate(),
        reportDate: undefined,
        produceReportDetails: []
      },
      // 自定义表单校验规则
      customRules: {
        userId: {rules: [{required: true, errorMessage: '姓名不能为空'}]},
        orgId: {rules: [{required: true, errorMessage: '工位不能为空'}]},
        orgType: {rules: [{required: true, errorMessage: '工序不能为空'}]},
        reportDateString: {rules: [{required: true, errorMessage: '报工日期不能为空'}]},
        totalTime: {rules: [{required: true, errorMessage: '总计时不能为空'},
            {format: 'number', errorMessage: '总计时格式错误，应填计时小时数'}]},
        groupType: {rules: [{required: true, errorMessage: '班别不能为空'}]},
        produceReportDetails: {rules: [
            {format: 'array', errorMessage: '产品列表格式错误'},
            {validateFunction: function(rule, value, data, callback) {
              if (value.length < 2) {
                callback('产品信息不能为空')
              }
              return true
            }
          }]
        }
      },
      orgIdList:[],
      planProductList:[],
      updateId: undefined
    }
  },
  onLoad() {
    this.getOrgIdList()
    // this.getPlanProductList()
    this.updateId = tab.getParams();
    if(this.updateId){
      this.disableEnable = true
      //请求编辑数据
      getById(this.updateId).then(response => {
        this.customFormData = response.data
        this.customFormData.reportDateString = timestampToTime(this.customFormData.reportDate)

        getDetailByReportId(this.updateId).then(res => {
          this.customFormData.produceReportDetails = res.data
        })
        this.getPlanProductList()
      })
    }
  },
  onReady() {
    // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    this.$refs.customForm.setRules(this.customRules)
  },
  methods: {
    getUserInfo() {
      return useUserStore()
    },
    processTypes() {
      return processTypes
    },
    groupTypes() {
      return groupTypes
    },
    submit(ref) {
      if(this.customFormData.reportDateString.length<11)this.customFormData.reportDateString+=' 00:00:00';
      this.customFormData.reportType = '个人';
      this.$refs[ref].validate().then(res => {
        var ok = 1;
        if(this.customFormData.produceReportDetails && this.customFormData.produceReportDetails.length > 0) {
          for (let i = 0; i < this.customFormData.produceReportDetails.length; i++) {
            if(!this.customFormData.produceReportDetails[i].planId || this.customFormData.produceReportDetails[i].planId===''
             || !this.customFormData.produceReportDetails[i].qualityNumber|| this.customFormData.produceReportDetails[i].qualityNumber <= 0) {
              ok = 0;
              uni.showToast({
                title: `产品信息不能为空！`,
                icon: 'error'
              })
              break;
            }
          }
        }
        if(ok===1){
          showConfirm("确认保存生产报工单吗？").then(res => {
            if (res.confirm) {
              if(this.updateId){
                this.customFormData.id = this.updateId
                update(this.customFormData).then(response => {
                  modal.msgSuccess("修改成功")
                  tab.navigateBack()
                  uni.$emit('handleSuccess', true)
                })
              }else {
                this.customFormData.id = null
                createReport(this.customFormData).then(response => {
                  modal.msgSuccess("保存成功")
                  tab.switchTab('/pages/report')
                  // 通知组件刷新列表
                  uni.$emit('handleSuccess', true)
                })
              }
            }
          })
        }
      }).catch(err => {
      })
    },
    maskClick(e){
      this.customFormData.reportDateString =e
      this.getOrgIdList()
    },
    getOrgIdList() {
      let data = {
        'orgType': this.customFormData.orgType,
        'reportDate': this.customFormData.reportDateString+" 00:00:00",
        'groupType': this.customFormData.groupType
      }
      getOrgList(data).then(response => {
        this.orgIdList = response.data;
        if(!this.orgIdList || this.orgIdList.length===0){
          uni.showToast({
            title: '日期:'+this.customFormData.reportDateString+`未查询到工位安排！`,
            icon: 'error'
          })
        }
        else if(this.orgIdList.length===1){
          this.customFormData.orgId = this.orgIdList[0].value
        }
      })
    },
    getPlanProductList() {
      if(this.customFormData.orgType)
        getPlanProductList(this.customFormData.orgType).then(response => {
        this.planProductList = response.data;
        if(!this.planProductList || this.orgIdList.planProductList===0){}
      })
    },
    add() {
      if(this.customFormData.orgType){
        this.customFormData.produceReportDetails.push({
          id: Date.now(),
          productId: undefined,
          planId: undefined,
          qualityNumber: 0,
          wasteNumber: 0,
          totalNumber: 0,
          qualityRate:0,
          packageNumber: 0,
          remark: ''
        })
      }else{
        uni.showToast({
          title: `请先选择工序！`,
          icon: 'error'
        })
      }
    },
    del(id) {
      let index = this.customFormData.produceReportDetails.findIndex(v => v.id === id)
      this.customFormData.produceReportDetails.splice(index, 1)
    },
    changeNumber(id){
      let index = this.customFormData.produceReportDetails.findIndex(v => v.id === id)
      if(!this.customFormData.produceReportDetails[index].qualityNumber)
        this.customFormData.produceReportDetails[index].qualityNumber=0;
      if(!this.customFormData.produceReportDetails[index].wasteNumber)
        this.customFormData.produceReportDetails[index].wasteNumber=0;

      this.customFormData.produceReportDetails[index].totalNumber =
          Number(this.customFormData.produceReportDetails[index].qualityNumber)  + Number(this.customFormData.produceReportDetails[index].wasteNumber);
      this.customFormData.produceReportDetails[index].qualityRate =
          (Number(this.customFormData.produceReportDetails[index].qualityNumber)*100/Number(this.customFormData.produceReportDetails[index].totalNumber)).toFixed(2);
    },
    handleOrgTypeChange(e){
      this.getPlanProductList()
    }
  }
}
</script>

<style lang="scss" scoped>
.sticky {
  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
  backdrop-filter: blur(27.18px);
  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
}
.container {
  padding: 15px;
  background-color: #fff;
}

.uniui-plus:before{
  color: #ffffff
}
.uniui-checkbox:before{
  color: #ffffff
}
.u-button {
  height: 35px;
  width: auto;
}
.uni-group-title{
  height: 55px;
  padding: 10px;
  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
}
.uni-group--card {
  margin :0
}
</style>
