<template>
  <view class="commonBody">
    <view class="button-bar">
      <view class="button-frame" @click="addQC('QCMSG')">
        <view class="shortcut-icon icon-color01">
          <image class="icon-button" src="/static/icons/png/pro.png"/>
        </view>
        <view class="grid-text">检查通知</view>
      </view>
      <view class="button-frame" @click="addQC('SJQR')">
        <view class="shortcut-icon icon-color01">
          <image class="icon-button" src="/static/icons/png/pro.png"/>
        </view>
        <view class="grid-text">首检确认</view>
      </view>
      <view class="button-frame" v-for="qcType in dict.type.mes_ipqc_type" v-if="qcType.value !== 'FIRST'"
            @click="addQC(qcType.value )">
        <view class="shortcut-icon icon-color01">
          <image class="icon-button" src="/static/icons/png/pro.png"/>
        </view>
        <view class="grid-text">{{ qcType.label }}</view>
      </view>
    </view>

    <view class="list-bar">
      <scroll-view scroll-y="true" class="scroll-list" :style="{ 'height': (this.screenHeight -280) + 'px' }">
        <uni-table ref="qcTable" border stripe :loading="loading" emptyText="未查询到数据">

          <!--          <zb-table :columns="tableColumn" :stripe="true" @rowClick="rowClick"-->
          <!--                    @toggleRowSelection="toggleRowSelection" @toggleAllSelection="toggleAllSelection" :border="true"-->
          <!--                    :data="tableData"></zb-table>-->
          <uni-tr>
            <uni-th width="160px" align="center">检验单编号</uni-th>
            <uni-th width="160px" align="center">检验单名称</uni-th>
            <uni-th width="150px" align="center">检验类型</uni-th>
            <uni-th width="150px" align="center">工单编号</uni-th>
            <uni-th width="100px" align="center">产品物料编码</uni-th>
            <uni-th width="110px" align="center">产品物料名称</uni-th>
            <uni-th width="100px" align="center">规格型号</uni-th>
            <uni-th width="100px" align="center">单位</uni-th>
            <uni-th width="100px" align="center">检测数量</uni-th>
            <uni-th width="100px" align="center">检测结果</uni-th>
            <uni-th width="120px" align="center">检测日期</uni-th>
            <uni-th width="100px" align="center">检测人员</uni-th>
            <uni-th width="150px" align="center">单据状态</uni-th>
            <uni-th width="150px" align="center">操作</uni-th>
          </uni-tr>
          <uni-tr v-for="(line,index) in qcList" :key="index">
            <uni-td align="center">{{ line.ipqcCode }}</uni-td>
            <uni-td align="center">{{ line.ipqcName }}</uni-td>
            <uni-td align="center">
              <dict-tag :options="dict.type.mes_ipqc_type" :value="line.ipqcType"/>
            </uni-td>
            <uni-td>{{ line.workorderCode }}</uni-td>
            <uni-td align="center">{{ line.itemCode }}</uni-td>
            <uni-td align="center">{{ line.itemName }}</uni-td>
            <uni-td align="center">{{ line.specification }}</uni-td>
            <uni-td align="center">{{ line.quantityCheck }}</uni-td>
            <uni-td align="center">
              <dict-tag :options="dict.type.mes_qc_result" :value="line.checkResult"/>
            </uni-td>
            <uni-td align="center">{{ line.unitOfMeasure }}</uni-td>

            <uni-td align="center">{{ line.inspectDate }}</uni-td>
            <uni-td align="center">{{ line.inspector }}</uni-td>
            <uni-td align="center">
              <dict-tag :options="dict.type.mes_order_status" :value="line.status"/>
            </uni-td>
            <uni-td>
              <view class="uni-group">
                <button class="uni-button" size="mini" type="primary" v-if="line.quantityCheck>=line.maxNum"
                        @click="qcLineClick(line)">查看编辑
                </button>
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
      </scroll-view>
      <view class="uni-pagination-box">
        <!--          <uni-pagination show-icon :page-size="queryParams.pageSize"-->
        <!--                          :current="queryParams.pageCurrent" :total="queryParams.total" @change="getList"/>-->
      </view>
    </view>

    <u-modal width="90%" v-model="qcModalFlag" :showConfirmButton=true :showCancelButton="true" title="请填写检验单"
             content="操作内容">
      <u-form ref="qcForm" label-width="90px">
        <u-row>
          <u-col span="5">
            <u-form-item label="任务编号">
              <SearchInput v-model="qcForm.taskCode" placeholder="请输入任务编号" hassearchbtn="true"
                           @serach="searchTask"/>
            </u-form-item>
          </u-col>
          <u-col span="3">
            <u-form-item label="检验单名称" label-width="90px">
              <u-input v-model="qcForm.ipqcName" placeholder="请输入检验单名称"></u-input>
            </u-form-item>
          </u-col>
          <u-col span="4">
            <u-form-item label="检测结果" prop="checkResult">
              <u-radio-group v-model="qcForm.checkResult">
                <u-radio :name="item.value" v-for="item in dict.type.mes_qc_result" v-key="item.value">
                  {{ item.label }}
                </u-radio>
              </u-radio-group>
            </u-form-item>
          </u-col>
        </u-row>
        <u-row>
          <u-col span="4">
            <u-form-item label="检测数量" prop="quantityCheck">
              <u-number-box v-model="qcForm.quantityCheck"></u-number-box>
            </u-form-item>
          </u-col>
          <u-col span="4">
            <u-form-item label="合格数量" prop="quantityQualified">
              <u-number-box :min="0" v-model="qcForm.quantityQualified"></u-number-box>
            </u-form-item>
          </u-col>
          <u-col span="4">
            <u-form-item label="不合格数量" prop="quantityUnqualified">
              <u-number-box :min="0" v-model="qcForm.quantityUnqualified"></u-number-box>
            </u-form-item>
          </u-col>
        </u-row>
        <u-row>
          <u-col span="12">
            <u-form-item label="检测人员" prop="inspector">
              <!--                <u-input v-model="qcForm.inspector"></u-input>-->
              <zxz-uni-data-select v-model="qcForm.inspector" filterable multiple dataKey="label"
                                   dataValue="value" :localdata="qcUserList" @change="change"></zxz-uni-data-select>
            </u-form-item>
          </u-col>
        </u-row>
        <u-row>
          <u-col span="3"></u-col>
          <u-col span="3">
            <u-button type="primary" @click="submitIpqc">保存</u-button>
          </u-col>
          <u-col span="1"></u-col>
          <u-col span="3">
            <u-button type="success" @click="submitIpqc('CONFIRMED')">完成</u-button>
          </u-col>
        </u-row>
      </u-form>
      <scroll-view scroll-y="true" scroll-x="true" class="line-list">
        <view class="line-content">
          <uni-table ref="qcLineTable" class="line-table" border stripe :loading="loading" emptyText="未查询到数据">
            <uni-tr>
              <uni-th width="160px" align="center">检测项名称</uni-th>
              <uni-th width="150px" align="center">检测工具</uni-th>
              <uni-th width="150px" align="center">检测要求</uni-th>
              <uni-th width="100px" align="center">标准值</uni-th>
              <uni-th width="100px" align="center">单位</uni-th>
              <uni-th width="100px" align="center">误差上限</uni-th>
              <uni-th width="100px" align="center">误差下限</uni-th>
              <uni-th width="100px" align="center">致命缺陷数量</uni-th>
              <uni-th width="100px" align="center">严重缺陷数量</uni-th>
              <uni-th width="100px" align="center">轻微缺陷数量</uni-th>
              <uni-th width="150px" align="center">操作</uni-th>
            </uni-tr>
            <uni-tr v-for="(line,index) in qcLines" :key="index">
              <uni-td align="center">{{ line.indexName }}</uni-td>
              <uni-td align="center">{{ line.qcTool }}</uni-td>
              <uni-td>{{ line.checkMethod }}</uni-td>
              <uni-td align="center">{{ line.standerVal }}</uni-td>
              <uni-td align="center">{{ line.unitOfMeasure }}</uni-td>
              <uni-td align="center">{{ line.thresholdMax }}</uni-td>
              <uni-td align="center">{{ line.thresholdMin }}</uni-td>
              <uni-td align="center">{{ line.crQuantity }}</uni-td>
              <uni-td align="center">{{ line.majQuantity }}</uni-td>
              <uni-td align="center">{{ line.minQuantity }}</uni-td>
              <uni-td>
                <view class="uni-group">
                  <button class="uni-button" size="mini" type="primary"
                          @click="qcLineItemClick(line)">缺陷登记
                  </button>
                </view>
              </uni-td>
            </uni-tr>
          </uni-table>
        </view>
      </scroll-view>
    </u-modal>

    <u-modal width="80%" v-model="qcMsgVisible" :showConfirmButton=false :showCancelButton="true" title="检验通知"
             content="操作内容">
      <uni-table class="line-table" border stripe :loading="loading" emptyText="未查询到数据">
        <uni-tr>
          <uni-th width="60px" align="center">单号</uni-th>
          <uni-th width="90px" align="center">作业单元</uni-th>
          <uni-th width="100px" align="center">用户</uni-th>
          <uni-th width="90px" align="center">作业单元</uni-th>
          <uni-th width="100px" align="center">单位</uni-th>
          <uni-th width="60px" align="center">状态</uni-th>
          <uni-th width="90px" align="center">作业人</uni-th>
          <uni-th width="110px" align="center">请求检验时间</uni-th>
          <uni-th width="90px" align="center">检验人</uni-th>
        </uni-tr>
        <uni-tr v-for="(line,index) in qcLines" :key="index">
          <uni-td align="center">{{ line.indexName }}</uni-td>
          <uni-td align="center">{{ line.qcTool }}</uni-td>
          <uni-td>{{ line.checkMethod }}</uni-td>
          <uni-td align="center">{{ line.standerVal }}</uni-td>
          <uni-td align="center">{{ line.unitOfMeasure }}</uni-td>
          <uni-td align="center">{{ line.thresholdMax }}</uni-td>
          <uni-td align="center">{{ '0' }}</uni-td>
          <uni-td>
            <view class="uni-group">
              <button class="uni-button" size="mini" type="primary">缺陷登记</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </u-modal>


    <u-modal width="80%" v-model="qcFirstVisible" @close="getIpqcList" @cancel="getIpqcList" :showConfirmButton=false :showCancelButton="true" title="首检确认"
             content="操作内容">
      <uni-table style="min-height: 900rpx;">
        <uni-tr>
          <uni-th width="160px" align="center">检验单编号</uni-th>
          <uni-th width="160px" align="center">检验单名称</uni-th>
          <uni-th width="150px" align="center">检验类型</uni-th>
          <uni-th width="150px" align="center">工单编号</uni-th>
          <uni-th width="100px" align="center">产品物料编码</uni-th>
          <uni-th width="110px" align="center">产品物料名称</uni-th>
          <uni-th width="100px" align="center">规格型号</uni-th>
          <uni-th width="100px" align="center">单位</uni-th>
          <uni-th width="100px" align="center">检测数量</uni-th>
          <uni-th width="100px" align="center">检测结果</uni-th>
          <uni-th width="120px" align="center">检测日期</uni-th>
          <uni-th width="100px" align="center">检测人员</uni-th>
          <uni-th width="150px" align="center">单据状态</uni-th>
          <uni-th width="150px" align="center">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(line,index) in qcFirstLines" :key="index">
          <uni-td align="center">{{ line.ipqcCode }}</uni-td>
          <uni-td align="center">{{ line.ipqcName }}</uni-td>
          <uni-td align="center">
            <dict-tag :options="dict.type.mes_ipqc_type" :value="line.ipqcType"/>
          </uni-td>
          <uni-td>{{ line.workorderCode }}</uni-td>
          <uni-td align="center">{{ line.itemCode }}</uni-td>
          <uni-td align="center">{{ line.itemName }}</uni-td>
          <uni-td align="center">{{ line.specification }}</uni-td>
          <uni-td align="center">{{ line.quantityCheck }}</uni-td>
          <uni-td align="center">
            <dict-tag :options="dict.type.mes_qc_result" :value="line.checkResult"/>
          </uni-td>
          <uni-td align="center">{{ line.unitOfMeasure }}</uni-td>

          <uni-td align="center">{{ line.inspectDate }}</uni-td>
          <uni-td align="center">{{ line.inspector }}</uni-td>
          <uni-td align="center">
            <dict-tag :options="dict.type.mes_order_status" :value="line.status"/>
          </uni-td>
          <uni-td>
            <view class="uni-group">
              <button class="uni-button" size="mini" type="primary" v-if="line.quantityCheck>=line.maxNum"
                      @click="firstCONFIRMED(line)">确认
              </button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </u-modal>


    <u-modal width="760px" v-model="qcEditModalFlag" :showConfirmButton=false :showCancelButton="true"
             title="请填写出货检验单" content="操作内容">
      <u-form ref="qcEditForm" label-width="100px" :model="qcEditForm" :rules="qcEditRules">

      </u-form>
    </u-modal>

    <u-modal width="80%" v-model="deffectModalFlag" @confirm="subQcdeffect" @cancel="getTemplateLineList"
             confirm-text="提交" :showConfirmButton=true :showCancelButton=true title="缺陷登记">
      <u-button @click="addQcdeffect">新增</u-button>
      <uni-card v-for="item in defectrecordList">
        <u-form label-width="100px">
          <u-row>
            <u-col>
              <u-form-item label="缺陷描述">
                <u-input v-model="item.defectName" placeholder="请输入缺陷描述"></u-input>
              </u-form-item>
            </u-col>
            <u-col>
              <u-form-item label="缺陷产品数量">
                <u-number-box v-model="item.defectQuantity"></u-number-box>
              </u-form-item>
            </u-col>
            <u-col>
              <u-form-item label="缺陷等级">
                <u-radio-group v-model="item.defectLevel">
                  <u-radio :name="item.value" v-for="item in dict.type.mes_defect_level"
                           v-key="item.value">
                    {{ item.label }}
                  </u-radio>
                </u-radio-group>
              </u-form-item>
            </u-col>
          </u-row>
        </u-form>
      </uni-card>
    </u-modal>
  </view>
</template>

<script>
import SearchInput from "@/components/ScanInput/index.vue";

export default {
  name: "QcContent",
  components: {
    SearchInput
  },
  dicts: ['mes_ipqc_type', 'mes_qc_result', 'mes_order_status', 'mes_defect_level'],
  data() {
    return {
      screenHeight: 768,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        pageCurrent: 1
      },
      loading: false,
      //新增弹窗
      qcModalFlag: false,
      qcForm: {},
      qcRules: [],
      qcLines: [],
      //编辑弹窗
      qcEditModalFlag: false,
      qcEditForm: {},
      qcEditRules: [],
      qcEditLines: [],
      qcMsgVisible: false,
      //所有检测单的列表
      qcList: [],
      qcUserList: [{
        value: 0,
        label: 'admin'
      }, {
        value: 1,
        label: '张三'
      }, {
        value: 2,
        label: '李四'
      }, {
        value: 3,
        label: '王五'
      }],
      taskInfo: {},
      curQcType: '',
      defectrecordList: [],
      qcLineItem: {},
      deffectModalFlag: false,
      qcFirstVisible: false,
      qcFirstLines: []
    }
  },
  created() {
    //获取屏幕高度
    uni.getSystemInfo({
      success(res) {
        console.log('windowHeight:' + res.windowHeight);
        this.screenHeight = res.windowHeight;
      }
    })
    this.getIpqcList()
  },
  methods: {
    async firstCONFIRMED(item) {
      const res = await this.$u.api.changeState({ipqcId: item.ipqcId, status: 'CONFIRMED'})
      if (res.code === 200) {
        this.getQcFirstLines();
      }
    },
    async getIpqcList() {
      const res = await this.$u.api.ipqcList({})
      if (res.code === 200) {
        this.qcList = res.rows;
      }
    },
    async getQcFirstLines() {
      const res = await this.$u.api.ipqcList({status: 'PREPARE'})
      if (res.code === 200) {
        this.qcFirstLines = res.rows;
      }
    },
    async searchTask(val) {
      const res = await this.$u.api.getTaskInfoByTaskCode({
        taskCode: val
      })
      if (res.code === 200) {
        if (!res.data) {
          this.$u.toast('暂未查询到任务订单信息！');
        }
        this.taskInfo = res.data;
      }
    },

    async submitIpqc(status = 'PREPARE') {
      if (!this.taskInfo) {
        this.$u.toast('请输入任务单号！');
        return
      }
      const ipqcCode = await this.$u.api.getIpqcCode()
      const param = {
        "ipqcId": this.qcForm.ipqcId,
        "ipqcCode": ipqcCode,
        "ipqcName": this.qcForm.ipqcName,
        "ipqcType": this.curQcType,
        "templateId": null,
        "workorderId": this.taskInfo.workorderId,
        "workorderCode": this.taskInfo.workorderCode,
        "workorderName": this.taskInfo.workorderName,
        "taskId": this.taskInfo.taskId,
        "taskCode": this.taskInfo.taskCode,
        "taskName": this.taskInfo.taskName,
        "workstationId": this.taskInfo.workstationId,
        "workstationCode": this.taskInfo.workstationCode,
        "workstationName": this.taskInfo.workstationName,
        "processId": this.taskInfo.processId,
        "processCode": this.taskInfo.processCode,
        "processName": this.taskInfo.processName,
        "itemId": this.taskInfo.itemId,
        "itemCode": this.taskInfo.itemCode,
        "itemName": this.taskInfo.itemName,
        "specification": this.taskInfo.specification,
        "unitOfMeasure": this.taskInfo.unitOfMeasure,
        "quantityCheck": this.qcForm.quantityCheck,
        "quantityUnqualified": this.qcForm.quantityUnqualified,
        "quantityQualified": this.qcForm.quantityQualified,
        "crRate": null,
        "majRate": null,
        "minRate": null,
        "crQuantity": null,
        "majQuantity": null,
        "minQuantity": null,
        "checkResult": this.qcForm.checkResult,
        "inspectDate": new Date(),
        "inspector": this.vuex_user.userName,
        "status": "PREPARE",
      }
      const res = await this.$u.api.addIpqc(param)
      if (res.code === 200) {
        this.getIpqcList()
        this.taskInfo = {}
        this.qcForm = param
        this.qcForm.ipqcId = res.data
        this.getTemplateLineList();
        this.$u.toast('创建质检单成功！');
      } else {
        this.$u.toast(res.msg);
      }
    },
    getTemplateLineList() {
      this.$u.api.getIpqcLineList({
        ipqcId: this.qcForm.ipqcId
      }).then(res => {
        if (res.code === 200) {
          this.qcLines = res.rows;
        }
      });
    },
    addQC(type) {
      this.qcForm = {}
      this.curQcType = type;
      if (type === 'QCMSG') {
        this.qcMsgVisible = true
      } else if (type === 'SJQR') {
        this.getQcFirstLines()
        this.qcFirstVisible = true
      } else {
        this.qcModalFlag = true;
        // this.getTemplateLineList(type);
      }
    },
    qcLineClick(item) {
      this.qcModalFlag = true;
      this.qcForm = item
      console.log(this.qcForm)
      this.getTemplateLineList()
    },
    qcLineItemClick(item) {
      this.qcLineItem = item
      this.getDefectrecordList()
      this.deffectModalFlag = true;
    },
    getDefectrecordList(ipqcId, lineId) {
      this.$u.api.getDefectrecordList({
        qcType: this.qcForm.ipqcType,
        qcId: this.qcLineItem.ipqcId,
        lineId: this.qcLineItem.lineId
      }).then(res => {
        if (res.code === 200) {
          this.defectrecordList = res.rows;
        }
      });
    },
    addQcdeffect() {
      this.defectrecordList.push({
        "recordId": null,
        "qcId": this.qcLineItem.ipqcId,
        "qcType": this.qcForm.ipqcType,
        "lineId": this.qcLineItem.lineId,
        "defectName": "",
        "defectLevel": "CR",
        "defectQuantity": 1,
        "flag": "add",
        "remark": null
      })
    },
    subQcdeffect() {
      console.log(this.defectrecordList)
      this.$u.api.addDefectrecord(this.defectrecordList).then(res => {
        if (res.code === 200) {
          this.$u.toast('提交缺陷成功！');
          this.getDefectrecordList()
        }
      });
    }
  }
}
</script>

<style>
.commonBody {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #FEFEFF;
}

.content {
  margin: 10px;
}

.list-bar {
  width: calc(100vw - 130px);
}

.button-bar {
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  padding-bottom: 10px;
}


.button-frame {
  width: 80px;
  height: 80px;
  background-color: #76bd1d;
  border-radius: 10px;
  box-shadow: 2px 2px 3px #888888;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  place-items: center;
}

.icon-button {
  width: 48px;
  height: 48px;
}

.shortcut-icon {
  width: 100%;
  height: 48px;
  align-items: center;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  color: #ffffff;
  font-size: 26px;
}

.shortcut-icon i {
  font-size: 26px;
}


.line-list {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 300px;
}

.line-content {
  width: 200%;
  height: 300px;
  display: flex;
  flex-wrap: nowrap;
}

.line-table {
  display: inline-block;
}

.uni-group {
  display: flex;
  justify-content: center;
}

.ellipis_text {
  overflow: hidden;
  word-break: break-all;
  /* break-all(允许在单词内换行。) */
  text-overflow: ellipsis;
  /* 超出部分省略号 */
  display: -webkit-box;
  /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical;
  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 4;
  /** 显示的行数 **/
}

.submit-qc {
  width: 30%;
  margin: 1rpx auto;
  display: block;
}
</style>