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

            <!-- <nm-button fab dark small icon="mid-plus" v-bind="buttons.add" @click="add" @success="refresh()" />
            <nm-button fab dark small icon="mid-pencil-outline" v-bind="buttons.edit" @click="edit(tabMSdata)" @success="refresh()" v-if="tabMSdata.active"></nm-button>
            <nm-button-delete v-bind="buttons.del" :id="tabMSdata.id" :action="removeAction" @click="del(tabMSdata.id)" @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>
                    <!-- <v-toolbar class="mb-2" color="indigo darken-5" dark flat>
                        <v-toolbar-title>This is a header</v-toolbar-title>
                      </v-toolbar> -->
                  </template>
                  <template v-slot:default>
                    <v-row>
                      <v-col cols="12" sm="12" md="12" lg="4">
                        <v-card elevation="0">
                          <!-- <v-card-title class="subheading font-weight-bold">{{ tabMSdata[item.name] }}</v-card-title> -->
                          <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 v-if="tabMSdata[col.name] === false"> <span style="color: green;">否</span></v-list-item-content>
                              <v-list-item-content v-else-if="tabMSdata[col.name] === true" style="color:red">是</v-list-item-content>
                              <v-list-item-content v-else 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> <materialProperty ref="materialpropertyindex" /> </template>
            <!-- <template v-slot:3>
              <nm-list ref="materialgrouplist" v-bind="materialgrouplist">
                <template v-slot:querybar> </template>

                <template v-slot:querybar-buttons>
                  <nm-button v-bind="buttons.add" @click="add" />
                </template>

              </nm-list>
            </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 groupcols from '../../materialGroup/index/cols'（card3）
import materialProperty from './../../materialProperty/index/index.vue'
import SavePage from '../components/save'

const api = $api.materialApp.material

export default {
  name: page.name,
  mixins: [mixins.list],

  components: { SavePage, materialProperty },
  data() {
    return {
      key: 1,
      tabItems: [
        { text: page.title, id: '1' },
        { text: '物料属性', id: '2' }
        // { text: '物料组', id: '3' }card3
      ],
      tabMSdata: [],
      tab: null,
      // eagerBool: true,
      // DataList: false,
      colunms: [],
      dialog: {
        title: '物料模板',
        icon: 'dialog',
        visible: false,
        titleClass: 'text-h5 lighten-2 primary',
        footerCloseButton: true,
        footerTextColor: 'green'
      },
      split: 0.2,
      list: {
        action: api.query,
        clickAction: this.click,
        icon: 'mdi-book-check-outline',
        hearderColumnName: 'name',
        propertyColumns: [
          {
            name: 'nId',
            label: '编码'
          },
          {
            name: 'name',
            label: '名称'
          },
          {
            name: 'description',
            label: '描述'
          },
          {
            name: 'createdTime',
            label: '创建时间'
          }
        ],
        noSearchButtonIcon: false,
        title: page.title,
        cols,
        model: {
          /** 主键 */
          uId: '',
          /** 主键 */
          nId: '',
          /** 名称 */
          name: ''
        },
        isVuetify: true,
        isSearch: true,
        isAdd: true,
        isExport: false,
        showSelect: true,
        singleSelect: false
      },
      // materialgrouplist: {
      //   cols: groupcols,
      //   action: this.querygroup,
      //   model: {
      //     /** 编码 */
      //     uId: '',
      //     /** 编码 */
      //     nId: '',
      //     /** 名称 */
      //     name: '',
      //     /** 描述 */
      //     description: '',
      //     /** 物料组父级 */
      //     materialGroupParents: ''
      //   },
      //   isVuetify: true,
      //   isSearch: true,
      //   isAdd: true,
      //   isExport: false,
      //   showSelect: true,
      //   singleSelect: false
      // },
      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
        this.$refs.materialpropertyindex.materialNid = Datas.id
      } 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>
