<template>
  <div class="resi-container">
    <el-card class="resi-card-table">
      <div class="mod-sys__menu">
        <div class="resi-row-btn">
          <el-button class=""
                    type="success"
                    @click="addShow()">新增</el-button>
        </div>
        <el-table v-loading="dataListLoading"
                  :data="dataList"
                  :default-expand-all="false"
                  row-key="categoryId"
                  :cell-style="cellStyle"
                  border
                  style="width: 100%;" class="resi-table">
          <el-table-column prop="categoryName"
                          label="分类名称"
                          header-align="center"
                          min-width="150"></el-table-column>
          <el-table-column prop="stateShow"
                          label="状态"
                          header-align="center"
                          min-width="150"></el-table-column>

          <!-- <el-table-column prop="sort"
                            :label="$t('menu.sort')"
                            header-align="center"
                            align="center"></el-table-column> -->

          <el-table-column label="操作"
                          fixed="right"
                          header-align="center"
                          align="left"
                          width="350">
            <template slot-scope="scope">

              <el-button type="text"
                        size="small"
                         class="btn-color-look"
                        @click="disableCategory(scope.row)">{{ scope.row.btnShow}}</el-button>
              <el-button type="text"
                        size="small"
                        class="btn-color-edit"
                        @click="editShow(scope.row)">修改</el-button>
              <el-button type="text"
                        size="small"
                        class="btn-color-del"
                        @click="deleteCategory(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </el-card>
    

    <elegant-edit ref="ref_edit"
                   @editDiaOK="editDiaOK">

    </elegant-edit>

  </div>
</template>

<script>

import { requestPost } from '@/js/dai/request'
import elegantEdit from './elegantEdit.vue'
export default {

  data () {
    return {
      customerId: '', // 客户id，父组件传
      customerName: '', // 客户名称，父组件传

      tableParams: {
        customerId: ''
      },
      search: '',
      dataList: [],

      dataListLoading: false

    }
  },

  computed: {
    tables () {
      const search = this.search
      if (search) {
        console.log('this.dataList', this.dataList)
        return this.dataList.filter(dataNews => {
          return Object.keys(dataNews).some(key => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      console.log('this.dataList', this.dataList)
      return this.dataList
    }
  },
  components: {
    elegantEdit
  },
  created() {
    const { user } = this.$store.state
    console.log('user----', user)
    this.initData(user.customerId, user.customerName)
  },
  methods: {
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      // 状态列字体颜色
      if (row.state === 'enable' && columnIndex === 1) {
        return 'color: #EA1B29'
      } else if (row.state === 'disable' && columnIndex === 1) {
        return 'color: #0CB618'
      } else {
        return 'color: #1a1a1b'
      }
    },
    initData (customerId, customerName) {
      this.customerId = customerId
      this.customerName = customerName

      this.loadData()
    },

    // 加载列表数据
    async loadData () {
      this.dataListLoading = true
      // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/customercategorylist'
      const url = '/resi/partymember/stylecategorydict/list'

      this.tableParams.customerId = this.customerId

      const { data, code, msg } = await requestPost(url, this.tableParams)
      this.dataListLoading = false
      if (code === 0) {
        this.dataList = data
        this.dataList.forEach(element => {
          element.state = element.beDisabled ? 'enable' : 'disable'
          element.btnShow = element.beDisabled ? '启用' : '禁用'
          element.stateShow = element.beDisabled ? '禁用' : '启用'
          element.level = 'l1'

          // if (element.children.length > 0) {
          //   element.children.forEach(child => {
          //     child.state = child.isDisable === 'enable' ? 'disable' : 'enable'
          //     child.btnShow = child.isDisable === 'enable' ? '禁用' : '启用'
          //     child.stateShow = child.isDisable === 'enable' ? '启用' : '禁用'
          //     child.level = 'l2'
          //     child.parentCategoryId = element.categoryId
          //   })
          // }
        })
      } else {
        // this.$message.error(msg )
      }
    },

    // 开启/启用
    disableCategory (row) {
      this.$confirm('确认' + row.btnShow + '当前分类?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = '/resi/partymember/stylecategorydict/updatestatus'
        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/isdisablecategory'
        const param = {
          customerId: this.customerId,
          categoryId: row.categoryId,
          beDisabled: row.state !== 'enable'
        }
        window.app.ajax.post(url, param,
          (data, rspMsg) => {
            this.$message.success('操作成功')
            this.loadData()
          },
          (rspMsg, data) => {
            this.$message.error(rspMsg)
          })
      }).catch(() => {

      })
    },
    // 删除
    deleteCategory (row) {
      this.$confirm('确认删除当前分类?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = '/resi/partymember/stylecategorydict/delete'
        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/delcategory'
        const param = {
          customerId: this.customerId,
          categoryId: row.categoryId
        }
        window.app.ajax.post(url, param,
          (data, rspMsg) => {
            this.$message.success('操作成功')
            this.loadData()
          },
          (rspMsg, data) => {
            this.$message.error(rspMsg)
          })
      }).catch(() => {

      })
    },

    // 新增  customerId,parentCategoryId,categoryId,type,level,num
    addShow () {
      const sort = this.dataList.length + 1
      this.$refs['ref_edit'].initAdd(this.customerId, '', 'l1', sort)
    },
    // 新增二级分类  customerId,parentCategoryId,categoryId,type,level，num
    showAddLevel2 (row) {
      const sort = row.children.length + 1
      this.$refs['ref_edit'].initAdd(this.customerId, row.categoryId, 'l2', sort)
    },
    // 编辑 customerId,parentCategoryId,dateform
    editShow (row) {
      this.$refs['ref_edit'].initEdit(this.customerId, row.categoryId, row)
    },

    // 取消
    diaCancel () {
      this.$emit('cancleBack')
    },

    editDiaOK () {
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>

.resi-container .resi-card-table {
  ::v-deep .el-table {
    th  {
      color: #fff;
      background-color: rgba(33, 149, 254, 1);
    }
    
    .cell {
      
      span:nth-of-type(3) {
        display: inline-block;
        width: 90%;
        word-break: break-all;
      }
    }
  }
}
.resi-row-btn {
  display: flex;
  margin-bottom: 13px;
  ::v-deep .el-button {
    // margin-left: 10px;
    border: 0;
  }
  ::v-deep .el-select {
    margin-right: 10px;
  }
  .el-button--success {
    background: rgba(34, 193, 195, 1);
  }
}
.resi-table {
  ::v-deep .el-button--text {
    text-decoration: underline;
  }
  ::v-deep .btn-color-del {
    margin-left: 10px;
    color: rgba(213, 16, 16, 1);
  }
  ::v-deep .btn-color-edit {
    color: rgba(0, 167, 169, 1);
  }
}
</style>
