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

    <!-- 搜索区 -->
    <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
    </vxe-form>

    <!-- 表格区 -->
    <vxe-grid ref='xGrid' v-bind="gridOptions" @current-change="onSelectRow"></vxe-grid>

    <vxe-table :row-config="{isCurrent:true}"  border show-overflow keep-source ref="xTable" :height="table1Height" :data="detailsData">

      <vxe-column field="mold_scheme" title="模型" width="160" :params="editor_scheme" formatter="formatRef" ></vxe-column>
      <vxe-column field="production_type" title="布产类型" width="160" :params="options_production_type"
        formatter='formatEnum' ></vxe-column>

      <vxe-column field="mold_master_user_detail" title="师傅" width="160" :params="editor_staff" formatter="formatRef" ></vxe-column>

      <vxe-column field="manufacture_cycle" title="制作周期" width="160" formatter="formatDate" ></vxe-column>
      <vxe-column field="draw_start_time" title="预计开始画图时间" width="160" formatter="formatDate"
        ></vxe-column>
      <vxe-column field="split_design_time" title="分模设计时间预计" width="160" formatter="formatDate"
        ></vxe-column>
      <vxe-column field="draw_time" title="出图时间预计" width="160" formatter="formatDate"
        ></vxe-column>
      <vxe-column field="draw2D_time" title="出2D时间预计" width="160" formatter="formatDate"
        ></vxe-column>
      <vxe-column field="draw3D_time" title="出3D时间预计" width="160" formatter="formatDate"
        ></vxe-column>
      <vxe-column field="horizontal_frame_time" title="横架到厂日期预计" width="160" formatter="formatDate"
        ></vxe-column>
      <vxe-column field="inlay_deep_hole_time" title="镶件深孔钻到厂日期预计" width="160" formatter="formatDate"
        ></vxe-column>
    </vxe-table>

  </div>
</template>

<script>
import BASE_URL from '@/services/mes/api.js';
import { toDateString } from 'xe-utils'

export default {
  i18n: require('./i18n'),
  props: {
    pageMode: {
      type: String,
      default: "edit"
    }
  },
  data() {

    // 页面数据变量
    var pageData = {
 
      options_production_type:[{value:'1',label:'正常布产'},{value:'2',label:'委托布产'}],
      keyName: 'ID',
      tabKey: '1',
      actions: {
        getList: `${BASE_URL.BASE_URL}/MoldOrder/v1/mold/order/list`
      },
      detailDataFieldName: "mold_order",
      currentRowId: 0,

      start_time: 0,
      end_time: 0,

      table1Height: 300,
      downHeight: 0,

      detailsData:[],

      //搜索区
      searchFormData: {
        code: '', 
      },
      searchRules: [
        { key: "code", mode: "like" }, 
      ],


      searchFormItems: [
        { field: 'code', title: '订单号', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入订单号' } } },

      
        { span: 4, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] } }
      ],
 

      //数据区
      gridOptions: {
        height: 600,
        id: 'datagrid_1',
        rowConfig: {
          isCurrent: true
        },
        checkboxConfig: {

        },
        radioConfig: {
        },

        proxyConfig: {
          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为 
          props: {
            result: 'MoldOrder', // 配置响应结果列表字段
            total: 'total' // 配置响应结果总页数字段
          },
          // 接收Promise
          ajax: {
            // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
            query: (options) => {
              const { page, sorts } = options; // 获取当前页码、每页条数、排序信息
              var params = {}; // 定义请求参数
              params.page = page.currentPage; // 当前页码
              params.limit = page.pageSize; // 每页条数
              params.order_bys = []; // 排序信息
              params.search_rules = this.getSearchParms(); // 搜索信息
              if (sorts) { // 如果有排序信息
                sorts.forEach((v) => { // 遍历排序信息
                  params.order_bys.push({ // 添加排序信息
                    column: v.property, // 字段名
                    order: v.order // 排序方式
                  })
                });
              }
              return this.loadData({ params }); // 返回请求结果
            }
          }
        },
        columns: [
          //{ type: 'radio', width: 80 },
          { field: 'code', title: '订单编码', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入订单编码' } } },
          { field: 'name', title: '客户名称', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入客户名称' } } },
          { field: 'create_time', formatter: 'formatDate', width: 100, sortable: true, title: '创建时间', showHeaderOverflow: true }, // 创建时间
          { field: 'update_time', formatter: 'formatDate', width: 100, sortable: true, title: '更新时间', showHeaderOverflow: true }, // 更新时间


        ]
      },

      editor_scheme: {
        dataType: "object",
        valueField: "id",
        textField: "name",
        listdataFieldName: 'MoldScheme',
        mapper: [
          { fromField: "id", field: "mold_id" }
        ],
        dataUrl: `${BASE_URL.BASE_URL}/MoldScheme/v1/mold/scheme/list`
      },
      editor_staff: {
        dataType: "object",
        valueField: "id",
        textField: "name",
        listdataFieldName: 'MesStaff',
        mapper: [
          { fromField: "id", field: "mold_master_uid" }
        ],
        dataUrl: `${BASE_URL.BASE_URL}/MesStaff/v1/mes/staff/list`
      },

    };

    pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions);

    return pageData;
  },
  computed: {
    desc() {
      return this.$t('pageDesc')
    }
  },
  created() {
    this.heightInit();
  },
  onLoad() {

  },
  // 函数
  methods: {
    heightInit() {
      this.$nextTick(() => {

        this.gridOptions.height = (this.$mk.getWindowSize().height - this.$mk.getOffsetTop(this.$refs.xGrid.$el) - 150) * 0.5;

        this.table1Height = this.gridOptions.height - 20;

      });
    },
    getConfirmData() {
      return this.getSelectdRow();
    },
    
    onSelectRow({ row }) {
 
      this.currentRowId = row.id; 

     
      this.$mk.post({
        url:  `${BASE_URL.BASE_URL}/MoldOrder/v1/mold/order/detail`,
        loading: "加载中...",
        data: { id: this.$mk.toBigInt(this.currentRowId) },
        useBigInt: true
      }).then(a => {


  
        this.detailsData = JSON.parse(JSON.stringify(a.data[this.detailDataFieldName].order_molds || []));
 
        console.log(this.detailsData)
 
      });
    },
    onDateChange(date) {

      if (date && date.length) {
        this.start_time = toDateString(date[0]._d, 'yyyy/MM/dd') + ' 00:00';
        this.end_time = toDateString(date[1]._d, 'yyyy/MM/dd') + ' 23:59:59';
      } else {
        this.start_time = null;
        this.end_time = null;
      }

    },
    getSearchParms() {
      var rules = []; // 定义搜索参数
      let findMode = k => { // 查找搜索模式
        for (let i in this.searchRules) { // 遍历搜索规则
          if (this.searchRules[i].key == k) return this.searchRules[i].mode; // 如果找到了就返回搜索模式
        }
        return "="; // 如果没有找到就返回等于
      };

      for (let key in this.searchFormData) { // 遍历搜索表单数据
        let value = this.searchFormData[key]; // 获取值
        if (value) { // 如果有值
          let mode = findMode(key); // 获取搜索模式
          if (mode == "like") { // 如果是模糊搜索
            value = "%" + value + "%"; // 如果是模糊搜索就在两边加上%
          }
          if (typeof (value) == "object" && value.id) {
            value = value.id;
          }
          rules.push({ // 添加搜索参数
            column: key, // 字段名
            mode: mode, // 搜索模式
            value: value // 值
          });
        }
      } 


      return rules; // 返回搜索参数
    },
    getSelectdRow() {
      let row2 = this.$refs.xTable.getCurrentRecord();
      let row1 = this.$refs.xGrid.getCurrentRecord();
       
      return {row1,row2};
    },
    loadData({ params }) {

      params.start_time = this.start_time; // 开始时间
      params.end_time = this.end_time; // 结束时间
      return this.$mk.getPagedData({
        url: this.actions.getList,
        data: params
      });
    },
 
    //add / log / setting
    toolbarClick(e) {
      if (e.name == "add") {
        /*
        this.$mk.dialog.open({
          page: addPage,
          title: "新增编号信息",
          pageMode: "add",
          dataId: 0,
          callback: ({ success }) => {
            success && this.$refs.xGrid.commitProxy('query')
          }
        })
        */

        this.$openPage('/tCode/tAttributeEdit')
      }
      else if (e.name == "delete") {
        this.pageDelete();
      }
    },

 
    onSearch() {
      this.$refs.xGrid.commitProxy('query')
    }
  },
  // 监听属性
  watch: {

  }
};

</script>
<style>
.page-body {
  padding: 10px 10px;
  background: white;
}

.gridPanel {
  height: calc(100vh - 300px);
}
</style> 