<template>
  <el-form
    ref="form"
    :model="value"
    :rules="rules"
    :label-width="labelWidth + 'px'"
    :disabled="!isAdd"
  >
    <div class="form_title" v-if="showTitle">基本信息</div>

    <el-row v-if="formType != 3 && showOne">
      <el-col :span="24">
        <el-form-item label="所属企业:" prop="title">
          <el-input v-model="value.title"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="需求名称:" prop="name">
          <el-input v-model="value.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="需求类别:">
          <el-checkbox-group v-model="value.check">
            <el-checkbox
              v-for="item in checkList"
              :key="item.id"
              :label="item.id"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-input
                v-model="checkInput"
                placeholder="请输入需求类别"
              ></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="addCheck">添加</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="需求描述:" prop="add">
          <Editor v-model="value.add" :minHeight="150" :readOnly="!isAdd" />
        </el-form-item>
      </el-col>
    </el-row>

    <FieldOptions
      v-if="formType == 1"
      v-model="value"
      :labelWidth="labelWidth"
      ref="fieldForm"
      :disabled="!isAdd"
    />

    <el-row v-if="formType == 1">
      <el-col :span="12">
        <el-form-item
          label="成果需求预算:"
          :prop="value.status ? '' : 'amount'"
        >
          <el-input
            v-model="value.amount"
            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            placeholder="请输入技术需求预算"
          >
            <template slot="append">万元</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-width="50px">
          <el-checkbox v-model="value.status">面议</el-checkbox>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-if="formType == 1">
      <el-col :span="12">
        <el-form-item label="截止时间:" prop="work_at">
          <el-date-picker
            style="width: 100%"
            v-model="value.work_at"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择截止时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="需求联系人:" prop="bankAccount">
          <el-input
            v-model="value.bankAccount"
            placeholder="请输入需求联系人"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系人手机号:" prop="bankPhone">
          <el-input
            v-model="value.bankPhone"
            placeholder="请输入联系人手机号"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="需求提交人:" prop="username">
          <el-input v-model="value.username" placeholder="自动获取"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="手机号:" prop="userPhone">
          <el-input v-model="value.userPhone" placeholder="自动获取"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-if="formType == 1">
      <el-col :span="24">
        <InputBoxAdd
          :labelWidth="labelWidth"
          v-model="value"
          title="想合作的单位及模式"
          placeholder=""
          fieldKey="customer"
          ref="directionsForm"
          :disabled="!isAdd"
        />
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import FieldOptions from "@/views/components/FieldOptions";
import InputBoxAdd from "@/views/components/InputBoxAdd";
import { demandCategoryList } from "@/utils/parameter";
export default {
  components: {
    FieldOptions,
    InputBoxAdd,
  },
  props: {
    value: Object,
    isAdd: {
      type: Boolean,
      default: true,
    },
    showTitle: {
      type: Boolean,
      default: false,
    },
    labelWidth: {
      type: Number,
      default: 120,
    },
    formType: {
      type: Number,
      default: 1,
    },
    showOne: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      checkList: demandCategoryList,
      checkInput: "",
      rules: {
        title: [
          { required: true, message: "所属企业不能为空", trigger: "blur" },
        ],
        name: [
          { required: true, message: "需求名称不能为空", trigger: "blur" },
        ],
        add: [{ required: true, message: "需求描述不能为空", trigger: "blur" }],
        bankAccount: [
          { required: true, message: "需求联系人不能为空", trigger: "blur" },
        ],
        bankPhone: [
          { required: true, message: "联系人手机号不能为空", trigger: "blur" },
        ],
        username: [
          { required: true, message: "需求提交人不能为空", trigger: "blur" },
        ],
        amount: [
          { required: true, message: "需求预算不能为空", trigger: "blur" },
        ],
        work_at: [
          {
            required: true,
            message: "请选择截止时间",
            trigger: ["change", "blur"],
          },
        ],
        userPhone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    addCheck() {},
    submitForm() {
      let flag = false;
      this.$refs["form"].validate((valid) => {
        const directionsForm = this.$refs.directionsForm.submitForm();
        const fieldForm = this.$refs.fieldForm.submitForm();
        if (valid && directionsForm && fieldForm) {
          flag = !flag;
        }
      });
      return flag;
    },
  },
};
</script>
