<template>
  <div class="system-organize">
    <!-- <div class="search">
      <div class="inp-item">
        <div class="i-name">字典名称：</div>
        <div class="i-content">
          <el-input v-model="params.name" clearable placeholder="请输入字典名称" />
        </div>
      </div>

      <div class="inp-item">
        <div class="i-name">字典标签:</div>
        <div class="i-content">
          <el-input v-model="params.type" class="x-inp" placeholder="请输入..." />
        </div>
      </div>

      <div class="inp-item">
        <div class="i-name">状态:</div>
        <div class="i-content">
          <el-input v-model="params.status" class="x-inp" placeholder="请输入..." />
        </div>
      </div>

      <div class="btns">
        <el-button type="primary" @clcik="getList">搜索</el-button>
        <el-button @click="goRest">重置</el-button>
      </div>
    </div> -->

    <div class="ctrls-btns mt-15px">
      <el-button @click="openForm('create')" type="primary">新增</el-button>
      <el-button @click="btnBack()">返回</el-button>
    </div>

    <el-table
      ref="tableRef"
      :data="listData"
      :row-class-name="
        ({ rowIndex }) => {
          return rowIndex % 2 === 0 ? 'stripe-row' : ''
        }
      "
      @selection-change="selectChange"
      class="list def"
      v-loading="loading"
      row-key="id"
    >
      <el-table-column label="字典编码" align="center" prop="id" />
      <el-table-column label="字典标签" align="center" prop="label" />
      <el-table-column label="字典键值" align="center" prop="value" />
      <el-table-column label="字典排序" align="center" prop="sort" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <span type="primary" v-if="scope.row.status == 0">开启</span>
          <span type="info" v-if="scope.row.status == 1">关闭</span>
        </template>
      </el-table-column>
      <el-table-column label="颜色类型" align="center" prop="colorType" />
      <el-table-column label="CSS Class" align="center" prop="cssClass" />
      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="180"
        :formatter="dateFormatter"
      />

      <el-table-column label="操作" align="center">
        <template #default="scope">
          <div class="tb-btns">
            <div @click="openForm('update', scope.row.id)" class="def-btn">编辑</div>
            <div class="dv-line"></div>
            <div @click="handleDelete(scope.row.id)" class="def-btn">删除</div>
          </div>
        </template>
      </el-table-column>

      <template #empty>
        <div class="empty">
          <span v-if="!loading">没有数据</span>
        </div>
      </template>
    </el-table>

    <!-- 分页 -->
    <div class="pages">
      <div class="sum">共 {{ params.total }} 条</div>

      <el-select
        class="page-select"
        @change="getList()"
        v-model="params.pageSize"
        :teleported="false"
      >
        <el-option
          v-for="item in [10, 20, 30, 50]"
          :key="item"
          :label="item + '条/页'"
          :value="item"
        />
      </el-select>

      <el-pagination
        v-if="params.total / params.pageSize > 1"
        :page-size="params.pageSize"
        layout="prev, pager, next"
        :total="params.total"
        class="car-pages"
        @change="getList"
      />
    </div>
    <!-- 表单弹窗：添加/修改 -->
    <DictTypeForm ref="formRef" @success="getList" />
  </div>
</template>
<script lang="ts" setup>
import OrgModel from './components/OrgModel.vue'
import { getEquipmentBasics, equipmentDelete } from '@/api/system'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as DictDataApi from '@/api/system/dict/dict.data'
import * as DictTypeApi from '@/api/system/dict/dict.type'
import DictTypeForm from './DictDataForm.vue'
import { dateFormatter } from '@/utils/formatTime'
import { useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const params = reactive({
  total: 0,
  pageNo: 1,
  pageSize: 10,
  label: '',
  status: undefined,
  dictType: route.query.type
})

const selectMap = ref<any>({})
const listData = ref([])

const loading = ref(false)

const modelRef = ref(null)
const tableRef = ref(null)

const selectedIds = computed(() => {
  return Object.values(selectMap.value).flat()
})

// 条件重置
const goRest = () => {
  getList()
}
const btnBack = () => {
  router.push({
    path: 'dict',
  })
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  console.log(id)
  ElMessageBox.confirm(`确认要删除这条字典吗？`, '注意', {
    confirmButtonText: '确定',
      cancelButtonClass: 'cancelButtonClass',
    
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // 删除
      DictDataApi.deleteDictData(id).then((res) => {
        if (res) {
          getList()
        }
      })
    })
    .catch()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
  formRef.value.params.dictType = route.query.type
}

const formRefDetails = ref()
const openDetails = (type: any) => {
  formRefDetails.value.open(type)
}
// 新增、查看编辑
const goCtrls = (type, row?) => {
  if (type === 'delete') {
    ElMessageBox.confirm(`确认要删除设施【${row.facilityName}】吗？`, '注意', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        // 删除
        removeOrgainzations({ ids: [row.id] }).then((res) => {
          if (res) {
            getTunnelBasicsAct()
          }
        })
      })
      .catch()
  } else {
    modelRef.value.diaOpen(type, row)
  }
}

// 获取列表数据
const getList = async (x?: number) => {
  if (!route.query.type) {
    router.push({
      path: 'dict'
    })
  }
  params.pageNo = x || 1

  loading.value = true
  const res = await DictDataApi.getDictDataPage(params)
  listData.value = res.list
  params.total = res.total

  loading.value = false
}

// 筛选变化
const selectChange = () => {
  selectMap.value[params.page]
}
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.system-organize {
  margin: 0 45px;
}

.search {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  color: white;
  background: rgba(69, 116, 182, 0.2);
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  padding: 18px 48px;
  border-radius: 8px;

  .inp-item {
    display: flex;
    align-items: center;
    margin-right: 60px;
    .i-name {
      font-size: 14px;
      width: 72px;
    }
    .i-content {
      display: flex;
      align-items: center;
      color: white;
      & > span {
        white-space: nowrap;
      }
      :deep(.el-select) {
        width: 300px;
      }
    }
  }
  .x-inp {
    width: 300px;
  }
  .num-inp {
    width: 126px;
    margin: 0 5px;
  }
  .btns {
    display: flex;
    align-items: center;
  }
}

.empty {
  color: rgba(240, 245, 255, 0.45);
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ctrls-btns {
  display: flex;
  align-items: center;
  .tips {
    margin-left: 20px;
    color: white;
    font-size: 14px;
    span {
      color: #ffa71a;
    }
  }
}

.tb-btns {
  margin: 10px 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  .def-btn {
    cursor: pointer;
    color: #00aeff;
    font-weight: 600;
    margin: 0 8px;
  }

  .dv-line {
    height: 12px;
    width: 1px;
    background: rgba(240, 245, 255, 0.45);
    margin: 0 8px;
  }
}

.list {
  margin-top: 20px;
  :deep(.el-checkbox__inner) {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
  }
}

.pages {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: white;
  .sum {
    margin-right: 20px;
  }
  .page-select {
    width: 128px;
    margin-right: 20px;
    :deep(.el-select__wrapper) {
      border-radius: 0;
      background: rgba(32, 58, 96, 0.6);
      border: 1px solid rgba(32, 58, 96, 0.6);
      box-shadow: 0 0 0;

      .el-select__placeholder {
        color: white;
      }
    }
  }
}
</style>

<style lang="scss">
.cancelButtonClass {
  background: #ffffff;
  color: #606266;
  border: 1px solid #909399;
  // border-color: #606266;
}
.system-organize {
  .el-input__inner,
  .el-select__input {
    color: #ffffff;
  }
  .el-input__wrapper {
    border-radius: 0;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  }
  .el-select {
    display: block;
    .el-select__selected-item {
      color: #ffffff;
    }
  }
  .el-form-item__label {
    color: #ffffff;
    width: 120px;
  }
  .el-form-item__content {
    width: 400px;
  }

  .el-radio {
    color: white;
    height: 26px;
    .el-radio__inner {
      background: transparent;
      border-color: rgba($color: #ffffff, $alpha: 0.3);
      &::after {
        background-color: #007dfa;
      }
    }
  }
}
.el-pagination {
  &.car-pages {
    --el-pagination-bg-color: rgba(32, 58, 96, 0.6);
    --el-pagination-button-color: white;
    --el-pagination-button-disabled-bg-color: rgba(32, 58, 96, 0.4);
    --el-pagination-button-disabled-color: rgba(255, 255, 255, 0.5);
    .number {
      margin: 0 4px;
      &.is-active {
        background: #007dfa;
        color: white;
      }
    }
  }
}
</style>
