<template>
  <div v-show="show" class="edit-expected-position">
    <el-form :model="userInfoData" label-position="top">
      <el-row :gutter="28">
        <el-col :span="12">
          <el-form-item label="求职类型">
            <div class="sex">
              <span :class="radioBtn === '全职' ? 'active' : ''" @click="radioBtn = '全职'"
                >全职</span
              >
              <span :class="radioBtn === '兼职' ? 'active' : ''" @click="radioBtn = '兼职'"
                >兼职</span
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期望职位">
            <el-select
              v-model="userInfoData.region"
              size="large"
              placeholder=" "
              style="width: 100%"
            >
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期望行业">
            <el-input v-model="userInfoData.name" size="large" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="flx-align-center">
          <el-form-item label="薪资要求">
            <el-select v-model="userInfoData.region" size="large" placeholder="选择薪资范围">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
            <span style="margin: 0 16px">至</span>
            <el-select v-model="userInfoData.region" size="large" placeholder="选择薪资范围">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作城市">
            <el-cascader
              ref="cascaderAddr"
              v-model="userInfoData.addr"
              size="large"
              :options="cityData"
              :props="cityProps"
              style="width: 100%"
              @change="handleAddrChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="edit-resume-btn">
          <el-button size="large" style="width: 100px" @click="emits('update:show', false)"
            >取消</el-button
          >
          <el-button size="large" type="primary" style="width: 100px">完成</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import cityData from '@/assets/json/pca-code.json'

defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:show'])

const userInfoData: any = ref({})
const cityProps = {
  value: 'code',
  label: 'name',
  children: 'children'
}
const radioBtn = ref('全职')
const cascaderAddr = ref()

const handleAddrChange = (e: any) => {
  console.log(unref(cascaderAddr), e)

  // unref(cascaderAddr).map((item: any) => {
  //   if (item.getCheckedNodes().length) {
  //     state.cascaderData[prop] = item.getCheckedNodes()[0].text
  //   }
  // })
}
</script>

<style lang="scss" scoped>
.edit-expected-position {
  background: #f8f8f8;
  border-radius: 12px;
  padding: 24px;
  font-weight: 400;
  color: #222222;
  margin-top: 24px;
  .edit-user__info {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .sex {
    display: flex;
    align-items: center;
    span {
      width: 227px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      display: inline-block;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #cccccc;
      margin-right: 15px;
      color: #999999;
      cursor: pointer;
    }
    .active {
      background: #dcecff;
      border: 1px solid #177cfa;
      color: #177cfa;
    }
  }

  .edit-resume-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
  }
}
</style>
