<template>
  <div>
      <el-drawer title="发布众包任务" :visible.sync="taskdrawer" direction="rtl" :before-close="handleClose" class="crowdtask" >
          <el-divider></el-divider> 
          <el-form  :model="taskform" :rules="rules" ref="taskform" label-width="130px" style="margin-right:30px;margin-top:50px;">
              <el-form-item label="测试类型"  prop="testType">
                  <el-radio-group v-model="taskform.testType">
                      <el-radio v-for="(item,key) of testtypelist" :key="key" :label="item.dictValue">{{item.dictLabel}}</el-radio>
                  </el-radio-group>
              </el-form-item>
              <el-form-item label="项目名称"  prop="projectName">
                  <el-input   v-model="taskform.projectName"></el-input>
              </el-form-item>
              <el-form-item label="项目描述"  prop="projectDesc">
                  <el-input type="textarea" :rows="3"  v-model="taskform.projectDesc"></el-input>
              </el-form-item>
              <el-form-item label="测试技能要求"  prop="techNeed">
                  <el-input v-model="taskform.techNeed"></el-input>
              </el-form-item>
              <el-form-item label="工期"  prop="period">
                  <el-input style="width:93%" v-model="taskform.period"></el-input>&nbsp;&nbsp;天
              </el-form-item>
              <el-form-item label="金额"  prop="price">
                  <el-input style="width:93%"  v-model="taskform.price"></el-input>&nbsp;&nbsp;元
              </el-form-item>
              <el-form-item label="发布有效天数"  prop="validDays">
                  <el-input style="width:93%"  v-model="taskform.validDays"></el-input>&nbsp;&nbsp;天
              </el-form-item>
              <el-form-item label="竞标者要求"  prop="applicantType">
                  <el-radio-group v-model="taskform.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="taskform.onsiteType">
                  <el-radio v-for="(item,key) of onsiteTypelist" :key="key" :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
              </el-form-item>
             <el-form-item label="地域要求"  prop="area" class="divwrap">
                  <el-input v-model="taskform.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="taskform.contactName"></el-input>
              </el-form-item>
              <el-form-item label="联系电话"  prop="contactTel">
                  <el-input v-model="taskform.contactTel"></el-input>
              </el-form-item>
              <el-form-item label="备注"  prop="remark">
                  <el-input   type="textarea" :rows="3" v-model="taskform.remark"></el-input>
              </el-form-item>
              <el-form-item class="inforbtn" style="text-align:right">
                  <el-button style="background: #EBEDF0;color: #808080;border:none" size="mini" @click="cancel">取消</el-button>
                  <el-button  size="mini" @click="tasksubmit">提交</el-button>
              </el-form-item>
          </el-form>           
    </el-drawer>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import {publishTask} from "@/api/crowdsource/crowdsource";
  import {onsiteTypelist} from "@/const/dict/commondict";
  import {findByvalue, findLabelValueByProp} from "@/util/util";
  export default {
    name: "CrowdsourceTask",  
    data() {
      const checkMaxVal=(rule, value, callback)=> {
           if (value < 0 || value > 365) {
               callback(new Error('请输入[0,365]之间的数字'));
           } else {
               callback();
           }
       }
       const isMoney = (rule, value, callback) => {
           var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
           if (reg.test(value)) {
               if (value >= 100000000)
               callback(new Error('金额必须小于100000000'));
               else
               callback()
           } else {
               callback(new Error('请输入金额'));
           }
       }
      return {
        // 遮罩层
        taskdrawer: false,
        title:'发布众包任务',
        province: '北京市',
        city: '北京市',
        taskform: {
          testType:'0',
          area: this.province + '-' + this.city,
          onsiteType: '0',
          applicantType: '2'
        },
        //发布任务
                // taskform:{testType:'',projectName:'',projectDesc:'',techNeed:'',period:'',price:'',validDays:'',applicantType:'',onsiteType:'',area:'',contactName:'',
                //           contactTel:'',remark:''},
        placeholders: {
          province: '--- 省 ----',
          city: '--- 市 ---',
        },
        onsiteTypelist,//驻场需求
        // 表单校验
        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"
            }
          ]
        }
      }
    },
    created() {
    },
    computed:{
        ...mapGetters(['testtypelist','feescopelist','token','userinform'])
    },
    methods: {
      findByvalue, 
      findLabelValueByProp,
      tasksubmit() {
        this.$refs["taskform"].validate(valid => {
          if (this.province !='' && this.city !='') {
            this.taskform.area = this.province + "-" + this.city;
          } else if (this.province !='' && this.city =='') {
            this.taskform.area = this.province;
          } else
            this.taskform.area = '';
          if (valid) {
            // console.log('valid---',this.taskform)
            publishTask(this.taskform).then(response => {
              this.$notify({
                title: '申请已提交',
                message: '请在我的发布中查看审核状态',
                align: 'center',
                type: 'success'
              });
              this.taskdrawer = false;
              this.resetForm("taskform");
              // this.$emit("handleSuccess");
                setTimeout(() => {
                    this.$router.push('/console/myrelease')
                },1000);
            });
          }else{

          }
        });
      },
      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 = '';
      },
      
      //父组件调用的的方法
      openDialog(task) {
        if (task != null) {
          this.taskform = task;
          if (this.taskform.area != null && this.taskform.area != '') {
            if (this.taskform.area.split("-").length == 2) {
              this.province = this.taskform.area.split("-")[0];
              this.city = this.taskform.area.split("-")[1];
            } else if (this.taskform.area.split("-").length == 1) {
              this.province =  this.taskform.area.split("-")[0];
            }
          }
        }
        this.taskdrawer = true;
      },
      cancel(){
        this.resetForm("taskform");
        this.taskdrawer = false;
      },
      //关闭抽屉
      handleClose(done) {
          this.$confirm('确认关闭？').then(_ => {
              done();
          }).catch(_ => {});
      },
    },
  }
</script>

<style scoped>
    /* .crowdtask>>>.el-drawer{
        width:1620px;
        padding: 0 20px;
    } */
    /* .crowdtask>>>.el-drawer__container{
        width:130%;
    }  */
    .crowdtask>>>.el-drawer__header{
         margin-bottom:10px;
         font-weight:bold;
         color: #0969bd
    }
    .crowdtask>>>.el-divider--horizontal{
        margin:1px 0 0px 0;
        width:100%;
        /* position: fixed; */
        z-index:99;
    }
    .crowdtask>>>.el-radio{
        margin-bottom:20px;
        margin-top: 13px;
    }
    .inforbtn>>>.el-button{
        width: 90px;
        height: 34px;
        background: #0066EB;
        border-radius: 4px;
        color:#FFFFFF
    }
    .crowdtask>>>.el-form-item__label{
        color:#333333;
        font-weight:bold;
        /* margin-right:20px */
    }
    .crowdtask>>>.el-input__inner{
        width:90%
    }
     /* .crowdtask>>>.el-dialog__title{
        font-weight:bold;
        color: #0969bd
    } */
    .divwrap>>>.distpicker-address-wrapper select{
      margin-right:10px;
      margin-bottom:10px;
    }
    .divwrap>>>.distpicker-address-wrapper select .active{
       border:1px solid #666666
    }
    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    .el-drawer__body {
      overflow: auto;
    }
    /*2.隐藏滚动条，太丑了
    .el-drawer__container ::-webkit-scrollbar{
        display: none;
    }*/
</style>
