<template>
  <div class="d-flex flex-column mb-6">
    <nm-box-row height="380px" style="margin-bottom:20px">
      <!-- <nm-container> -->
      <nm-list ref="list" v-bind="list">
        <!--查询条件-->
        <template v-slot:querybar> </template>

        <!--自定义列-->
        <template v-slot:col-isLocked="{ row }">
          <v-chip v-if="row.isLocked === true" color="red" dark>是</v-chip>
          <v-chip v-else color="green" dark>否</v-chip>
        </template>
        <template v-slot:col-isFrozen="{ row }">
          <v-chip v-if="row.isFrozen === true" color="red" dark>是</v-chip>
          <v-chip v-else color="green" dark>否</v-chip>
        </template>

        <!--操作列-->
        <template v-slot:col-operation="{ row }">
          <!-- <nm-button fab dark small icon="mdi-plus" @click="bind(row)" @success="refresh()"> </nm-button> -->
          <nm-button fab dark small icon="mdi-plus" @click="bindcilck(row)"> </nm-button>
          <!-- <nm-button fab dark small icon="mdi-clipboard-text-multiple" @click="showclick(row)"> </nm-button> -->
          <nm-button fab dark small icon="mdi-clipboard-text-multiple" @click="showclicks(row.id)"> </nm-button>
        </template>
      </nm-list>
      <nm-list-dialog :visible.sync="show" v-bind="showdialog">
        <nm-list ref="bomlist" v-bind="bomlist">
          <!--查询条件-->
          <template v-slot:querybar> </template>
        </nm-list>
      </nm-list-dialog>
      <nm-list-dialog :visible.sync="bind" v-bind="binddialog">
        <nm-box>
          <v-combobox
            v-model="list.model.bomNId"
            :items="bomData"
            item-disabled="disabled"
            item-text="name"
            item-value="id"
            label="物料清单"
            :isMultiple="false"
            outlined
            disable-lookup
            clearable
            solo
            :return-object="false"
          ></v-combobox>
          <nm-button text="添加" type="success" @click="addclick" />
        </nm-box>
      </nm-list-dialog>
      <!-- <save-page :id="curr.id" :visible.sync="dialog.save" @success="refresh" :materialId="materialNId" /> -->
      <!-- <form-create v-model="formModel" :rule="rule" :option="option" v-show="this.index_LoadMode"></form-create> -->
      <!-- </nm-container> -->
    </nm-box-row>
    <nm-box-row height="200px">
      <nm-list ref="bomlist" v-bind="bomlist">
        <!--查询条件-->
        <template v-slot:querybar> </template>

        <!--自定义列-->
        <template v-slot:col-isLocked="{ row }">
          <v-chip v-if="row.isLocked === true" color="red" dark>是</v-chip>
          <v-chip v-else color="green" dark>否</v-chip>
        </template>
        <template v-slot:col-isFrozen="{ row }">
          <v-chip v-if="row.isFrozen === true" color="red" dark>是</v-chip>
          <v-chip v-else color="green" dark>否</v-chip>
        </template>
      </nm-list>
    </nm-box-row>
  </div>
</template>
<script>
import { mixins } from 'xmanager-ui'
import page from '../../material/index/page'
import cols from '../../material/index/cols'
// import bompage from './page'
import bomcols from '../../billOfMaterial/index/cols'
// import SavePage from '../components/save'

const api = $api.materialApp.material
// const bomapi = $api.materialApp.billOfMaterial
const bomapi = $api.materialApp.billOfMaterialRelevanceMaterial

export default {
  name: page.name,
  mixins: [mixins.list],
  // components: { SavePage },
  data() {
    return {
      bomData: [],
      // materialNId: '',
      binddialog: {
        title: '物料清单',
        icon: 'dialog',
        visible: false,
        titleClass: 'text-h5 lighten-2 primary',
        footerCloseButton: true
      },
      showdialog: {
        title: '物料清单',
        icon: 'dialog',
        visible: false,
        titleClass: 'text-h5 lighten-2 primary',
        footerCloseButton: true
      },
      show: false,
      bind: false,
      datas: [],
      bomlist: {
        _height: 200,
        title: '',
        cols: bomcols,
        action: this.query,
        isVuetify: true,
        isSearch: false,
        isAdd: true,
        isExport: false,
        showSelect: true,
        singleSelect: false,
        noOperation: true,
        noQuerybar: true,
        noSearch: true,
        noFooter: true
      },
      list: {
        _height: 300,
        title: '物料清单',
        cols,
        action: api.query,
        model: {
          /** 物料 */
          materialNId: '',
          /** 物料清单 */
          bomNId: '',
          /** 是否锁定 */
          isLocked: false,
          /** 是否冻结 */
          isFrozen: false
        },
        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: {
    query() {
      if (this.list.model.materialNId != '') {
        return new Promise(resolve => {
          bomapi.query({ MaterialNId: this.list.model.materialNId }).then(datas => {
            let options = datas
            console.log(this.list.model.materialNId, 'pro')
            resolve(options)
          })
        })
      } else {
        return new Promise(resolve => {
          bomapi.query().then(datas => {
            let options = datas
            console.log(this.list.model.materialNId, 'no')
            resolve(options)
          })
        })
      }
    },
    showclicks(val) {
      // bomapi.query({ MaterialNId: val }).then(res => {
      //   this.bomData = res.rows
      //   console.log(this.bomData)
      // })
      this.list.model.materialNId = val
      this.$refs.bomlist.query()
    },
    bindcilck(val) {
      this.bind = true
      this.list.model.materialNId = val.id
    },
    showclick(val) {
      this.show = true
      this.list.model.materialNId = val.id
      this.$refs.bomlist.query()
    },
    addclick() {
      bomapi.add(this.list.model).then(res => {
        console.log(res)
        this._success('绑定成功')
        this.bind = false
      })
    }
  },
  mounted() {
    bomapi.getBom().then(res => {
      this.bomData = res.rows
    })
  }
}
</script>
