<template>
  <div class="apiManagement publicContainer">
    <div class="dataTitle">API管理</div>
    <el-divider />
    <el-container class="dataContent">
      <el-aside width="250px" class="leftContent">
        <div class="leftTitle">接口目录</div>
        <el-row>
          <el-input v-model="searchTree" style="width: 100%" placeholder="请输入关键字">
            <template #suffix>
              <el-icon class="el-input__icon searchBtn"><search /></el-icon>
            </template>
          </el-input>
        </el-row>

        <el-row class="treeBox">
          <el-tree style="width: 100%" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"> </el-tree>
        </el-row>
      </el-aside>
      <el-main>
        <el-row class="dataTop">
          <el-col :span="16" class="dataLeft">
            <div class="dataBox">
              API名称
              <el-input v-model="qlCode" style="width: 200px" placeholder="请输入API名称">
                <template #suffix>
                  <el-icon class="el-input__icon searchBtn"><search /></el-icon>
                </template>
              </el-input>
            </div>
            <div>
              状态
              <el-select v-model="addForm.p1" style="width: 200px">
                <el-option v-for="item in stateType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="7">
            <el-button type="primary" icon="search">查询</el-button>
            <el-button type="primary" icon="Refresh" plain>重置</el-button>
            <el-button type="primary" icon="Plus" @click="addInfo">新增</el-button>
            <el-button type="primary" plain>批量删除</el-button>
          </el-col>
        </el-row>

        <!-- 表单 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          v-setHeight="{ bottom: 60 }"
          v-loading="loading"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="index" label="序号" width="50" /> -->
          <el-table-column fixed type="selection" width="30" />
          <!-- <el-table-column prop="code" label="应用ID" /> -->
          <el-table-column prop="name" label="目录" />
          <el-table-column prop="p1" label="API ID">
            <!-- <template #default="{ row }">
             <div>{{ stationType.find(item => item.value == row.p1)?.label || row.p1 }}</div>
           </template> -->
          </el-table-column>
          <el-table-column prop="p2" label="API名称"> </el-table-column>
          <el-table-column prop="p3" label="请求方式">
            <!-- <template #default="{ row }">
             <div>{{ stateType.find(item => item.value == row.p3)?.label || row.p3 }}</div>
           </template> -->
          </el-table-column>
          <el-table-column prop="p4" label="标签"> </el-table-column>
          <el-table-column prop="p5" label="存放路径"> </el-table-column>
          <el-table-column prop="p6" label="状态"> </el-table-column>
          <el-table-column prop="p7" label="创建人"> </el-table-column>
          <el-table-column prop="p8" label="创建时间" min-width="100"> </el-table-column>
          <el-table-column prop="p9" label="标签"> </el-table-column>

          <el-table-column label="操作" min-width="200">
            <template #default="{ row }">
              <div style="display: flex; justify-content: space-evenly">
                <el-button link type="primary" @click="addInfo(row)">编辑</el-button>
                <el-button link type="primary">授权</el-button>
                <el-button link type="primary">配置</el-button>
                <el-button link type="primary">上线</el-button>
                <el-button link type="danger" @click="deleteInfo(row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          class="pagingPosition"
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </el-main>
    </el-container>

    <!-- 新增 及 修改 -->
    <el-dialog v-model="dialogConfig.open" :show-close="true" class="dia" destroy-on-close width="800px">
      <template #header>
        <div class="diaHeader">
          {{ dialogConfig.title }}
        </div>
      </template>
      <el-form :model="addForm" :rules="rules" label-width="auto" ref="ruleAddFormRef">
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="桥梁编号" prop="title">
              <el-input v-model="addForm.code" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-row>
          <el-col :span="24">
            <el-form-item label="标签名称" prop="title">
              <el-input v-model="addForm.name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="标签描述" prop="">
              <el-input
                v-model="addForm.p1"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
                placeholder="请输入"
                maxlength="300"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="diaCheck">
          <el-button type="primary" @click="submitForm(ruleAddFormRef)">确 定</el-button>
          <el-button class="cancel" @click="close">取 消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="apiManagement">
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
import { onMounted, reactive, toRefs } from 'vue';

const { proxy } = getCurrentInstance();

const stationType = ref([
  {
    id: 1,
    value: 1,
    label: '气浮机',
  },
  {
    id: 2,
    value: 2,
    label: '污泥脱水机',
  },
  {
    id: 3,
    value: 3,
    label: '离心机',
  },
  {
    id: 4,
    value: 4,
    label: '曝气机',
  },
  {
    id: 5,
    value: 5,
    label: '微滤机',
  },
]);
const stateType = ref([
  {
    id: 1,
    value: 1,
    label: '待上线',
  },
  {
    id: 2,
    value: 2,
    label: '已上线',
  },
  {
    id: 3,
    value: 3,
    label: '已下线',
  },
]);
const stateType1 = ref([
  {
    id: 1,
    value: 1,
    label: '燃气',
  },
  {
    id: 2,
    value: 2,
    label: '桥梁',
  },
  {
    id: 3,
    value: 3,
    label: '供水',
  },
  {
    id: 4,
    value: 4,
    label: '排水',
  },
]);

const ruleAddFormRef = ref();
const total = ref(0);
const loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const qlCode = ref('');
const tableData = ref([]);
const multipleSelection = ref([]); // 多选数据
const dataList = reactive({
  dialogConfig: {
    title: '',
    open: false,
  },
  addForm: {
    id: undefined,
    code: '',
    name: '',
    p1: '',
    p2: '',
    p3: '',
    p4: '',
    p5: '',
    p6: '',
    p7: '',
    p8: '',
    p9: '',
    info: '',
    handlePicList: [],
  },
  rules: {
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  },
});

const { dialogConfig, addForm, rules } = toRefs(dataList);

const searchTree = ref('');
const treeData = [
  {
    label: '排水',
    children: [
      {
        label: 'PS001',
        children: [
          // {
          //   label: 'Level three 1-1-1',
          // },
        ],
      },
      {
        label: 'PS002',
        children: [
          // {
          //   label: 'Level three 1-1-1',
          // },
        ],
      },
    ],
  },
  {
    label: '桥梁',
    children: [
      {
        label: 'QL001',
        children: [
          // {
          //   label: 'Level three 2-1-1',
          // },
        ],
      },
      {
        label: 'QL002',
        children: [
          // {
          //   label: 'Level three 2-2-1'1,
          // },
        ],
      },
    ],
  },
];

const defaultProps = {
  children: 'children',
  label: 'label',
};

const handleNodeClick = data => {
  console.log(data);
};
// 新增和编辑
const addInfo = row => {
  dialogConfig.value.open = true;
  if (row.id) {
    addForm.value = row;
    dialogConfig.value.title = '编辑API管理';
  } else {
    addForm.value = {
      id: undefined,
      code: '',
      name: '',
      p1: '',
      p2: '',
      p3: '',
      p4: '',
      p5: '',
      p6: '',
      p7: '',
      p8: '',
      p9: '',
      info: '',
      handlePicList: [],
    };
    dialogConfig.value.title = '新增API管理';
  }
};
// 新增和编辑 提交
const submitForm = formRef => {
  if (!formRef) return;
  formRef.validate(valid => {
    if (valid) {
      console.log('---------', addForm.value);
      // addInfo(addForm.value).then(response => {
      //   proxy.$modal.msgSuccess('新增成功');
      //   getInfoList();
      // });
      dialogConfig.value.open = false;
    }
  });
};

const close = () => {
  dialogConfig.value.open = false;
};

// table多选
const handleSelectionChange = val => {
  console.log('🚀 ~ handleSelectionChange ~ val:', val);
  multipleSelection.value = val;
};

// 新增和编辑

// 删除
const deleteInfo = () => {};

// 获取表单数据
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    tableData.value = [
      {
        id: '001',
        code: '123456789',
        date: '2022-06-01 12:00:00',
        name: '桥梁名称',
        p1: '1',
        p2: '001',
        p3: '002',
        p4: 1,
        p5: 1,
        p6: '12',
        p7: '34',
        p8: '2022-06-01 12:00:00',
        p9: '',
        info: '',
        handlePicList: [],
      },
      {
        id: '002',
        code: '123456789',
        date: '2022-06-01 12:00:00',
        name: '桥梁名称',
        p1: '1',
        p2: '20',
        p3: '2022',
        p4: 1,
        p5: 1,
        p6: '202',
        p7: '34',
        p8: '2022-06-01 12:00:00',
        p9: '',
        info: '',
        handlePicList: [],
      },
    ];
    total.value = tableData.value.length;
    loading.value = false;
  }, 500);
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.apiManagement {
  position: relative;
  width: 100%;
  height: 100%;
  //   border: 1px solid red;
  // background: #fff;
  .dataTitle {
    position: relative;
    padding-left: 10px;
    &::before {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      content: '';
      width: 5px;
      height: 14px;
      background: #2561ef;
      border-radius: 3px;
    }
  }
  .dataContent {
    height: calc(100% - 35px);
    .dataTop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      .dataLeft {
        display: flex;
        .dataBox {
          margin-right: 20px;
        }
      }
    }
    .leftContent {
      border-right: 1px solid #ccc;
      background-color: #fff;
      padding: 5px 10px;
      margin: 0;
      .leftTitle {
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 10px;
        margin-bottom: 10px;
      }
      .treeBox {
        // border: 1px solid red;
        margin-top: 10px;
        height: calc(100% - 90px);
        overflow-y: auto;
      }
    }
  }
}
.el-divider {
  margin: 10px 0 15px 0;
}
.searchBtn {
  cursor: pointer;
  &:hover {
    color: #2561ef;
  }
}
.pagingPosition {
  position: absolute !important;
  right: 0px;
  bottom: 0px;
}

// .dia{
//   height: 800px !important;
// }
</style>