<template>
  <div class="page-body">
    <a-collapse  v-model="groupbox1_activeKey">
      <a-collapse-panel key="1" header="布产单信息"> 
        <vxe-form :data="formOptionsOrder.data" ref="xForm" :title-width="formOptionsOrder.titleWidth"
          :title-align="formOptionsOrder.titleAlign" :rules="formOptionsOrder.rules" :items="formOptionsOrder.items"
          titleColon>
        </vxe-form>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="随车联信息"> 
        <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
          :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
        </vxe-form>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="报工信息">

       <div style="margin-bottom: 5px;">
        <a-button type="primary" @click="addReport">新增报工</a-button>
       </div>

        <vxe-table border show-overflow keep-source ref="xTable" :height="table1Height" :data="detailsData"> 
          <vxe-column field="step_name" title="工序名称" width="120">
          </vxe-column>
          <vxe-column field="production_unit" title="单位" width="120">
          </vxe-column>
          <vxe-column field="production_num" title="生产数量" width="120">
          </vxe-column>
          <vxe-column field="员工" title="员工" width="120">
          </vxe-column>
          <vxe-column field="create_uid" title="报工日期"  formatter= "formatDate" width="120">
          </vxe-column>
          <vxe-column field="embryo_type" title="查坯方式" width="120">
          </vxe-column>
          <vxe-column field="是否计件" title="是否计件" width="120">
          </vxe-column>
          <vxe-column field="备注" title="备注" width="120">
          </vxe-column>
          
        </vxe-table>
      </a-collapse-panel>

    </a-collapse>



  </div>
</template>

<script>
import BASE_URL from '@/services/mes/api.js';

export default {

  components: {},
  props: {
    pageMode: {
      type: String,
      default: "edit"
    },
    dataId: {
    }

  },

  data() {

    //let _this = this;
    // 页面数据变量
    var pageData = {
      groupbox1_activeKey: ["1", "2", "3"],
      // 当前项目名称
      currentConfigName: "",
      // 当前项目ID
      currentBeid: 0,

      uploadDefaultImg: null,
      detailDataFieldName: "production_order_array",

      actions: {
        get: `${BASE_URL.BASE_URL}/MesProductionOrder/v1/production/order/array/detail`
      },

      keyName: 'id',
      // 是否编辑模式
      isEdit: false,

      formOptionsOrder: {
        data: {
        },
        titleWidth: 100,
        titleAlign: 'right',
        rules: {
        },
        items: [
          { field: 'production_number', title: '布产单号', span: 8, itemRender: { name: 'MkFormInputShow' } },
          { field: 'contract_number', title: '合同号', span: 8, itemRender: { name: 'MkFormInputShow' } },
          { field: 'production_department', title: '布产部门', span: 8, itemRender: { name: 'MkFormInputShow',props:{params:{dataType:'object',textField:'name'}} } },
          { field: 'remark', title: '备注', span: 8, itemRender: { name: 'MkFormInputShow' } },
          { field: 'start_time', title: '开始时间', span: 8, itemRender: { name: 'MkFormInputShow' ,props:{params:{dataType:'date'}}} },
          { field: 'actual_finish_time', title: '结束时间', span: 8, itemRender: { name: 'MkFormInputShow',props:{params:{dataType:'date'}} } },
        ]
      },

      formOptions: {
        data: {
        },
        titleWidth: 100,
        titleAlign: 'right',
        rules: {
        },
        items: [ 
          { field: 'batch_no', title: '批次编号', span: 8, itemRender: { name: 'MkFormInputShow' } },
          { field: 'number', title: '数量', span: 8, itemRender: { name: 'MkFormInputShow' } },

          { field: 'start_time', title: '开始日期', span: 8, itemRender: { name: 'MkFormInputShow',props:{params:{dataType:'date'}} } },
          { field: 'pick_time', title: '领料日期', span: 8, itemRender: { name: 'MkFormInputShow',props:{params:{dataType:'date'}} } },
          { field: 'finish_time', title: '结束时间', span: 8, itemRender: { name: 'MkFormInputShow',props:{params:{dataType:'date'}} } },
 
        ]
      },
      // 新增模式表单项
      addModeItems: [

      ],


      table1Height: 400,
      detailsSourceData: [
      ],
      detailsData: [
      ],
      deletedDetailsData: [

      ],


    };


    return pageData;
  },

  computed: {
    desc() {
      return this.$t('editPageDesc')
    }
  },


  created() {


    // 获取路由的id参数
    let dataId = this.getDataId();

    // 如果有id参数，说明是编辑模式
    if (dataId) {
      this.$mk.post({
        url: this.actions.get,
        loading: "加载中...",
        data: { id: this.$mk.toBigInt(dataId) },
        useBigInt: true
      }).then(a => {


        let d = a.data[this.detailDataFieldName];

        this.formOptions.data = d;
        this.formOptionsOrder.data = d.mes_production_order;
        this.detailsData = JSON.parse(JSON.stringify(d.mes_reporting));

        console.log(this.detailsData)
      }).catch((a) => {
        this.$mk.error(a.data.msg);
      });

      this.isEdit = true;


    }

 

  },
  // 函数
  methods: {


 

    // 获取路由的id参数
    getDataId() {
      let dataId = this.dataId;
      if (this.$route.params.id) {
        dataId = this.$route.params.id;
      }
      if (!dataId) {
        dataId = 0;
      }
      return dataId;
    },
    getDataId_BigInt() {
      let dataId = this.getDataId();
      return this.$mk.toBigInt(dataId);
    },

    addReport(){
      let dataId = this.getDataId();

      this.$openPage('/MesProductionOrder/Report/' + dataId);

    }


  },
  // 监听属性
  watch: {

  }
};

</script>


<style scoped lang="less">
.page-body {
  padding: 30px;
  background: @base-bg-color;
}

.formtabs .ant-tabs-tabpane {
  /* background: white; */
  padding: 12px;
}

.gridPanel {
  height: calc(100vh - 600px);
}

.footerbar {
  padding-left: 10px;
}

.imagePanel {
  cursor: pointer;
  padding: 10px;
  width: 100px;

  img {
    width: 80px;
    height: 80px;
  }
}

.oplinks2 svg {
  width: 18px;
  height: 18px;
}

.oplinks2 i {
  margin-left: 5px;
}
</style>
