<template>
  <div class="demand">
    <el-form
      label-position="top"
      ref="DemandRules"
      :model="form"
      :rules="rules"
      label-width="80px"
      class="form"
    >
      <el-row :gutter="20" align="middle">
        <el-col :span="12">
          <el-form-item label="需求名称" prop="name">
            <el-input clearable v-model="form.name" placeholder="请输入需求名称"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行业领域" prop="field">
            <el-select v-model="form.field" clearable placeholder="请选择行业领域">
              <el-option
                v-for="(item, index) in fieldList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" align="middle">
        <el-col :span="12">
          <el-form-item label="需求紧急度" prop="urgent">
            <el-select v-model="form.urgent" clearable placeholder="请选择需求紧急度">
              <el-option
                v-for="(item, index) in urgentList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合作方式" prop="method">
            <el-select v-model="form.method" clearable placeholder="请选择合作方式">
              <el-option
                v-for="(item, index) in methodList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" align="middle">
        <el-col :span="12">
          <el-form-item label="价格(万元)" prop="money">
            <el-input clearable v-model="form.money" placeholder="请输入价格(万元)"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="需求地区" prop="area">
            <el-cascader
              v-model="form.area"
              :props="{ value: 'label', label: 'label' }"
              :options="cityList"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" align="middle">
        <el-col :span="12">
          <el-form-item label="有效期" prop="time">
            <el-date-picker
              v-model="form.time"
              type="daterange"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否启用" prop="is_use">
            <el-radio-group v-model="form.is_use">
              <el-radio v-for="(item, index) in isUseList" :key="index" :value="item.value">{{
                item.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" align="middle">
        <el-col :span="12">
          <el-form-item label="上传图片" prop="file">
            <custom-upload
              model="file"
              :list="form.file"
              :limit="1"
              url="/files/web/template_demand/upload"
              @change="onUpload"
              listType="picture-card"
            ></custom-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上传视频" prop="video">
            <custom-upload
              model="video"
              :list="form.video"
              :limit="1"
              url="/files/web/template_demand/upload"
              @change="onUpload"
              listType="picture-card"
            ></custom-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="简介" prop="brief">
        <el-input
          v-model="form.brief"
          :autosize="{ minRows: 2, maxRows: 8 }"
          type="textarea"
          placeholder="请输入简介"
        />
      </el-form-item>
      <el-form-item>
        <el-col :span="24" class="button">
          <el-button type="primary" @click="submitForm(DemandRules)">发布</el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { cloneDeep, get } from 'lodash-es'
const $checkRes = inject('$checkRes')
import { getCity } from '@/utils/city'
import { DictDataStore } from '@/store/api/system/dictData'
import { DemandStore } from '@/store/api/platform/demand'
const demandStore = DemandStore()
const dictDataStore = DictDataStore()
const form = ref({})
const DemandRules = ref()
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 字典表
const isUseList = ref([])
const statusList = ref([])
const methodList = ref([])
const urgentList = ref([])
const fieldList = ref([])
const cityList = ref([])
const demandList = ref([])
const rules = reactive({
  name: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
  field: [{ required: true, message: '请选择行业领域', trigger: 'change' }],
  urgent: [{ required: true, message: '请选择需求紧急度', trigger: 'change' }],
  method: [{ required: true, message: '请选择合作方式', trigger: 'change' }],
  money: [{ required: true, message: '请输入价格', trigger: 'blur' }],
  area: [{ required: true, message: '请选择需求地区', trigger: 'change' }],
  time: [{ required: true, message: '请选择起始时间', trigger: 'change' }],
  is_use: [{ required: true, message: '请选择是否使用', trigger: 'change' }],
  brief: [{ required: true, message: '请输入简介', trigger: 'blur' }]
})
// 请求
onMounted(async () => {
  getCity().then((response) => {
    cityList.value = response.address
  })
  await searchOther()
})
const searchOther = async () => {
  let result
  // 是否使用
  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
  if ($checkRes(result)) isUseList.value = result.data
  // 状态
  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 合作方式
  result = await dictDataStore.query({ code: 'method', is_use: '0' })
  if ($checkRes(result)) methodList.value = result.data
  // 需求紧急度
  result = await dictDataStore.query({ code: 'urgent', is_use: '0' })
  if ($checkRes(result)) urgentList.value = result.data
  // 技术领域
  result = await dictDataStore.query({ code: 'field', is_use: '0' })
  if ($checkRes(result)) fieldList.value = result.data
  // 需求状态
  result = await dictDataStore.query({ code: 'demandStatus', is_use: '0' })
  if ($checkRes(result)) demandList.value = result.data
}
// 上传图片
const onUpload = (e) => {
  const { model, value } = e
  form.value[model] = value
}
// 保存
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = cloneDeep(form.value)
      const other = { status: '0', user: user.value._id }
      let res
      if (get(data, '_id')) res = await demandStore.update({ ...data, ...other })
      else await demandStore.create({ ...data, ...other })
      if ($checkRes(res, true)) {
        /* empty */
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<style scoped lang="scss">
.button {
  text-align: center;
}
</style>
