<script setup>
import { Message } from 'element-ui'
const str = ref('')
const bool = ref(false)
const radio = ref('1')
const radio1 = ref('北京')
const checkList = ref(['选中且禁用', '复选框 A'])
const options = ref([
  { value: '选项1', label: '黄金糕' },
  { value: '选项2', label: '双皮奶' },
  { value: '选项3', label: '蚵仔煎', disabled: true },
  { value: '选项4', label: '龙须面' },
  { value: '选项5', label: '北京烤鸭' }
])
const input3 = ref('')
const select = ref('')
const num = ref(0)
const value = ref('')
const textarea = ref('')
const values = ref([])
const value1 = ref('')
const year = ref('')
const currentPage4 = ref(1)
const data = ref([
  {
    id: 1,
    label: '一级 2',
    children: [
      {
        id: 3,
        label: '二级 2-1',
        children: [
          {
            id: 4,
            label: '三级 3-1-1'
          },
          {
            id: 5,
            label: '三级 3-1-2',
            disabled: true
          }
        ]
      },
      {
        id: 2,
        label: '二级 2-2',
        disabled: true,
        children: [
          {
            id: 6,
            label: '三级 3-2-1'
          },
          {
            id: 7,
            label: '三级 3-2-2',
            disabled: true
          }
        ]
      }
    ]
  }
])
const defaultProps = ref({
  children: 'children',
  label: 'label'
})


const handleChange = () => {}
const handleSizeChange = () => {}
const handleCurrentChange = () => {}
const handleNodeClick = (e) => {
  console.log(e)
}
const handleShowMsg = (e) => {
  console.log(e)
}

const visible = ref({ edit: true })
const handleToggle = () => {
  visible.value.edit = !visible.value.edit
}
onMounted(() => {
  // this.$message({
  //   duration: 0,
  //   type: 'success',
  //   message:
  //     '操作成功！操作成功！操作成功！操作成功！操作成功！操作成功！操作成功！操作成功！操作成功！操作成功！操作成功！',
  //   showClose: true
  // })
  // setTimeout(() => this.$message({ duration: 0, type: 'info', message: '提示', showClose: true }))
  // setTimeout(() =>
  //   this.$message({ duration: 0, type: 'warning', message: '告警', showClose: true })
  // )
  // setTimeout(() =>
  //   this.$message({ duration: 0, type: 'error', message: '错误', showClose: true })
  // )
  // this.$confirm('确认关闭？')
  //   .then(() => {})
  //   .catch(() => {})
})

// 文件上传
const fileList = ref([])
const progressBar = ref(0)
function handleFileChange(filetype, fileList) {
  // if (filetype.raw.type !== 'application/x-tar' && filetype.raw.type !== 'application/x-gzip') {
  //   self.$message.warning('只支持 .tar / .tar.gz 的压缩文件')
  //   fileList.pop()
  //   return false
  // }
  return true
}

// 不推荐使用
function handleFileRemove() {
  // debugger
}

// 获取上传百分比
function handelGetPercent(percentage) {
  progressBar.value = percentage
  console.log(percentage)
}

// 触发上传
const triggerUploadNum = ref(0)
const imgUpload = ref(null)
async function handleTriggerUpload() {
  // triggerUploadNum.value = Math.random()
  console.log(imgUpload.value)
  const fileList = await imgUpload.value.startUpload()
  console.log(fileList)
  debugger
}

// 获取上传成功的文件id，和fileList一一对应
function handleGetFileId(id) {
  console.log(id)
  // save
  Message.success('上传成功')
}

function handelGetSuccessList(list) {
  console.log(list)
  debugger
}
function handelGetErrorList(list) {
  console.log(list)
}
const fileImgList = ref([
  { name: 'img', url: 'http://10.10.8.5:30601/storage/files/1717384398342791170.png' },
  { name: 'img', url: 'http://10.10.8.5:30601/storage/files/1717384398342791170.png' },
  { name: 'img', url: 'http://10.10.8.5:30601/storage/files/1717384398342791170.png' },
])

const tableData = ref([])
setTimeout(() => {
  tableData.value = [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', empty:'空格', status: Math.random() }]
}, 100)
let status = true
function handleTableReload() {
  status = !status
  tableData.value = [
    { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', empty:'空格', status },
  ]
}
</script>
<template>
  <section>
    <!-- test -->
    <koala-upload
      ref="imgUpload"
      :file-list="fileImgList"
      :action="''"
      :on-change="handleFileChange"
      multiple
      accept=".png,.jpeg,.jpg,.bmp"
      list-type="picture-card"
      size="mini"
      scene="mirror"
      :auto-upload="false"
      :triggerUpload="triggerUploadNum"
      @getPercent="handelGetPercent"
      @getFileId="handleGetFileId"
      @getSuccessList="handelGetSuccessList"
      @getErrorList="handelGetErrorList"
    >
      <i class="el-icon-plus"></i>
    </koala-upload>
    <!-- <KoalaUpload
      :file-list="fileList"
      :action="''"
      :on-change="handleFileChange"
      :on-remove="handleFileRemove"
      accept1="application/x-gzip,application/x-tar"
      accept="jpg, PNG"
      multiple
      :limit="100"

      :auto-upload="false"
      :triggerUpload="triggerUploadNum"
      scene="mirror"
      @getFileId="handleGetFileId"
      @getPercent="handelGetPercent"
      @getSuccessList="handelGetSuccessList"
      @getErrorList="handelGetErrorList"
    >
      <el-button size="mini">点击上传</el-button>
      <el-progress style="width: 500px;" :percentage="progressBar" v-if="progressBar != 0"></el-progress>
    </KoalaUpload> -->
    <el-button size="mini" @click="handleTriggerUpload">上传</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column prop="date" label="日期" width="450px" sortable></el-table-column>
      <el-table-column prop="name" label="姓名" width="200px"></el-table-column>
      <el-table-column prop="address" label="地址1" v-overflowTooltip></el-table-column>
      <el-table-column prop="address" label="地址2" v-overflowTooltip></el-table-column>
      <el-table-column prop="empty" label="空"></el-table-column>
      <el-table-column prop="op" label="操作" width="220px" __fixed="right">
        <template #default="{ row }">
          <MoreBtnGroup>
            <el-button type="text" @click="handleTableReload">重载</el-button>
            <el-button type="text" v-if="true" @click="handleShowMsg">新增</el-button>
            <el-button type="text" v-if="true" @click="handleShowMsg">编辑</el-button>
            <el-button type="text" v-show="row.status" @click="handleShowMsg">删除</el-button>
            <el-button type="text" v-show="row.status" @click="handleShowMsg">查看</el-button>
            <el-button type="text" v-if="row.status" @click="handleShowMsg">权限</el-button>
            <!-- <el-button type="text" @click="handleShowMsg">自动标注/重新自动标注</el-button> -->
            <!-- <el-button type="text" @click="handleShowMsg">禁止</el-button> -->
            <!-- <template #button>
              <el-button type="text" class="ml-12px">...</el-button>
            </template> -->
          </MoreBtnGroup>
        </template>
      </el-table-column>
    </el-table>
    <Teleport to="#sub-header-center">
      <el-button type="primary">Teleport to #sub-header-center</el-button>
    </Teleport>
    <Teleport to="#sub-header-right">
      <el-button type="primary">Teleport to #sub-header-right</el-button>
    </Teleport>
    <br /><br />
    <!-- 表单 -->
    <el-form
      class="no-mb mb-12px"
      label-suffix=":"
      :inline="true"
      label-width="80px"
      size="mini"
    >
      <el-form-item label="主体类型" label-width="70px">
        <el-select
          clearable
          v-model="str"
          placeholder="请选择主体类型"
          style="width: 132px;"
        >
          <el-option value="" label="全部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主体阶段">
        <el-select
          clearable
          v-model="str"
          placeholder="请选择主体阶段"
          style="width: 132px;"
        >
          <el-option value="" label="全部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主体名称">
        <el-input
          placeholder="请输入主体名称"
          v-model.trim="str"
          clearable
          style="width: 132px;"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select
          clearable
          v-model="str"
          placeholder="请选择审核状态"
          style="width: 132px;"
        >
          <el-option value="" label="全部"></el-option>
          <el-option value="待审核" label="待审核"></el-option>
          <el-option value="审核通过" label="审核通过"></el-option>
          <el-option value="审核不通过" label="审核不通过"></el-option>
        </el-select>
      </el-form-item>
      <el-button type="default" >查询</el-button>
    </el-form>
    <el-form
      label-suffix=":"
      label-width="100px"
      size="small"
    >
      <el-form-item label="主体名称" class="is-error is-required">
        <el-input
          placeholder="请输入主体名称"
          v-model.trim="str"
          clearable
          style="width: 132px;"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select
          clearable
          v-model="str"
          placeholder="请选择审核状态"
          style="width: 132px;"
        >
          <el-option value="" label="全部"></el-option>
          <el-option value="待审核" label="待审核"></el-option>
          <el-option value="审核通过" label="审核通过"></el-option>
          <el-option value="审核不通过" label="审核不通过"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="长文本">
        <el-input
          type="textarea"
          :rows="2"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </el-form-item>
      <el-button type="default" >查询</el-button>
    </el-form>
    <el-input-number
      v-model="num"
      controls-position="right"
      :step="0.1"
      :max="100"
      :min="0"
    ></el-input-number>
    <el-input-number
      v-model="num"
      :step="0.1"
      :max="100"
      :min="0"
    ></el-input-number>
    <el-button type="primary">确定</el-button>
    <el-button type="primary" disabled>禁用</el-button>
    <el-button type="primary" :loading="true"></el-button>
    <el-button type="default">默认按钮样式</el-button>
    <el-button type="default" disabled>禁用</el-button>
    <el-radio v-model="radio" label="1" disabled>男</el-radio>
    <el-radio v-model="radio" label="2">女</el-radio>
    <el-radio-group v-model="radio1" size="small">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京" disabled></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
      <el-checkbox label="复选框 C"></el-checkbox>
      <el-checkbox label="禁用" disabled></el-checkbox>
      <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>
    <br /><br />
    <div class="__d-none">
      <el-select v-model="value" placeholder="请选择" disabled>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-tooltip class="item" effect="dark" placement="top">
        <template #content>
          使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start,end，默认为空。如placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
        </template>
        <el-select v-model="value" placeholder="请选择" multiple clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          >
          </el-option>
        </el-select>
      </el-tooltip>
    </div>
    <br /><br />
    <el-form>
      <!-- <el-form-item class="is-errr">
                <el-input placeholder="请输入" required></el-input>
              </el-form-item>
              <el-input placeholder="请输入" disabled></el-input>
              <el-input placeholder="请输入" type="textareoa"></el-input> -->
      <div class="__d-none">
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 200px;">
            <el-option label="餐厅名" value="1" disabled></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话1" value="3"></el-option>
            <el-option label="用户电话2" value="4"></el-option>
            <el-option label="用户电话3" value="5"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div class="__d-none" style="width: 160px;">
        <el-input-number
          style="width: 100%;"
          v-model="num"
          size="mini"
          :min="1"
          :max="10"
          :step="1"
          :precision="2"
          label="描述文字"
        ></el-input-number>

        <el-input-number
          style="width: 100%;"
          v-model="num"
          size="mini"
          :min="1"
          :max="10"
          :step="1"
          :precision="2"
          label="描述文字"
          disabled
        ></el-input-number>
        <el-input-number
          class="mt-8px"
          style="width: 100%;"
          v-model="num"
          size="mini"
          :min="1"
          :max="10"
          :step="1"
          :precision="2"
          label="描述文字"
          controls-position="right"
        ></el-input-number>
      </div>

      <div class="__d-none">
        <el-time-picker v-model="value1" placeholder="任意时间点"> </el-time-picker>
        <el-time-select v-model="value" placeholder="选择时间"> </el-time-select>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          disabled
        ></el-date-picker>
        <br /><br />
        <el-date-picker
          v-model="values"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-date-picker v-model="year" type="year" placeholder="选择年"> </el-date-picker>
        <el-date-picker v-model="value1" type="week" placeholder="选择周"> </el-date-picker>
        <el-date-picker v-model="value1" type="dates" placeholder="选择多个日期"> </el-date-picker>
        <el-date-picker v-model="value1" type="month" placeholder="选择月"> </el-date-picker>
        <el-date-picker
          v-model="value1"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        >
        </el-date-picker>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-switch v-model="bool" disabled> </el-switch>
        <el-switch v-model="bool"> </el-switch>
      </div>

      <div class="__d-none">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4000000"
        >
        </el-pagination>
        <el-dropdown placement="bottom-start">
          <span class="el-dropdown-link text-hover">
            下拉菜单<i class="el-icon-origin-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div class="__d-none">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
        >
        </el-tree>
      </div>
      <div style="height: 200px;">&nbsp;</div>
    </el-form>
  </section>
</template>
