
<script lang="ts">
export default {
  name: 'region' // 现状分析
};
</script>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElForm, ElMessageBox, ElMessage } from 'element-plus';
import { downloadFile } from '@/utils/index';
import Page from '@/components/Pagination/page.vue';

import {
  queryRegionList,
  addRegion,
  updateRegion,
  delRegion,
  exportExcel
} from '@/api/regionmodule/region';
const queryInfo :any = ref({
  name:'',
  current:1,
  size:20,
  total:0
})
//定义表格数据
const tableData: any = ref([]);
function gteTabledata() {
  menuname.value = menuname.value.replace(/\s+/g, "");
  let params = {
    name: menuname.value,
    status:queryInfo.value.status,
    current: queryInfo.value.current,
    size:queryInfo.value.size
  }
  loading.value = true
  queryRegionList(params).then((res) => {
    tableData.value = res.data.records
    queryInfo.value.total = res.data.total
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
const regionInfoRef = ref();
const loading = ref(false);
//定义搜索框文本
const menuname = ref('')
//点击搜索
function search() {
  queryInfo.current = 1
  gteTabledata()
}
function resetdata(){
  menuname.value = ""
  queryInfo.value  = {
    name:'',
    current:1,
    size:20,
    total:0
  }
  gteTabledata()
}
//目录添加
const title = ref('')
const regionInfo: any = ref({
  code: '',
  name: '',
  parent_id: '00',
  type: '2',
  education_bureau: '',
  status: '01'
})
const dialogVisible = ref(false)
//关闭目录
function handleClose() {
  dialogVisible.value = false;
  btnVisible.value = false;
  menuVisible.value = false;
  if (regionInfoRef.value != null) regionInfoRef.value.resetFields();
}
//表格规则定义
const rules = ref({
  name: [
    { required: true, message: '请输入区域名称', trigger: 'blur' }
  ]
})
//添加子目录
function addchilder(row: any,type:any,name:any) {
  regiontitle.value = name
  isSwitch.value = false
  parentName.value = row.name
  regionInfo.value = {
    code: '',
    name: '',
    parent_id: row.id,
    type: type,
    education_bureau: '',
    status: '01'
  }
  dialogVisible.value = true
}
//新增目录-确认按钮
function expertsubmit() {
  if (regionInfo.value.name == '') {
    ElMessage({
      message: '请填写目录名称',
      type: 'error',
    })
    return false

  }
  if(isSwitch.value == true){
    return
  }
  isSwitch.value = true
  if (regionInfo.value.id) {
    let params = {
      id:regionInfo.value.id,
      code: regionInfo.value.code,
      name: regionInfo.value.name,
      parentId: regionInfo.value.parent_id,
      type: regionInfo.value.type,
      educationBureau: regionInfo.value.education_bureau
    }
    updateRegion(params).then(() => {
      gteTabledata()
      dialogVisible.value = false
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
    }).catch(()=>{
      isSwitch.value = false
    })
  } else {
    let params = {
      code: regionInfo.value.code,
      name: regionInfo.value.name,
      parentId: regionInfo.value.parent_id,
      type: regionInfo.value.type,
      educationBureau: regionInfo.value.education_bureau,
      status: '01'
    }
    addRegion(params).then(() => {
      gteTabledata()
      dialogVisible.value = false
      ElMessage({
        message: '新建成功',
        type: 'success',
      })
    }).catch(()=>{
      isSwitch.value = false
    })
  }
}
const menuVisible = ref(false)
const regiontitle = ref('')
const btnVisible = ref(false)

//修改信息
function handleEdit(row: any) {
  isSwitch.value = false
  regionInfo.value = JSON.parse(JSON.stringify(row))
  regiontitle.value = '修改信息'
  dialogVisible.value = true
}
//新增信息
function addClick() {
  isSwitch.value = false
  regiontitle.value = '新增省/直辖市'
  regionInfo.value = {
    code: '',
    name: '',
    parent_id: '00',
    type: '2',
    education_bureau: '',
    status: '01'
    }
    dialogVisible.value = true
}
function exportOut(){
  menuname.value = menuname.value.replace(/\s+/g, "");
  let params = {
    name:menuname.value
  };
  exportExcel(params).then((response: any) => {
    downloadFile(response, '行政区域', 'xlsx')
  });
}
//删除
function handleDelete(row: any) {
  ElMessageBox.confirm('确定删除此区域及此区域下的所有菜单吗？', '删除提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const params = {
      id: row.id
    }
    delRegion(params).then(() => {
      gteTabledata()
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
    })

  })
}
const parentName = ref("") // 上级区域名称
const isSwitch = ref(false) // 提交开关
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}

//状态改变
function switchChange(row: any) {
  const elMessage = ref('')
  if (row.status == '00') {
    elMessage.value = "确定停用该行政区域吗？"
  } else if (row.status == '01') {
    elMessage.value = "确定启用该行政区域吗？"
  }
  ElMessageBox.confirm(elMessage.value, "提示信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let params = {
      status: row.status,
      id: row.id,
    };
    updateRegion(params).then((res: any) => {
      if (res.code == 0) {
        gteTabledata()
        ElMessage({
          type: "success",
          message: "改变成功",
        })
      }
    }).catch(() => {
      if(row.status == "01"){
        row.status = "00"
      }else{
        row.status = "01"
      }
    })
  }).catch(() => {
    if(row.status == "01"){
      row.status = "00"
    }else{
      row.status = "01"
    }
  });
}
onMounted(() => {
  gteTabledata()
})
</script>
<template>
  <div class="collectiontemplate-box">
    <section class="detail-box">
      <div  style="display: flex;display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between;  margin-bottom:10px">
        <div style="display: flex;display: -webkit-flex;">
          <el-input v-model="menuname" placeholder="请输入名称查询" clearable style="width:200px;margin-right:10px"
            @keyup.enter="search()" />
          <el-button type="primary" @click="search()">搜索</el-button>
          <el-button @click="resetdata">重置</el-button>
        </div>
        <div>
         
          <!-- <el-button type="primary" @click="addClick">
          <img src="@/assets/MenuIcon/jscz_xz.png" alt="" style="margin-right: 4px;">新增省/直辖市</el-button> -->
          <el-button type="primary" @click="exportOut"><img src="@/assets/MenuIcon/u455.png" alt=""  style="margin-right: 5px;">导出</el-button>
        </div>
      </div>
      <div class="draggable">
        <el-table v-loading="loading" ref="multipleTable" :data="tableData" default-expand-all tooltip-effect="dark"
          style="width: 100%;height: calc(100vh - 240px)" row-key="id" border
          :header-cell-style="{ background: 'rgb(250 250 250)', color: '#383838', height: '50px' }">
          <el-table-column label="区域代码" width="150" prop="name" show-overflow-tooltip>
            <template #default="scope">
              <div>{{ scope.row.code }}</div>
            </template>
          </el-table-column>
          <el-table-column label="区域名称" prop="name" min-width="100" show-overflow-tooltip />
          <!-- <el-table-column label="上级ID" prop="parent_id" width="100" show-overflow-tooltip /> -->
          <el-table-column label="区域类型" prop="type" width="130" >
            <template #default="scope">
              <span v-if="scope.row.type == '1'">国家</span>
              <span v-if="scope.row.type == '2'">省/直辖市</span>
              <span v-if="scope.row.type == '3'">市/自治州</span>
              <span v-if="scope.row.type == '4'">区/县/县级市</span>
            </template>
          </el-table-column>
          <el-table-column label="教育局名称" prop="education_bureau" min-width="100" show-overflow-tooltip />
          <el-table-column label="地区地址" prop="custom1" min-width="100" show-overflow-tooltip />
          <el-table-column prop="creator" label="创建人" width="130"></el-table-column>
          <el-table-column prop="create_time" label="创建日期" width="180" align="center">
            <template #default="scope">
              {{ dateFormat(scope.row.create_time) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" fixed="right" align="center"
            style="display: flex; display: -webkit-flex;">
            <template #default="scope">
              <el-switch v-model="scope.row.status" active-value="01" inactive-value="00"
                    @change="switchChange(scope.row)" style="margin-right: 4px"></el-switch>
                <span v-if="scope.row.status == '00'" class="effective">启用</span>
                <span v-else style="color: #d7d7d7">停用</span>
              <!-- <span
                style="display: flex;display: -webkit-flex; justify-content: space-around;-webkit-justify-content: space-around; ">
                <img src="@/assets/MenuIcon/lbcz_xg.png" alt="" title="修改"
                  @click="handleEdit(scope.row)" style="cursor: pointer;">
                <img src="@/assets/MenuIcon/lbcz_zml.png" alt="" v-if="scope.row.type == '1'"
                  title="添加省/直辖市" @click="addchilder(scope.row,'2','新增省/直辖市')" style="cursor: pointer;">
                <img src="@/assets/tableicon/u225.png" alt="" v-else-if="scope.row.type == '2'"
                  title="添加市/自治州" @click="addchilder(scope.row,'3','新增市/自治州')" style="cursor: pointer;">
                <img src="@/assets/tableicon/u226.png" alt="" v-else-if="scope.row.type == '3'"
                  title="添加区/县/县级市" @click="addchilder(scope.row,'4','新增区/县/县级市')" style="cursor: pointer;">
                <img src="@/assets/MenuIcon/lbcz_zml1.png" alt="" v-else
                  style="cursor: pointer;">
                <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" v-if="scope.row.status == '09'"
                  title="删除">
                <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" v-else title="删除"
                  @click="handleDelete(scope.row)" style="cursor: pointer; ">
              </span> -->
            </template>
          </el-table-column>
        </el-table>
        <Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
            @pagination="gteTabledata" />
      </div>
      <!-- </div> -->
    </section>
    <!-- 新增目录 -->
    <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :title="regiontitle " draggable
      append-to-body width="620px" class="dialogClass">
      <el-form ref="regionInfoRef" :model="regionInfo" :rules="rules" label-width="90px">

        <el-form-item label="上级区域" prop="code" v-if="regionInfo.type != '1' && regionInfo.type != '2' && regiontitle!='修改信息'">
          <el-input v-model="parentName" placeholder=""  style="width: 100%;" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="区域代码" prop="code">
          <el-input v-model="regionInfo.code" placeholder=""  style="width: 100%;"></el-input>
        </el-form-item>
        <el-form-item label="区域名称" prop="name">
          <el-input v-model="regionInfo.name" placeholder="" style="width: 100%;"></el-input>
        </el-form-item>
        <el-form-item label="教育局名称" prop="type">
          <el-input v-model="regionInfo.education_bureau" placeholder="" style="width: 100%;"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer"
        style="display: flex; display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="expertsubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.detail-box {
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 3px;
  padding: 5px 20px 0px;
  box-sizing: border-box;
}

:deep(.el-tooltip) {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  position: relative;
}

.delicon {
  width: 20px;
  height: 25px;
  position: relative;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  // margin-left: 20px;

}

.delicon:hover {
  // background-color: red;

  .delIcon {
    display: block !important;
    color: #fff;
    cursor: pointer;
  }

}


:deep(.el-table__expand-icon) {
  margin-left: 15px;
  margin-right: -10px !important;
}
</style>