<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 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> <materialTemplateProperty ref="materialPropertyindex" /> </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'
import materialTemplateProperty from '../../materialTemplateProperty/index/index.vue'

const api = $api.materialApp.materialTemplate

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

  components: { SavePage, materialTemplateProperty },
  data() {
    return {
      key: 1,
      split: 0.2,
      tab: null,
      eagerBool: true,
      DataList: false,
      tabItems: [
        { text: '详情信息', id: '1' },
        { text: '物料模板属性', id: '2' }
      ],
      tabMSdata: [],
      colunms: [],
      buttons: page.buttons,
      removeAction: api.remove,
      itemlable: [
        {
          lable: '名称',
          name: 'name'
        },
        {
          lable: '编码'
        }
      ],
      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: '创建时间'
          }
        ],
        model: {
          name: ''
        }
      }
    }
  },
  methods: {
    click(Datas) {
      if (this.tabMSdata.id != Datas.id && this.tabMSdata != undefined) {
        this.tabMSdata = Datas
        this.$refs.materialPropertyindex.materialTemplateNid = Datas.id
      } else if (this.tabMSdata.active == true || this.tabMSdata == undefined) {
        this.tabMSdata = []
      } else {
        this.tabMSdata = Datas
      }
    }
  },
  mounted() {
    this.colunms = cols.filter(m => m.show != false)
  }
  // watch: {
  //   list: {
  //     handler: function() {
  //       this.GetDatas(this.list.model)
  //     },
  //     deep: true
  //   }
  // }
}
</script>
