<template>
  <el-form :inline="true">
    <div class="message-box">
      <ul>
        <li> <span class="label">报工次数</span>2 </li>
        <li> <span class="label">累计合格品数量</span>2 </li>
        <li> <span class="label">累计合格品重量</span>2 </li>
        <li> <span class="label">累计投料产品数量</span>2 </li>
      </ul>
      <div class="right">
        <el-form-item label="执行人工号"><el-input></el-input></el-form-item>
        <el-form-item label="执行日期"><el-input></el-input></el-form-item>
      </div>
    </div>
    <el-card>
      <el-descriptions title="报工信息" direction="vertical" :column="7" border>
        <el-descriptions-item label="投料数量（PCS）" :span="2"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="投料重量（KG）"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="质检项">kooriookami</el-descriptions-item>
        <el-descriptions-item label="质检标准"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="合格品数量(PCS)"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="合格品重量(KG)"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="不合格品数量(PCS)">
          <el-input>
            <template slot="append">
              <el-button type="primary">处置</el-button>
            </template>
          </el-input></el-descriptions-item
        >
        <el-descriptions-item label="不合格品重量(KG)"
          ><el-input>
            <template slot="append">
              <el-button type="primary">处置</el-button>
            </template>
          </el-input></el-descriptions-item
        >
        <el-descriptions-item label="副产品重量(KG)"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="备注" :span="2"
          >kooriookami</el-descriptions-item
        >
      </el-descriptions>
      <el-descriptions
        title="设备信息"
        direction="vertical"
        :column="7"
        border
        class="mt-16"
      >
        <el-descriptions-item label="设备编码"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="设备名称"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="规格">kooriookami</el-descriptions-item>
        <el-descriptions-item label="型号">kooriookami</el-descriptions-item>
        <el-descriptions-item label="烧结曲线"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="设备位置"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="操作"
          ><el-link>选择设备</el-link></el-descriptions-item
        >
      </el-descriptions>
    </el-card>
  </el-form>
</template>

<script>
  import personSelectRemote from '@/components/CommomSelect/person-select-remote';
  import equipmentDailog from '@/components/EquipmentDailog/report-equipment';
  import { reportCount } from '@/api/produceOrder';
  export default {
    components: { personSelectRemote, equipmentDailog },
    props: {
      infoData: {
        type: Object,
        default: () => ({})
      },
      taskInfo: {
        type: Object,
        default: () => ({})
      },
      formData: {
        type: Object,
        default: () => ({})
      },
      firstInfo: {
        type: Object,
        default: () => ({})
      },
      currentInfo: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        workReport: {
          executorId: '',
          executorJobNum: '',
          executeTime: '',
          packInfo: {
            packNum: '',
            netWeight: ''
          },
          productInfo: {
            standardNum: '',
            standardWeight: '',
            noStandardNum: '',
            noStandardWeight: ''
          }
        },
        workReportDeviceList: {
          code: '',
          name: '',
          path: '',
          specification: ''
        },
        countMsg: {}
      };
    },
    watch: {
      taskInfo: {
        immediate: true,
        handler() {
          if (this.taskInfo.code) {
            this.getReportCount();
          }
        }
      }
      // infoData: {
      //   immediate: true,
      //   handler () {
      //     if (this.infoData.id && this.currentInfo.code == this.firstInfo.code) {
      //       // 设备
      //       this.workReportDeviceList = Object.assign(
      //         {},
      //         this.workReportDeviceList,
      //         {
      //           code: this.infoData.deviceCode,
      //           name: this.infoData.deviceName,
      //           rootCategoryLevelId: this.infoData.rootCategoryLevelId,
      //           path: this.infoData.path[0]?.pathName,
      //           model: this.infoData.model,
      //           sourceInstanceId: this.infoData.sourceInstanceId,
      //           specification: this.infoData.specification
      //         }
      //       );
      //     }
      //   }
      // }
    },
    methods: {
      async getReportCount() {
        const res = await reportCount({
          taskCode: this.taskInfo.code,
          workOrderId: this.infoData.id
        });

        this.countMsg = res;
      },
      getEquip() {
        this.$refs.equipmentRef.openSingle(
          [this.workReportDeviceList],
          (res) => {
            this.workReportDeviceList.code = res.code;
            this.workReportDeviceList.name = res.name;
            this.workReportDeviceList.path = res.id;
          }
        );
      },
      getMsg() {},
      report(fun) {
        this.$refs.formRef.validate((value) => {
          if (value) {
            if (!this.workReportDeviceList.code) {
              return this.$message.error('请选择设备');
            }
            this.$confirm('是否确定要报工?', '提示').then(() => {
              fun({
                checkState: 1,
                workReport: this.workReport,
                workReportDeviceList: [this.workReportDeviceList]
              }).then((res) => {
                // this.$message.success('报工成功！');
                // this.getMsg();
              });
            });
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .message-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    ul {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      li {
        margin-right: 20px;
      }
    }

    .right {
      padding-top: 22px;
      display: flex;
      align-items: center;
    }
  }
</style>
