<template lang="">
     <el-main>
                <text style="font-weight: bolder">{{ title }}</text>
                <div class="el-main_div" style="margin-top: 10px">
                  <div>
                    <el-input
                      v-model="search_input_t"
                      style="width: 200px"
                      placeholder="请搜索巡检规则名称"
                      :prefix-icon="Search"
                    />
                    <el-button style="margin-left: 10px" :icon="Edit" />
                  </div>
                  <div style="margin-right: 10px">
                    <el-button plain>批量导入/导出</el-button>
                    <el-button plain :icon="Plus" type="primary"  @click="drawer2 = true">新建</el-button>
                  </div>
                </div>
                <div class="el-main_table">
                  <el-table
                    ref="multipleTableRef"
                    :data="tableData"
                    style="width: 100%"

                  >
                    <el-table-column
                      type="selection"
                      :selectable="selectable"
                      width="30"
                    />


                    <el-table-column label="巡检规则名称" property="name" width="300" />


<el-table-column
  property="ruleCategoryNames"
  label="规则内容"
  width="400"
/>
<el-table-column property="ruleItems" label="适用范围" />

<el-table-column label="操作">
<template #default="scope">
  详情
  <el-icon><MoreFilled /></el-icon>
</template>
</el-table-column>
</el-table>
</div>
<div style="display: flex; justify-content: flex-end">
    <myPagination v-model:currentPage ="currentPage" v-model:total="total" v-model:pageSize="pageSize" :pageSizes="[10, 20, 30, 50]" @change="getList" />
</div>

<el-drawer v-model="drawer2" direction="rtl" :before-close="handleClose" size="60%">
<template #header>
 <div>
   <h4 style="margin-left: 20px">巡检规则</h4>
   <el-divider />
 </div>
</template>
<template #default>
  <span class="shuxian"></span><span class="account_info">基本信息</span>
    <el-form :model="dataForm" label-width="auto"  label-position="top">
      <el-row>
        <el-col :span="12">

          <el-form-item label="巡检规则名称">
            <el-input  style="max-width: 95%" size="large"  v-model="dataForm.name"  />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="适用范围">
            <el-input style="max-width: 95%" size="large" v-model="dataForm.ruleCategories" />
          </el-form-item>
        </el-col>
      </el-row>

      <span class="shuxian"></span><span class="account_info">巡检项管理</span>
      <tree-transfer
        ref="transferRef"
        v-model:fromData="fromData"
        v-model:toData="toData"
        :titleList="['','已选']"
        :defaultProps="{
          id: 'id', // 节点id
          parentId: 'parentId', // 父节点id
          label: 'label',
          children: 'children',
          disabled: 'disabled',
           }"
        rootPid="0"
        @add="handleAdd"
        @remove="handleremove"
      />
    </el-form>
</template>
<template #footer>
  <div style="text-align: left">
    <el-button type="primary" @click="confirmClick">确定</el-button>
    <el-button @click="cancelClick">取消</el-button>
  </div>
</template>
</el-drawer>
</el-main>



</template>
<script setup>

import myPagination from '@/components/Paginations.vue';
import { ref, onMounted } from 'vue'
import { Search, Plus, Edit } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { getInspectionItemList, getCategoryList } from '@/api/inspectionItem'
import {color} from "echarts/lib/export.js";
import TreeTransfer from 'tree-transfer-vue3'; // 引入

//分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(20)


const title = ref('巡检项管理')
const title_number = ref(86)
const size = ref('large')
const drawer2 = ref(false)
const direction = ref('巡检规则')
//树形选择匡
const title2 = ref(['','已选'])
const fromData=ref([{
  id: '1',
  parentId: 0,
  label: '一级 1',
  children: [
    {
      id: '1-1',
      parentId: '1',
      label: '二级 1-1',
      children: [],
    },
    {
      id: '1-2',
      parentId: '1',
      label: '二级 1-2',
      children: [
        {
          id: '1-2-1',
          parentId: '1-2',
          disabled: true,
          children: [],
          label: '二级 1-2-1',
        },
        {
          id: '1-2-2',
          parentId: '1-2',
          children: [],
          label: '二级 1-2-2',
        },
        {
          id: '1-2-3',
          parentId: '1-2',
          children: [],
          label: '二级 1-2-3',
        },
      ],
    },
  ],
},
  {
    id: '2',
    parentId: 0,
    label: '一级 2',
    children: [
      {
        id: '2-1',
        parentId: '2',
        label: '二级 2-1',
      },
      {
        id: '2-2',
        parentId: '2',
        label: '二级 2-2',
      },
    ],
  },
  {
    id: '4',
    parentId: 0,
    label: '一级 4',
    children: [
      {
        id: '4-1',
        parentId: '4',
        label: '二级 4-1',
      },
      {
        id: '4-2',
        parentId: '4',
        label: '二级 4-2',
      },
    ],
  },])
const toData=ref([])
const defaultProps = {
  children: 'children',
  label: 'label',
}
const tableData = ref([
  {
    id: 1,
    date: '2016-05-03',
    name: '办公家具巡检规则',
    ruleCategoryNames: '外观检查、性能检查、安全检查',
    ruleItems: '办公椅、办公座',
  },
  {
    id: 2,
    date: '2016-05-03',
    name: '电子产品巡检规则',
    ruleCategoryNames: '外观检查、性能检查、安全检查',
    ruleItems: '电冰箱、打印机',
  },
])
const dataForm=ref({
  name:"",
  ruleCategories:"",
})
const search_input = ref('')
const search_input_t = ref('')
const categoryList = ref([])

onMounted(() => {
  getList()
  getCategoryList2()
})


const handleAdd = (_fromData, _toData, { checkedKeys, checkedNodes, harfKeys, harfNodes }) => {
  console.log('handleAdd', checkedKeys, checkedNodes, harfKeys, harfNodes);
};
const handleremove = (_fromData, _toData, { checkedKeys, checkedNodes, harfKeys, harfNodes }) => {
  console.log('handleremove', checkedKeys, checkedNodes, harfKeys, harfNodes);
};


function cancelClick() {
  drawer2.value = false
}

const handleClose = () => {
  ElMessageBox.confirm('确定要关闭吗？',{
    cancelButtonText:"取消",
    confirmButtonText:"确定"
  })
    .then(() => {
      drawer2.value = false
    })
    .catch(() => {
      // catch error
    })
}

function confirmClick() {
  ElMessageBox.confirm(`确定要提交吗 ?`,{
    cancelButtonText:"取消",
    confirmButtonText:"确定"
  })
    .then(() => {
      drawer2.value = false
    })
    .catch(() => {
      // catch error
    })
}

function getList() {
  console.log(111)
  console.log(pageSize.value)
  console.log(currentPage.value)
  getInspectionItemList()
    .then(res => {
      if (res.data.code == 200) {
        tableData.push(res.data.data)
        console.log('123123s')
        console.log(tableData)
      }
    })
    .catch(err => {
      console.log(err)
    })
}

function getCategoryList2() {
  getCategoryList()
    .then(res => {
      if (res.data.code == 200) {
        categoryList.push(res.data.data)
        console.log('123123s')
        console.log(categoryList)
      }
    })
    .catch(err => {
      console.log(err)
    })
}

</script>
<style lang="scss" scoped >
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.common-layout {
  .el-aside {
    height: 100%;
    .el-aside_div {
      display: flex;
      flex-direction: column;
      .el-button_one {
        width: 240px;
        margin-top: 10px;
        height: 30px;
        color: black;
        line-height: 40px;
        margin-bottom: 10px;
      }
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
      }
    }
  }
  .el-main {
    padding: 0;
    height: 700px;
    overflow: hidden;
    .el-main_div {
      display: flex;
      justify-content: space-between;
    }
    .el-main_table {
      height: 600px;
    }
  }
  :deep(.el-drawer__close) {
    display: flex;
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
    border: none;
  }
}
.shuxian {
  width: 2px;
  height: 16px;
  background: #5287ff;
  border-radius: 0px 0px 0px 0px;
  display: inline-block;
}
.account_info {
  width: 200px;
  height: 16px;
  font-size: 18px;
  color: #1f2329;
  margin-left: 12px;
  margin-bottom: 30px;
  display: inline-block;
  font-weight: bolder;
}

</style>
