<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item"/>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus"
                 @click="handleCreateAdd(1)">
        增加产品类目
      </el-button>
    </div>
    <el-table :data="tableData" v-loading="listLoading" row-key="id"
              border
              default-expand-all
              :tree-props="{child: 'child', haschild: 'child'}">
      <el-table-column prop="categoryName" label="类目名称">
      </el-table-column>
      <el-table-column label="类目属性">
        <template slot-scope="{row}">
          <el-button @click="categorySpecList(row.id)" type="success" size="mini">
            属性列表
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="sortNum" label="排序">
      </el-table-column>

      <el-table-column label="状态" width="100">
        <template slot-scope="{row}">
          <el-tag v-if="row.voidFlag==0" type="success">
            正常
          </el-tag>
          <el-tag v-else="row.voidFlag==1" type="danger">
            停用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230">
        <template slot-scope="{row}">
          <el-button @click="handleUpdate(row)" type="primary" size="mini">
            编辑
          </el-button>
          <el-button @click="handleCreateAdd(row.id,row.categoryName)" type="success" size="mini">
            新增
          </el-button>
          <el-button @click="editStatus(row,'1')" type="danger" v-if="row.voidFlag==0" size="mini">
            禁用
          </el-button>
          <el-button @click="editStatus(row,'0')" v-else="row.voidFlag==1" size="mini">
            启用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page"
                :limit.sync="listData.pageSize"
                @pagination="getCategoryInfo"/>


    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <!--内部弹窗-->
      <el-dialog
        title="上级科目"
        :visible.sync="innerVisible"
        append-to-body>
        <el-tree
          node-key="id"
          :data="tableData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          accordion
        ></el-tree>
        <p v-if="handleTree" class="tree-span">选中的上级科目：
          <span>{{checkName}}</span>
        </p>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleCheck">确 定</el-button>
        </div>
      </el-dialog>
      <el-form label-width="130px" label-position="right">
        <el-form-item v-if="parentForm" label="上级类目">
          <el-button @click="innerBtn()">{{nameTitle}}</el-button>
        </el-form-item>
        <el-form-item label="类目名称">
          <el-input v-model="form.categoryName"></el-input>
        </el-form-item>
        <el-form-item label="显示排序">
          <el-input v-model="form.sortNum"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStatus==='1'?addBtn():editBtn()">确 定</el-button>
      </div>
    </el-dialog>
    <!--    <servicedialog @tableRefresh="tableRefresh" ref="menuDialog" :dialogStatus="dialogStatus" :menuId="menuId" :titleDialog="titleDialog" :dialogVisible="dialogVisible"/>-->
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
  </div>
</template>

<script>
  import {
    getSkuProductCategoryList,
    addSkuProductCategory,
    updateSkuProductCategory,
    getSkuProductCategoryInfoById,
    getSkuProductCategoryTreeData
  } from '@/api/productFile/category.js'
  import {getMenu} from '@/utils/getTable.js'
  import Cancledialog from '@/components/Dialog/Cancledialog.vue'

  const form = {
    categoryName: '',
    sortNum: '',
  }

  export default {
    components: {
      Cancledialog,
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          0: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        idProduct: '',
        dialogStatus: 1, //1增加，2修改
        dialogTitle: '',
        dialogVisible: false,


        innerVisible: false,
        handleTree: false,
        defaultProps: {
          label: 'categoryName'
        },
        checkName: '',
        nameTitle:'',

        search: {
          keyWord: ''
        },
        form: Object.assign({}, form),
        parentForm: {},
        listData: {
          total: 0,
          page: 1,
          pageSize: 10
        },

        options: [],

        confirmdialog: false,
        listLoading: false,
        tableData: [],
        menuId: ''
      }
    },
    mounted() {
      this.getCategoryInfo();
    },
    methods: {
      //获取列表
      getCategoryInfo() {
        const _that = this
        _that.listLoading = true


        var params = _that.search;
        var page = {
          pageIndex: _that.listData.page,
          pageSize: _that.listData.pageSize,
        }
        var data = {
          "params": JSON.stringify(params),
          "page": JSON.stringify(page),
        }

        getSkuProductCategoryList(data).then(response => {
          console.log(response)
          const data = response.data
          const menuData = getMenu(data)
          // //  组合表单数据
          _that.tableData = menuData
          console.log('tableData',_that.tableData)
          _that.listData.total = response.total
          _that.listLoading = false
        }).catch(err => {
          _that.$message.error(err)
          _that.listLoading = false
        })
      },
      //增加产品类目
      handleCreateAdd(id,...categoryName) {
        const _that = this
        _that.form = Object.assign({}, form),
          _that.form.idProduct = _that.idProduct
        _that.dialogTitle = '增加产品类目'
        _that.dialogStatus = '1';
        _that.dialogVisible = true;
        _that.nameTitle=categoryName[0]

        var data = {
          id: id
        }

        getSkuProductCategoryInfoById(data).then(res => {
          console.log(res);
          const data = res.data
          _that.parentForm = data
        }).catch(err => {
          _that.$message.error(err)
        })
      },
      //刷新变革
      tableRefresh() {
        //刷新变革
        this.getCategoryInfo()
      },
      //增加产品类目
      addBtn() {
        const _that = this
        _that.form.parentId = _that.parentForm.id
        _that.form.parentName = _that.parentForm.categoryName
        var printerTypeInfo = JSON.stringify(_that.form)
        var data = {
          "info": printerTypeInfo,
        }
        // console.log(data);
        // return

        addSkuProductCategory(data).then(res => {
          // console.log(res);
          if (res.httpCode == 200) {
            _that.dialogVisible = false
            _that.$message({
              message: '增加成功',
              type: 'success'
            });
            _that.tableRefresh();
          } else {
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)
          _that.dialogVisible = true
        })
      },

      //唤起修改
      handleUpdate(row) {
        const _that = this;
        _that.form = Object.assign({}, form),
        _that.dialogTitle = '修改产品类目信息'
        _that.dialogVisible = true
        _that.dialogStatus = '2';

        var data = {
          id: row.id
        }

        console.log(data);
        getSkuProductCategoryInfoById(data).then(res => {
          console.log(res);
          const data = res.data
          _that.parentForm = data
          if(data.parentName){
            _that.nameTitle= data.parentName
          }else {
            _that.nameTitle= data.categoryName
          }
          _that.form = {
            id: data.id,
            categoryName:data.categoryName,
            sortNum: data.sortNum,
            parentId:data.parentId,
            parentName:data.parentName
          }
        }).catch(err => {
          _that.$message.error(err)
        })
      },
      //修改产品类目
      editBtn() {
        const _that = this
        var printerTypeInfo = JSON.stringify(_that.form)
        var data = {
          "info": printerTypeInfo,
        }
        // console.log(printerTypeInfo);
        // return;

        updateSkuProductCategory(data).then(res => {
          // console.log(res);
          if (res.httpCode == 200) {
            _that.dialogVisible = false
            _that.$message({
              message: '修改成功',
              type: 'success'
            });
            _that.tableRefresh();
          } else {
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)
          _that.dialogVisible = true
        })

      },

      //唤起选择上级科目
      handleNodeClick(data) {
        console.log(data);
        var _that = this;
        _that.handleTree = true;
        _that.form.parentId = data.id
        _that.form.parentName = data.categoryName
        _that.checkName = data.categoryName
        _that.nameTitle = data.categoryName
      },

      //确定选中上级科目
      handleCheck() {
        const _that = this
        _that.innerVisible = false
      },

      //选择上级科目
      innerBtn() {
        var _that = this;
        _that.innerVisible = true;
        _that.checkName = ''
      },


      //查看部件参数列表
      categorySpecList(idCategory) {
        this.$router.push({
          path: '/productFile/categorySpec',
          query: {
            'idCategory': idCategory
          }
        })
      },

      //查看部件工序列表
      partWorkProcessList(idProduct, idPartInfo) {
        this.$router.push({
          path: '/productFile/partWorkProcessInfo',
          query: {
            'idProduct': idProduct,
            "idPartInfo": idPartInfo
          }
        })
      },

      //启用禁用
      editStatus(row, status) {
        var _that = this;
        var partInfo = {
          id: row.id,
          voidFlag: status
        }
        console.log(partInfo)
        var params = {
          "info": JSON.stringify(partInfo),
        }

        var url = '/product/voidSkuProductCategory';
        _that.$refs.confirmDialog.updataClick(params, url);
      },

      //搜索
      searchData() {
        this.listData.page = 1;
        this.getCategoryInfo()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
</style>
