<template>
  <el-dialog :title="title" :visible.sync="visible" width="50%" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户" prop="uid">
        <user-select
          v-model="form.uid"
          placeholder="请选择用户"
          user-type="1"
          dialog-title="选择用户"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item label="身份证号码" prop="cardNo">
        <el-input v-model="form.cardNo" placeholder="请输入身份证号码" />
      </el-form-item>
      <el-form-item label="技能ID" prop="skillId">
        <el-input v-model="form.skillId" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="电子照片" prop="image">
        <image-upload v-model="form.image" :limit="1"/>
      </el-form-item>
      <el-form-item label="技能证书" prop="skill">
        <image-upload v-model="form.skill" :limit="1"/>
      </el-form-item>
      <el-form-item label="无犯罪证明" prop="criminal">
        <image-upload v-model="form.criminal" :limit="1"/>
      </el-form-item>
      <el-form-item label="健康证" prop="health">
        <image-upload v-model="form.health" :limit="1"/>
      </el-form-item>
      <el-form-item label="学历证书" prop="education">
        <image-upload v-model="form.education" :limit="1"/>
      </el-form-item>
      <el-form-item label="驾照" prop="drive">
        <image-upload v-model="form.drive" :limit="1"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio
            v-for="dict in dict.type.worker_apply_status"
            :key="dict.value"
            :label="parseInt(dict.value)"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="form.remarks" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="接单地区" prop="cityIds">
        <el-select 
          v-model="selectedAreas" 
          multiple 
          filterable
          clearable
          placeholder="请选择接单地区"
          @change="handleAreaChange"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>


export default {
  name: "WorkerApplyEdit",
  dicts: ['worker_apply_status'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        id: undefined,
        uid: undefined,
        name: undefined,
        phone: undefined,
        address: undefined,
        cardNo: undefined,
        skillId: undefined,
        image: undefined,
        skill: undefined,
        criminal: undefined,
        health: undefined,
        education: undefined,
        drive: undefined,
        status: 0,
        remarks: undefined,
        cityPid: undefined,
        cityIds: undefined
      },
      rules: {
        uid: [
          { required: true, message: "用户不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "电话不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "地址不能为空", trigger: "blur" }
        ],
        cardNo: [
          { required: true, message: "身份证号码不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ],
        cityIds: [
          { required: true, message: "接单地区不能为空", trigger: "change" }
        ]
      },

      areaOptions: [
        { id: 1, name: '未央区' },
        { id: 2, name: '莲湖区' },
        { id: 3, name: '新城区' },
        { id: 4, name: '碑林区' },
        { id: 5, name: '雁塔区' },
        { id: 6, name: '灞桥区' },
        { id: 7, name: '长安区' },
        { id: 8, name: '高新区' },
        { id: 9, name: '临潼区' },
        { id: 10, name: '阎良区' }
      ], // 地区选项数据
      selectedAreas: [] // 已选择的地区
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val) {
          this.form = { ...val }
          // 如果有已选择的地区数据,转换为数组格式
          if (this.form.cityIds) {
            this.selectedAreas = this.form.cityIds.split(',').map(Number)
          }
        }
      },
      immediate: true
    }
  },
  methods: {

    // 处理地区选择变化
    handleAreaChange(value) {
      if (value && value.length > 0) {
        this.form.cityIds = value.join(',')
        this.form.cityPid = value[0] // 第一个选择的作为主要城市
      } else {
        this.form.cityIds = undefined
        this.form.cityPid = undefined
      }
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$emit('confirm', this.form)
        }
      })
    },
    cancel() {
      this.reset()
      this.$emit('update:visible', false)
    },
    reset() {
      this.form = {
        id: undefined,
        uid: undefined,
        name: undefined,
        phone: undefined,
        address: undefined,
        cardNo: undefined,
        skillId: undefined,
        image: undefined,
        skill: undefined,
        criminal: undefined,
        health: undefined,
        education: undefined,
        drive: undefined,
        status: 0,
        remarks: undefined,
        cityPid: undefined,
        cityIds: undefined
      }
      this.selectedAreas = []
      this.resetForm("form")
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
</style> 