<template>
  <div>


    <vxe-table border show-overflow keep-source ref="xTable" :data="detailsData" @pulldownSelected="onPulldownSelected"
      @popupSelected="onPopupSelected" :export-config="{}" @edit-closed="afterEditEvent" @edit-actived="beforeEditEvent"
      :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false, beforeEditMethod: beforeEditMethod }">
      <vxe-column field="component_detail" title="部件" width="160" :params="editor_component" formatter="formatRef"
        :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>
      <vxe-column field="component_num" title="部件数量" width="160"
        :edit-render="{ name: '$input', props: { type: 'number' } }"></vxe-column>
      <vxe-column field="production_type" title="布产类型" width="160" :params="{ data: options_production_type }"
        formatter='formatEnum' :edit-render="{}">
        <template #edit="{ row }">
          <vxe-select v-model="row.production_type" transfer>
            <vxe-option v-for="item in options_production_type" :key="item.value" :value="item.value"
              :label="item.label"></vxe-option>
          </vxe-select>
        </template>
      </vxe-column>

      <vxe-column field="process_detail" title="加工人员" width="160" :params="editor_d1_process" formatter="formatRef"
        :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>


      <vxe-column field="prepare_process_time" title="预备加工日期" width="160" formatter="formatDate"
        :edit-render="{ name: '$input', props: { type: 'date' } }"></vxe-column>
      <vxe-column field="plan_complete_time" title="计划完成日期" width="160" formatter="formatDate"
        :edit-render="{ name: '$input', props: { type: 'date' } }"></vxe-column>

      <vxe-column field="is_send" title="是否发料" width="160" :params="{ data: options_is_send }" formatter='formatEnum'
        :edit-render="{}">
        <template #edit="{ row }">
          <vxe-select v-model="row.is_send" transfer>
            <vxe-option v-for="item in options_is_send" :key="item.value" :value="item.value"
              :label="item.label"></vxe-option>
          </vxe-select>
        </template>
      </vxe-column>

      <vxe-column field="send_time" title="发料时间" width="160" formatter="formatDate"
        :edit-render="{ name: '$input', props: { type: 'date' } }"></vxe-column>

      <vxe-column field="send_detail" title="发料人员" width="160" :params="editor_d1_send" formatter="formatRef"
        :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>


      <vxe-column field="is_complete" title="是否完成" width="160" :params="{ data: options_is_complete }"
        formatter='formatEnum' :edit-render="{}">
        <template #edit="{ row }">
          <vxe-select v-model="row.is_complete" transfer>
            <vxe-option v-for="item in options_is_complete" :key="item.value" :value="item.value"
              :label="item.label"></vxe-option>
          </vxe-select>
        </template>
      </vxe-column>

      <vxe-column field="complete_time" title="实际完成时间" width="160" formatter="formatDate"
        :edit-render="{ name: '$input', props: { type: 'date' } }"></vxe-column>


      <vxe-column field="send_type" title="发料人员类型" width="160" :params="{ data: options_user_type }"
        formatter='formatEnum' :edit-render="{ name: '$select', props: { options: options_user_type } }"></vxe-column>


      <vxe-column field="complete_type" title="完工人员类型" width="160" :params="{ data: options_user_type }"
        formatter='formatEnum' :edit-render="{ name: '$select', props: { options: options_user_type } }"></vxe-column>

      <vxe-column field="remark" title="备注" width="160" :edit-render="{ name: '$input', props: {} }"></vxe-column>

    </vxe-table>

    <vxe-table border show-overflow keep-source ref="xTable2" :data="detailsData2" @pulldownSelected="onPulldownSelected"
      @popupSelected="onPopupSelected" :export-config="{}" @edit-closed="afterEditEvent" @edit-actived="beforeEditEvent"
      :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false, beforeEditMethod: beforeEditMethod }">
      <vxe-column width="60" v-if="pageStatus != 'approved'">
        <template #default="{ row }">
          <div class="oplinks2">
            <a @click.stop="pageAdd2(row)" title="新增">
              <a-icon class="icon" type="plus-circle" />
            </a>
            <a @click.stop="pageDelete2(row)" title="删除">
              <a-icon class="icon" type="delete" />
            </a>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="process_detail" title="工序" width="160" :params="editor_processes" formatter="formatRef"
        :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>
      <vxe-column field="department_detail" title="部门" width="160" :params="editor_department" formatter="formatRef"
        :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>


      <vxe-column field="process_uid_detail" title="加工人员" width="160" :params="editor_process_uid" formatter="formatRef"
        :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>

      <vxe-column field="progress" v-if="isEdit" :cellRender="{ name: 'progress' }" title="进度" width="180"></vxe-column>

      <vxe-column field="prepare_process_time" title="预备加工日期" width="160" formatter="formatDate"
        :edit-render="{ name: '$input', props: { type: 'date' } }"></vxe-column>
      <vxe-column field="plan_complete_time" title="计划完成日期" width="160" formatter="formatDate"
        :edit-render="{ name: '$input', props: { type: 'date' } }"></vxe-column>


      <vxe-column field="is_send" title="是否发料" width="160" :params="{ data: options_is_send }"
        formatter='formatEnum'></vxe-column>
      <vxe-column field="send_time" title="发料时间" width="160" formatter="formatDate"></vxe-column>

      <vxe-column field="is_complete" title="是否完成" width="160" :params="{ data: options_is_complete }"
        formatter='formatEnum'></vxe-column>
      <vxe-column field="complete_time" title="实际完成时间" width="160" formatter="formatDate"></vxe-column>

      <vxe-column field="send_type" title="发料人员类型" width="160" :params="{ data: options_user_type }"
        formatter='formatEnum'></vxe-column>


      <vxe-column field="complete_type" title="完工人员类型" width="160" :params="{ data: options_user_type }"
        formatter='formatEnum'></vxe-column>
      <vxe-column field="remark" title="备注" width="160" :edit-render="{ name: '$input', props: {} }"></vxe-column>


    </vxe-table>





  </div>
</template>

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

import XEUtils from 'xe-utils'  // 加载xe-utils 
const settings = require('../basic/settings.js');

export default {

  name: '',
  components: {},
  props: {
    pageMode: {
      type: String,
      default: "edit"
    },
    itemData: {
      type: Object
    },
    dataId: {
    }

  },

  data() {

    const options_production_type = settings.options_production_type;
    const options_is_complete = settings.options_is_complete;
    const options_is_send = settings.options_is_send;
    const options_user_type = settings.options_user_type;

    //let _this = this;
    // 页面数据变量
    var pageData = {

      options_production_type: options_production_type,
      options_is_complete: options_is_complete,
      options_is_send: options_is_send,
      options_user_type: options_user_type,
      // 当前项目名称
      currentConfigName: "",
      // 当前项目ID
      currentBeid: 0,

      pageStatus: '',

      uploadDefaultImg: null,
      detailDataFieldName: "mold_production_order",

      actions: {
        get: `${BASE_URL.BASE_URL}/MoldProductionOrder/v1/mold/production/order/detail`,
        create: `${BASE_URL.BASE_URL}/MoldProductionOrder/v1/mold/production/order/create`,
        update: `${BASE_URL.BASE_URL}/MoldProductionOrder/v1/mold/production/order/update`
      },

      keyName: 'id',
      // 是否编辑模式
      isEdit: false,
      // 表单数据
      formOptions: {
        data: {
          production_type: "1"
        },
        // 标题宽度
        titleWidth: 150,
        // 标题对齐方式
        titleAlign: 'right',

        // 表单校验规则
        rules: {
          code: [
            { required: true, message: '请输入编号' }
          ],
          mold_order: [
            { required: true, message: '请选择订单' }
          ],
          mold_scheme: [
            { required: true, message: '请选择模具' }
          ],
        },
        // 表单项
        items: [

          {
            title: '订单', span: 8,
            field: 'mold_order',
            itemRender: {
              name: 'MkFormInputShow', props: {
                params: {
                  dataType: "object",
                  valueField: "id",
                  textField: "name"
                }
              }
            }
          }, {
            title: '模具', span: 8,
            field: 'mold_detail',
            itemRender: {
              name: 'MkFormInputShow', props: {
                params: {
                  dataType: "object",
                  valueField: "id",
                  textField: "name"
                }
              }
            }
          },
          { field: 'code', title: '编号', span: 8, itemRender: { name: '$input' } },

          { field: 'production_type', dataRule: { type: 'integer' }, title: '布产类型', span: 8, itemRender: { name: '$select', props: { options: options_production_type } } },

          { field: 'manufacture_cycle', dataRule: { type: 'timestamp' }, title: '制作周期', span: 8, itemRender: { name: '$input', props: { type: 'date' } } },
          { field: 'draw_start_time', dataRule: { type: 'timestamp' }, title: '预计开始画图时间', span: 8, itemRender: { name: '$input', props: { type: 'date' } } },
          { field: 'split_design_time', dataRule: { type: 'timestamp' }, title: '分模设计时间预计', span: 8, itemRender: { name: '$input', props: { type: 'date' } } },
          { field: 'draw_time', dataRule: { type: 'timestamp' }, title: '出图时间预计', span: 8, itemRender: { name: '$input', props: { type: 'date' } } },

          { field: 'draw2D_time', dataRule: { type: 'timestamp' }, title: '出2D时间预计', span: 8, itemRender: { name: '$input', props: { type: 'date' } } },
          { field: 'draw3D_time', dataRule: { type: 'timestamp' }, title: '出3D时间预计', span: 8, itemRender: { name: '$input', props: { type: 'date' } } },
          { field: 'inlay_deep_hole_time', dataRule: { type: 'timestamp' }, title: '镶件深孔钻到厂日期预计', span: 8, itemRender: { name: '$input', props: { type: 'date' } } },
          { field: 'problem', title: '出现问题及建议反馈', span: 8, itemRender: { name: '$input', props: {} } },
          {
            field: 'progress', title: '进度', span: 24, itemRender: {
              name: 'MkFormProgress', props: {
                params: {
                  type: "line"
                }
              }
            }
          },

        ]
      },
      // 新增模式表单项
      addModeItems: [

      ],


      detailsSourceData: [
      ],
      detailsData: [
      ],
      deletedDetailsData: [

      ],

      detailsData2: [
      ],
      deletedDetailsData2: [

      ],
      editor_component: {
        dataType: "object",
        valueField: "id",
        textField: "name",
        listdataFieldName: 'MoldComponent',
        mapper: [
          { fromField: "id", field: "component_id" }
        ],
        dataUrl: `${BASE_URL.BASE_URL}/MoldComponent/v1/mold/component/list`
      },
      editor_department: {
        dataType: "object",
        valueField: "id",
        textField: "name",
        listdataFieldName: 'BaseDepartment',
        mapper: [
          { fromField: "id", field: "department_id" }
        ],
        dataUrl: `${BASE_URL.BASE_URL}/BaseDepartment/v1/base/department/list`
      },

      editor_processes: {
        dataType: "object",
        valueField: "id",
        textField: "name",
        listdataFieldName: 'MesProcesses',
        mapper: [
          { fromField: "id", field: "process_id" }
        ],
        dataUrl: `${BASE_URL.BASE_URL}/MesProcesses/v1/mes/processes/list`
      },

      editor_d1_process: {
        dataType: "object",
        valueField: "id",
        textField: "name",
        listdataFieldName: 'MesStaff',
        mapper: [
          { fromField: "id", field: "process_uid" }
        ],
        dataUrl: `${BASE_URL.BASE_URL}/MesStaff/v1/mes/staff/list`
      },
      editor_d1_send: {
        dataType: "object",
        valueField: "id",
        textField: "name",
        listdataFieldName: 'MesStaff',
        mapper: [
          { fromField: "id", field: "send_uid" }
        ],
        dataUrl: `${BASE_URL.BASE_URL}/MesStaff/v1/mes/staff/list`
      },
      editor_process_uid: {
        dataType: "object",
        valueField: "id",
        textField: "name",
        listdataFieldName: 'MesStaff',
        mapper: [
          { fromField: "id", field: "process_uid" }
        ],
        dataUrl: `${BASE_URL.BASE_URL}/MesStaff/v1/mes/staff/list`
      },

    };


    // 合并表单数据及配置
    pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);

    return pageData;
  },

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


  created() {

    this.pageInit();

  },
  // 函数
  methods: {

    pageInit() {

      this.detailsData = JSON.parse(JSON.stringify(this.itemData.mold_production_order_component || []));
      this.detailsData2 = JSON.parse(JSON.stringify(this.itemData.mold_production_order_component_processes || []));

      this.detailsDataInit();

      this.postDataUpdate();

    },



    getDateValue(v) {
      return new Date(v * 1000);
    },
    getDateValueString(v) {
      if (!v) return '';
      return XEUtils.toDateString(new Date(v * 1000), 'yyyy-MM-dd');
    },

    detailsDataInit() {
      for (let i = this.detailsData && this.detailsData.length; i < 1; i++) {
        this.detailsData.push({});
      }
      for (let i = this.detailsData2 && this.detailsData2.length; i < 1; i++) {
        this.detailsData2.push({});
      }
    },
    // 获取路由的id参数
    getDataId() {
      let dataId = this.dataId; 
      return dataId;
    },
    getDataId_BigInt() {
      let dataId = this.getDataId();
      return this.$mk.toBigInt(dataId);
    },





    pageAdd(row) {
      const $table = this.$refs.xTable
      const record = {
      }
      if (row) {
        this.detailsData = JSON.parse(JSON.stringify(this.detailsData))
        this.detailsData.splice($table.getRowSeq(row), 0, record);
      } else {
        this.detailsData.push(record)
      }
    },
    pageDelete(row) {

      if (this.detailsData.length == 1) {
        this.$mk.success("至少保留一行");
        return;
      }
      const $table = this.$refs.xTable;
      if (row.id) {
        this.deletedDetailsData.push(this.$mk.toBigInt(row.id))
      }
      this.detailsData.splice($table.getRowSeq(row) - 1, 1);

      this.postDataUpdate();
    },


    pageAdd2(row) {
      const $table = this.$refs.xTable2
      const record = {
      }
      if (row) {
        this.detailsData2 = JSON.parse(JSON.stringify(this.detailsData2))
        this.detailsData2.splice($table.getRowSeq(row), 0, record);
      } else {
        this.detailsData2.push(record)
      }

    },
    pageDelete2(row) {
      if (this.detailsData2.length == 1) {
        this.$mk.success("至少保留一行");
        return;
      }
      const $table = this.$refs.xTable2;
      if (row.id) {
        this.deletedDetailsData2.push(this.$mk.toBigInt(row.id))
      }
      this.detailsData2.splice($table.getRowSeq(row) - 1, 1);

      this.postDataUpdate();
    },

    postDataUpdate(){
      let postdata = {};
      postdata.mold_production_order_component = this.$mk.getPostFieldValue({
        rowFilter: (row) => { return row.id || row.component_id },
        dataId: this.getDataId_BigInt(),
        list: this.detailsData,
        deletedList: this.deletedDetailsData,
        fieldName: 'production_id',
        dataRule: [
          { field: 'production_type', type: 'integer' },
          { field: 'component_num', type: 'integer' },
          { field: 'prepare_process_time', type: 'timestamp' },
          { field: 'plan_complete_time', type: 'timestamp' },

          { field: 'id', type: 'bigint' },
          { field: 'update_uid', type: 'bigint' },
          { field: 'create_uid', type: 'bigint' },
          { field: 'mold_id', type: 'bigint' },
          { field: 'component_id', type: 'bigint' },
          { field: 'process_uid', type: 'bigint' },
          { field: 'send_uid', type: 'bigint' },
          { field: 'process_id', type: 'bigint' },
        ]
      });
      postdata.mold_production_order_component_processes = this.$mk.getPostFieldValue({
        rowFilter: (row) => { return row.id || (row.component_id && row.process_id) },
        dataId: this.getDataId_BigInt(),
        list: this.detailsData2,
        deletedList: this.deletedDetailsData2,
        fieldName: 'production_id',
        dataRule: [

          { field: 'id', type: 'bigint' },
          { field: 'prepare_process_time', type: 'timestamp' },
          { field: 'plan_complete_time', type: 'timestamp' },


          { field: 'update_uid', type: 'bigint' },
          { field: 'create_uid', type: 'bigint' },
          { field: 'component_id', type: 'bigint' },
          { field: 'department_id', type: 'bigint' },
          { field: 'process_id', type: 'bigint' },
          { field: 'process_uid', type: 'bigint' },
        ]
      });

      this.itemData.postdata = postdata;
    },

    beforeEditMethod({ column, row }) {
      if (this.pageStatus == "approved") {
        return false;
      }
      console.log(column, row);
      return true;
    },
    afterEditEvent({ column, row }) {
      console.log(column, row);

      this.postDataUpdate();

    
    },
    beforeEditEvent({ column, row }) {
      console.log(column, row);
    },
    onPulldownSelected({ row, selectedData, column }) {
      console.log(selectedData);


      if (column.field == 'process_detail' && column.title == '工序') {
        row.department_detail = selectedData.department_detail || {};
        row.department_id = selectedData.department_id;
      }
    },
    onPopupSelected({ rows, name, params }) {
      console.log(rows, name, params);
    },

  },
  // 监听属性
  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>
