<template>
  <div class="p-2">
    <el-card shadow="never">
      <el-form label-width="120px" label-position="right" :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="字段1">
          <el-input v-model="queryForm.user" placeholder="字段1" clearable/>
        </el-form-item>
        <el-form-item label="字段2">
          <el-select
            v-model="queryForm.region"
            placeholder="字段2"
            clearable
          >
            <el-option label="选项1" value="shanghai"/>
            <el-option label="选项2" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="字段3">
          <el-date-picker
            v-model="queryForm.date"
            type="date"
            placeholder="字段3"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 8px" shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="parentTableAdd">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="ids.length !== 1" @click="parentTableUpdate()">修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="ids.length < 1" @click="parentTableDelete()">删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true"
                         @queryTable="getList"></right-toolbar>
        </el-row>
      </template>
      <el-table :data="tableData" style="width: 100%" @cell-click="parentTableCellClick"
                @selection-change="selectionChange" ref="parentTableRef">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="Date" prop="date"/>
        <el-table-column label="Date" prop="name"/>
        <el-table-column label="Operations" fixed="right" width="200">
          <template #default="scope">
            <el-button size="small" @click.stop="viewDetails(scope.row)">
              查看
            </el-button>
            <el-button size="small" @click.stop="parentTableUpdate(scope.row)">
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click.stop="parentTableDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card style="margin-top: 8px" shadow="never">
      <el-table :data="tableData1" style="width: 100%">
        <el-table-column label="Date" prop="date"/>
        <el-table-column label="Date" prop="name"/>
        <el-table-column label="Operations" fixed="right" width="200">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
              查看
            </el-button>
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="100%" fullscreen>
      <el-card shadow="never">
        <el-form :model="dialogForm" :inline="true">
          <el-form-item label="字段1" label-width="120px">
            <el-input v-model="dialogForm.name" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="字段2" label-width="120px">
            <el-select v-model="dialogForm.region" placeholder="Please select a zone">
              <el-option label="Zone No.1" value="shanghai"/>
              <el-option label="Zone No.2" value="beijing"/>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card style="margin-top: 8px" shadow="never">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="addDialogTableCell">新增</el-button>
          </el-col>
        </el-row>
        <el-table :data="dialogtable" style="width: 100%">
          <el-table-column label="字段1" prop="date">
            <template #default="scope">
              <el-select
                v-model="scope.row.date"
                placeholder="Select"
                size="small"
              >
                <el-option
                  label="1"
                  value="1"
                />
                <el-option
                  label="2"
                  value="2"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字段2" prop="name">
            <template #default="scope">
              <el-input v-model="scope.row.name" style="width: 240px" placeholder="Please input" />
            </template>
          </el-table-column>
          <el-table-column label="Operations" fixed="right" width="200">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                查看
              </el-button>
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                修改
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="dialogSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Linkage" lang="ts">

import {reactive} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'

interface User {
  date: string
  name: string
  address: string
}

const dialogVisible = ref(false)
const dialogTitle = ref('添加')
const dialogForm = reactive({})

const queryForm = reactive({
  user: '',
  region: '',
  date: '',
})
const parentTableRef = ref()
const tableData = ref([
  {
    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',
  },
])
const ids = ref([])
const tableData1 = ref([
  {
    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',
  },
])
const dialogtable = ref([])

const onSubmit = () => {
  console.log('submit!')
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}
const query = () => {
  console.log(queryForm)
  ids.value = []
  parentTableRef.value.clearSelection()
}

// 父表格行点击
const parentTableCellClick = (e) => {
  console.log(e.date)
  tableData1.value = tableData1.value.map(v => {
    return {
      ...v,
      date: e.date
    }
  })
}

// 表格多选
const selectionChange = (e) => {
  ids.value = e.map(v => v.name)
  console.log(ids.value)
}
// 查看
const viewDetails = (e) => {
  console.log(e)
}

// 父表格新增
const parentTableAdd = () => {
  dialogVisible.value = true
}
// 父表格修改
const parentTableUpdate = (e) => {
  let id = ref(null)
  if (e) {
    id.value = e.name
  } else {
    id.value = ids.value?.[0]
  }
  if (!id.value) return
  dialogVisible.value = true
}
// 父表格删除
const parentTableDelete = (e) => {
  const delList = ref([])
  if (e) {
    delList.value = [e.name]
  } else {
    delList.value = ids.value
  }
  console.log(delList.value)
  ElMessageBox.confirm(
    '确定要删除这些数据吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除完成',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消',
      })
    })

}

// 添加子表格行
const addDialogTableCell = () => {
  dialogtable.value.push({})
}

// dialog提交
const dialogSubmit = () => {
  console.log(dialogForm)
  console.log(dialogtable.value)
  dialogVisible.value = false
}
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
