<template>
    <div :class="officialwebsite ? 'tytool' : 'notytool'">
        <div style="display: flex">
            <div style="display: flex; align-items: center; width: 150px">
                <div class="dvied"></div>
                <div style="font-weight: bold; color: #333333; font-size: 18px; margin-left: 10px">发布众包任务</div>
            </div>
            <!-- <div v-if="!officialwebsite" class="inforbtn" style="margin-left:950px;">
          <el-button icon="el-icon-arrow-left" style="width:100px"  @click="backroute">返回</el-button>
        </div> -->
        </div>
        <!-- <div>
      <CheckBox v-model="str" :checkList="tasktypelist"/>
    </div> -->

        <div class="conbg">
            <div style="width: 100%; background: #ffffff; box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1)">
                <div class="crowdtask">
                    <el-form :model="taskform" :rules="rules" ref="taskform" label-width="130px" label-position="top">
                        <div style="padding: 0px 40px">
                            <el-form-item label="任务测试类型" prop="testType" class="tes_type">
                                <!-- <el-radio-group v-model="taskform.testType">
                                    <el-radio
                                        border
                                        v-for="(item, key) of tasktypelist"
                                        :key="key"
                                        :label="item.id"
                                        >{{ item.name }}</el-radio
                                    >
                                </el-radio-group> -->
                                <CheckBox
                                    v-model="taskform.testType"
                                    :checkList="tasktypelist"
                                    :fieldName="['dictLabel', 'dictValue']"
                                />
                            </el-form-item>

                            <el-form-item label="任务名称" prop="projectName">
                                <el-input v-model="taskform.projectName" placeholder="请输入测试项目名称"></el-input>
                            </el-form-item>

                            <el-form-item label="需要人数" prop="needPerson">
                                <el-input v-model.number="taskform.needPerson" placeholder="请输入需要人数">
                                    <i slot="suffix" style="font-style: normal; margin-right: 10px">人</i></el-input
                                >
                            </el-form-item>

                            <el-form-item label="任务简介" prop="projectDesc" class="deidy">
                                <quill-editor
                                    class="ql-editor"
                                    v-model="editContent"
                                    ref="myQuillEditor"
                                    :options="editorOption"
                                    @blur="onEditorBlur($event)"
                                    @focus="onEditorFocus($event)"
                                    @change="onEditorChange($event)"
                                >
                                </quill-editor>
                            </el-form-item>
                            <el-form-item label="预计总工期" prop="period">
                                <div style="display: flex; justify-content: space-between">
                                    <el-input
                                        v-model="taskform.period"
                                        placeholder="您期望多长时间完成"
                                        class="timelong"
                                    >
                                        <!-- <el-select
                                                v-model="select"
                                                slot="append"
                                                placeholder="请选择"
                                            >
                                                <el-option label="天" value="1"></el-option>
                                                <el-option label="小时" value="2"></el-option>
                                            </el-select> -->
                                        <i slot="suffix" style="font-style: normal; margin-right: 10px">天</i>
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="有效天数">
                                <el-input
                                    v-model.number="taskform.validDays"
                                    placeholder="发布后在有效天数内可报名 ，不输入则视为长期有效"
                                >
                                    <i slot="suffix" style="font-style: normal; margin-right: 10px">天</i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="预算" prop="price">
                                <div style="display: flex; align-items: center">
                                    <el-input v-model="taskform.price" placeholder="您计划支付多少费用完成任务">
                                        <i slot="suffix" style="font-style: normal; margin-right: 10px">元</i>
                                    </el-input>
                                    <el-checkbox @change="checkChange" v-model="mianyicheck" style="margin-left: 20px"
                                        >面议</el-checkbox
                                    >
                                </div>
                            </el-form-item>

                            <el-form-item label="附件文档" prop="attachment">
                                <multi-upload
                                    v-model="taskform.attachment"
                                    :fileType="fileType"
                                    :serverAddr="materialServerAddr"
                                    @setImgPath="setImgPath"
                                    fileName="附件上传"
                                    :limit="3"
                                    ref="myuploadzu"
                                />
                            </el-form-item>

                            <!-- 要求 -->
                            <div class="titletwo">要求</div>
                            <el-form-item label="技能要求" prop="techNeed">
                                <el-input v-model="taskform.techNeed" placeholder="请输入任务所需的技能"></el-input>
                            </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>
                            <div class="divwrap">
                                <p>城市要求：</p>
                                <br />
                                <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>
                            </div>
                            <div class="titletwo">联系方式</div>
                            <!-- 联系方式 -->
                            <div>
                                <el-form-item label="联系人" prop="contactName" style="width: 48%">
                                    <div style="display: flex; justify-content: space-between">
                                        <el-input v-model="taskform.contactName" placeholder="请输入姓名"></el-input>
                                    </div>
                                </el-form-item>
                                <el-form-item label="联系电话" prop="contactTel" style="width: 48%">
                                    <div style="display: flex; justify-content: space-between">
                                        <el-input v-model="taskform.contactTel" placeholder="请输入手机号"></el-input>
                                    </div>
                                </el-form-item>
                            </div>
                        </div>
                        <!-- <div class="perfect">完善更多任务信息</div>
                        <div style="padding: 30px 20px 0 20px" class="morecla">
                            <el-form-item label="竞标者要求：" prop="applicantType">
                                <el-radio-group v-model="taskform.applicantType">
                                    <el-radio label="2">不限</el-radio>
                                    <el-radio label="0">个人</el-radio>
                                    <el-radio label="1">企业</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            
                            <el-form-item label="证书要求：" prop="zhengshu">
                                <el-radio-group v-model="taskform.zhengshu">
                                    <el-radio label="1">证书1</el-radio>
                                    <el-radio label="2">证书2</el-radio>
                                    <el-radio label="3">证书3</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            
                        </div> -->
                    </el-form>
                </div>
                <div class="inforbtn" style="margin-bottom: 40px; margin-top: 28px; text-align: center">
                    <el-button size="mini" @click="tasksubmit">立即提交</el-button>
                    <el-button style="background: #8e9aa7" size="mini" @click="tasksubmit(3)">存为草稿</el-button>
                </div>
            </div>
            <!-- <div class="crowdtask" style="width: 310px; height: 580px">
                <div style="font-weight: bold; color: #333333; font-size: 18px; margin-left: 10px">
                    相关众包任务
                </div>
                <div
                    style="
                        width: 100%;
                        height: 1px;
                        background-color: #ebebeb;
                        margin: 14px 0 19px 0;
                    "
                ></div>
                <div v-if="listcrowd.length > 0">
                    <div
                        v-for="(task, key) of listcrowd"
                        :key="key"
                        @click="crowdinform(task.taskId)"
                        style="
                            border-bottom: 1px solid #ebebeb;
                            display: flex;
                            margin: 20px 30px 20px 20px;
                            justify-content: space-between;
                        "
                    >
                        <img style="width: 86px; object-fit: contain" :src="task.icon" alt="" />
                        <div>
                            <p style="font-size: 17px; color: #1a1a1a; font-weight: 800">
                                {{ task.projectName | ellipsis }}
                            </p>
                            <p style="font-size: 14px; color: #666666; margin: -5px 0px">
                                任务状态:
                                {{ findByvalue(processStatuslist, parseInt(task.processStatus)) }}
                            </p>
                            <p style="font-size: 14px; color: #666666">
                                发布时间： {{ task.createTime.substr(0, 10) }}
                            </p>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { publishTask, getApply, homecrowdlist, editTask, getType } from '@/api/crowdsource/crowdsource'
import { onsiteTypelist } from '@/const/dict/commondict'
import { processStatuslist } from '@/const/dict/commondict'
import NonimageUpload from '@/page/common/NonimageUpload'
import MultiUpload from '@/page/common/myUpload'
import { findByvalue, findLabelValueByProp } from '@/util/util'
import { quillEditor } from 'vue-quill-editor' //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 图片大小缩放
import Quill from 'quill'
// import  { ImageExtend } from 'quill-image-extend-module'
// import  {ImageResize} from 'quill-image-resize-module';
// import { ImageDrop } from 'quill-image-drop-module'
// Quill.register('modules/imageDrop', ImageDrop)
// Quill.register('modules/imageResize', ImageResize);
// 设置字体大小
const fontSizeStyle = Quill.import('attributors/style/size') // 引入这个后会把样式写在style上
fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px']
Quill.register(fontSizeStyle, true)
// // 设置字体样式
const Font = Quill.import('attributors/style/font') // 引入这个后会把样式写在style上
const fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong']
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)

const AlignStyle = Quill.import('attributors/style/align')
AlignStyle.whitelist = ['right', 'center', 'justify']
Quill.register(AlignStyle, true)
// Quill.register('modules/ImageExtend', ImageExtend)

// // 工具栏
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{ align: [] }], // 对齐方式-----[{ align: [] }]
    // [{ size: ["12px","14px","16px","18px","20px","24px","28px","32px","36px",true] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    // [{ font: ["SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong",true] }], // 字体种类-----[{ font: [] }]
    [{ size: fontSizeStyle.whitelist }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{ font: fonts }], // 字体种类-----[{ font: [] }]
    [{ header: [1, 2, 3, 4, 5, 6, true] }], // 标题
    [{ direction: 'ltl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
    ['clean'], // 清除文本格式-----['clean']
    // ['link', 'image', 'video'], // 链接、图片、视频-----['link', 'image', 'video']
    // ['image'],
]

import CheckBox from '@/page/common/checkbox'
import mixin from '@/mixin/index.js'
export default {
    name: 'CrowdsourceTask',
    mixins: [mixin],
    data() {
        const checkMaxVal = (rule, value, callback) => {
            var reg = /^[0-9]*[1-9][0-9]*$/
            if (!reg.test(value)) {
                callback(new Error('请输入正整数'))
            } else {
                callback()
            }
        }
        const isMoney = (rule, value, callback) => {
            var reg = /^\d+(\.\d{0,1})?$/
            if (reg.test(value)) {
                if (value > 200000) callback(new Error('金额必须小于200000'))
                else callback()
            } else {
                callback(new Error('必须小于200000或保留一位小数'))
            }
        }
        const xiaoshu1 = (rule, value, callback) => {
            var reg = /^\d+(\.\d{0,1})?$/
            if (reg.test(value)) {
                callback()
            } else {
                callback(new Error('允许整数或保留一位小数'))
            }
        }
        return {
            select: '1',
            str: 'static,security',
            fileType: ['pdf', 'doc', 'docx', 'zip', 'rar'],
            materialServerAddr: '',
            processStatuslist, //任务状态
            editContent: '', //任务描述
            // 配置富文本编辑
            editorOption: {
                placeholder: '请在这里输入',
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                    },

                    // 图片拖拽
                    // imageDrop: true,
                    // imageResize: {
                    //     displayStyles: {
                    //       backgroundColor: 'black',
                    //       border: 'none',
                    //       color: 'white'
                    //     },
                    //     modules: ['Resize', 'DisplaySize', 'Toolbar']
                    // },
                },
            },

            title: '发布众包任务',
            province: '北京市',
            city: '北京市',
            // taskform: {
            //   testType:'0',
            //   area: this.province + '-' + this.city,
            //   onsiteType: '0',
            //   applicantType: '2'
            // },
            //发布任务
            taskform: {
                applyId: '',
                testType: 'static',
                projectName: '',
                attachment: [],
                projectDesc: '',
                techNeed: '',
                period: '',
                price: '',
                validDays: '',
                applicantType: '2', //去除字段用户类型
                onsiteType: '0',
                area: this.province + '-' + this.city,
                contactName: '',
                contactTel: '',
                remark: '',
                needPerson: null,
            },
            placeholders: {
                province: '--- 省 ----',
                city: '--- 市 ---',
            },
            // tasktypelist:[{name:'静态测试',id:'static'},{name:'功能测试',id:'function'},{name:'性能测试',id:'performance'},{name:'安全测试',id:'security'},
            //         {name:'配置项测试',id:'configuration'},{name:'可靠性测试',id:'reliability'}, {name:'研发任务',id:'development'},{name:'用人任务',id:'outsource'},{name:'其他',id:'other'}],
            // tasktype:[{name: '测试任务',id:'1'},{name:'研发任务',id:'2'},{name:'用人任务',id:'3'}],
            // testask:[{name: '三方测试',id:'1'},{name:'内部测试',id:'2'}],
            onsiteTypelist, //驻场需求
            // 表单校验
            rules: {
                testType: [{ required: true, message: '任务类型不能为空', trigger: 'change' }],
                ishide: [{ required: true, message: '请选择是否隐藏您的联系方式', trigger: 'change' }],
                projectName: [
                    { required: true, message: '项目名称不能为空', trigger: 'change' },
                    { max: 500, message: '最大长度为500个字符', trigger: 'change' },
                ],
                needPerson: [
                    { required: true, message: '需要人数不能为空', trigger: 'blur' },
                    { validator: checkMaxVal, trigger: 'blur' },
                ],
                //   projectDesc: [
                //     { max: 5000, message: '最大长度为5000个字符', trigger: 'change'}
                //   ],
                techNeed: [
                    { required: true, message: '技能要求不能为空', trigger: 'change' },
                    { max: 100, message: '最大长度为100个字符', trigger: 'change' },
                ],
                period: [
                    { required: true, message: '工期不能为空', trigger: 'blur' },
                    { validator: checkMaxVal, trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '预算费用不能为空', trigger: 'blur' },
                    { validator: isMoney, trigger: 'blur' },
                ],
                validDays: [{ validator: checkMaxVal, trigger: 'blur' }],
                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',
                    },
                ],
            },
            listcrowd: [],
            officialwebsite: true, //是否官网
            basetarget: process.env.VUE_APP_BASE_TARGET,
            // 面议
            mianyicheck: false,
        }
    },
    filters: {
        ellipsis(value) {
            //value就是当前值tool.toolDesc
            if (!value) return ''
            if (value.length > 9) {
                return value.slice(0, 8) + '...'
            }
            return value
        },
    },
    components: { quillEditor, NonimageUpload, MultiUpload, CheckBox },
    created() {
        // console.log('taskform.attachment',this.taskform.attachment)
        let applyId = this.$route.query.applyId
        if (applyId) {
            getApply(applyId).then((response) => {
                // console.log('任务信息：',response.data)
                let task = response.data
                if (task != null) {
                    // this.taskform = task;
                    let {
                        applyId,
                        projectName,
                        testType,
                        projectDesc,
                        attachment,
                        techNeed,
                        validDays,
                        period,
                        price,
                        contactName,
                        contactTel,
                        applicantType,
                        onsiteType,
                        needPerson,
                    } = task
                    let imglist = []
                    if (attachment) {
                        imglist = attachment.split(',')
                        // imglist.push(attachment)
                        // 回填文件
                        this.$refs.myuploadzu.setFile(imglist)
                    }
                    if (!price) {
                        this.mianyicheck = true
                    }
                    this.taskform = {
                        applyId,
                        projectName,
                        testType,
                        projectDesc,
                        attachment: imglist,
                        techNeed,
                        validDays,
                        period,
                        price,
                        contactName,
                        contactTel,
                        applicantType,
                        onsiteType,
                        needPerson,
                    }
                    // console.log('修改前任务信息：',this.taskform)
                    // this.taskform.attachment='https://www.keyitest.cn/prod-api/profile/upload/2024/02/26/64307788-ae73-41cc-8405-bbb3a3b217bc.docx'
                    this.editContent = this.taskform.projectDesc
                    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]
                        }
                    }
                }
            })
        }
    },
    mounted() {
        let currentrout = this.$route.path
        if (currentrout !== '/crowdsourcing/publishtasks') {
            this.officialwebsite = false
        }
        this.$nextTick(() => {
            this.taskform.projectDesc = this.escapeStringHTML(this.editContent)
        })
        // this

        // 相关众包
        // homecrowdlist()
        //     .then((response) => {
        //         // console.log('response----',response)
        //         this.listcrowd = response.rows
        //         if (this.listcrowd.length > 4) {
        //             this.listcrowd = this.listcrowd.splice(0, 4)
        //         }
        //         this.total = response.total
        //     })
        //     .catch((err) => {
        //         // console.log('异常1',err)
        //     })
    },

    computed: {
        ...mapGetters(['testtypelist', 'feescopelist', 'token', 'userinform']),
    },
    methods: {
        // 面议变化
        checkChange(val) {
            if (val) {
                this.taskform.price = 0
            }
            this.$refs['taskform'].clearValidate(['price'])
        },
        findByvalue,
        findLabelValueByProp,
        openurl(url) {
            this.$message.success('下载成功')
            window.location.href = url
        },
        setImgPath(value) {
            if (value) {
                // console.log('url---',value)
                this.taskform.attachment[0] = value
                // this.addeditfaform.equipModel.push(value);
                // console.log('url上传的地址---',this.taskform.attachment)
            }
        },
        //详情页
        crowdinform(id) {
            if (this.officialwebsite) {
                this.$router.push(`./crowdsourcing/crowddetails?id=${id}`)
            } else {
                this.$router.push(`/console/crowdinform?id=${id}`)
            }
        },
        tasksubmit(payload) {
            // this.$router.push("/console/myrelease?tabtype=1")
            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)
                    // let attachment = ''

                    // if ((this.taskform.attachment, length > 0 && this.taskform.attachment[0].indexOf('http') == 0)) {
                    //   // console.log('11111',)
                    //   attachment = this.taskform.attachment[0]
                    // } else if (this.taskform.attachment.length == 0) {
                    //   // console.log('22222',)
                    //   attachment = ''
                    // } else {
                    //   if (this.taskform.attachment[0].indexOf('apihttp') > 0) {
                    //     // console.log('444',this.taskform.attachment[0])
                    //     attachment = this.taskform.attachment[0].slice(32)
                    //   } else {
                    //     // console.log('555',)
                    //     attachment = process.env.BASE_TARGET + this.taskform.attachment[0]
                    //   }
                    // }
                    let attachment = ''
                    if (this.taskform.attachment.length) {
                        attachment = this.taskform.attachment
                            .map((it) => {
                                if (it.includes('http')) {
                                    return it
                                } else {
                                    return this.basetarget + it
                                }
                            })
                            .join(',')
                    }
                    let data = {
                        applyId: this.taskform.applyId,
                        projectName: this.taskform.projectName,
                        testType: this.taskform.testType,
                        projectDesc: this.taskform.projectDesc,
                        attachment,
                        techNeed: this.taskform.techNeed,
                        validDays: this.taskform.validDays,
                        period: this.taskform.period,
                        price: this.taskform.price,
                        contactName: this.taskform.contactName,
                        contactTel: this.taskform.contactTel,
                        applicantType: this.taskform.applicantType,
                        onsiteType: this.taskform.onsiteType,
                        area: this.taskform.area,
                        needPerson: this.taskform.needPerson,
                        status: payload && payload == 3 ? payload : null,
                    }
                    // console.log('data---',data)
                    // return;
                    if (this.taskform.applyId) {
                        // this.$router.push("/console/myrelease?tabtype=1")
                        editTask(data).then((response) => {
                            if (payload == 3) {
                                this.$notify({
                                    title: '已保存为草稿',
                                    message: '请在我的发布中查看',
                                    align: 'center',
                                    type: 'success',
                                })
                            } else {
                                this.$notify({
                                    title: '修改已提交',
                                    message: '请在我的发布中查看审核状态',
                                    align: 'center',
                                    type: 'success',
                                })
                            }

                            this.resetForm('taskform')
                            // this.$emit("handleSuccess");
                            setTimeout(() => {
                                this.$router.push('/console/myrelease?tabtype=1')
                            }, 1000)
                        })
                    } else {
                        publishTask(data).then((response) => {
                            this.$notify({
                                title: '申请已提交',
                                message: '请在我的发布中查看审核状态',
                                align: 'center',
                                type: 'success',
                            })
                            this.resetForm('taskform')
                            // this.$emit("handleSuccess");
                            setTimeout(() => {
                                this.$router.push('/console/myrelease?tabtype=1')
                            }, 1000)
                        })
                    }
                } else {
                }
            })
        },
        // ========================富文本========================
        onEditorReady(editor) {
            // 准备编辑器
        },
        onEditorBlur() {}, // 失去焦点事件
        onEditorFocus() {}, // 获得焦点事件
        // 内容改变事件
        onEditorChange() {
            this.taskform.projectDesc = this.escapeStringHTML(this.editContent)
            // console.log('输出结果',this.taskform.projectDesc)
        },
        // 转码
        escapeStringHTML(content) {
            content = content.replace(/&lt;/g, '<')
            content = content.replace(/&gt;/g, '>')
            return content
        },
        // ========================富文本END========================
        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 = ''
        },

        cancel() {
            this.resetForm('taskform')
        },
        backroute() {
            this.$router.push('/console/myrelease?tabtype=1')
        },
    },
}
</script>
<style  scoped>
.crowdtask >>> .el-form-item {
    margin-bottom: 10px;
}
.timelong >>> .el-input-group__append {
    width: 36px !important;
}
.crowdtask >>> .quill-editor {
    padding: 0 !important;
    margin-top: 10px !important;
}
.notytool {
    margin-left: 50px;
}
.crowdtask >>> .quill-editor /deep/ .ql-container {
    padding: 40px 0 0 80px;
    min-height: 490px;
}
.crowdtask >>> .ql-container {
    min-height: 200px;
}
.titletwo {
    height: 40px;
    background: #f7f7f7;
    line-height: 40px;
    padding-left: 20px;
    width: 1200px;
    transform: translateX(-40px);
    box-sizing: border-box;
    font-weight: 500;
    font-size: 17px;
    color: #000000;
}
.tytool {
    width: 1200px;
    margin: 30px auto;
}
.dvied {
    width: 4px;
    height: 18px;
    background: #0066eb;
}
.conbg {
    display: flex;
    justify-content: space-between;
    margin-top: 27px;
    width: 1200px;
}
.crowdtask {
    padding: 20px 0px;
    width: 808px;
}
.crowdtask >>> .el-form-item__label {
    color: #000000;
    font-weight: bold;
    font-size: 18px;
}
.tes_type >>> .el-radio.is-bordered.is-checked {
    width: 110px;
    height: 34px;
    background: #ecf3fd;
    border: none;
    border-radius: 2px;
    margin-right: 20px;
    margin-bottom: 10px;
}
.tes_type >>> .el-radio.is-bordered + .el-radio.is-bordered {
    margin-left: 0px;
}
.tes_type >>> .el-radio.is-bordered {
    width: 110px;
    height: 34px;
    border-radius: 2px;
    border: 1px solid #ebebeb;
    line-height: 34px;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 10px;
}
.tes_type >>> .el-radio__label {
    font-size: 15px;
    padding-left: 0px;
}
.el-radio.is-bordered {
    padding: 0;
}
.tes_type >>> .el-radio__inner {
    display: none;
}
.deidy >>> .el-form-item__label {
    margin-bottom: -32px;
}
.deidy >>> .el-form-item__label:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
}
.perfect {
    width: 100%;
    height: 46px;
    background: #f6f6f6;
    font-weight: bold;
    font-size: 17px;
    color: #333333;
    line-height: 46px;
    text-align: center;
}
.inforbtn >>> .el-button {
    width: 284px;
    height: 44px;
    background: #0066eb;
    border-radius: 4px;
    color: #ffffff;
    font-size: 15px;
}
.morecla >>> .el-form-item {
    display: flex;
}
.morecla >>> .el-form-item__label {
    color: #333333;
    font-weight: 600;
    font-size: 16px;
    text-align: left;
    width: 120px;
}
.divwrap {
    margin-bottom: 20px;
}
.divwrap p {
    color: #000000;
    font-size: 18px;
    width: 120px;
    margin-left: 10px;
    margin-right: -10px;
    font-weight: bold;
    margin: 0;
}
</style>
<style>
.ql-editor {
    /* min-height: 150px; */
    /*  */
    /* margin-left: -15px; */
}
.ql-snow .ql-tooltip[data-mode='link']::before {
    content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode='video']::before {
    content: '请输入视频地址:';
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
    content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    content: '32px';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
    content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
    content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
    content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
    content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
    content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
    content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '默认';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
    content: '宋体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Microsoft-YaHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Microsoft-YaHei']::before {
    content: '微软雅黑';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
    content: '楷体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
    content: '仿宋';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
    content: '黑体';
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #ebebeb;
}
.ql-toolbar.ql-snow {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #ebebeb;
}
.ql-snow .ql-stroke,
.ql-snow .ql-picker {
    /* color: #999;
    stroke: #999; */
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    /* fill: #999; */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
    content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
    content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
    content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
    content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
    content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='28px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='28px']::before {
    content: '28px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='32px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='32px']::before {
    content: '32px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
    content: '36px';
}
.ql-container {
    font-size: 14px;
}
</style>
