<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item>
          <el-select v-model="searchInfo.searchKey">
            <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchInfo.name" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="search" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-btn-list">
      <el-button size="small" icon="refresh" @click="onReset">刷新</el-button>
      <el-button size="small" type="primary" icon="plus" @click="openDialog('addResponsiblePerson')">新增</el-button>
      <el-popover v-model="deleteVisible" placement="top" width="160">
        <p>确定要删除吗？</p>
        <div style="text-align: right; margin-top: 8px;">
          <el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
          <el-button size="small" type="primary" @click="onDelete">确定</el-button>
        </div>
        <template #reference>
          <el-button icon="delete" type="danger" size="small" :disabled="!apis.length" style="margin-left: 10px;"
            @click="deleteVisible = true">删除</el-button>
        </template>
      </el-popover>
    </div>
    <div class="gva-table-box">
      <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" label="头像" min-width="100">
          <template #default="scope">
            <CustomPic style="margin-top:8px" :pic-src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="姓名" min-width="150" prop="name" />
        <el-table-column align="left" label="昵称" min-width="150" prop="nickname" />
        <el-table-column align="left" label="部门名称" min-width="150" prop="department_name" />
        <el-table-column align="left" label="手机号码" min-width="150" prop="mobile_phone_number" />
        <el-table-column align="left" label="游戏数量" min-width="150" prop="game_counts" />
        <el-table-column align="left" label="托管人" min-width="150" prop="custodians" />
        <el-table-column align="left" label="开始时间" min-width="150" prop="start_time" />
        <el-table-column align="left" label="url" min-width="150" prop="url" />
        <el-table-column align="left" label="备注" min-width="150" prop="remark" />
        <el-table-column align="left" label="状态" min-width="100">
          <template #default="scope">
            <el-switch v-model="scope.row.state" inline-prompt :active-value="1" :inactive-value="-1"
              @change="() => { switchEnable(scope.row) }" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="推送状态" min-width="100">
          <template #default="scope">
            <el-switch v-model="scope.row.push_status" inline-prompt :active-value="1" :inactive-value="-1"
              @change="() => { switchPushEnable(scope.row) }" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="创建时间" min-width="200" prop="createTime" sortable="custom" />
        <el-table-column align="left" fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button icon="edit" size="small" type="primary" link @click="editApiFunc(scope.row)">编辑</el-button>
            <el-button icon="delete" size="small" type="primary" link @click="deleteApiFunc(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="gva-pagination">
        <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total"
          layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" />
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" custom-class="user-dialog" :before-close="closeDialog" :title="dialogTitle"
      :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false">
      <div style="height:60vh;overflow:auto;padding:0 12px;">
        <el-form ref="userForm" :rules="rules" :model="userInfo" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="userInfo.name" />
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="userInfo.nickname" />
          </el-form-item>
          <el-form-item label="部门" prop="department_name">
            <el-input v-model="userInfo.department_name" />
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile_phone_number">
            <el-input v-model="userInfo.mobile_phone_number" />
          </el-form-item>
          <el-form-item label="开始时间" prop="start_time">
            <el-input-number v-model="userInfo.start_time" :min="0" :max="16" @change="handleChange" placeholder="0" />
          </el-form-item>
          <el-form-item label="url" prop="url">
            <el-input v-model="userInfo.url" />
          </el-form-item>
          <el-form-item label="托管状态" prop="managed_status">
            <el-radio-group v-model="userInfo.managed_status" class="ml-4">
              <el-radio label="1" size="small">需要托管</el-radio>
              <el-radio label="-1" size="small">不需要托管</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="托管人" prop="custodians" v-if="dialogTitle == '新增' && userInfo.managed_status == '1'">
            <el-input v-model="userInfo.custodians" />
          </el-form-item>
          <el-form-item label="托管人" v-if="dialogTitle == '编辑' && userInfo.managed_status == '1'">
            <el-select v-model="userInfo.custodians" placeholder="托管人">
              <el-option v-for="item in ResponsiblePerson" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="userInfo.remark" />
          </el-form-item>
          <!-- <el-form-item label="状态" prop="state">
            <el-radio-group v-model="userInfo.state" class="ml-4">
              <el-radio :label="1" size="large">开启</el-radio>
              <el-radio :label="2" size="large">关闭</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="头像" label-width="80px">
            <div style="display:inline-block" @click="openHeaderChange">
              <img v-if="userInfo.img" class="header-img-box"
                :src="(userInfo.img && userInfo.img.slice(0, 4) !== 'http') ? path + userInfo.img : userInfo.img">
              <div v-else class="header-img-box">从媒体库选择</div>
            </div>
          </el-form-item>

        </el-form>

      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <ChooseImg ref="chooseImg" :target="userInfo" :target-key="`img`" />
  </div>
</template>

<script>
export default {
  // name: 'User',
  // state: 0,
}
</script>

<script setup>

import {
  getApiById,
  getApiList,
  createApi,
  updateApi,
  deleteApi,
  statusChange,
  pushStatusChange,
  selectResponsiblePerson,
  deleteApisByIds
} from '@/api/responsiblePerson'
import { toSQLLine } from '@/utils/stringFun'
import CustomPic from '@/components/customPic/customIndex.vue'
import ChooseImg from '@/components/chooseImg/index.vue'
import warningBar from '@/components/warningBar/warningBar.vue'

import { nextTick, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import User from '../superAdmin/user/user.vue'


const rules = ref({
  name: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
  custodians: [{ required: true, message: '托管人不能为空', trigger: 'blur' }],
})


const form = ref({

})
const searchOptions = ref([
  {
    value: 'name',
    label: '姓名',

  },
])
const type = ref('')
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({
  searchKey: "name",
})

const onReset = () => {
  searchInfo.value = {}
}

const getResponsiblePerson = async () => {
  const table = await selectResponsiblePerson()
  if (table.code === 0) {
    ResponsiblePerson.value = table.data
  }
}
getResponsiblePerson()

const ResponsiblePerson = ref([{}])



// 搜索
const onSubmit = () => {
  page.value = 1
  pageSize.value = 10
  getTableData()
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 排序
const sortChange = ({ prop, order }) => {
  if (prop) {
    if (prop === 'ID') {
      prop = 'id'
    }
    searchInfo.value.orderKey = toSQLLine(prop)
    searchInfo.value.desc = order === 'descending'
  }
  getTableData()
}

// 查询
const getTableData = async () => {
  const table = await getApiList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}

getTableData()

//更改状态
const switchEnable = async (row) => {
  const res = await statusChange({ state: row.state, id: row.id })
  if (res.code === 0) {
    ElMessage({ type: 'success', message: `${row.state === -1 ? '停止' : '开启'}成功` })
  }
}

//更改推送状态
const switchPushEnable = async (row) => {
  const res = await pushStatusChange({ state: row.push_status, id: row.id })
  if (res.code === 0) {
    ElMessage({ type: 'success', message: `${row.state === -1 ? '停止' : '开启'}成功` })
  }
}


// 批量操作
const handleSelectionChange = (val) => {
  apis.value = val
}
const apis = ref([])
const deleteVisible = ref(false)
const onDelete = async () => {
  const ids = apis.value.map(item => item.id)
  const res = await deleteApisByIds({ ids })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    if (tableData.value.length === ids.length && page.value > 1) {
      page.value--
    }
    deleteVisible.value = false
    getTableData()
    getResponsiblePerson()
  }
}


// 弹窗相关
const userInfo = ref({
  name: '',
  nickname: '',
  department_name: '',
  mobile_phone_number: '',
  remark: '',
  state: 0,
  img: '',
  custodians: '',
  push_status: 0,
})
const path = ref(import.meta.env.VITE_BASE_API + '/')



const userForm = ref(null)
const initForm = () => {
  userForm.value.resetFields()
  userInfo.value = {
    name: '',
    nickname: '',
    department_name: '',
    mobile_phone_number: '',
    remark: '',
    state: 0,
    img: '',
    custodians: '',
    push_status: 0,
  }
}

const dialogTitle = ref('新增Api')
const dialogFormVisible = ref(false)
const openDialog = (key) => {
  switch (key) {
    case 'addResponsiblePerson':
      dialogTitle.value = '新增'
      break
    case 'editResponsiblePerson':
      dialogTitle.value = '编辑'
      break
    default:
      break
  }

  type.value = key
  dialogFormVisible.value = true
}
const closeDialog = () => {
  initForm()
  dialogFormVisible.value = false
  userInfo.value.img = ''
}

const editApiFunc = async (row) => {
  const res = await getApiById({ id: row.id })
  userInfo.value = res.data.responsible_person
  openDialog('editResponsiblePerson')
}

const enterDialog = async () => {
  userForm.value.validate(async valid => {
    if (valid) {
      switch (type.value) {
        case 'addResponsiblePerson':
          {
            userInfo.value.managed_status = Number(userInfo.value.managed_status)
            const res = await createApi(userInfo.value)
            if (res.code === 0) {
              ElMessage({
                type: 'success',
                message: '添加成功',
                showClose: true
              })
            }
            getTableData()
            getResponsiblePerson()
            closeDialog()
          }

          break
        case 'editResponsiblePerson':
          {
            userInfo.value.managed_status = Number(userInfo.value.managed_status)
            //如果不需要托管，则将托管人置为空
            if (userInfo.value.managed_status === -1) {
              userInfo.value.custodians = ''
            }
            const res = await updateApi(userInfo.value)
            if (res.code === 0) {
              ElMessage({
                type: 'success',
                message: '编辑成功',
                showClose: true
              })
            }
            getTableData()
            getResponsiblePerson()
            closeDialog()
          }
          break
        default:
          // eslint-disable-next-line no-lone-blocks
          {
            ElMessage({
              type: 'error',
              message: '未知操作',
              showClose: true
            })
          }
          break
      }
    }
  })
}
const chooseImg = ref(null)
const openHeaderChange = () => {
  chooseImg.value.open()
}

const deleteApiFunc = async (row) => {
  ElMessageBox.confirm('此操作将永久删除此负责人, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await deleteApi(row)
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
        if (tableData.value.length === 1 && page.value > 1) {
          page.value--
        }
        getTableData()
        getResponsiblePerson()
      }
    })
}

</script>

<style lang="scss">
.user-dialog {
  .header-img-box {
    width: 200px;
    height: 200px;
    border: 1px dashed #ccc;
    border-radius: 20px;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}

.nickName {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.pointer {
  cursor: pointer;
  font-size: 16px;
  margin-left: 2px;
}
</style>
