<script lang="ts" setup name="CreateOrCheck">
import { reactive, ref } from 'vue'
import type { Ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import type { IdeviceListQuery, Iform } from './receive'
import SelectDeviceDialog from './selectDeviceDialog.vue'
import ReceiveDialog from '@/views/device/receive/receiveDialog.vue'

const props = defineProps({
  typeValue: String,
})
const emits = defineEmits(['close'])
const isMulti = ref(false) // 是否批量添加(允许多选)
const selectIndex = ref()
const { proxy } = getCurrentInstance() as any
const dialogSelectDiviceVisible = ref(false) // 控制选择设备对话框显隐
const isShowDialog = ref(false) // 控制审批对话框显隐
const total = ref(20)// 总数
const approveOpinion = ref() // 审批意见：1同意2驳回0拒绝
const type = {
  add: '新建',
  check: '查看',
  normal: '正常',
}
const haveApproveLimits = ref(true)// 是否有审批权限
const isStart = ref(false)// 是否是发起人
// 选中的内容
const checkoutList = ref([])
// 表单数据
const form = ref({
  company: '申请单位', // 申请单位
  person: '申请人1', // 申请人
  time: '1', // 领用时间
  state: '', // 申请说明
})
const ruleFormRef = ref<FormInstance>() as any
const list = ref([{
  name: '测试1', // 仪器名称
  number: '测试1', // 设备编号
  version: '测试1', // 型号
  scope: '测试1', // 测量范围
  dep: '测试1', // 使用部门
  person: '测试1', // 使用人
  status: '测试1', // 管理状态
  date: '测试1', // 有效日期
}, {
  name: '测试2', // 仪器名称
  number: '测试2', // 设备编号
  version: '测试2', // 型号
  scope: '测试2', // 测量范围
  dep: '测试2', // 使用部门
  person: '测试2', // 使用人
  status: '测试2', // 管理状态
  date: '测试2', // 有效日期
}])// 表格数据
// 查询条件
const listQuery: Ref<IdeviceListQuery> = ref({
  name: '', // 仪器名称
  number: '', // 设备编号
  version: '', // 型号
  scope: '', // 测量范围
  dep: '', // 使用部门
  person: '', // 使用人
  status: '', // 管理状态
  date: '', // 有效日期
  offset: 1,
  limit: 10,
})
const columns = [
  {
    text: '仪器名称',
    value: 'name',
  },
  {
    text: '设备编号',
    value: 'number',
  },
  {
    text: '型号',
    value: 'version',
  },
  {
    text: '测量范围',
    value: 'scope',
  },
  {
    text: '使用部门',
    value: 'dep',
  },
  {
    text: '使用人',
    value: 'person',
  },
  {
    text: '管理状态',
    value: 'status',
  },
  {
    text: '有效日期',
    value: 'date',
  },
]
const rules = reactive<FormRules>({
  company: [
    { required: true, message: '请输入申请单位', trigger: 'blur' },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  person: [
    { required: true, message: '请输入申请人', trigger: 'blur' },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  time: [
    {
      type: 'date',
      required: true,
      message: '请选择领用时间',
      trigger: 'change',
    },
  ],
})

const handleClick = (val: string) => {
// 1同意，2驳回，0拒绝，3提交，4撤回
  if (val === '3') { // 提交
    ruleFormRef.value.validate((valid: boolean) => {
      if (valid) {
        console.log('submit!')
      }
      else {
        console.log('表单提交失败')
      }
    })
  }
  else if (val === '1') {
    isShowDialog.value = true
    approveOpinion.value = '1'
  }
  else if (val === '2') {
    isShowDialog.value = true
    approveOpinion.value = '2'
  }
  else if (val === '0') {
    isShowDialog.value = true
    approveOpinion.value = '0'
  }
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  // fetchData(true)
}
// 多选发生改变时
const handleSelectionChange = (e: any) => {
  checkoutList.value = e
}
// 删除行
const delRow = () => {
  console.log(checkoutList.value)

  if (checkoutList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    // 调删除接口
    checkoutList.value.forEach((item: IdeviceListQuery) => {
      // if (!item.name && !item.number) {
      list.value.forEach((element, index) => {
        if (element.name === item.name && element.number === item.number) {
          list.value.splice(index, 1)
        }
      })
      // }
    })
  }
}
// 增加行
const addRow = () => {
  list.value.push({
    name: '', // 仪器名称
    number: '', // 设备编号
    version: '', // 型号
    scope: '', // 测量范围
    dep: '', // 使用部门
    person: '', // 使用人
    status: '', // 管理状态
    date: '', // 有效日期
  })
}
// 点击选择
const handleSelect = (index: number, row: IdeviceListQuery) => {
  dialogSelectDiviceVisible.value = true
  isMulti.value = false
  selectIndex.value = index
  console.log('选中的index', row)
}
// 点击批量添加
const multiAdd = () => {
  dialogSelectDiviceVisible.value = true
  isMulti.value = true
}
// 点击关闭
const close = () => {
  emits('close')
}
// 选择涉笔对话框关闭
const closeDialog = () => {
  dialogSelectDiviceVisible.value = false
  isShowDialog.value = false
}
// 选择好设备了
const updateDeviceConfirm = (val: any) => {
  if (isMulti.value) {
    val.forEach((item: any) => {
      list.value.push(item)
    })
  }
  else {
    list.value.splice(selectIndex.value, 1, val[0])
  }
}
</script>

<template>
  <app-container>
    <div class="create-check">
      <div class="top-info">
        <div class="title-button">
          <h4 class="title">
            基本信息
          </h4>
          <div class="button-group">
            <el-button v-if="haveApproveLimits && !isStart && typeValue === 'add'" type="primary" plain @click="handleClick('1')">
              同意
            </el-button>
            <el-button v-if="haveApproveLimits && !isStart && typeValue === 'add'" type="primary" plain @click="handleClick('2')">
              驳回
            </el-button>
            <el-button v-if="haveApproveLimits && !isStart && typeValue === 'add'" type="primary" plain @click="handleClick('0')">
              拒绝
            </el-button>
            <el-button v-if="isStart && typeValue === 'add'" type="primary" plain @click="handleClick('3')">
              提交
            </el-button>
            <el-button v-if="isStart && typeValue === 'add'" type="primary" plain @click="handleClick('4')">
              撤回
            </el-button>
            <el-button type="primary" plain @click="close">
              关闭
            </el-button>
          </div>
        </div>

        <div class="form-area">
          <el-form
            ref="ruleFormRef"
            :model="form"
            label-width="120px"
            :rules="rules"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="申请单位" prop="company">
                  <el-input v-model="form.company" clearable />
                </el-form-item>
                <el-form-item label="申请人" prop="person">
                  <el-input v-model="form.person" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="领用时间" prop="time">
                  <el-date-picker
                    v-model="form.time"
                    type="datetime"
                    placeholder="请选择领用时间"
                  />
                </el-form-item>
                <el-form-item label="申请说明">
                  <el-input v-model="form.state" type="textarea" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <table-container title="设备领用列表">
        <template #btns-right>
          <el-button type="primary" @click="multiAdd">
            批量添加
          </el-button>
          <el-button type="primary" @click="addRow">
            增加行
          </el-button>
          <el-button type="primary" @click="delRow">
            删除行
          </el-button>
        </template>
        <normal-table
          :data="list" :total="total" :columns="columns" :query="listQuery"
          is-showmulti-select @change="changePage" @multiSelect="handleSelectionChange"
        >
          <template #preColumns>
            <el-table-column label="#" width="55" align="center">
              <template #default="scope">
                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
              </template>
            </el-table-column>
          </template>
          <template #columns>
            <el-table-column label="操作" align="center" width="120">
              <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  link
                  @click="handleSelect(scope.$index, scope.row)"
                >
                  选择
                </el-button>
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </table-container>

      <table-container title="审批流程">
        <!-- <normal-table
          :data="list" :total="total" :columns="columns" :query="listQuery"
          is-showmulti-select @change="changePage" @multiSelect="handleSelectionChange"
        >
          <template #preColumns>
            <el-table-column label="#" width="55" align="center">
              <template #default="scope">
                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
              </template>
            </el-table-column>
          </template>
          <template #columns>
            <el-table-column label="操作" align="center" width="120">
              <template #default="{ row }">
                <el-button
                  size="small"
                  type="primary"
                  link
                  @click="handleSelect(row.$index, row)"
                >
                  选择
                </el-button>
              </template>
            </el-table-column>
          </template>
        </normal-table> -->
      </table-container>
    </div>
  </app-container>
  <select-device-dialog
    :dialog-select-divice-visible="dialogSelectDiviceVisible"
    :is-multi="isMulti"
    @closeDialog="closeDialog"
    @updateDeviceConfirm="updateDeviceConfirm"
  />

  <!-- 同意、驳回、拒绝对话框显示 -->
  <receive-dialog
    :is-show-dialog="isShowDialog"
    :approve-opinion="approveOpinion"
    @closeDialog="closeDialog"
  />
</template>

<style lang="scss" scoped>
// 样式
.create-check {
  .top-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 10px;
    border-radius: 10px;
    background-color: #fff;

    .title-button {
      display: flex;
      align-items: center;

      &::before {
        content: "";
        flex: 1;
      }

      .button-group {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }

    .form-area {
      margin-top: 40px;
    }
  }
}
</style>