<template>

    <div class="page-container main-view">
        <el-row :gutter="0" class="page-query-box">
            <DifinCollapse
                :show="dataContainer.showSearch"
                :showBt="true"
                @onClick="dataContainer.showSearch = !dataContainer.showSearch"
            >
                <el-col :span="24" :xs="24">
                    <el-form
                        :model="dataContainer.form"
                        :inline="true"
                        label-width="110px"
                    >
                        <el-row :gutter="0">
                            <el-col class="anchor-point-target" :span="6" :xs="6">
                                <el-form-item label="名称" prop="name">
                                    <el-input
                                        v-model="dataContainer.form.name"
                                        placeholder="请输入"
                                        clearable
                                        @clear="handleQuery"
                                        @keyup.enter="handleQuery"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="18" :xs="18">
                                <el-form-item label=" ">
                                    <el-button type="primary" @click="handleQuery">
                                        <SvgIcon
                                            :style="'width:15px;height:15px;margin-right:5px;'"
                                            name="svg:search-bt.svg"
                                        ></SvgIcon>
                                        查询
                                    </el-button>
                                    <el-button @click="resetQuery">
                                        <SvgIcon
                                            :style="'width:15px;height:15px;margin-right:5px;'"
                                            name="svg:redo.svg"
                                        ></SvgIcon>
                                        重置
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>
            </DifinCollapse>
        </el-row>
   
      <div class="table-box content-container page-content-box">
        <div class="top-container">
          <el-button type="primary" @click="handleAdd()">新增用户组</el-button>
        </div> 
        <div class="table-container">
          <el-table :data="tableData" stripe style="width: 100%" border>
            <el-table-column prop="id" label="ID"  />
            <el-table-column prop="name" label="名称"  />
            <el-table-column label="二维码" >
              <template #default = "scope">
                  <img :src="scope.row.qrcode" alt="" style="width: 50px; height: 50px;">
              </template>
            </el-table-column>
            <el-table-column prop="productStatus" label="产品状态"  />
            <el-table-column prop="updataTime" label="修改时间"  />
            <el-table-column label="操作">
                  <template #default="scope">
                      <el-button
                          :text="true"
                          @click="handleDetails([scope.row])"
                      >
                          禁用
                      </el-button>
                      <el-button
                          :text="true"
                          @click="
                              handleEdit(scope.row, {
                                  isShow: false,
                                  afterTitle: ' - 编辑',
                              })
                          "
                      >
                          编辑
                      </el-button>
                  </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <EditDataDialog ref="EditDataDialogRef"></EditDataDialog>
    </div>
   
  </template>
  
  <script setup>
  import {
      defineComponent,
      onBeforeUnmount,
      ref,
      reactive,
      getCurrentInstance,
      onActivated,
  } from 'vue';
  import { useRouter } from 'vue-router';
  import { messageSuccess, confirm } from '@/action/messagePrompt.js';
  import EditDataDialog from './components/editDataDialog.vue';

  
  
   const EditDataDialogRef = ref(null); //组件实例


   const dataContainer = reactive({
            loading: false,
            showSearch: true,
            form: {
                name:"",
            },
            params: {
                //基础参数
                pageNum: 1,
                pageSize: 10,
            },
            config: {
                total: 38,
            },
            list: [], //当前展示的数据列表
            currentRows: [], //当前多选的数据列表
            optionList: [
                { value: true, label: '正常', elTagType: 'danger' },
                { value: false, label: '禁用', elTagType: 'primary' },
            ],
        });
  
  let tableData = reactive([
    {
      id: '管理',
      name: 'Tom',
      qrcode:"https://s11.ax1x.com/2023/12/15/pihx4js.jpg",
      productStatus:"正常",
      updataTime:"	2024/11/14 14:54:33"
    },
    {
      id: '管理',
      name: 'Tom',
      qrcode:"https://s11.ax1x.com/2023/12/15/pihx4js.jpg",
      productStatus:"正常",
      updataTime:"	2024/11/14 14:54:33"
    },
    {
      id: '管理',
      name: 'Tom',
      qrcode:"https://s11.ax1x.com/2023/12/15/pihx4js.jpg",
      productStatus:"正常",
      updataTime:"	2024/11/14 14:54:33"
    },
    {
      id: '管理',
      name: 'Tom',
      qrcode:"https://s11.ax1x.com/2023/12/15/pihx4js.jpg",
      productStatus:"正常",
      updataTime:"	2024/11/14 14:54:33"
    },
  ])
  
          //新增用户组按钮
          function handleAdd  (){
          if (!EditDataDialogRef.value) return;
              EditDataDialogRef.value
              .initData(
                  true,
                  {},
                  {
                      afterTitle: ' - 添加',
                  },
              )
              .then(() => {})
              .catch(() => {});
          }
  
          /** 禁用操作 */
          function handleDetails(row, querys) {
              confirm('确定要禁用吗？',
                  {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  })
              .then(()=>{
                  messageSuccess('禁用成功');
              })
              .catch(()=>{})
             
          }
          /** 编辑按钮操作 */
          function handleEdit(row, querys) {
              if (!EditDataDialogRef.value) return;
              EditDataDialogRef.value
                  .initData(
                      true,
                      {
                          ...row,
                      },
                      {
                          ...querys,
                      },
                  )
                  .then(() => {})
                  .catch(() => {});
          }
          /** 删除 */
          function handleDelete(rows) {
              confirm('确认删除该数据？',
                  {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  })
                  .then(() => {
                      // dataContainer.loading = true;
                      // deleteSalesLeadApi(rows.map(item=>item.id).join(',')).then(() => {
                      //     getDataList();
                      // }).catch(()=>{
                      //     return;
                      // }).finally(()=>{
                      //     dataContainer.loading = false;
                      // });
                      messageSuccess('删除成功');
                  })
                  .catch(() => {});
          }
          function handleQuery() {
      dataContainer.params.pageNum = 1;
    }
    
      /** 重置按钮操作 */
      function resetQuery() {
      dataContainer.form = {};
      handleQuery();
  }
  
  
  </script>
  
  <style scoped lang='scss'>
  .main-view {
      display: flex;
      flex-direction: column;
      > .page-query-box {
          margin: 0 0 10px 0 !important;
          padding: 10px 10px 0px 10px;
          :deep(.el-form-item) {
              margin-bottom: 10px !important;
          }
          :deep(.el-form-item--default) {
              width: 100%;
              margin-right: 0;
          }
      }
      > .content-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 10px 10px;
          box-sizing: border-box;
          background: #fff;
          > .top-container {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 0px 0 10px 0;
          }
          > .table-container {
              flex: 1 1 auto;
              height: 0;
              overflow: auto;
          }
      }
      .pagination-container {
          display: flex;
          justify-content: flex-end;
          padding: 0;
          margin: 10px 0 0 0;
      }
  }
  </style>