<template>
  <div class="page-body">

    <div class="approvedbg" v-if="pageStatus == 'approved'"></div>

    <div class="voucher-toolbar">
      <div class="voucher-toolbar-left">


        <a-button @click="pageSelectOrder" :disabled="pageStatus == 'approved'">选择订单</a-button>
        <a-button type="primary" @click="ok" :disabled="pageStatus == 'approved'">保存</a-button>
        <a-button @click="pageApproved" type="primary" :disabled="!this.getDataId() || pageStatus == 'approved'">审批
        </a-button>
        <a-button @click="print">打印</a-button>

        <a-button @click="back">关闭</a-button>

      </div>
    </div>

    <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-tabs>

      <a-tab-pane key="2" tab="工序详情">

        <a-button @click="pageSelectComponent()" style="margin: 5px;">增加部件工序</a-button>

        <a-collapse :activeKey="collapseActiveKey">

          <a-collapse-panel v-for="(info, index)  in infos" :key="info.key" :header="info.header">

            <a-icon slot="extra" type="delete" @click.stop="removeInfo(index)" />
            <component-detail :dataId="getDataId()" :itemData="info.data"></component-detail>

          </a-collapse-panel>
        </a-collapse>



      </a-tab-pane>


      <a-tab-pane key="3" tab="部门进度汇总" v-if="isEdit">
        <vxe-table border show-overflow keep-source ref="xTable3" :height="table1Height" :data="detailsData3">

          <vxe-column field="name" title="部门名称" width="160"></vxe-column>
          <vxe-column field="process_num" title="工序数量" width="160"></vxe-column>
          <vxe-column field="progress" :cellRender="{ name: 'progress' }" title="进度" width="180"></vxe-column>
        </vxe-table>

      </a-tab-pane>

    </a-tabs>



    <div class="mk-toolbar" v-if="isEdit">

    </div>


  </div>
</template>

<script>

import ComponentDetail from './ComponentDetail'
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: { ComponentDetail },
  props: {
    pageMode: {
      type: String,
      default: "edit"
    },
    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,
      collapseActiveKey: [],

      infos: [],

      // 当前项目名称
      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: [

      ],


      table1Height: 400,
      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();


    this.heightInit();

  },
  // 函数
  methods: {


    removeInfo(index) {
      this.infos.splice(index, 1);
    },

    pageInit() {

      this.pageStatus = '';
      // 获取路由的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 => {


          this.formOptions.data = this.$mk.formatDetailData({ data: a.data[this.detailDataFieldName], rules: this.formOptions.items });




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

          this.initComponentDetail();


          this.detailsData3 = JSON.parse(JSON.stringify(a.data[this.detailDataFieldName].department_progress || []));

          if (a.data[this.detailDataFieldName].auditor_uid) {
            this.pageStatus = 'approved';
          }


          this.setPageReadonly(this.pageStatus == 'approved');


        });

        this.isEdit = true;



      } else {
        // 如果没有id参数，说明是新增模式
        this.addModeItems.forEach(item => {
          this.formOptions.items.push(item);
        })
        this.setPageReadonly(this.pageStatus == 'approved');
      }

    },


    initComponentDetail() {


      let keys = [];
      let infos = [];

      this.detailsData.forEach(item => {

        if (!item.component_id) {
          return;
        }
        let key = infos.length + '';
        let info = {
          key: key, data: {
            mold_production_order_component: [item],
            mold_production_order_component_processes: []
          },
          header: item.component_detail.name
        };
        this.detailsData2.forEach(pitem => {
          if (pitem.component_id && pitem.component_id.toString() == item.component_id.toString()) {
            info.data.mold_production_order_component_processes.push(pitem);
          }

        });
        keys.push(key);
        infos.push(info);
      })


      this.collapseActiveKey = keys;
      this.infos = infos
    },

    setPageReadonly(readonly) {
      this.formOptions.items.forEach(item => {
        if (item.itemRender && item.itemRender.name == "$select") {
          item.itemRender.props.disabled = readonly;
        }
        if (item.itemRender && item.itemRender.props) {
          item.itemRender.props.readonly = readonly;
        }

      });
    },

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

    pageSelectComponent() {
      let { width, height } = this.$mk.getWindowSize();
      this.$mk.dialog.open({
        page: () => import("../MoldComponent/selector"),
        title: "选择部件",
        showFooter: true,
        width: width * 0.9,
        height: height * 0.9,
        callback: ({ data }) => {
          if (!data || !data.row1) {
            this.$mk.error("未选择行");
            return;
          }

          this.$mk.post({
            url: `${BASE_URL.BASE_URL}/MoldComponent/v1/mold/component/detail`,
            data: {
              id: this.$mk.toBigInt(data.row1.id)
            },
            useBigInt: true
          }).then((a) => { // 成功回调
            if (a.data && a.data.mold_component) {
              let row = a.data.mold_component;
              let mold_component_processes = row.mold_component_processes || [];
              let currentAddRows1 = [];
              let currentAddRows2 = [];
              currentAddRows1.push({
                component_id: row.id,
                component_num: 1,
                component_detail: { id: row.id, name: row.name },
              })
              mold_component_processes.forEach(pitem => {
                currentAddRows2.push({
                  component_id: row.id,
                  process_id: pitem.mes_processes_id,
                  process_detail: { id: pitem.mes_processes_id, name: pitem.mes_processes.name },
                })

              });

              this.addInfo({
                rows1: currentAddRows1,
                rows2: currentAddRows2,
                header: data.row1.name
              })




            }
          });

        }
      })
    },
    clearInfos() {
      this.collapseActiveKey = [];
      this.infos = [];
    },
    addInfo({ rows1, rows2, header }) {
      let key = this.infos.length + '';
      let info = {
        key: key, data: {
          mold_production_order_component: rows1,
          mold_production_order_component_processes: rows2
        },
        header: header
      };
      this.collapseActiveKey = [...this.collapseActiveKey, key];
      this.infos = [...this.infos, info];
    },
    pageSelectOrder() {
      let { width, height } = this.$mk.getWindowSize();
      this.$mk.dialog.open({
        page: () => import("../MoldOrder/selector"),
        title: "选择订单",
        showFooter: true,
        width: width * 0.9,
        height: height * 0.9,
        callback: ({ data }) => {
          if (!data || !data.row2) {
            this.$mk.error("未选择明细行");
            return;
          }


          this.formOptions.data.mold_order = data.row1;
          this.formOptions.data.order_id = data.row1.id;

          let detail = data.row2;

          console.log(detail)
          this.formOptions.data.mold_detail = detail.mold_scheme;
          this.formOptions.data.mold_id = detail.mold_id;


          if (detail.draw_start_time) {
            this.formOptions.data.draw_start_time = this.getDateValue(detail.draw_start_time);
          }

          if (detail.split_design_time) {
            this.formOptions.data.split_design_time = this.getDateValue(detail.split_design_time);
          }

          if (detail.draw_time) {
            this.formOptions.data.draw_time = this.getDateValue(detail.draw_time);
          }
          if (detail.draw2D_time) {
            this.formOptions.data.draw2D_time = this.getDateValue(detail.draw2D_time);
          }
          if (detail.draw3D_time) {
            this.formOptions.data.draw3D_time = this.getDateValue(detail.draw3D_time);
          }
          if (detail.horizontal_frame_time) {
            this.formOptions.data.horizontal_frame_time = this.getDateValue(detail.horizontal_frame_time);

          }


          this.formOptions.data = JSON.parse(JSON.stringify(this.formOptions.data))


          //this.loadMoleData(detail.mold_id);


          this.$forceUpdate()
        }
      })
    },

    loadMoleData(mold_id) {
      this.$mk.post({
        url: `${BASE_URL.BASE_URL}/MoldScheme/v1/mold/scheme/detail`,
        data: {
          id: this.$mk.toBigInt(mold_id)
        },
        useBigInt: true
      }).then((a) => { // 成功回调
        if (a.data && a.data.mold_scheme) {


          let row = a.data.mold_scheme;
          let mold_scheme_processes = row.mold_scheme_processes || [];
          let currentAddRows1 = [];
          let currentAddRows2 = [];

          mold_scheme_processes.forEach(pitem => {

            if (!currentAddRows1.filter(a => a.component_id == pitem.component_id.toString()).length) {
              currentAddRows1.push({
                component_id: pitem.component_id.toString(),
                component_num: 1,
                component_detail: { id: row.id, name: row.name },
              })
            }


            currentAddRows2.push({
              component_id: pitem.component_id.toString(),
              process_id: pitem.mes_processes_id,
              process_detail: { id: pitem.mes_processes_id, name: pitem.mes_processes.name },
            })
          });

          
          this.clearInfos();
          currentAddRows1.forEach(row => {
            this.addInfo({
              rows1: [row],
              rows2: currentAddRows2.filter(a => a.component_id == row.component_id),
              header: row.component_detail.name
            });
          })  

        }
      });
    },
    heightInit() {

      this.$nextTick(() => {
        let h = this.$mk.getWindowSize().height - this.$mk.getOffsetTop(this.$refs.xTable.$el) - 500;
        if (h < 400) {
          h = 400;
        }

        this.table1Height = h;
      });

    },

    // 获取路由的id参数
    getDataId() {
      let dataId = this.dataId;
      if (this.$route && this.$route.params && 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);
    },


    // 返回
    back() {
      // 如果是新增模式，关闭当前页面
      if (!this.isEdit) {
        this.$closePage({
          closeRoute: "/Mold/MoldProductionOrderAdd"
        });
      } else {
        // 如果是编辑模式，关闭当前页面
        this.$closePage({
          closeRoute: "/Mold/MoldProductionOrderUpdate"
        });
      }
      // 打开列表页面
      this.$openPage('/Mold/MoldProductionOrder')
    },



    // 保存
    ok() {



      let save = () => {


        // 如果是新增模式，提交新增接口 如果是编辑模式，提交编辑接口
        let action = !this.isEdit ? this.actions.create : this.actions.update;
        // 如果是新增模式，提交的数据中加入id 如果是编辑模式，提交的数据中不加入id
        let postdata = Object.assign({}, this.formOptions.data);


        // 格式化提交的数据
        this.$mk.formatFormData({ data: postdata, rules: this.formOptions.items });

        if (postdata.mold_id) {
          postdata.mold_id = this.$mk.toBigInt(postdata.mold_id);
        }
        if (postdata.order_id) {
          postdata.order_id = this.$mk.toBigInt(postdata.order_id);
        }

        postdata.mold_production_order_component = !this.isEdit ? [] : { insertList: [], deleteList: [], updateList: [] };
        postdata.mold_production_order_component_processes = !this.isEdit ? [] : { insertList: [], deleteList: [], updateList: [] };

        this.infos.forEach(info => {
          if (!info.data.postdata) {
            return;
          }
          if (!this.isEdit) {
            postdata.mold_production_order_component = [...postdata.mold_production_order_component, ...info.data.postdata.mold_production_order_component];
            postdata.mold_production_order_component_processes = [...postdata.mold_production_order_component_processes, ...info.data.postdata.mold_production_order_component_processes];
          } else {


            postdata.mold_production_order_component.insertList = [...postdata.mold_production_order_component.insertList, ...info.data.postdata.mold_production_order_component.insertList];
            postdata.mold_production_order_component.deleteList = [...postdata.mold_production_order_component.deleteList, ...info.data.postdata.mold_production_order_component.deleteList];
            postdata.mold_production_order_component.updateList = [...postdata.mold_production_order_component.updateList, ...info.data.postdata.mold_production_order_component.updateList];


            postdata.mold_production_order_component_processes.insertList = [...postdata.mold_production_order_component_processes.insertList, ...info.data.postdata.mold_production_order_component_processes.insertList];
            postdata.mold_production_order_component_processes.deleteList = [...postdata.mold_production_order_component_processes.deleteList, ...info.data.postdata.mold_production_order_component_processes.deleteList];
            postdata.mold_production_order_component_processes.updateList = [...postdata.mold_production_order_component_processes.updateList, ...info.data.postdata.mold_production_order_component_processes.updateList];

          }


        })

        if (this.isEdit) {
          postdata.mold_production_order_component = this.$mk.formatPostFieldValue({
            dataId: this.getDataId(),
            oldlistdata: this.detailsData,
            value: postdata.mold_production_order_component
          });
          postdata.mold_production_order_component_processes = this.$mk.formatPostFieldValue({
            dataId: this.getDataId(),
            oldlistdata: this.detailsData2,
            value: postdata.mold_production_order_component_processes
          });
        }


        // 提交数据
        this.$mk.post({
          url: action,
          loading: "保存中...",
          data: postdata,
          useBigInt: true,
        }).then((a) => { // 成功回调
          if (a.code == "200") {


            this.$mk.success("保存成功");
            if (!this.isEdit) { // 如果是新增模式，关闭当前页面
              this.back();
            }

          } else {
            this.$mk.error(a.message);
          }


        });


      };





      // 验证表单
      this.$mk.validateForm({ form: this.$refs.xForm }).then(() => { // 验证表单

        save(); // 提交保存

      }).catch(count => { // 验证失败
        this.$mk.error(`存在${count}项错误，请检查`);
      });


    },


    // 取消 返回
    cancel() {
      this.back();
    },




    pageApproved() {
      let dataId = this.getDataId();
      if (!dataId) {
        return;
      }


      let sendApproved = () => {
        this.$mk.post({
          url: `${BASE_URL.BASE_URL}/MoldProductionOrder/v1/mold/production/order/audit`,
          loading: '审批中...',
          data: {
            id: this.getDataId_BigInt()
          },
          useBigInt: true
        }).then(a => {
          if (a.code == "200") {
            this.$mk.success("审批成功");
            this.pageInit();
          }
          else {
            this.$mk.error(a.msg);
          }
        });
      }

      sendApproved("");

    },

    print() { // 打印



      let hiprint = this.$hiPrint; // 获取打印组件
      let tdata = JSON.parse(JSON.stringify(this.formOptions.data)); // 复制表单数据

      if (tdata.mold_order) {
        tdata.order_code = tdata.mold_order.name || '';
      }
      if (tdata.mold_detail) {
        tdata.mold_name = tdata.mold_detail.name || '';
      }
      for (let name in tdata) {
        if (name.indexOf('_time') != -1 && tdata[name] && tdata[name].indexOf('T') != -1) {
          tdata[name] = tdata[name].split('T')[0];
        }
      }
      tdata.qrcode = tdata.qr_code;
      tdata.details = JSON.parse(JSON.stringify(this.detailsData2));

      tdata.details.forEach(item => {

        if (item.component_detail && item.component_detail.name) {
          item.component_detail_name = item.component_detail.name;
        }
        if (item.department_detail && item.department_detail.name) {
          item.department_detail_name = item.department_detail.name;
        }

        if (item.process_detail && item.process_detail.name) {
          item.process_detail_name = item.process_detail.name;
        }

        if (item.process_uid_detail && item.process_uid_detail.name) {
          item.process_u_name = item.process_uid_detail.name;
        }

        item.prepare_process_time = this.getDateValueString(item.prepare_process_time);
        item.plan_complete_time = this.getDateValueString(item.plan_complete_time);
        item.send_time = this.getDateValueString(item.send_time);
        item.complete_time = this.getDateValueString(item.complete_time);

      })
      tdata.details = tdata.details.filter(a => a.component_detail_name && a.process_detail_name);
      console.log(tdata);

      hiprint.init(); // 初始化打印组件
      var hiprintTemplate = new hiprint.PrintTemplate({ // 创建打印模板
        template: settings.printTemplate // 模板内容
      });
      hiprintTemplate.print(tdata, { printer: '', title: '工艺布产' }); // 打印
    },

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