<script setup lang="ts">
import { setDepartment, setPlatform, setStatus, setBelong } from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useProjectList } from '@/composables/useGetProjectList'

const router = useRouter()

const route = useRoute()

const props = defineProps(['data'])

// 详情id
const id = route.query.id as string
// 设置部门共享
const handleDepartment = () => {
  ElMessageBox.confirm(
    `
    ${
      parseInt(props.data.department_public) === 0
        ? `该操作将会使本视频资源在您所在的部门“${props.data.organ_id_name}”内部共享，管理者不变，其余人员只能共享使用该资源，确认部门共享吗？`
        : `该操作将会取消本视频资源在您所在的部门“${props.data.organ_id_name}”内部共享，部门其余人员将不能再看到该共享资源，确认取消部门共享吗？`
    }
  `,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    setDepartment({ id: id }).then((res: any) => {
      if (res.code === 0) {
        ElMessage({ message: '更改成功', type: 'success' })
        setTimeout(() => {
          router.go(0)
        }, 500)
      }
    })
  })
}

// 设置平台共享
const handlePlatform = () => {
  ElMessageBox.confirm(
    `
    ${
      parseInt(props.data.platform_public) === 0
        ? '该操作将会使本视频资源在e-SaaS平台中公开共享供所有老师使用，资源的管理者不变，其余人员只能共享使用该资源，确认公开该资源吗？'
        : '该操作将会取消本视频资源在e-SaaS平台中公开共享，平台所有人员将不能再看到该共享资源，确认取消平台共享吗？'
    }
  `,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    setPlatform({ id: id }).then((res: any) => {
      if (res.code === 0) {
        ElMessage({ message: '更改成功', type: 'success' })
        setTimeout(() => {
          router.go(0)
        }, 500)
      }
    })
  })
}

// 上下线设置
const handleStatus = () => {
  ElMessageBox.confirm(
    `
    ${
      parseInt(props.data.status) === 1
        ? '已下线的资源将不能被关联到课程使用，确认下线该资源吗？'
        : '确认再次上线该资源吗？'
    }
  `,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    setStatus({ id: id }).then((res: any) => {
      if (res.code === 0) {
        ElMessage({ message: '更改成功', type: 'success' })
        setTimeout(() => {
          router.go(0)
        }, 500)
      }
    })
  })
}

// 更该负责人
const form = reactive({
  members: ''
})
const dialogFormVisible = ref(false)

// 人员列表
let members: any = ref([])

// 点击更改负责人按钮弹窗
const handleMembers = () => {
  dialogFormVisible.value = true
  members.value = useProjectList(props.data.organ_id).members
}
// 更改负责人确定
const handlesetBelong = () => {
  setBelong({ id: id, belong_operator: form.members }).then((res: any) => {
    if (res.code === 0) {
      ElMessage({ message: '更改成功', type: 'success' })
      setTimeout(() => {
        dialogFormVisible.value = false
      }, 500)
    }
  })
}
</script>

<template>
  <div class="tool-btn-box" v-if="$route.query.id" style="margin-bottom: 20px">
    <template v-if="props.data.auth_edit">
      <router-link :to="`/resource/video/update?id=${id}`">
        <div class="btn-item">编辑视频信息</div>
      </router-link>
      <router-link :to="`/resource/video/edit-courseware?id=${id}`">
        <div class="btn-item">编辑视频课件</div>
      </router-link>
    </template>
    <div v-if="props.data.auth_department" class="btn-item" @click="handleDepartment">
      {{ props.data.department_public == 0 ? '部门共享' : '取消部门共享' }}
    </div>
    <div v-if="props.data.auth_platform" class="btn-item" @click="handlePlatform">
      {{ props.data.platform_public == 0 ? '平台共享' : '取消平台共享' }}
    </div>
    <div
      v-if="props.data.auth_status"
      v-permission="'v1-resource-video-set-status'"
      class="btn-item"
      @click="handleStatus"
    >
      {{ props.data.status == 0 ? '资源上线' : '资源下线' }}
    </div>
    <div v-if="props.data.auth_belong" class="btn-item" @click="handleMembers">更改负责人</div>
  </div>
  <el-dialog v-model="dialogFormVisible" title="更改负责人" center>
    <el-form :model="form">
      <el-form-item>
        <div style="width: 500px">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content ep-bg-purple" />
              资源创建人: {{ props.data.created_operator_name }}
            </el-col>
            <el-col :span="12"
              ><div class="grid-content ep-bg-purple-light" />
              创建时间: {{ props.data.created_time }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12"
              ><div class="grid-content ep-bg-purple" />
              资源负责人: {{ props.data.belong_operator_name }}
            </el-col>
            <el-col :span="12"
              ><div class="grid-content ep-bg-purple-light" />
              更新时间: {{ props.data.updated_time }}
            </el-col>
          </el-row>
        </div>
        <el-select style="width: 500px; margin-top: 20px" v-model="form.members" placeholder="请选择新的资源负责人">
          <el-option v-for="item in members.value" :label="item.name" :value="item.id" :key="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handlesetBelong">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.tool-btn-box {
  display: flex;
  justify-content: right;
  .btn-item {
    width: 127px;
    line-height: 36px;
    background: #aa1941;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
  }
}
</style>
