<config>
{
    "name": "repoList",
    "title": "数字对象仓库列表"
}
</config>

<template>
  <div class="all">
    <div class="title">
      <el-icon><home-filled /></el-icon> 数字对象仓库管理/数字对象仓库列表
    </div>
    <div class="do">
      <div class="but">
        <!-- 增加按钮 -->
        <div class="add" @click="dialogFormVisible = true">
          <el-icon class="icon"><plus /></el-icon
          ><el-button
            type="text"
            style="color: #101010 !important"
            @click="dialogFormVisible = true"
            >增加</el-button
          >
        </div>
        <!-- 点击增加按钮弹出层 -->
        <el-dialog
          v-model="dialogFormVisible"
          title="新增数字对象仓库"
          width="90%"
          custom-class="dialog"
        >
          <div class="in_dialog">
            <div>
              <!-- 数字对象仓库ID输入 -->
              <div class="id_input">
                <el-form :model="form" class="form">
                  <el-form-item
                    label="数字对象仓库ID"
                    :label-width="formLabelWidth"
                  >
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <!-- "尝试连接"按钮 -->
                <el-button
                  type="primary"
                  :icon="Link"
                  style="
                    height: 50px !important;
                    margin-left: 15px;
                    padding: 0 10px;
                    border-color: #dcdfe6;
                    background-color: #fff;
                    color: black;
                  "
                  >尝试连接</el-button
                >
                <el-icon class="right"
                  ><circle-check
                    style="
                      width: 25px !important;
                      height: 25px !important;
                      color: green;
                    "
                /></el-icon>
              </div>
              <!-- 名称 -->
              <div class="name">
                <el-form :model="form" class="form_a">
                  <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <!-- 所有者 -->
                <el-form :model="form" class="form_b">
                  <el-form-item label="所有者" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <!-- 是否索引 -->
                <el-form :model="form" class="form_b">
                  <el-form-item label="是否索引" :label-width="formLabelWidth">
                    <el-select v-model="value" clearable placeholder="Select">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                    <!-- <el-input v-model="form.name" autocomplete="off"></el-input> -->
                  </el-form-item>
                </el-form>
              </div>
              <!-- 已添加的管理者 -->
              <el-form :model="form" class="form_c">
                <el-form-item
                  label="已添加的管理者"
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <!-- 说明 -->
              <el-form :model="form" class="form_d">
                <el-form-item label="说明" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <!-- 确定按钮 -->
            <el-button
              type="info"
              size="medium"
              plain
              class="confirm"
              @click="dialogFormVisible = false"
              >确定</el-button
            >
          </div>
        </el-dialog>
        <!-- 删除按钮 -->
        <div class="reduce">
          <el-icon class="icon"><minus /></el-icon>删除选中
        </div>
      </div>
      <!-- 搜索框 -->
      <div
        style="width: 375px; height: 32px; border-color: pink !important"
        size="mini"
        class="sousuo"
      >
        <el-input
          v-model="input3"
          placeholder="可按关键字模糊搜索"
          class="input-with-select"
          size="mini"
          :prefix-icon="Search"
        >
          <template #append>
            <el-select
              v-model="select"
              placeholder="高级搜索"
              style="width: 48px"
            >
              <el-option label="Restaurant" value="1"></el-option>
              <el-option label="Order No." value="2"></el-option>
              <el-option label="Tel" value="3"></el-option>
            </el-select>
          </template>
        </el-input>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      :height="400"
      size="small"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="ID" width="120">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column property="name" label="名称" width="120" />
      <el-table-column
        property="address"
        label="所有者"
        show-overflow-tooltip
      />
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:currentPage="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, jumper, prev, pager, next, sizes"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { reactive, ref, toRefs } from 'vue'
import {
  Search,
  Plus,
  Minus,
  HomeFilled,
  Link,
  CircleCheck,
} from '@element-plus/icons-vue'
const input3 = ref('')
const select = ref('')
const tableData = reactive([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

// 点击增加按钮弹出层

const formProps = reactive({
  gridData: [
    {
      date: '2016-05-02',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
      date: '2016-05-04',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
      date: '2016-05-01',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
      date: '2016-05-03',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
  ],
  dialogTableVisible: false,
  dialogFormVisible: false,
  form: {
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  },
  formLabelWidth: '120px',
})

const {
  gridData,
  dialogTableVisible,
  dialogFormVisible,
  form,
  formLabelWidth,
} = toRefs(formProps)

// const multipleSelection = ref([])
const multipleTable = ref(null)

// function handleSelectionChange(val: any) {
//       multipleSelection = val
//     },

// 分页

const currentPage4 = ref(4)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

//el-select
const options = reactive([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
])

const value = ref('')
</script>
<style scope lang="scss">
.all {
  overflow: hidden;
  .title {
    margin: 25px 0px 34px 10px;
    font-size: 14px;
    color: rgba(40, 43, 45, 100);
    font-size: 12px;
    font-family: 'SourceHanSansSC-regular';
  }
  .do {
    padding: 21px 31px 55px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    box-shadow: 0px -20px 30px -30px inset #ccc;
    .but {
      display: flex;
      justify-content: space-between;
      .add,
      .reduce {
        // color: #101010;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 126px;
        height: 32px;
        border: 2px solid#DDDADA;
        .icon {
          margin-right: 8px;
          font-weight: 900;
          color: #333;
        }
      }
      .add {
        margin-right: 44px;
      }
      .dialog {
        height: 90%;
        background-color: #f2f2f2;
        padding: 30px;
        .in_dialog {
          width: 100%;
          height: 100%;
          margin: 0 auto;
          padding: 80px 163px 172px 106px;
          background-color: white;
          position: relative;
          .confirm {
            position: absolute;
            bottom: 10px;
            right: 10px;
          }
          .id_input,
          .name {
            display: flex;
            justify-content: space-between;
            .form {
              color: #101010;
            }
            .right {
              height: 50px;
            }
          }
        }
      }
    }
  }
  // .shadow_line {
  //   height: 1px;
  //   background-color: #ccc;
  //   box-shadow: 5px 8px 5px #ccc;
  // }
  .demo-pagination-block {
    margin-top: 297px;
  }
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-input__inner {
  height: 32px !important;
  line-height: 32px !important;
}
.ant-layout .child-layout {
  background: #fff;
}
.el-table::before {
  height: 0;
}
.el-dialog__body {
  height: 100%;
}
.el-dialog__header {
  padding: 0;
}
// 修改element plus中的input的样式
.form input.el-input__inner {
  width: 681px;
  height: 50px !important;
}
.form_a input.el-input__inner,
.form_b input.el-input__inner {
  width: 248px;
  height: 50px !important;
}
.form_c input.el-input__inner {
  height: 50px !important;
}
.form_d input.el-input__inner {
  height: 200px !important;
}

.el-form-item__label {
  width: 150px !important;
  display: flex;
  justify-content: right;
  align-items: center;
  color: rgba(16, 16, 16, 100);
  font-size: 16px;
  font-family: 'SourceHanSansSC-regular';
}
.el-dialog__title {
  color: rgba(16, 16, 16, 100);
  font-size: 28px;
  text-align: left;
  font-family: SourceHanSansSC-bold;
}
.is-leaf div.cell {
  color: #101010;
  font-family: 'PingFangSC-regular';
  font-size: 14px;
}
.name form.form_b,
.form_a {
  width: 200px !important;
}
// .el-input__inner {
//   padding: 0 !important;
// }
// .all .do .but .add .icon,
// .all .do .but .reduce .icon {
//   color: #101010;
// }
</style>
