<script setup>
import { ref } from 'vue'
import {
  useGetJobById,
  useUpdateJob,
  useUpdateJobSetting
} from '@/api/recruitment'
import {
  useGetImagesList,
  useGetBackgroundList,
  useGetLogoList
} from '@/api/interview'
import { Upload, Picture } from '@element-plus/icons-vue'
import { useCompanyStore, useUserStore } from '@/stores'
import { pcaTextArr } from 'element-china-area-data'
import { useGetTypeListByType } from '@/api/question'
import { ElMessage } from 'element-plus'

const region_data = ref()
region_data.value = pcaTextArr
const companyStore = useCompanyStore()
const emit = defineEmits(['getJobSettingList'])
const userStore = useUserStore()
const enditDialog = ref(false)
const active = ref(0)
const FormModel = ref({
  id: '',
  jobName: '',
  address: [],
  addressDetail: '',
  details: '',
  startTime: '',
  endTime: '',
  minSalary: '',
  maxSalary: '',
  minNumber: '',
  maxNumber: '',
  requirement: 1,
  jobType: 1,
  jobTips: [],
  userId: '',
  encoding: ''
})
const rules = {
  jobName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
  details: [{ required: true, message: '请输入岗位详情', trigger: 'blur' }],
  address: [{ required: true, message: '请选择工作地址', trigger: 'blur' }],
  startTime: [{ required: true, message: '请选择工作时间', trigger: 'blur' }],
  minNumber: [{ required: true, message: '请输入招聘人数', trigger: 'blur' }],
  minSalary: [{ required: true, message: '请输入薪资', trigger: 'blur' }],
  jobTips: [{ required: true, message: '请输入/选择岗位标签', trigger: 'blur' }]
}

const submitFormModel = ref({
  jobId: '',
  imagesId: '',
  backgroundId: '',
  logoId: '',
  professional: '',
  comprehensive: '',
  psychology: '',
  userId: '',
  encoding: '',
  jobPromote: ''
})

const openProfessional = ref('0')
const openComprehensive = ref('0')
const openPsychology = ref('0')

const professionalList = ref([])
const comprehensiveList = ref([])
const psychologyList = ref([])

const imagesList = ref([])
const backgroundList = ref([])
const logoList = ref([])

const tips = ref([
  {
    value: 'HTML',
    label: 'HTML'
  },
  {
    value: 'CSS',
    label: 'CSS'
  },
  {
    value: 'JavaScript',
    label: 'JavaScript'
  }
])

const open = async (row) => {
  submitFormModel.value = row
  console.log(submitFormModel.value)
  enditDialog.value = true
  const res = await useGetJobById(row.jobId)
  FormModel.value = res.data.data
  FormModel.value.address = FormModel.value.address.slice(1, -1).split(', ')
  FormModel.value.jobTips = FormModel.value.jobTips.slice(1, -1).split(', ')
  FormModel.value.addressDetail = res.data.data.addressDetail
  FormModel.value.encoding = companyStore.encoding
  FormModel.value.userId = userStore.userInfo.id
  if (submitFormModel.value.professional !== 0) {
    openProfessional.value = '1'
  }
  if (submitFormModel.value.comprehensive !== 0) {
    openComprehensive.value = '1'
  }
  if (submitFormModel.value.psychology !== 0) {
    openPsychology.value = '1'
  }
  if (submitFormModel.value.professional === 0) {
    submitFormModel.value.professional = ''
  }
  if (submitFormModel.value.comprehensive === 0) {
    submitFormModel.value.comprehensive = ''
  }
  if (submitFormModel.value.psychology === 0) {
    submitFormModel.value.psychology = ''
  }
}

const handleEndit = async () => {
  const res = await useUpdateJob(FormModel.value)
  ElMessage.success(res.data.data)
}
const handleProfessional = async () => {
  const res = await useGetTypeListByType(FormModel.value.encoding, 1)
  professionalList.value = res.data.data
  console.log(res)
}
const handleComprehensive = async () => {
  const res = await useGetTypeListByType(FormModel.value.encoding, 2)
  comprehensiveList.value = res.data.data
  console.log(res)
}
const handlePsychology = async () => {
  const res = await useGetTypeListByType(FormModel.value.encoding, 3)
  psychologyList.value = res.data.data
  console.log(res)
}
const next = async () => {
  if (active.value === 0) {
    const res = await useGetImagesList(FormModel.value.encoding)
    imagesList.value = res.data.data
    console.log(imagesList.value)
  }
  if (active.value === 1) {
    if (!submitFormModel.value.imagesId) {
      ElMessage.error('请选择面试官形象！')
      return
    }
    const res = await useGetBackgroundList(FormModel.value.encoding)
    backgroundList.value = res.data.data
  }
  if (active.value === 2) {
    if (!submitFormModel.value.backgroundId) {
      ElMessage.error('请选择面试背景图片！')
      return
    }
    const res = await useGetLogoList(FormModel.value.encoding)
    logoList.value = res.data.data
  }
  if (active.value === 3) {
    if (!submitFormModel.value.logoId) {
      ElMessage.error('请选择公司logo！')
      return
    }

    const res = await useGetLogoList(FormModel.value.encoding)
    logoList.value = res.data.data
    handleProfessional()
    handleComprehensive()
    handlePsychology()
  }
  if (active.value === 4) {
    if (
      openProfessional.value === '0' &&
      openComprehensive.value === '0' &&
      openPsychology.value === '0'
    ) {
      ElMessage.error('请至少选择一个题库')
      return
    }
  }

  active.value = active.value + 1
}
const before = () => {
  active.value = active.value - 1
}
const submit = async () => {
  submitFormModel.value.userId = userStore.userInfo.id
  const res = await useUpdateJobSetting(submitFormModel.value)
  ElMessage.success(res.data.data)
  console.log(submitFormModel.value)
  enditDialog.value = false
  emit('getJobSettingList')
}
defineExpose({
  open
})
</script>
<template>
  <el-dialog v-model="enditDialog" title="岗位面试设置" width="50%">
    <el-scrollbar height="600px">
      <el-steps :space="200" :active="active" simple finish-status="success">
        <el-step title="修改岗位信息" :icon="Upload" />
        <el-step title="选择形象" :icon="Picture" />
        <el-step title="选择背景" :icon="Picture" />
        <el-step title="选择logo" :icon="Picture" />
        <el-step title="选择题库" :icon="Picture" />
        <el-step title="填写岗位promote" :icon="Picture" />
      </el-steps>
      <div v-if="active === 0">
        <el-form
          ref="form"
          label-width="150px"
          style="padding-right: 30px; padding-top: 5%"
          :model="FormModel"
          :rules="rules"
        >
          <el-form-item label="岗位名称" prop="jobName">
            <el-input
              v-model="FormModel.jobName"
              placeholder="请输入岗位名称"
              id="jobName"
            ></el-input>
          </el-form-item>
          <el-form-item label="岗位详情" prop="details">
            <el-input
              v-model="FormModel.details"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="请输入岗位详情"
              id="details"
            />
          </el-form-item>

          <el-form-item label="工作地址" prop="address">
            <el-cascader
              v-model="FormModel.address"
              :options="region_data"
              placeholder="请选择地址"
            />
            <el-input
              style="width: 50%; padding-left: 5%"
              v-model="FormModel.addressDetail"
              placeholder="请输入详细地址"
              id="address"
            ></el-input>
          </el-form-item>

          <el-form-item label="工作时间" prop="startTime">
            <div>
              <el-time-select
                v-model="FormModel.startTime"
                :max-time="FormModel.endTime"
                class="mr-4"
                placeholder="上班时间"
                start="06:30"
                step="00:30"
                end="22:00"
              />
              -
              <el-time-select
                v-model="FormModel.endTime"
                :min-time="FormModel.startTime"
                placeholder="下班时间"
                start="06:30"
                step="00:30"
                end="22:00"
              />
            </div>
          </el-form-item>
          <el-form-item label="人数要求" prop="minNumber">
            <el-input
              style="width: 30%"
              v-model="FormModel.minNumber"
              placeholder="请输入最低人数--10"
              id="min_number"
            ></el-input>
            -
            <el-input
              style="width: 30%"
              v-model="FormModel.maxNumber"
              placeholder="请输入最高人数--200"
              id="max_number"
            ></el-input>
          </el-form-item>
          <el-form-item label="薪资" prop="minSalary">
            <el-input
              style="width: 30%"
              v-model="FormModel.minSalary"
              placeholder="请输入最低薪资--5k"
              id="min_salary"
            ></el-input>
            -
            <el-input
              style="width: 30%"
              v-model="FormModel.maxSalary"
              placeholder="请输入最高薪资--10k"
              id="max_salary"
            ></el-input>
          </el-form-item>
          <el-form-item label="学历要求" prop="requetment">
            <el-radio-group v-model="FormModel.requirement">
              <el-radio :label="1">无学历要求</el-radio>
              <el-radio :label="2">小学/初中</el-radio>
              <el-radio :label="3">高中/中专</el-radio>
              <el-radio :label="4">大专及以上</el-radio>
              <el-radio :label="5">本科及以上</el-radio>
              <el-radio :label="6">研究生及以上</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="岗位类型" prop="jobType">
            <el-radio-group v-model="FormModel.jobType">
              <el-radio :label="1">行政</el-radio>
              <el-radio :label="2">财务</el-radio>
              <el-radio :label="3">技术</el-radio>
              <el-radio :label="4">销售</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="岗位tips" prop="jobTips">
            <el-select
              v-model="FormModel.jobTips"
              multiple
              filterable
              allow-create
              default-first-option
              :reserve-keyword="false"
              placeholder="请选择岗位或添加标签"
            >
              <el-option
                v-for="item in tips"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div style="text-align: center">
          <el-button type="primary" @click="handleEndit">保存修改</el-button>
        </div>
      </div>
      <div :style="{ marginTop: '20px' }" v-if="active === 1">
        <p>请选择面试官形象</p>
        <a-radio-group v-model="submitFormModel.imagesId">
          <template v-for="item in imagesList" :key="item.id">
            <a-radio :value="item.id">
              <template #radio="{ checked }">
                <a-space
                  align="start"
                  class="custom-radio-card"
                  :class="{ 'custom-radio-card-checked': checked }"
                >
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot" />
                  </div>
                  <div>
                    <div className="custom-radio-card-title">
                      {{ item.picName }}
                    </div>
                    <a-image
                      width="200"
                      height="200"
                      :preview="false"
                      :src="item.image"
                    />
                  </div>
                </a-space>
              </template>
            </a-radio>
          </template>
        </a-radio-group>
      </div>
      <div :style="{ marginTop: '20px' }" v-if="active === 2">
        <p>请选择面试背景图片</p>
        <a-radio-group v-model="submitFormModel.backgroundId">
          <template v-for="item in backgroundList" :key="item.id">
            <a-radio :value="item.id">
              <template #radio="{ checked }">
                <a-space
                  align="start"
                  class="custom-radio-card"
                  :class="{ 'custom-radio-card-checked': checked }"
                >
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot" />
                  </div>
                  <div>
                    <div className="custom-radio-card-title">
                      {{ item.picName }}
                    </div>
                    <a-image
                      width="200"
                      height="200"
                      :preview="false"
                      :src="item.image"
                    />
                  </div>
                </a-space>
              </template>
            </a-radio>
          </template>
        </a-radio-group>
      </div>
      <div :style="{ marginTop: '20px' }" v-if="active === 3">
        <p>请选择公司logo</p>
        <a-radio-group v-model="submitFormModel.logoId">
          <template v-for="item in logoList" :key="item.id">
            <a-radio :value="item.id">
              <template #radio="{ checked }">
                <a-space
                  align="start"
                  class="custom-radio-card"
                  :class="{ 'custom-radio-card-checked': checked }"
                >
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot" />
                  </div>
                  <div>
                    <div className="custom-radio-card-title">
                      {{ item.picName }}
                    </div>
                    <a-image
                      width="200"
                      height="200"
                      :preview="false"
                      :src="item.image"
                    />
                  </div>
                </a-space>
              </template>
            </a-radio>
          </template>
        </a-radio-group>
      </div>
      <div :style="{ marginTop: '20px' }" v-if="active === 4">
        <p>请选择题库</p>
        <div style="margin-top: 30px">
          <a-card class="card-demo" title="是否开启专业测试？" hoverable>
            <template #extra>
              <a-switch
                v-model="openProfessional"
                checked-value="1"
                unchecked-value="0"
              />
            </template>
            请选择专业题库 <br />
            <br />
            <el-select
              v-model="submitFormModel.professional"
              clearable
              placeholder="请选择专业题库"
              :disabled="openProfessional === '0' ? true : false"
            >
              <el-option
                v-for="item in professionalList"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
              />
            </el-select>
          </a-card>
        </div>
        <div style="margin-top: 30px">
          <a-card class="card-demo" title="是否开启综合测试？" hoverable>
            <template #extra>
              <a-switch
                v-model="openComprehensive"
                checked-value="1"
                unchecked-value="0"
              />
            </template>
            请选择综合题库 <br />
            <br />
            <el-select
              v-model="submitFormModel.comprehensive"
              clearable
              placeholder="请选择综合题库"
              :disabled="openComprehensive === '0' ? true : false"
            >
              <el-option
                v-for="item in comprehensiveList"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
              />
            </el-select>
          </a-card>
        </div>
        <div style="margin-top: 30px">
          <a-card class="card-demo" title="是否开启心理测试？" hoverable>
            <template #extra>
              <a-switch
                v-model="openPsychology"
                checked-value="1"
                unchecked-value="0"
              />
            </template>
            请选择心理题库 <br />
            <br />
            <el-select
              v-model="submitFormModel.psychology"
              clearable
              placeholder="请选择心理题库"
              :disabled="openPsychology === '0' ? true : false"
            >
              <el-option
                v-for="item in psychologyList"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
              />
            </el-select>
          </a-card>
        </div>
      </div>
      <div :style="{ marginTop: '20px' }" v-if="active === 5">
        <p>请输入岗位promote,让面试官更加智能！</p>
        <el-input
          v-model="submitFormModel.jobPromote"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
          placeholder="请输入岗位的promote"
        />
      </div>
    </el-scrollbar>
    <template #footer>
      <span class="dialog-footer" v-if="active === 0">
        <el-button @click="addEnditDialog = false">取消</el-button>
        <el-button type="primary" @click="next"> 下一步 </el-button>
      </span>
      <span
        class="dialog-footer"
        v-if="active === 1 || active === 2 || active === 3 || active === 4"
      >
        <el-button @click="before">上一步</el-button>
        <el-button type="primary" @click="next"> 下一步 </el-button>
      </span>
      <span class="dialog-footer" v-if="active === 5">
        <el-button @click="before">上一步</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.select {
  text-align: center;
  padding-top: 10%;
}
.custom-radio-card {
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  width: 250px;
  box-sizing: border-box;
}

.custom-radio-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.custom-radio-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked .custom-radio-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
.card-demo {
  width: 360px;
  margin-left: 24px;
  transition-property: all;
}

.card-demo:hover {
  transform: translateY(-4px);
}
</style>
