<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="700px" height="700px" append-to-body :close-on-click-modal="false">
      <el-form  :model="form" :rules="rules" ref="form" label-width="150px">
        <el-form-item label="测试类型"  prop="testType">
          <el-radio-group v-model="form.testType">
            <el-radio v-for="item in this.testTypes" :label="item.dictValue" :key="item.dictValue">{{item.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目名称"  prop="projectName">
          <el-input   v-model="form.projectName"></el-input>
        </el-form-item>
        <el-form-item label="项目描述"  prop="projectDesc">
          <el-input type="textarea"
                    :rows="3"  v-model="form.projectDesc"></el-input>
        </el-form-item>
        <el-form-item label="测试技能要求"  prop="techNeed">
          <el-input v-model="form.techNeed"></el-input>
        </el-form-item>
        <el-form-item label="工期"  prop="period">
          <el-input style="width:90%;margin-right: 5px;" v-model="form.period"></el-input>天
        </el-form-item>
        <el-form-item label="任务金额"  prop="price">
          <el-input style="width:90%;margin-right: 5px;"  v-model="form.price"></el-input>元
        </el-form-item>
        <el-form-item label="发布有效天数"  prop="validDays">
          <el-input style="width:90%;margin-right: 5px;"  v-model="form.validDays"></el-input>天
        </el-form-item>
        <el-form-item label="应征者要求"  prop="applicantType">
          <el-radio-group v-model="form.applicantType">
            <el-radio label="0">个人测试者</el-radio>
            <el-radio label="1">认证测试公司</el-radio>
            <el-radio label="2">个人测试者/认证测试公司</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="驻场要求" prop="onsiteType">
          <el-radio-group v-model="form.onsiteType">
            <el-radio v-for="item in this.onsiteTypes" :label="item.dictValue" :key="item.dictValue">{{item.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地域要求"  prop="area">
          <el-input v-model="form.area" v-show="false"></el-input>
          <v-distpicker  @province="onChangeProvince" @city="onChangeCity" :placeholders="placeholders" :province="province" :city="city" hide-area></v-distpicker>
        </el-form-item>
        <el-form-item label="联系人"  prop="contactName">
          <el-input v-model="form.contactName"></el-input>
        </el-form-item>
        <el-form-item label="联系电话"  prop="contactTel">
          <el-input v-model="form.contactTel"></el-input>
        </el-form-item>
        <el-form-item label="备注"  prop="remark">
          <el-input   type="textarea"
                      :rows="3" v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>

          <el-button type="info" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {publishTask} from "@/api/crowdsource/crowdsource";
  import { isMoney, checkMaxVal} from '@/utils/validate';
  export default {
    name: "CrowdsourceTask",
    data() {
      return {
        // 遮罩层
        loading: true,
        open: false,
        title:'发布众包任务',
        province: '北京市',
        city: '北京市',
        form: {
          testType:'0',
          area: this.province + '-' + this.city,
          onsiteType: '0',
          applicantType: '2'
        },
        placeholders: {
          province: '--- 省 ----',
          city: '--- 市 ---',
        },
        testTypes: [],
        onsiteTypes:[],
        // 表单校验
        rules: {
          testType: [
            { required: true, message: "测试类型不能为空", trigger: "change" }
          ],
          projectName: [
            { required: true, message: "项目名称不能为空", trigger: "change" },
            { max: 500, message: '最大长度为500个字符', trigger: 'change'}
          ],
          projectDesc: [
            { max: 5000, message: '最大长度为5000个字符', trigger: 'change'}
          ],
          techNeed: [
            { required: true, message: "测试技能要求不能为空", trigger: "change" },
            { max: 100, message: '最大长度为100个字符', trigger: 'change'}
          ],
          period: [
            { required: true, message: "工期不能为空", trigger: "change" },
            { validator: checkMaxVal, trigger: "change"},
            { type: 'number',
              message: '请输入正整数',
              trigger: 'change',
              transform (value) {
                if (!/^[1-9]\d*$/.test(value)) {
                  return true
                }else{
                }
              }
            }          ],
          price: [
            { required: true, message: "任务金额不能为空", trigger: "change" },
            { validator: isMoney, trigger: "change"}
          ],
          validDays: [
            {required: true, message: "发布有效天数不能为空", trigger: "change" },
            { validator: checkMaxVal, trigger: "change"},
            { type: 'number',
              message: '请输入正整数',
              trigger: 'change',
              transform (value) {
                if (!/^[1-9]\d*$/.test(value)) {
                  return true
                }else{
                }
              }
            }],
          applicantType: [
            {required: true, message: "应征者类型不能为空", trigger: "change" }
          ],
          onsiteType: [
            {required: true, message: "驻场要求不能为空", trigger: "change" }
          ],
          area: [
            {required: true, message: "地域要求省和市不能为空", trigger: "change" }
          ],
          contactName: [
            {required: true, message: "联系人不能为空", trigger: "change" } ,
            {max: 150, message: '最大长度为30个字符', trigger: 'change'}
          ],
          contactTel: [
            {required: true, message: "联系电话不能为空", trigger: "change" },
            {max: 11, message: '最大长度为11位', trigger: 'change'},
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "change"
            }
          ]
        }
      }
    },
    methods: {
      submit() {
        this.$refs["form"].validate(valid => {
          if (this.province !='' && this.city !='') {
            this.form.area = this.province + "-" + this.city;
          } else if (this.province !='' && this.city =='') {
            this.form.area = this.province;
          } else
            this.form.area = '';
          if (valid) {
            publishTask(this.form).then(response => {
              this.$notify({
                title: '申请已提交',
                message: '请在我的申请历史中查看审核状态',
                align: 'center',
                type: 'success'
              });
              this.open = false;
              this.resetForm("form");
              // this.$emit("handleSuccess");
            });
          }
        });
      },
      onChangeProvince(data) {
        if (data.value.indexOf('---') == -1)
         this.province = data.value;
        else
          this.province = '';
      },
      onChangeCity(data) {
        if (data.value.indexOf('---') == -1)
          this.city = data.value;
        else
          this.city = '';
      },
      setImgPath(value) {
        this.form.filePath = value;
      },
      openDialog(task) {
        if (task != null) {
          this.form = task;
          if (this.form.area != null && this.form.area != '') {
            if (this.form.area.split("-").length == 2) {
              this.province = this.form.area.split("-")[0];
              this.city = this.form.area.split("-")[1];
            } else if (this.form.area.split("-").length == 1) {
              this.province =  this.form.area.split("-")[0];
            }
          }
        }
        this.open = true;
      },
      cancel(){
        this.resetForm("form");
        this.open = false;
      }
    },
    created() {
      this.getDicts("sys_test_type").then(response => {
        this.testTypes = response.data;
      })
      this.getDicts("sys_onsite_type").then(response => {
        this.onsiteTypes = response.data;
      })
      // if (this.task != null && this.task != {}) {
      //   alert(this.task.projectName);
      //   this.form = this.task;
      // }
    },
    computed: {}
  }
</script>

<style scoped>
</style>
