<template>
  <div class="signsMg">
    <el-row class="topBar">
      <el-col>
        <el-form :inline="true" :model="searchData">
          <el-form-item label>
            <el-input v-model="searchData.legendName" placeholder="请输入图例名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFun()">
              <i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button type="primary" @click="resetFun()">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </el-form-item>
          <el-form-item class="fr">
            <el-button plain type="primary" @click="addFun('one',null)">
              <i class="el-icon-plus"></i> 新增一级分类
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width:100%;" height="65vh" :loading="false">
      <el-table-column type="expand" class="sonTd">
        <template slot-scope="props">
          <el-table :data="props.row.childList" border style="width:100%;" class="sonTable" :show-header="false">
            <!-- <el-table-column width="50" type="index" label="序号"></el-table-column> -->
            <el-table-column prop="legendName" label="图例名称"></el-table-column>
            <el-table-column prop="legendImg" label="图例图片名称"></el-table-column>
            <el-table-column prop="legendCode" label="图例代码"></el-table-column>
            <el-table-column prop="deptId" label="所属部门"></el-table-column>
            <el-table-column prop="sort" label="排序"></el-table-column>
            <!-- <el-table-column prop="createUserName" label="创建人姓名"></el-table-column> -->
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="210" align="center">
              <template slot-scope="scope">
                <el-button @click="editFun(scope.row)" size="small">编辑</el-button>
                <el-button type="danger" @click="delFun(scope.row)" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!-- <el-table-column width="50" type="index" label="序号"></el-table-column> -->
      <el-table-column prop="legendName" label="图例名称"></el-table-column>
      <el-table-column prop="legendImg" label="图例图片名称"></el-table-column>
      <el-table-column prop="legendCode" label="图例代码"></el-table-column>
      <el-table-column prop="deptId" label="所属部门"></el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <!-- <el-table-column prop="createUserName" label="创建人姓名"></el-table-column> -->
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="210" align="center">
        <template slot-scope="scope">
          <el-button @click="editFun(scope.row)" size="small">编辑</el-button>
          <el-button type="danger" @click="delFun(scope.row)" size="small">删除</el-button>
          <el-button type="primary" @click="addFun('two',scope.row)" size="small">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      background
      layout="total,sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="PAGE.page"
      :page-size="PAGE.size"
    ></el-pagination>-->
    <SignsMgEdit
      :dialogVisible="dialogVisible"
      :editForm="formData"
      :title="dialogTit"
      @dialogFun="closeDialog"
      @refreshTableData="getTableData('add')"
      :key="zjKey"
    ></SignsMgEdit>
  </div>
</template>
<style lang="scss">
.sonTable table tr{
  background: #f0f9eb;
  &:nth-child(1) td{border-top: 0;}
  &:last-child td{border-bottom: 0;}
}
.el-table__expanded-cell{
    padding: 0 0 0 47px !important;
}
</style>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import SignsMgEdit from "./SignsMgEdit.vue";
import METHOD from "@/utils/methods";
@Component({
  components: { SignsMgEdit }
})
export default class SignsMg extends Vue {
  @Action("setSigns") setSigns: any;
  @Provide() tableData: any = [];
  @Provide() PAGE: any = { page: 1, size: 100};
  @Provide() searchData: any = { legendName: "" };
  @Provide() loading: Boolean = false;
  //编辑组件
  @Provide() dialogVisible: Boolean = false;
  @Provide() dialogTit: String = "新增";
  @Provide() formData: any = {};
  @Provide() zjKey: any = 0;
  @Provide() parentId: String = '';
  getTableData(keyw: any) {
    let that = this,
      param = Object.assign({}, that.searchData, that.PAGE);
    (this as any).$axios
      .post(`/legendInfo/getLegendInfoList`, param)
      .then((res: any) => {
        that.tableData = res.pageData;
        // if (keyw == "add" || keyw == "del") {
        //   this.getSigns();
        // }
      });
  }
  searchFun() {
    this.PAGE = { page: 1, size: 10 };
    this.getTableData(null);
  }
  resetFun() {
    this.PAGE = { page: 1, size: 10 };
    this.searchData.legendName = "";
    this.getTableData(null);
  }
  addFun(key : String,row:any) {
    if(key === 'two'){
      this.formData.parentId = row.id;
      this.formData.plegendCode = row.legendCode;
    }
    this.dialogTit = "新增";
    this.zjKey++;
    this.dialogVisible = true;
  }
  editFun(row: any) {
    this.dialogTit = "编辑";
    this.formData = row;
    this.zjKey++;
    this.dialogVisible = true;
  }
  delFun(row: any) {
    let that = this as any;
    METHOD.deleteFun(
      this,
      `/legendInfo/delLegendInfoById/${row.id}`,
      function() {
        that.getTableData("del");
      }
    );
  }
  handleSizeChange(val: any) {
    this.PAGE.size = val;
    this.getTableData(null);
  }
  handleCurrentChange(val: any) {
    this.PAGE.page = val;
    this.getTableData(null);
  }
  closeDialog() {
    //关闭窗口
    this.dialogVisible = false;
    this.formData = {};
  }
  created() {
    this.getTableData(null);
  }
}
</script>
