<template>
  <!-- 分类列表 -->
  <div class="app-container">
    <div class="header boxShadow">
      <div class="header-title">设备分类信息</div>
      <div class="header-content">
        <div class="equipInfo">
          <div class="equipBtns">
            <el-button type="primary" @click="handleAddClassify(0)">新增分类</el-button>
            <el-button type="primary" @click="handleAddClassify(1)">新增子分类</el-button>
          </div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="upFormName" placeholder="输入关键字" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchInfo">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="equipClass">
          <el-button type="text" @click="runBtnEvent(item.classifyName)" icon="el-icon-circle-plus-outline"
                     v-for="(item, index) in classifies" :key="index">{{item.classifyName}}
          </el-button>
        </div>
      </div>
    </div>
    <!-- 导入&搜索 -->
    <div class="header boxShadow">
      <div class="tab-content">
        <div class="tab-btns">
          <el-button type="default" icon="el-icon-document-add">导入</el-button>
        </div>
        <div class="tab-form">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="formInline.cnameOrNumber" placeholder="输入分类名称或编号" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 分页列表 -->
    <van-list>
      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
        <div class="list-main">
          <div class="list-content">
            <van-row class="content-1">
              <van-col span="6">分类编号: <span class="text-colorc">{{item.classifyIdentifying}}</span></van-col>
              <van-col span="6">分类名称: <span class="text-colorc">{{item.classifyName}}</span></van-col>
              <van-col span="6">分类路径: <span class="text-colorc">{{item.parentId}} </span></van-col>
              <!-- <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col> -->
            </van-row>
            <van-row class="content-1">
              <van-col span="6">资产图片: <span>{{item.layer}} </span></van-col>
              <van-col span="6">保养周期: <span class="text-colorc">{{item.row}} </span></van-col>
              <van-col span="6">描述: <span class="text-colorc">{{item.remark}} </span></van-col>
            </van-row>
          </div>
          <div class="list-btns">
            <!-- <el-button type="primary" @click="handleDetail">详情</el-button> -->
            <el-button type="primary" @click="handleEdit">修改</el-button>
            <!-- <el-button type="danger" @click="handleHistory">删除</el-button> -->
          </div>
        </div>

      </div>
    </van-list>
    <div class="pagination-container">
      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit"
                     :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange"
                     @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <!-- 新增修改弹框 -->
    <el-dialog :title="diaTitle" width="30%" :visible.sync="dialogFormVisible" center :destroy-on-close='true'
               @close='close'>
      <el-form :model="diaForm" :label-width="formLabelWidth" ref="diaForm">
        <el-form-item label="分类标识" v-if=" !isChild">
          <el-input v-model="diaForm.classifyIdentifying" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类名称" v-if="!isChild">
          <el-input v-model="diaForm.classifyName" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 新增修改子分类弹框 -->
        <el-form-item label="子分类标识" v-if="isChild">
          <el-input v-model="diaForm.classifyIdentifying" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="子分类名称" v-if="isChild">
          <el-input v-model="diaForm.classifyName" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="上传资产照片">
          <el-input v-model="diaForm.interfaceName" autocomplete="off"></el-input>
        </el-form-item> -->

        <el-form-item label="上级分类" v-if="isChild">
          <el-select v-model="diaForm.parentId" placeholder="请选择" style="width:100%;">
            <el-option v-for="sonClass in classifies" :key="sonClass.id" :label="sonClass.classifyName" :value="sonClass.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading='loading' @click="save">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getClassifyList, addClassifyItem, getParentList} from '@/api/equipConfig/equipClassification/index'

  export default {
    data() {
      return {
        dialogFormVisible: false,
        diaTitle: '新增分类',
        isChild: false,
        formLabelWidth: '100px',
        loading: false,
        classifies: [],
        upFormName: '',
        formInline: {
          cnameOrNumber: ''
        },
        diaForm: {
          id: '',
          parentId: '',
          classifyIdentifying: '', // 分类标识
          classifyName: ''// 分类名称
        },
        list: [],
        finished: 'false',
        listQuery: {
          condition: "",
          page: 1,
          limit: 10,
          total: 10,
        },
      }
    },
    created() {

    },
    mounted() {
      this.runBtnEvent();
      this.getList()
    },
    methods: {
      runBtnEvent(data) {
        getParentList(data).then(res => {
          this.classifies = res.data;
        }).catch(err => {
          console.log(err);
        });
      },
      searchInfo() {
        this.runBtnEvent(this.upFormName);
      },
      onSubmit() {
        console.log('submit!');
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      getList() {
        // let condition = {
        //   userRealName: this.formInline.userRealName.trim(),
        //   operationTime: this.formInline.operationTime,
        //   orgCode: JSON.parse(localStorage.getItem("userInfo")).orgCode
        // }
        let data = {
          pageIndex: this.listQuery.page,
          pageSize: this.listQuery.limit,
          // condition: JSON.stringify(condition)
        }
        getClassifyList(data).then(res => {
          console.log(res, 'getClassifyList')
          this.list = res.data.records
          this.listQuery.limit = res.data.size
          this.listQuery.total = res.data.total
        }).catch(err => {
          console.log(err)
        })
      },
      save() {
        addClassifyItem(this.diaForm).then(res => {
          if (res.code === 200) {
            this.dialogFormVisible = false;
            this.runBtnEvent();
            this.getList();
          }
        }).catch(err => {
          console.log(err)
        })
      },
      close() {
        this.$nextTick(() => {
          this.$refs["diaForm"].resetFields()
        })
      },
      handleAddClassify(type) {
        this.dialogFormVisible = true;
        if (type === 0) {
          this.diaTitle = '新增分类';
          this.isChild = false
        } else {
          this.diaTitle = '新增子分类';
          this.isChild = true
        }
      },
      handleDetail() {
        this.$router.push({name: 'GrainDetectionDetail'})
      },
      handleEdit(type) {
        this.dialogFormVisible = true
        this.diaTitle = '修改分类'
      },
      add() {
        this.$router.push({
          name: 'GrainDetectionAdd'
        })
      },
      search() {
      },

      sizeChange(v) {
        this.listQuery.limit = v
        console.log(`每页 ${v} 条`);
        this.list.splice(v, this.list.length - 1)
      },
      pageChange(v) {
        this.listQuery.page = v
        console.log(`当前页: ${v}`);
      },
    }
  }
</script>
<style lang='scss' scoped>
  // .boxShadow {
  //   box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
  // }
  .app-container {
    padding: 0;
  }

  .header {
    background-color: #fff;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 10px;
    .header-title {
      font-size: 14px;
      font-weight: 600;
      padding-left: 10px;
      border-left: 4px solid #5283e7;
    }
    .tab-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tab-form {
        height: 40px;
      }
    }
    .header-content {
      .equipInfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        .el-form {
          height: 40px;
        }
      }
      .equipClass {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        margin-bottom: 0;
      }
    }
  }

  .list {
    background-color: #fff;
    border-radius: 15px;
    margin-top: 10px;
    .list-main {
      padding-left: 15px;
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      .list-title {
        font-size: 15px;
        font-weight: 700;
        padding: 10px 0;
      }
      .list-content {
        width: 85%;
        padding: 10px 10px 10px 5px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .content-1 {
          font-size: 13px;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          // padding: 5px 0;
          strong {
            color: #d24848;
          }
          .text-colorc {
            // color: #b8b8b8;
            font-family: " MicrosoftYaHei", "微软雅黑", sans-serif;
          }
        }
        .content-1:nth-last-child(1) {
          padding-bottom: 10px;
        }
      }
      .list-btns {
        width: 15%;
        background-color: #edf2fd;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
    }
  }
</style>
