<template>
  <nm-container>
    <nm-split v-model="split" class="order-1 pa-2">
      <template v-slot:left>
        <nm-list-card v-bind="list" ref="list" :key="key">
          <template v-slot:top-buttons>
            <nm-button fab dark small icon="mdi-plus" @click="add" @success="refresh"> </nm-button>
            <nm-button fab dark small icon="mdi-pencil-outline" @click="edit(tabMSdata)" @success="refresh" v-if="tabMSdata.active"> </nm-button>
            <nm-button-delete fab dark small type="text" text="" icon="mdi-delete-outline" :id="tabMSdata.id" :action="removeAction" @success="refresh" v-if="tabMSdata.active"> </nm-button-delete>
          </template>
        </nm-list-card>
      </template>

      <template v-slot:right>
        <v-card class="order-2 pa-2" outline falt elevation="0">
          <nm-tabs :isVuetify="true" :items="tabItems" :isShow="true">
            <template v-slot:1>
              <v-container fluid>
                <v-data-iterator :items="list.propertyColumns" items-per-page.sync="1" hide-default-footer>
                  <template v-slot:header> </template>
                  <template v-slot:default>
                    <v-row>
                      <v-col cols="12" sm="12" md="12" lg="4">
                        <v-card elevation="0">
                          <v-list dense>
                            <v-list-item v-for="(col, index) in colunms" :key="index">
                              <v-list-item-content class=" font-weight-bold">{{ col.label }}:</v-list-item-content>
                              <v-list-item-content class="align-end">{{ tabMSdata[col.name] }}</v-list-item-content>
                            </v-list-item>
                          </v-list>
                        </v-card>
                      </v-col>
                    </v-row>
                  </template>
                </v-data-iterator>
              </v-container>
            </template>
            <template v-slot:2> </template>
          </nm-tabs>
        </v-card>
      </template>
    </nm-split>
    <save-page :id="curr.id" :visible.sync="dialog.save" @success="refresh" />
  </nm-container>
</template>
<script>
import { mixins } from 'xmanager-ui'
import page from './page'
import cols from './cols'
import SavePage from '../components/save'

const api = $api.materialApp.materialTrackingUnit

export default {
  name: page.name,
  mixins: [mixins.list],
  components: { SavePage },
  data() {
    return {
      //左右布局比例
      split: 0.2,
      key: 1,
      //tabs数据
      tabItems: [
        { text: page.title, id: '1' },
        { text: '物料属性', id: '2' }
      ],
      //右侧主界面展示数据
      tabMSdata: [],
      //左侧列
      colunms: [],
      dialog: {
        title: '物料跟踪单位',
        icon: 'dialog',
        visible: false,
        titleClass: 'text-h5 lighten-2 primary',
        footerCloseButton: true,
        footerTextColor: 'green'
      },
      list: {
        title: page.title,
        cols,
        icon: 'mdi-book-check-outline',
        hearderColumnName: 'name',
        action: api.query,
        //左侧点击
        clickAction: this.click,
        model: {
          /** 编码 */
          nId: '',
          /** 名称 */
          name: '',
          /** 详情 */
          description: '',
          /** 状态 */
          status: '',
          /** 物料编码 */
          materialNId: '',
          /** 物料修订 */
          materialRevision: '',
          /** 物料UId */
          materialUId: '',
          /** 物料批次 */
          materialLot: '',
          /** 数量 */
          quantity: '',
          /** 设备编码 */
          equipmentNId: '',
          /** 物料跟踪单元总数 */
          materialTrackingbUnitAggregate: '',
          /** 模板编码 */
          templateNId: '',
          /** 编码 */
          code: '',
          /** 代码类型 */
          codeType: '',
          /** 是否冻结 */
          isFrozen: '',
          /** 是否冻结 */
          isLocked: ''
        },
        isVuetify: true,
        isSearch: true,
        isAdd: true,
        isExport: false,
        showSelect: true,
        singleSelect: false,
        propertyColumns: [
          {
            name: 'nId',
            label: '编码'
          },
          {
            name: 'name',
            label: '名称'
          },
          {
            name: 'description',
            label: '描述'
          },
          {
            name: 'createdTime',
            label: '创建时间'
          }
        ]
      },
      removeAction: api.remove,
      buttons: page.buttons,
      /**Code Manage 开始 */
      list_LoadMode: false,
      index_LoadMode: false,
      save_LoadMode: false,
      formModel: {},
      rule: [],
      option: {
        submitBtn: false
      }
    }
  },
  methods: {
    click(Datas) {
      if (this.tabMSdata.id != Datas.id && this.tabMSdata != undefined) {
        this.tabMSdata = Datas
      } else if (this.tabMSdata.active == true || this.tabMSdata == undefined) {
        this.tabMSdata = []
      } else {
        this.tabMSdata = Datas
      }
    },
    del(val) {
      api.del(val).then(res => {
        console.log(res)
      })
    }
  },
  mounted() {
    this.colunms = cols.filter(m => m.show != false)
  }
}
</script>
