<template>
  <div class="app-container">
    <el-form ref="queryRef" :model="queryParams" :inline="true">
      <el-form-item label="字典名称" prop="menuName">
        <el-input v-model="queryParams.menuName" placeholder="请输入字典名称" clearable style="width: 200px" @keyup.enter="" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <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="">搜索</el-button>
        <el-button icon="Refresh" @click="">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="showpop">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="Sort" @click="showhide">展开/折叠</el-button>
      </el-col>
    </el-row>

    <!--:row-style="{background: '#cde0f3'}"-->
    <el-table
      :data="menuList"
      style="width: 100%"
      row-key="id"
      :row-style="{background: '#cde0f3'}"
      :expand-row-keys="expandRowKeys"
    >
      <el-table-column type="expand" :show-overflow-tooltip="true">
        <template #default="props">
          <div style="margin-bottom: 20px;padding:20px;">
            <el-table
              size="small"
              :data="props.row.children"
              :header-cell-style="{'background': '#fff'}"
            >
              <el-table-column label="类型" prop="name" />
              <el-table-column label="类型值" prop="value" />
              <el-table-column label="排序" prop="paixu" />
              <el-table-column label="" align="center" width="210" class-name="small-padding fixed-width">
                <template #default="scope">
                  <el-button link type="primary" icon="Edit" @click="showtypepop">修改</el-button>
                  <el-button link type="danger" icon="Delete" @click="deletezid">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
      </template>
      </el-table-column>
      <el-table-column prop="name" label="字典名称" :show-overflow-tooltip="true" />
      <el-table-column prop="date" label="字典值" :show-overflow-tooltip="true" />
      <!-- <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-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Plus" @click="showtypepop">新增</el-button>
          <el-button link type="primary" icon="Edit" @click="">修改</el-button>
          <el-button link type="danger" icon="Delete" @click="">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--添加字典-->
    <el-dialog 
      v-model="zidpop" 
      title="添加字典" 
      width="500px" 
      append-to-body
      align-center
    >
      <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="dictType">
          <el-input v-model="zidform.dictCode" placeholder="请输入字典编码" />
        </el-form-item>
        <el-form-item label="字典值" prop="dictType">
          <el-input v-model="zidform.dictValue" placeholder="请输入字典值" />
        </el-form-item>
        <el-form-item label="显示排序" prop="orderNum">
            <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="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>


    <!--添加字典类型-->
    <el-dialog 
      v-model="zitypepop" 
      title="添加类型" 
      width="500px" 
      append-to-body
      align-center
    >
      <el-form ref="formRef" :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="描述">
          <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="submitForm">确 定</el-button>
          <el-button @click="canceltype">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { getdict } from '@/api/systemSet/dict'
  import { ref,reactive } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
   
  let queryParams = reactive({
    menuName:'',
    status:''
   })

   //字典
   let zidpop = ref(false)
   let zidform = reactive({
    pkId:'',
    dictName:'',	        //字典名称
    dictCode:'',	        //字典编码
    dictValue:'',	        //字典值
    sort:'',	            //排序
    typeId:'',	          //类型ID
    typeCode:''	
   })
   const rules = ref({
      dictName: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
      dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
    })

    function showpop(){
      zidpop.value = true
    }

    function cancel() {
      zidpop.value = false
    }

   //字典类型
   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" }],
    })
   function showtypepop() {
    zitypepop.value = true
   }
   function canceltype() {
    zitypepop.value = false
  }



  //删除
  function deletezid() {
    ElMessageBox.confirm(
    '确定删除',
    'Warning',
    {
      // confirmButtonText: '',
      // cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {})
  }

   let menuList = reactive([
    {
      id: 1,
      date: '2016-05-04',
      name: '用户类型',
      children: [
        {
          value: 'yh01',
          name: '普通用户',
          paixu:1
        },
        {
          value: 'yh02',
          name: '白金用户',
          paixu:2
        }
      ]
    },
    {
      id: 2,
      date: '2016-05-02',
      name: '电池类型',
      children:[
      {
          value: 'dc00',
          name: '锂电池',
          paixu:1
        },
        {
          value: '碳酸电池',
          name: 'HBCT',
          paixu:2
        }
      ]
    },
    {
      id: 3,
      date: '2016-05-04',
      name: '电池型号',
      children: [
        {
          value: 'dc00',
          name: 'AW00',
          paixu:1
        },
        {
          value: 'dc11',
          name: 'HBCT',
          paixu:2
        }
      ]
    }
  ])
  
  let expandRowKeys = reactive([1,2,3])
  let list = reactive([])
  //querylist()
  function querylist() {
    getdict().then(rps => {
      console.log(rps)
    })
  }

  

  //展开折叠
  function showhide() {
    if(expandRowKeys.length == 0){
      let arr = [1,2,3]
      arr.forEach(n => {
        expandRowKeys.push(n)
      })
      
    }else{
      expandRowKeys.splice(0)
    }
  }

  function submitForm() {}
  
</script>
