<template>
    <div>
    <div class="app-container" style="margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
      <el-form ref="querform" :model="queryParams" :inline="true">
        <el-form-item label="类型名称" prop="typeName">
          <el-input v-model="queryParams.typeName" placeholder="请输入类型名称" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="类型编码" prop="typeCode">
          <el-input v-model="queryParams.typeCode" placeholder="请输入类型编码" clearable style="width: 200px" />
        </el-form-item>
        <!-- <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="字典状态" clearable style="width: 200px">
            <el-option :key="1" label="正常" :value="11" />
            <el-option :key="2" label="关闭" :value="22" />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="Search" @click="querytype(1)">搜索</el-button>
          <el-button icon="Refresh" plain @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-container" style="margin-bottom: 20px;border-radius: 10px;">
      <el-button 
        type="primary" 
        plain 
        icon="Plus" 
        @click="showtypepop(1)"
      >新增</el-button>
      <el-table
        :data="dictlist"
        style="width: 100%;margin-top: 10px;"
        border
        stripe
        highlight-current-row
        row-key="id"
        max-height="600px"
      >
        <el-table-column prop="typeName" min-width="200" align="center" label="类型名称" :show-overflow-tooltip="true" />
        <el-table-column prop="typeCode" min-width="200" align="center" label="类型编码" :show-overflow-tooltip="true" />
        <el-table-column prop="mark" min-width="200" align="center" label="描述"   :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="280" class-name="small-padding fixed-width">
        <template #default="scope">
            <el-button link type="primary" icon="Document" @click="showzdv(scope.row)">查看</el-button>
            <el-button link type="primary" icon="Edit" @click="showtypepop(2,scope.row)">修改</el-button>
            <el-button link type="danger" icon="Delete" @click="deletezid(scope.row)">删除</el-button>
        </template>
        </el-table-column>
        <!-- <el-table-column label="创建时间" align="center" width="160" prop="createTime">
        <template #default="scope">
            <span>{{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </template>
        </el-table-column> -->
      </el-table>
      <div v-if="total > 10" style="display: flex;justify-content: right;padding-top: 20px;">
        <el-pagination
          v-model:current-page="queryParams.pageNo"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          size="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="querytype"
        />
      </div>
    </div>
      
      <el-drawer
        v-model="drawer"
        title="字典值"
        size="800"
        :before-close="handleClose"
      >
        <el-button 
          type="primary" 
          icon="Plus" 
          plain
          @click="showpop(1)">新增</el-button>
        <el-table
          style="margin-top: 20px;"
          :data="valist"
          border
          stripe
        >
          <el-table-column min-width="160" label="字典名称" align="center" prop="dictName" />
          <el-table-column min-width="160" label="字典编码" align="center" prop="dictCode" />
          <el-table-column min-width="160" label="字典值" align="center" prop="dictValue" />
          <el-table-column label="排序" align="center" prop="sort" />
          <el-table-column width="160" label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="showpop(2,scope.row)">修改</el-button>
              <el-button link type="danger" icon="Delete" @click="deldicval(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
      
      <!--:row-style="{background: '#cde0f3'}"-->
      
      <!--添加字典类型-->
      <el-dialog 
        v-model="zitypepop" 
        :title="dictypetit" 
        width="500px" 
        append-to-body
        align-center
        :close-on-click-modal="false"
      >
        <el-form ref="typeform" :model="zidtype" :rules="typerules" label-width="80px">
          <el-form-item label="类型名称" prop="typeName">
            <el-input v-model="zidtype.typeName" placeholder="请输入字典名称" />
          </el-form-item>
          <el-form-item label="类型编码" prop="typeCode">
            <el-input v-model="zidtype.typeCode" placeholder="请输入字典编码" />
          </el-form-item>
          <el-form-item label="描述" prop="mark">
            <el-input v-model="zidtype.mark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="addictype">确 定</el-button>
            <el-button @click="canceltype">取 消</el-button>
          </div>
        </template>
      </el-dialog>


      <!--添加字典值-->
      <el-dialog 
        v-model="zidpop" 
        :title="zhidval" 
        width="500px" 
        append-to-body
        align-center
        :close-on-click-modal="false"
      >
        <el-form ref="formRef" :model="zidform" :rules="rules" label-width="80px">
          <el-form-item label="字典名称" prop="dictName">
            <el-input v-model="zidform.dictName" placeholder="请输入字典名称" />
          </el-form-item>
          <el-form-item label="字典编码" prop="dictCode">
            <el-input v-model="zidform.dictCode" placeholder="请输入字典编码" />
          </el-form-item>
          <el-form-item label="字典值" prop="dictValue">
            <el-input v-model="zidform.dictValue" placeholder="请输入字典值" />
          </el-form-item>
          <el-form-item label="显示排序" prop="sort">
              <el-input-number v-model="zidform.sort" controls-position="right" :min="0" />
            </el-form-item>
          <!-- <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio v-for="dict in dicts.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <!-- <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item> -->
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="savedictval">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>

    </div>
  </template>
  
  <script lang="ts" setup>
    import { 
      getdicttype,
      getdict,
      adddicttype,
      updatetype,
      deltype,
      adddict,
      updatedict,
      dedictval
    } from '@/api/systemSet/dict'
    import { ref,reactive } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    
    //查询字典类型   
    let total = ref(0)          
    let queryParams = reactive({
      pageSize:20,	    //每页条数
      pageNo:1,	        //页数
      typeName:'',	    //类型名称
      typeCode:''	      //类型编码
     })

     let dictlist = ref<any>([])
     //查询
     function querytype(num?:number) {
      if(num){
        queryParams.pageNo = num
      }
      getdicttype(queryParams).then(rps => {
        dictlist.value = (rps.data as any).records
        total.value = (rps.data as any).total
      })
     }

     //重置
     let querform = ref()
     function resetQuery() {
      querform.value?.resetFields()
     }
  
     function handleSizeChange(val:number) {
        queryParams.pageSize = val
        querytype()
     }

     //字典类型
     let dictypetit = ref('添加字典类型')
     let zitypepop = ref(false)
     let zidtype = reactive({
        pkId:'',
        typeName:'',	    //类型名称
        typeCode:'',	    //类型编码
        mark:''	          //描述
     })
     const typerules = ref({
       typeName: [{ required: true, message: "请输入类型名称", trigger: "blur" }],
       typeCode: [{ required: true, message: "请输入类型编码", trigger: "blur" }],
      })
      
    const typeform = ref()
    const cztype = ref<Number>(1)
     function showtypepop(type:Number = 1,row?:any) {
      cztype.value = type
      if(type == 1){
        dictypetit.value = '添加字典类型'
      }else{
        dictypetit.value = '修改字典类型'
      }
      typeform.value?.resetFields()
      if(row){
        zidtype.pkId = row.pkId
        zidtype.typeName = row.typeName	    
        zidtype.typeCode = row.typeCode	    
        zidtype.mark = row.mark	            
      }else{
        zidtype.pkId = ''
        zidtype.typeName = ''	    
        zidtype.typeCode = ''	    
        zidtype.mark = ''	            
      }
      zitypepop.value = true
     }

     function canceltype() {
      zitypepop.value = false
    }
    

    function typecaoz() {
      if(cztype.value == 1){
        return adddicttype(zidtype)
      }
      return updatetype(zidtype)
    }

    //保存类型
    function addictype() {
      typeform.value?.validate((valid:Boolean) => {
        if (valid) {
          typecaoz().then(() => {
            ElMessage({
              type: 'success',
              message: cztype.value == 1?'添加成功':'修改成功'
            })
            setTimeout(() => {
              zitypepop.value = false
              resetQuery()
              querytype(1)
            },1000)
          })
        }
      })
    }

    //删除
    function deletezid(row:any) {
      ElMessageBox.confirm(
      `确定删除:${row.typeName}`,
      '温馨提示',
      {
        // confirmButtonText: '',
        // cancelButtonText: 'Cancel',
        type: 'warning',
      }).then(() => {
        deltype(row.pkId).then(() => {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          querytype(1)
        })
      })
      .catch(() => {})
    }

    //添加字典值
    let zidpop = ref(false)
    let valtype = ref<Number>(1)
    let zhidval = ref('')

     let zidform = reactive({
      pkId:'',
      typeId:'',	            //类型ID	
      typeCode:'',          //类型code
      dictName:'',	        //字典名称
      dictCode:'',	        //字典编码
      dictValue:'',	        //字典值
      sort:0	              //排序
     })
     const rules = ref({
        dictName: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
        dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
        dictValue:[{ required: true, message: "请输入字典值", trigger: "blur" }]
      })
      function showpop(type:Number,row?:any){
        valtype.value = type
        if(type == 1){
          zhidval.value = '添加字典值'
        }else{
          zhidval.value = '修改字典值'
        }
        if(row){
          zidform.pkId = row.pkId
          zidform.typeId = row.typeId	     
          zidform.typeCode = row.typeCode       	
          zidform.dictName = row.dictName	        
          zidform.dictCode = row.dictCode	        
          zidform.dictValue =	row.dictValue       
          zidform.sort = row.sort                 
        }else{
          zidform.pkId = ''
          zidform.typeId = typeId.value
          zidform.typeCode = typecode.value
          zidform.dictName = ''	        
          zidform.dictCode = ''	        
          zidform.dictValue =	''       
          zidform.sort = 0                
        }
        zidpop.value = true
      }

      //新增、修改
      let formRef = ref()
      function valcaozuo() {
        if(valtype.value == 1){
          return adddict(zidform) 
        }
        return updatedict(zidform)
      }
      function savedictval() {
        formRef.value?.validate((valid:Boolean) => {
        if (valid) {
          valcaozuo().then(() => {
            ElMessage({
              type: 'success',
              message: valtype.value == 1?'添加成功':'保存成功'
            })

            setTimeout(() => {
              zidpop.value = false

              getdict({
                typeId:typeId.value
              }).then(rps => {
                valist.value = rps.data as any
              })

            },1000)
          })
        }
      })
      }
  
      function cancel() {
        zidpop.value = false
      }

       //查询字典值
      let drawer = ref(false)
      let valist = ref<any[]>([]) 
      let typeId = ref('')
      let typecode = ref('')
      function showzdv(n:any) {
        typeId.value = n.pkId
        typecode.value = n.typecode
        valist.value.splice(0)        //??
        drawer.value = true
        getdict({
          typeId:typeId.value
        }).then(rps => {
           valist.value = rps.data as any
        })
      }

      //删除
      function deldicval(row:any) {
        ElMessageBox.confirm(
        `确定删除:${row.dictName}`,
        '温馨提示',
        {
          // confirmButtonText: '',
          // cancelButtonText: 'Cancel',
          type: 'warning',
        }).then(() => {
          dedictval(row.pkId).then(() => {
            ElMessage({
              type: 'success',
              message: '删除成功'
            })
            valist.value.splice(0)        //??
            getdict({
              typeId:typeId.value
            }).then(rps => {
              valist.value = rps.data as any
            })
          })
      })
      .catch(() => {})
        
    }

    function handleClose() {
      drawer.value = false
    }
   
    querytype()
    
  </script>
  