<template>
  <div class="service_management_list">
      <div class="apass_breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="`/message_new`">分类管理</el-breadcrumb-item>
          <el-breadcrumb-item>服务分类</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container_box">
        <div class="search_box">
          <span>分类名称：</span>
          <el-input
            v-model="filter.search"
            prefix-icon="el-icon-search"
            placeholder="请输入关键字"
            style="width:240px;"
          ></el-input>
          <span style="margin-left: 24px">状态：</span>
          <el-select
            v-model="filter.state"
            placeholder="请选择"
          >
            <el-option
              v-for="(e, idx) in stateTypes"
              :key="idx"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
          <div class="searchBtn" @click="searchAction">查询</div>
          <div class="searchBtn resBtn" @click="resChange">重置</div>
        </div>
        <div class="btn_box">
          <div @click="addClass">
            新建分类
          </div>
        </div>
        <div class="list_box">
          <table-um
            :headers="listHeader"
            :datas="listData"
            :stripe="true"
            @changeState="changeRowState"
            @edit="editRow"
            @del="delRow"
          ></table-um>
          <list-pagination
            class="pagination_box"
            :total="listTotal"
            :page-sizes="[10,20,50]"
            :page-size="filter.size"
            :current-page="filter.page"
            @size-change="changePageSize"
            @current-change="changeCurrentPage"
          ></list-pagination>
        </div>
      </div>
    <el-dialog
      title="提示"
      :visible.sync="delDialogFlag"
      width="400px"
    >
      <span class="form_box">
        删除后无法恢复，请确认是否删除
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogFlag = false">取 消</el-button>
        <el-button type="primary" @click="confirmDel">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableUm from "@/components/table/table-um";
import ListPagination from "@/components/comments-pagination";
import helper from "@/services/helper";

export default {
  components: {
    tableUm,
    ListPagination,
  },
  data: () => ({
    helper: helper,
    stateTypes: [
      {
        label: "禁用",
        value: 0
      },
      {
        label: "启用",
        value: 1
      },
    ],
    filter: {
      search: "",
      size: 10,
      page: 1,
      state: ""
    },
    listTotal: 0,
    listHeader: [
      {
        label: "分类类别",
        prop: "classType",
        align: "center",
        width: 240,
      },
      {
        label: "分类名称",
        prop: "className",
        align: "center",
        width: 240,
      },
      {
        label: "上级分类名称",
        prop: "pClassName",
        align: "center",
        width: 240,
      },
      {
        label: "描述",
        prop: "desc",
        align: "center",
      },
      {
        label: "状态",
        prop: "stateName",
        align: "center",
        width: 120,
      },
      {
        label: "更新时间",
        prop: "updateTime",
        width: 220,
        align: "center"
      },
      {
        label: "操作",
        type: "Button",
        align: "center",
        width: 240,
        btnList: [
          {
            label: "编辑",
            type: 'edit',
            disflag: true,
            disabledRule(item) {
              return item.state != 1;
            },
            line: '|'
          },
          
          {
            label: "启用",
            type: 'changeState',
            select: true,
            disflag: true,
            disabledRule(item) {
              return item.state != 1;
            },
            line: '|'
          },
          {
            label: "禁用",
            type: 'changeState',
            select: true,
            disflag: true,
            disabledRule(item) {
              return item.state == 1;
            },
            line: '|'
          },
          {
            label: "删除",
            type: 'del',
            disflag: true,
            disabledRule(item) {
              return item.state != 1 && item.canDelete == 1
            },
          },
        ],
      },
    ],
    listData: [],
    delDialogFlag: false,
    delRowId: null
  }),
  computed: {},
  
  created() {
    this.getList()
  },
  methods: {
    changePageSize(val) {
      this.filter.page = 1
      this.filter.size = val
      this.getList()
    }, // 改变每页条数
    changeCurrentPage(val) {
      this.filter.page = val
      this.getList()
    }, // 换页
    getList() {
      this.$api.productType.getClassTypeList({...this.filter}).then(res => {
        if (res.data.success == 1) {
          console.log(res.data.data)
          this.listData = res.data.data.list || []
          this.listData.forEach(e => {
            e.updateTime = helper.dateStringTransform(e.updateTime)
            e.pClassName = e.pClassName == '' ? '-' : e.pClassName
          })
          this.listTotal = res.data.data.total
        }else {
          this.$message.error(res.data.errMsg)
        }
      }).catch(err => {
        console.log(err)
      })
      // 全部分类
    }, // 获取列表
    searchAction() {
      this.filter.page = 1,
      this.getList()
    }, // 搜索
    resChange() {
      let size = this.filter.size
      this.filter = {
        page: 1,
        size: size,
        search: "",
        state: "",
      }
      this.getList()
    }, // 重置搜索
    addClass() {
      this.$router.push('/productType/classList/add')
    }, // 新增分类
    changeRowState(row) {
      let params = {
        id: row.id,
        state: row.state == 1 ? 0 : 1
      }
      this.$api.productType.changeClassState(params).then(res => {
        if (res.data.success == 1) {
          this.$message.success("状态更新成功")
          this.resChange()
        }else {
          this.$message.error(res.data.errMsg)
        }
      }).catch(err => {
        console.log(err)
      })
    }, // 启用/禁用分类
    editRow(row) {
      if (row.state == 1) {
        return
      }
      this.$router.push(`/productType/classList/edit/${row.id}`)
    }, // 编辑分类
    delRow(row) {   
      if (row.canDelete == 0) {
        return
      }else {
        if (row.state == 1) {
          return
        }
      }
      this.delDialogFlag = true
      this.delRowId = row.id
    }, // 删除分类
    confirmDel() {
      this.$api.productType.deleteClass(this.delRowId).then(res => {
        if (res.data.success == 1) {
          this.$message.success("删除成功")
          this.delDialogFlag = false
          this.resChange()
        }else {
          this.$message.error(res.data.errMsg)
        }
      }).catch(err => {
        console.log(err)
      })
    }, // 确认删除
  },
};
</script>

<style scoped>

.apaas_button {
  position: relative;
}
.apaas_button > .el-button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
}
</style>

<style lang="less" scoped>
.service_management_list {
  height: 100%;
  min-width: 1200px;
  padding: 0 20px;
  .breadcrumb_box {
    >.el-breadcrumb {
      padding: 15px 0;
      .el-breadcrumb__inner {
        font-size: 14px;
        font-weight: bold;
        color: #898d9e;
        line-height: 23px;
      }
      .el-breadcrumb__item:last-child .el-breadcrumb__inner {
        color: #242c43;
        font-weight: normal;
      }
    }
  }
  .container_box {
    width: 100%;
    height: calc(100% - 60px);
    background-color: #fff;
    border-radius: 6px;
    padding: 16px 20px 16px;
    .search_box {
      // margin-top: 20px;
      .searchBtn {
        display: inline-block;
        margin-left: 20px;
        width: 80px;
        background-color: #0f2683;
        color: #fff;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 4px;
        cursor: pointer;
      }
      .resBtn {
        background-color: #fff;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #0f2683;
      }
    }
    .btn_box {
      margin: 16px 0;
      display: flex;
      div {
        width: 100px;
        height: 40px;
        background-color: #0f2683;
        border-radius: 4px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        cursor: pointer;
        margin-right: 16px;
      }
    }
    .list_box {
      width: 100%;
      height: calc(100% - 111px);
      position: relative;
      .ces-table-page {
        height: calc(100% - 44px);
        overflow: hidden auto;

        &::-webkit-scrollbar {
          width: 16px;
          height: 1px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 8px;
          /* background: #dde4ff; */
          box-shadow: 8px 0 0 #a5adb7 inset;
          border: 4px solid rgba(0, 0, 0, 0);
        }

        &::-webkit-scrollbar-track {
          border-radius: 8px;
          /* background: #f4f4f4; */
          box-shadow: 8px 0 0 #f4f4f4 inset;
          border: 4px solid rgba(0, 0, 0, 0);
        }
      }
      .pagination_box {
        width: 100%;
        position: absolute;
        bottom: 0;
      }
    }
  }
  .form_box {
    display: block;
    padding: 0px 30px;
    .el-select {
      width: 100%;
    }
    .radio {
      text-align: left;
    }
  }
}
</style>
