<template>
  <view>
    <u-modal title="修改报工" @cancel="(show = false, $emit('close'))" show-cancel-button
        cancelText="关闭" :show-confirm-button="false"
        :title-style="{ 'background-color': '#1E3770', color: '#FFFFFF', 'line-height': '37px', 'padding-top': '0px' }"
        v-model="show" width="100%" height="100%" :content-style="{ height: '87vh' }">
        <zb-table :columns="editFeedingColumn" :stripe="true" :border="true" :data="editFeedingTable" style="height: calc(100% - 40px)" class="editzbtable">
            <template slot="number" slot-scope="scope">
            <span>{{ getSumNumber(scope.row) }}</span>
            </template>
            <template slot="pro" slot-scope="scope">
            <u-button
                size="mini"
                type="text"
                @click="handleView(scope.row)"
            >查看</u-button>
            <u-button
                size="mini"
                type="text"
                style="margin-left: 10rpx"
                icon="edit-pen"
                @click="handleUpdate(scope.row)"
            >修改</u-button>
            <u-button
                size="mini"
                type="text"
                style="margin-left: 10rpx"
                icon="trash"
                @click="handleDelete(scope.row)"
            >删除</u-button>
            </template>
        </zb-table>
        <uni-pagination :show-icon="true" style="margin-top: 10rpx;" v-if="total" :total="total" :current="queryParams.pageNum" :pageSize="queryParams.pageSize" @change="handlePage" />
    </u-modal>
    <!-- 添加或修改生产报工记录对话框 -->
    <u-modal :title="title" v-model="open" width="80%" :show-confirm-button="optType !='view' " show-cancel-button
    @confirm="submitForm" :title-style="{ 'background-color': '#1E3770', color: '#FFFFFF', 'line-height': '37px', 'padding-top': '0px' }" :content-style="{ padding: '20rpx', 'max-height': '87vh' }">
      <u-form ref="form" :model="form" label-width="100px">
        <u-row>
          <u-col :span="6">
            <u-form-item label="报工类型" prop="feedbackType">
              <uni-data-select v-model="form.feedbackType"
                  :localdata="dict.type.mes_feedback_type" disabled></uni-data-select>
            </u-form-item>
          </u-col>
          <u-col v-if="form.feedbackType == 'ASSIST_PROCESS'" :span="6">
            <u-form-item label="外协单号" prop="assistProcessCode">
              {{form.assistProcessCode}}
            </u-form-item>
          </u-col>
          <u-col v-if="form.feedbackType == 'ASSIST_PROCESS'" :span="6">
            <u-form-item label="是否关单" prop="closeType">
              <u-radio-group v-model="form.closeType" disabled>
                <u-radio :label="1">是</u-radio>
                <u-radio :label="0">否</u-radio>
              </u-radio-group>
            </u-form-item>
          </u-col>
          <u-col :span="6">
            <u-form-item label="生产工单" prop="workorderCode">
              {{form.workorderCode}}
            </u-form-item>
          </u-col>
          <u-col :span="6">
            <u-form-item label="生产任务" prop="taskCode">
              {{form.taskCode}}
            </u-form-item>
          </u-col>
        </u-row>
        <u-row>
          <u-col :span="6">
            <u-form-item label="产品编码" prop="sapItemCode">
              {{form.sapItemCode}}
            </u-form-item>
          </u-col>
          <u-col :span="6">
            <u-form-item label="产品名称" prop="itemName">
              {{form.itemName}}
            </u-form-item>
          </u-col>
          <u-col :span="6">
            <u-form-item label="单位" prop="unitOfMeasure">
              {{form.unitOfMeasure}}
            </u-form-item>
          </u-col>
          <u-col :span="6">
            <u-form-item label="规格型号" prop="specification">
              {{form.specification}}
            </u-form-item>
          </u-col>
        </u-row>
        <u-row>
          <u-col :span="6">
            <u-form-item label="报工数量" prop="quantityFeedback">
              <u-input disabled v-model="form.quantityFeedback" :input-width="190" />
            </u-form-item>
          </u-col>
          <u-col :span="6">
            <u-form-item label="良品报工" prop="quantityQualify">
              <u-number-box :min="0" @change="handleQuantityChanged" :input-width="190" v-model="form.quantityQualify" :long-press="false" placeholder="请输入良品报工" />
            </u-form-item>
          </u-col>
          <u-col :span="6">
            <u-form-item label="不良品报工" prop="quantityUnqualify">
              <u-number-box :min="0" @change="handleQuantityChanged" :input-width="190" v-model="form.quantityUnqualify" :long-press="false" placeholder="请输入不良品报工" />
            </u-form-item>
          </u-col>
          <u-col :span="6">
            <u-form-item label="加工工时" prop="machineTime">
              <u-number-box :min="0" v-model="form.machineTime" :input-width="190" placeholder="请输入加工工时" :long-press="false" />
            </u-form-item>
          </u-col>
        </u-row>
        <u-row>
          <u-col :span="6">
            <u-form-item label="报工人" prop="nickName">
              {{form.nickName}}
            </u-form-item>
          </u-col>
          <u-col :span="6">
            <u-form-item label="报工时间" prop="feedbackTime">
              {{form.feedbackTime}}
            </u-form-item>
          </u-col>
          <u-col :span="6">
            <u-form-item label="审核人" prop="recordNick">
              {{form.recordNick}}
            </u-form-item>
          </u-col>
        </u-row>
        <u-row>
          <u-col :span="24">
            <u-form-item label="备注" prop="remark">
              {{form.remark}}
            </u-form-item>
          </u-col>
        </u-row>
      </u-form>
    </u-modal>
  </view>
</template>

<script>
import UButton from '../../../../uview-ui/components/u-button/u-button.vue';
import dayjs from 'dayjs'
export default {
  name: 'editFeeding',
  props: ['value'],
  dicts: ["mes_feedback_type"],
  components: {
    UButton
  },
  data() {
    return {
      editFeedingColumn: [
        {
          name: 'workstationName',
          label: '工作中心',
          width: 170
        },
        {
          name: 'workunitName',
          label: '工作单元',
          width: 170
        },
        {
          name: 'workorderCode',
          label: '生产工单编号',
          width: 120
        },
        {
          name: 'feedbackTime',
          label: '报工数量',
          width: 100,
          type: 'slot',
          slot: 'number'
        },
        {
          name: 'quantityQualify',
          label: '合格数量',
          width: 80
        },
        {
          name: 'quantityUnqualify',
          label: '不合格数量',
          width: 80
        },
        {
          name: 'nickName',
          label: '报工人',
          width: 80
        },
        {
          name: 'feedbackTime',
          label: '报工时间',
          width: 180
        },
        {
          name: 'peration',
          label: '操作',
          width: 170,
          type: 'slot',
          slot: 'pro'
        }
      ],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskWorkunitId: null,
        workunitId: null
      },
      title: '',
      open: false,
      optType: '',
      form: {},
      show: false,
      editFeedingTable: [],
    }
  },
  watch: {
    value () {
        this.show = this.value
    }
  },
  methods: {
    handleQuantityChanged(){
      this.form.quantityFeedback = this.form.quantityQualify + this.form.quantityUnqualify;
    },
    getSumNumber(row) {
      const first = row.quantityQualify? Number(row.quantityQualify): 0
      const last = row.quantityUnqualify? Number(row.quantityUnqualify): 0
      return first + last
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const recordIds = row.recordId;
      uni.showModal({
        title: '系统提示',
        content: '是否确认删除生产报工记录编号为"' + recordIds + '"的数据项？',
        success:  (res) => {
          if (res.confirm) {
            this.$u.api.delFeedback(recordIds).then((response) => {
              if(response.code && response.code === 200) {
                this.getList();
                this.$u.toast("删除成功");
              } else {
                this.$u.toast(response.msg || "删除失败");
              }
            })
          }
        }
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = {}
      const recordId = row.recordId
      this.$u.api.getFeedback(recordId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改生产报工记录";
        this.optType = "edit";
      });
    },
    // 查询明细按钮操作
    handleView(row){
      this.form = {}
      const recordId = row.recordId;
      this.$u.api.getFeedback(recordId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看生产报工单信息";
        this.optType = "view";
      });
    },
    submitForm() {
        if (this.form.recordId != null) {
          this.form.sizeReportData = this.form.sizeReportData ? this.form.sizeReportData : []
          this.form.directiveReportData = this.form.directiveReportData ? this.form.directiveReportData : []
            this.$u.api.updateFeedback(this.form).then(response => {
              if(response.code && response.code === 200) {
                this.$u.toast("修改成功");
                this.open=false;
                this.getList();
              } else {
                this.$u.toast(response.msg || "修改失败");
              }
                
            });
        }
    },
    // 分页点击事件
		handlePage(params) {
			this.queryParams.pageNum = params.current;
			this.getList() // 点击的时候去请求查询列表
		},
    getList(row) {
      if(row && row.workunitId) this.queryParams.workunitId = row.workunitId
      if(row && row.taskWorkunitId) this.queryParams.taskWorkunitId = row.taskWorkunitId
        const params = {
            ...this.queryParams,
            createStartTime: dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss'),
            createEndTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
            userId: this.vuex_user.userId
        }
        return new Promise((resolve, reject) => {
            this.$u.api.feedbacklist(params).then((res)=>{
                if (res.code === 200) {
                    this.editFeedingTable = res.rows
                    this.total = res.total
                    resolve()
                } else {
                    reject()
                }
            })
        })
        
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .editzbtable .item-td {
  word-break: break-all;
}
</style>