<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label id="产品名称">{{$t('100088')}}：</label>
        <Select
          v-model="productId"
          @on-change="loadMaterialByProduct(productId)"
          label-in-value
          clearable
          class="searchSelect"
        >
          <Option
            v-for="item in productlist"
            :value="item.id"
            :key="item.id"
          >{{item.code}}-({{ item.name }})</Option>
        </Select>
      </div>
      <div class="filter">
        <label id="物料编号">{{$t('100390')}}：</label>
        <Select v-model="materialId" label-in-value clearable class="searchSelect">
          <Option
            v-for="item in materiallist"
            :value="item.id"
            :key="item.id"
          >{{item.pn}} {{ item.name }} {{item.spec}}</Option>
        </Select>
      </div>

      <div class="searchBtn">
      <Button type="primary" class="twoWord" icon="ios-search" @click="search()">{{$t('1001')}}</Button>
      <Button type="success" class="twoWord" icon="md-add-circle" @click="add()">{{$t('1002')}}</Button>
      <Button type="warning" class="twoWord" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</Button>
      <Button type="error" class="twoWord intervalRight" icon="md-close-circle" @click="asyncDelete()">{{$t('1004')}}</Button>
      <Button type="primary" class="fourWord" icon="md-download" @click="loadexcel()">{{$t('1005')}}</Button>
      <Upload
        style="display:inline-block"
        ref="upload"
        :action="action"
        name="excel-file"
        :headers="headers"
        :show-upload-list="false"
        :on-format-error="handleFormatError"
        :on-success="handleSuccess"
        :on-error="handleError"
        :format="['xlsx']"
      >
        <Button type="primary" class="fourWord" icon="md-cloud-upload">{{$t('1006')}}</Button>
      </Upload>
      <Button type="primary" class="fourWord" icon="ios-cloud-download" @click="downexcel()">{{$t('1007')}}</Button>
    </div>
    </div>

    <Modal class="newModalClass" :title="$t(1002)" v-model="addmodal" :styles="{width:'600px'}">
      <div class="modal_body">
        <div class="filter">
          <label>
            <i>*</i>{{$t('100390')}}：
          </label>
          <Select
            v-model="addMaterialId"
            label-in-value
            clearable
            class="searchSelect"
          >
            <Option
              v-for="item in this.addMateriallist"
              :value="item.id"
              :key="item.id"
            >{{ item.name }}-{{item.spec}}</Option>
          </Select>
        </div>
        <div class="filter">
          <label id="数量"><i>*</i>{{$t('300084')}}：</label>
          <Input class="searchInput" type="number" id="input1" v-model="addMaterialCount" />
        </div>
      </div>
      <div></div>
      <div slot="footer">
        <Button type="text" size="large" @click="addmodal=false" v-text="$t(1033)">取消</Button>
        <Button type="primary" size="large" @click="asyncAdd" v-text="$t(1011)">确定</Button>
      </div>
    </Modal>
    <Modal class="newModalClass" :title="$t(1003)" v-model="editmodal" :styles="{width:'600px'}">
      <div class="modal_body">
        <div class="filter">
          <label id="物料">
            <i>*</i>{{$t('100390')}}：</label>
          <Select
            v-model="editMaterialId"
            label-in-value
            clearable
            class="searchSelect"
          >
            <Option
              v-for="item in this.addMateriallist"
              :value="item.id"
              :key="item.id"
            >{{ item.name }}-{{item.spec}}</Option>
          </Select>
        </div>
        <div class="filter">
          <label id="数量">
            <i>*</i>{{$t('300084')}}：</label>
          <Input class="searchInput" type="text" id="input1" v-model="editMaterialCount" />
        </div>
      </div>
      <div></div>
      <div slot="footer">
        <Button type="text" size="large" @click="editmodal=false" v-text="$t(1033)">取消</Button>
        <Button type="primary" size="large" @click="asyncEdit" v-text="$t(1011)">确定</Button>
      </div>
    </Modal>
    <div class="divborder">
      <div class="core">
        <div class="abs-zone" v-if="editZoneDisplayBoolean">
          <div class="box">
            <Input
              placeholder="Enter something..."
              style="width:200px"
              v-model="beforeSubmitNodeTitleString"
            />
            <Button type="success" :style="{marginLeft:'5px'}" @click="submitNameEditFunc(1)">
              <Icon type="md-checkmark" />
            </Button>
            <Button type="error" :style="{marginLeft:'5px'}" @click="submitNameEditFunc(0)">
              <Icon type="md-close" />
            </Button>
          </div>
        </div>
        <!-- <Tree ref="tree" :data="treeContents" :render="renderContent"></Tree> -->
        <Tree ref="tree" :data="treeContents"></Tree>
      </div>
    </div>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
export default {
    data () {
        return {
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            action:
        axios.publicPath + 'config/upload/submit?templateName=ProductStructure',
            productId: 0,
            materialId: 0,
            editZoneDisplayBoolean: false,
            productlist: [],
            materiallist: [],
            treeContents: [],
            addmodal: false,
            editmodal: false,
            addMaterialCount: 0,
            addMaterialId: 0,
            addMateriallist: [],
            editMaterialId: 0,
            editMaterialCount: 0,
            editMateriallist: []
        }
    },
    created () {
        this.doTreeContents()
        this.loadProduct()
    },
    methods: {
        loadProduct () {
            axios
                .request({
                    url: 'config/projectproduct/GetProducts',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.productlist = res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        loadMaterial () {
            axios
                .request({
                    url: 'config/Material/GetMaterialList',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.addMateriallist = res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        loadMaterialByProduct (productId) {
            this.materialId = 0
            var params = {
                productId: productId
            }
            axios
                .request({
                    url: 'config/Material/GetMaterialByProcut',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.materiallist = res.data.data
                    }
                })
        },
        search () {
            this.doTreeContents()
        },
        doTreeContents () {
            var params = {
                productId: this.productId,
                materialId: this.materialId
            }
            this.axios
                .request({
                    url: 'config/ProjectProductStructure/GetProductTree',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.treeContents = res.data.data
                })
                .catch(error => {})
        },
        add () {
            let checkboxItems = this.$refs.tree.getSelectedNodes()
            if (checkboxItems.length != 1) {
                this.$Message.error(this.$t(90000089))
                return false
            }

            this.addmodal = true
            this.loadMaterial()
        },
        edit () {
            let checkboxItems = this.$refs.tree.getSelectedNodes()
            if (checkboxItems.length != 1) {
                this.$Message.error(this.$t(90000089))
                return false
            }
            if (checkboxItems[0].parentId == 0) {
                this.$Message.error(this.$t(90000090))
                return false
            }
            this.editMaterialId = checkboxItems[0].itemId
            this.editMaterialCount = checkboxItems[0].count
            this.editmodal = true
            this.loadMaterial()
        },
        asyncAdd () {
            let checkboxItems = this.$refs.tree.getSelectedNodes()
            if (checkboxItems.length != 1) {
                this.$Message.error(this.$t(90000089))
                return false
            }
            if (this.addMaterialId == 0) {
                this.$Message.error(this.$t(1950603))
                return false
            }
            if (this.addMaterialCount == 0 || this.addMaterialCount < 0) {
                this.$Message.error(this.$t(90000091))
                return false
            }
            if (checkboxItems[0].id == this.addMaterialId) {
                this.$Message.error(this.$t(100403))
                return false
            }

            var data = {
                Id: checkboxItems[0].id,
                ItemId: this.addMaterialId,
                ItemCount: this.addMaterialCount
            }
            axios
                .request({
                    url: '/config/ProjectProductStructure/Add',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(1055))
                        this.doTreeContents()
                        this.addmodal = false
                        this.addMaterialId = 0
                        this.addMaterialCount = 0
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        asyncEdit () {
            let checkboxItems = this.$refs.tree.getSelectedNodes()
            if (checkboxItems.length != 1) {
                this.$Message.error(this.$t(90000089))
                return false
            }
            if (this.editMaterialId == 0) {
                this.$Message.error(this.$t(1950603))
                return false
            }
            if (this.editMaterialCount == 0 || this.editMaterialCount < 0) {
                this.$Message.error(this.$t(90000091))
                return false
            }

            var data = {
                Id: checkboxItems[0].id,
                ItemId: this.editMaterialId,
                ItemCount: this.editMaterialCount,
                ParentId: checkboxItems[0].parentId
            }
            axios
                .request({
                    url: '/config/ProjectProductStructure/Edit',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(1060))
                        this.doTreeContents()
                        this.editmodal = false
                        this.editMaterialId = 0
                        this.editMaterialCount = 0
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        asyncDelete () {
            let checkboxItems = this.$refs.tree.getSelectedNodes()
            if (checkboxItems.length != 1) {
                this.$Message.error(this.$t(90000089))
                return false
            }
            if (checkboxItems[0].parentId === 0) {
                this.$Message.error(this.$t(90000092))
                return false
            }
            this.$Modal.confirm({
                title: this.$t('1018'),
                content: '',
                closable: true,
                okText: this.$t('1004'),
                onOk: () => {
                    var params = {
                        id: checkboxItems[0].id
                    }
                    axios
                        .request({
                            url: '/config/ProjectProductStructure/Del',
                            params,
                            method: 'get'
                        })
                        .then(res => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t(1058))
                                this.doTreeContents()
                                this.addmodal = false
                                this.scanObj = {}
                            } else {
                                this.$Message.error(this.$t(res.data.msg))
                            }
                        })
                }
            })
            // var params = {
            //   id: checkboxItems[0].id
            // }
            // axios
            //   .request({
            //     url: '/config/ProjectProductStructure/Del',
            //     params,
            //     method: 'get'
            //   })
            //   .then(res => {
            //     if (res.data.ret === 1) {
            //       this.$Message.success('删除成功')
            //       this.doTreeContents()
            //       this.addmodal = false
            //       this.scanObj = {}
            //     } else {
            //       window_warning(this.$t(res.data.msg))
            //     }
            //   })
        },
        loadexcel () {
            axios
                .request({
                    url: '/config/download/GetTemplate?name=ProductStructure',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        window.location.href = axios.publicPath + '' + res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        handleSuccess (res, file) {
            if (res.ret === 1) {
                this.$Message.success(this.$t(950398))
                this.doTreeContents()
            } else {
                if ((res.msg + '').indexOf(',') != -1) {
                    inittip(res.msg)
                } else {
                    this.$Message.error(this.$t('' + res.msg))
                }
            }
        },
        handleError () {
            this.$Message.error(this.$t(950399))
        },
        handleFormatError (file) {
            this.$Message.error(this.$t(950396) + file.name + this.$t(950397))
        },
        downexcel () {
            var params = {
                productId: this.productId,
                materialId: this.materialId
            }
            this.axios
                .request({
                    url: 'config/ProjectProductStructure/ExportExcel',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        window.location.href = axios.publicPath + '' + res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
                .catch(error => {})
        }
    }
}
</script>
