<template>
    <div class="home_page">
        <div class="task_info">
            <div class="task_info_title">
                <div class="task_name">{{lastTaskInfo.name}}</div>
                <div class="add_task" @click="openAddTaskDialog">新建任务</div>
            </div>
            <div class="task_info_num">
                <div class="info_num_item">
                    <div class="num">{{addCommas(lastTaskInfo.lingCount)}}</div>
                    <div class="label">拨打数量</div>
                </div>
                <div class="info_num_item">
                    <div class="num">{{((lastTaskInfo.answerRate||0)*100).toFixed(2)*100/100}}%</div>
                    <div class="label">接通率</div>
                </div>
                <div class="info_num_item">
                    <div class="num">{{addCommas(lastTaskInfo.highIntentionCount)}}</div>
                    <div class="label">高意向数量</div>
                </div>
            </div>
        </div>
        <div class="page_content">
            <div class="table_content">
                <div class="table_header">
                    <div class="table_label">历史记录</div>
                    <div class="table_filter">
                        <div class="filter_item">
                            <div class="status_list">
                                <div class="status_item" :class="{'current_status':currentStatus===undefined}" @click="handleChangeStatus(undefined)">全部</div>
                                <div class="status_item" :class="{'current_status':currentStatus===10}" @click="handleChangeStatus(10)">已完成</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--表格-->
                <Table row-key="id" :loading="loading" :columns="tableColumns" :data="tableData"></Table>
                <!-- 分页 -->
                <Page :total="total" :current="currentPage" show-total show-sizer @on-change="handleCurrentChange" @on-page-size-change="handlePageSize" :page-size-opts="pageSizeOpts" />
            </div>
        </div>
        <Modal class="task_dialog" v-model="showAddTaskDialog" width="466" :closable="false" footer-hide :transfer="false">
            <div v-if="createStep===2" class="phone_header" slot="header">
                <div class="label">添加执行对象</div>
                <div class="import_btn" @click="openImportDialog">批量导入</div>
            </div>
            <div v-else-if="createStep===3" class="test_header" slot="header">话术测试</div>
            <div v-else-if="createStep===4" class="test_header" slot="header">选择不满意原因</div>
            <div v-else slot="header">
                {{reason?'任务调整':'创建任务'}}
            </div>
            <div class="dialog_cont">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110">
                    <template v-if="createStep===1">
                        <FormItem v-if="!reason" label="任务名称：" prop="name">
                            <Input v-model="formValidate.name" :maxlength="12" placeholder="请输入字段名称" />
                        </FormItem>
                        <FormItem v-if="reason!==2" label="电访任务类型：" prop="typeId">
                            <Select v-model="formValidate.typeId" placeholder="请选择电访任务类型" @on-change="typeIdChange">
                                <Option v-for="(item,index) in taskType" :key="index" :value="item.value" :label="item.text">{{item.text}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem v-if="reason!==1" label="任务执行时间：" prop="planTime">
                            <DatePicker :value="formValidate.planTime" placement="bottom-end" :clearable="false" :transfer="true" :options="dateOption" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="请选择任务执行时间" @on-change="changePlanTime" />
                        </FormItem>
                    </template>
                    <template v-if="createStep===2">
                        <div class="phone_list">
                            <div class="phone_item" v-for="(item, index) in formValidate.phoneList" :key="index">
                                <FormItem label="" :label-width="0" :prop="`phoneList.${index}.phone`" :rules="ruleValidate['phoneList.*.phone']">
                                    <Input v-model="item.phone" :maxlength="11" placeholder="请输入手机号"></Input>
                                </FormItem>
                                <div class="close_icon" @click="removeItem(index)"></div>
                            </div>
                            <div v-if="!formValidate.phoneList.length" class="add_box">
                                <div class="add_btn" @click="addItem"><Icon type="md-add" size="14" color="#35E89A" />添加</div>
                            </div>
                            <div v-else class="add_item">
                                <div class="add_btn" @click="addItem"><Icon type="md-add" size="14" color="#999999" />添加</div>
                            </div>
                        </div>
                        <div v-if="phoneErr" class="phone_err">{{phoneErr}}</div>
                    </template>
                    <template v-if="createStep===3">
                        <div class="phone_test_page">
                            <!-- <div v-if="phoneLoading" class="loading_phone">
                                <img class="ai_img" src="/img/ai_img.png"></img>
                                <div class="name">测试电话</div>
                            </div> -->
                            <!-- v-if="callPlatform==='YI_WISE'" -->
                            <div class="phone_test_tips">将在30秒内拨电话给您<br>请耐心等待……</div>
                            <!-- <iframe v-else :src="`/webphone.html?ws=wss&ip=test.webphone.noai.top&port=1360&extnumber=${user.phone}&platform=web`" style="width: 100%;height: 100%;"></iframe> -->
                        </div>
                    </template>
                    <template v-if="createStep===4">
                        <div class="reason_list">
                            <div class="reason_item" :class="{'s_reason':reason===item.key}" v-for="(item,index) in reasonList" :key="index" @click="onReason(item.key)">{{item.text}}</div>
                        </div>
                    </template>
                </Form>
            </div>
            <div class="btn_group">
                <div v-if="createStep===4" class="confirm_btn" @click="confirmReason">确定</div>
                <template v-else>
                    <div v-if="createStep!==1||reason" class="cancel_btn" @click="onPrev">上一步</div>
                    <div class="confirm_btn" @click="handleOk('formValidate')">{{reason && (reason === 3 || reason === 2)?'开始执行任务':'下一步'}}</div>
                </template>
            </div>
        </Modal>
        <Modal class="task_dialog" v-model="showImportDialog" width="400" :closable="false" footer-hide :transfer="false">
            <div class="test_header" slot="header">批量导入</div>
            <Input v-model="importVal" placeholder="请按照以下格式粘贴，用逗号隔开电话号码如：13800138000,13812341234,18912341234" type="textarea" :autosize="{ minRows: 6, maxRows: 6 }" />
            <div class="btn_group">
                <div class="cancel_btn" @click="showImportDialog=false">取消</div>
                <div class="confirm_btn" @click="onImport">导入</div>
            </div>
        </Modal>
        <Modal class="task_dialog" v-model="showConfirmDialog" width="400" :closable="false" footer-hide :transfer="false">
            <div slot="header"></div>
            <div class="confirm_tips">是否满意本次对话？</div>
            <div class="btn_group">
                <div class="cancel_btn" @click="onCancel">不满意</div>
                <div class="confirm_btn" @click="onConfirm">满意，开始执行任务</div>
            </div>
        </Modal>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import userBox from '@/pages/call/components/userBox'
import tablePageMixin from '_m/tablePage.mixin'
import { timeFormat, addCommas } from '@/utils'
export default {
    name: 'home',
    mixins: [tablePageMixin],
    components: {
        userBox,
    },
    data () {
        return {
            loading: false,
            tableData: [],
            currentStatus: undefined,
            lastTaskInfo: {},
            addCommas: addCommas,
            showAddTaskDialog: false,
            taskType: [],
            formValidate: {
                name: '',
                typeId: '',
                planTime: timeFormat(new Date().getTime() + 10 * 60 * 1000),
                phoneList: [],
                callUserTestId: '',
            },
            ruleValidate: {
                name: [
                    { required: true, message: '请输入任务名称', trigger: 'blur' }
                ],
                typeId: [
                    { type: 'number', required: true, message: '请选择电访任务类型', trigger: 'change' }
                ],
                planTime: [
                    { type: 'string', required: true, message: '请选择任务执行时间', trigger: 'change' }
                ],
                'phoneList.*.phone': [
                    { required: true, message: '请输入手机号' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
                ],
                'phoneList.*.name': [
                    { required: true, message: '请输入姓名' },
                    { minLength: 2, maxLength: 10, message: '姓名长度2-10个字符' }
                ],
                'phoneList.*.gender': [
                    { required: true, message: '请选择性别' }
                ]
            },
            dateOption: {
                disabledDate (date) {
                  return date.valueOf() < new Date() - 24 * 60 * 60 * 1000 + 10 * 60 * 1000
                }
            },
            createStep: 1,
            showImportDialog: false,
            showConfirmDialog: false,
            importVal: '',
            callPlatform: '',
            phoneErr: '',
            phoneLoading: false,
            reasonList: [
                { key: 1, text: '1.执行的话术不对' },
                { key: 2, text: '2.我需要修改执行时间' },
                { key: 3, text: '3.我需要修改执行对象' }
            ],
            reason: null,
        }
    },
    computed: {
        ...mapState({
            user: (state) => state.user, //
        }),
        tableColumns () {
            let columns = [
                {
                    title: '任务名称',
                    minWidth: 160,
                    key: 'name',
                    align: 'left',
                },
                {
                    title: '执行话术',
                    minWidth: 130,
                    key: 'type',
                    align: 'left',
                    render: (h, params) => {
                        const { row } = params
                        let text = row.type.name
                        return h('span', undefined, text)
                    },
                },
                {
                    title: '时间',
                    minWidth: 150,
                    key: 'planTime',
                    align: 'center',
                    render: (h, params) => {
                        const { row } = params
                        let text = timeFormat(row.planTime, 'yyyy-MM-dd hh:mm')
                        return h('span', undefined, text)
                    },
                },
                {
                    title: '状态',
                    minWidth: 90,
                    key: 'status',
                    align: 'center',
                    render: (h, params) => {
                        const { row } = params
                        let text = row.status === 2 ? '已执行' : (row.status === 1 ? '执行中' : (row.status === 0 ? '待执行' : row.status === 10 ? '已完成' : '已失效'))
                        let color = row.status === 2 ? '#26B978' : (row.status === 1 ? '#26B978' : (row.status === 0 ? '#E28F48' : row.status === 10 ? '#1677FF' : '#999999'))
                        let backgroundColor = row.status === 2 ? '#A3FFD7' : (row.status === 1 ? '#A3FFD7' : (row.status === 0 ? '#FFEFBA' : row.status === 10 ? '#EBF4FF' : '#E6E6E6'))
                        return h('span', {
                            style: {
                                fontWeight: 400,
                                fontSize: '14px',
                                color: color,
                                background: backgroundColor,
                                padding: '0 6px',
                                borderRadius: '6px',
                                lineHeight: '24px',
                                height: '24px'
                            },
                        }, text)
                    },
                },
                {
                    title: '操作',
                    align: 'left',
                    minWidth: 120,
                    render: (h, params) => {
                        const array = []
                        const { row, index } = params
                        array.push(h('div', {
                            style: {
                                margin: '5px 10px 5px 0',
                                color: '#24D688',
                                cursor: 'pointer',
                                display: 'inline-block',
                                padding: '0 15px',
                                lineHeight: '17px',
                            },
                            on: {
                                click: (event) => {
                                    this.handleDetail(row)
                                }
                            }
                        }, '详情'))
                        if (row.status === 0) {
                            array.push(h('div', {
                                style: {
                                    margin: '5px 10px 5px 0',
                                    color: '#FF4E4E',
                                    cursor: 'pointer',
                                    display: 'inline-block',
                                    padding: '0 15px',
                                    lineHeight: '17px',
                                },
                                on: {
                                    click: (event) => {
                                        this.handleDelete(row)
                                    }
                                }
                            }, '删除'))
                        }
                        if (row.status === 10) {
                            array.push(h('div', {
                                style: {
                                    margin: '5px 10px 5px 0',
                                    color: '#1677FF',
                                    cursor: 'pointer',
                                    display: 'inline-block',
                                    padding: '0 15px',
                                    lineHeight: '17px',
                                },
                                on: {
                                    click: (event) => {
                                        this.handleExport(row.id)
                                    }
                                }
                            }, '导出'))
                        }
                        return h('div', array)
                    }
                }
            ]
            return columns
        }
    },
    watch: {
        showAddTaskDialog (val) {
            if (!val) {
                window.removeEventListener('message', this.messageHandler, false)
            }
        },
        createStep (val, oval) {
            if (oval === 3) {
                window.removeEventListener('message', this.messageHandler, false)
            }
        }
    },
    created () {
        this.initData()
        this.getLastTask()
    },
    methods: {
        handleExport (id) {
            this.$http.post(`/call/api/task/phone/export`, {
                intentionNames: [],
                taskId: id,
                page: 1,
                pageCount: 1000,
            }).then(response => {
                const { code, data, msg } = response
                if (code === 1) {
                    let dataUrl = 'https://' + process.env.VUE_APP_FILELOAD + '.cos.ap-guangzhou.myqcloud.com/' + data.filePyth
                    let alink = document.createElement('a')
                    fetch(dataUrl, { responseType: 'blob' }).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
                        alink.href = URL.createObjectURL(blob)
                        alink.download = data.filePyth.substr(data.filePyth.lastIndexOf('/') + 1)
                        document.body.appendChild(alink)
                        alink.click()
                    })
                } else {
                    this.$Notice.warning({
                        desc: msg
                    })
                }
            }).finally(() => {
            })
        },
        handleChangeStatus (val) {
            this.currentStatus = val
            this.handleSearch()
        },
        handleSearch () {
            this.currentPage = 1
            this.initData()
        },
        initData () {
            this.$http.post(`/call/api/task/findListByPage?page=${this.currentPage}&pageCount=${this.pageSize}`, {
                page: this.currentPage,
                pageCount: this.pageSize,
                status: this.currentStatus,
            }).then((response) => {
                let { data, code, msg } = response
                if (code === 1) {
                    this.tableData = data.records
                    this.total = data.total
                } else {
                    this.$Notice.warning({
                        desc: msg
                    })
                }
            })
        },
        getLastTask () {
            this.$http.get(`/call/api/task/lastTask`).then((response) => {
                let { data, code, msg } = response
                if (code === 1) {
                    if (data) {
                        this.lastTaskInfo = data
                    } else {
                        this.lastTaskInfo = {
                            id: 1,
                            name: '任务名称任务名称',
                            lingCount: 9999,
                            answerRate: 0.8,
                            highIntentionCount: 999,
                            type: {
                                name: '话术1'
                            },
                            planTime: '2025-7-9 19:00',
                            status: 1
                        }
                    }
                } else {
                    this.$Notice.warning({
                        desc: msg
                    })
                    this.lastTaskInfo = {
                        id: 1,
                        name: '任务名称任务名称',
                        lingCount: 9999,
                        answerRate: 0.8,
                        highIntentionCount: 999,
                        type: {
                            name: '话术1'
                        },
                        planTime: '2025-7-9 19:00',
                        status: 1
                    }
                }
            })
        },
        getTaskType() {
            this.$http.post(`/call/api/call-task-type/findListByPage?page=1&pageCount=1000`, {}).then((response) => {
                let { data, code, msg } = response
                if (code === 1) {
                    this.taskType = (data.records || []).map(item => {
                        return {
                            value: item.id,
                            text: item.name,
                            callPlatform: item.callPlatform
                        }
                    })
                } else {
                    this.$Notice.warning({
                        desc: msg
                    })
                }
            })
        },
        typeIdChange (e) {
            this.taskType.forEach(item => {
                if (item.value === e) {
                    this.callPlatform = item.callPlatform
                }
            })
        },
        changePlanTime (time) {
           this.formValidate.planTime = timeFormat(time)
        },
        openAddTaskDialog () {
            this.createStep = 1
            this.formValidate = {
                name: '',
                typeId: '',
                planTime: timeFormat(new Date().getTime() + 10 * 60 * 1000),
                phoneList: []
            }
            this.reason = null
            this.showImportDialog = false
            this.importVal = ''
            this.callPlatform = ''
            this.phoneErr = ''
            this.phoneLoading = false
            this.getTaskType()
            this.showAddTaskDialog = true
        },
        openImportDialog () {
            this.importVal = ''
            this.showImportDialog = true
        },
        onPrev () {
            if (this.createStep>1) {
                this.createStep--
            }
            if (this.reason) {
                this.createStep = 4
            }
        },
        messageHandler(event) {
            console.log('Received message from iframe:', event.data)
            if (event.data.type === 'hangup') {
                //this.createStep = 4
            }
            if (event.data.type === 'ring') {
            }
            if (event.data.type === 'reg') {
                this.initWebphone()
            }
        },
        initWebphone () {
            this.phoneLoading = false
            this.$http.post(`/call/api/call-user-call-test-record/add`, {
                typeId: this.formValidate.typeId,
                taskName: this.formValidate.name
            }).then((response) => {
                let { data, code, msg } = response
                if (code === 1) {
                    this.formValidate.callUserTestId = data.id
                } else {
                    this.$Notice.warning({
                        desc: msg
                    })
                    this.createStep--
                }
            }).finally(() => {

            })
        },
        handleOk(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.phoneErr = ''
                    if (this.createStep === 3) {
                        this.showConfirmDialog = true
                        return
                    }
                    if (this.createStep < 3) {
                        if (this.reason) {
                            if (this.reason === 3 || this.reason === 2) {
                                this.onConfirm()
                            }
                            if (this.reason === 1) {
                                this.reason = null
                                this.createStep = 3
                            }
                        } else {
                            this.createStep++
                        }
                    }
                    if (this.createStep === 3) {
                        // this.phoneLoading = false
                        // if (this.callPlatform !== 'YI_WISE') {
                        //     this.phoneLoading = true
                        //     window.addEventListener('message', this.messageHandler, false)
                        // } else {
                            this.initWebphone()
                        // }
                    }
                } else {
                    if (this.createStep === 2) {
                        this.phoneErr = '*请核对已标红的手机号'
                    }
                }
            })
        },
        onReason(key) {
            this.reason = key
        },
        confirmReason () {
            if (this.reason === 3) {
                this.createStep = 2
            } else {
                this.createStep = 1
            }
        },
        onCancel () {
            this.showConfirmDialog = false
            this.reason = 1
            this.createStep = 4
        },
        onConfirm () {
            this.$http.post(`/call/api/task/add`, this.formValidate).then((response) => {
                let { data, code, msg } = response
                if (code === 1) {
                    this.$Notice.success({
                        title: '创建成功',
                    })
                    this.showConfirmDialog = false
                    this.showAddTaskDialog = false
                    this.getLastTask()
                    this.currentStatus = undefined
                    this.handleSearch()
                } else {
                    this.$Notice.warning({
                        desc: msg
                    })
                }
            }).finally(() => {

            })
        },
        addItem() {
            this.formValidate.phoneList.push({ phone: null, name: null, gender: null })
        },
        removeItem (index) {
            if (this.formValidate.phoneList.length > 1) {
                this.formValidate.phoneList.splice(index, 1)
            } else {
                this.$Notice.warning({
                    desc: '至少保留一项'
                })
            }
        },
        convertPhoneNumbers(input, maxlength = 1000) {
            // 使用正则表达式分割字符串（支持逗号、中文逗号、空格等分隔符）
            const phoneRegex = /1[3-9]\d{9}/g
            let phones = input.match(phoneRegex)
        //    const phones = input.split(/[,，\s]+/)
            // .filter(phone => {
        //        // 验证是否为有效的手机号（11位且以1开头）
        //        return /^1[3-9]\d{9}$/.test(phone);
        //    })
            if (!phones) {
                phones = []
            }
            return phones.slice(0, maxlength).map(phone => ({
                phone: phone,
                name: null,
                gender: null
            }))
        },
        onImport() {
            const phones = this.convertPhoneNumbers(this.importVal, 1000)
            if (!phones || !phones.length) {
                this.$Notice.warning({
                    desc: '识别失败'
                })
                return
            }
            if (this.formValidate.phoneList.length === 1 && !this.formValidate.phoneList[0].phone && !this.formValidate.phoneList[0].name && !this.formValidate.phoneList[0].gender) {
                this.formValidate.phoneList = phones
            } else {
                phones.forEach((item) => {
                    this.formValidate.phoneList.push(item)
                })
            }
            this.showImportDialog = false
        },
        handleDetail (row) {
            this.$router.push({
                path: '/taskDetail',
                query: { id: row.id }
            })
        },
        handleDelete(row) {
            this.$Modal.confirm({
                title: '提示',
                content: `<div class="confirm_cont text_conter">${row.name}将失效</div>`,
                onOk: () => {
                    this.$http.post(`/call/api/task/del?id=${row.id}`, {}).then((response) => {
                        let { code, msg } = response
                        if (code === 1) {
                            this.$Notice.success({
                                title: msg,
                            })
                            this.handleSearch()
                        } else {
                            this.$Notice.warning({
                                desc: msg
                            })
                        }
                    })
                }
            })
        },
    },
    deactivated () {
        window.removeEventListener('message', this.messageHandler, false)
    },
    destroyed () {
        window.removeEventListener('message', this.messageHandler, false)
    }
}
</script>
<style lang="less" scoped>
.home_page{
    min-width: 680px;
    .task_info{
        margin-bottom: 24px;
        .task_info_title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .task_name{
                font-weight: bold;
                font-size: 20px;
                color: #222222;
                line-height: 29px;
                background: url('/img/task_name_icon.png') no-repeat left center/29px 29px;
                padding-left: 37px;
            }
            .add_task{
                width: 116px;
                height: 40px;
                line-height: 40px;
                border-radius: 10px;
                font-weight: 500;
                font-size: 14px;
                color: #FFFFFF;
                padding: 0 12px 0 36px;
                box-sizing: border-box;
                background: #24D688 url('/img/add_task_icon.png') no-repeat left 12px center/12px 12px;
                cursor: pointer;
            }
        }
        .task_info_num{
            height: 158px;
            background: #FFFFFF;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 13px;
            .info_num_item{
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                .num{
                    font-weight: 800;
                    font-size: 40px;
                    color: #24D688;
                    line-height: 58px;
                }
                .label{
                    font-weight: 400;
                    font-size: 14px;
                    color: #222222;
                    line-height: 20px;
                }
            }
        }
    }
    .page_content{
        .table_content{
            .table_header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .table_label{
                    font-weight: 500;
                    font-size: 16px;
                    color: #222222;
                    line-height: 24px;
                    background: url('/img/time_icon.png') no-repeat left center/24px 24px;
                    padding-left: 32px;
                }
                .table_filter{
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    .filter_item {
                        display: flex;
                        align-items: center;
                        margin-right: 40px;
                        label{
                            white-space: nowrap;
                            font-weight: bold;
                            font-size: 14px;
                            color: #222222;
                        }

                        .status_list {
                            display: flex;
                            align-items: center;
                            height: 32px;
                            background: #F7F9FC;
                            border-radius: 16px;
                            padding: 0 2px;

                            .status_item {
                                padding: 0 16px;
                                flex: 1;
                                height: 28px;
                                line-height: 28px;
                                border-radius: 14px;
                                font-weight: bold;
                                font-size: 12px;
                                color: #999999;
                                text-align: center;
                                white-space: nowrap;
                                cursor: pointer;
                            }

                            .status_item.current_status {
                                background: #FFFFFF;
                                color: #35E89A;
                            }
                        }
                    }
                }
            }
        }

    }
    .task_dialog{
        .phone_header{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .label{
                font-weight: 500;
                font-size: 16px;
                color: #222222;
                line-height: 24px;
            }
            .import_btn{
                width: 80px;
                height: 28px;
                border-radius: 5px;
                border: 1px solid #35E89A;
                line-height: 28px;
                font-weight: 400;
                font-size: 14px;
                color: #35E89A;
                text-align: center;
                cursor: pointer;
            }
        }
        .test_header{
            width: 100%;
            text-align: left;
        }
        .dialog_cont{
            //min-height: 196px;
        }
        .phone_list{
            width: 418px;
            height: 313px;
            background: #FFFFFF;
            border-radius: 5px;
            border: 1px solid #E8E7ED;
            overflow-y: auto;
            padding: 12px 0;
            box-sizing: border-box;
            .phone_item{
                padding: 0 12px 12px;
                height: 28px;
                box-sizing: content-box;
                display: inline-block;
                position: relative;
                .close_icon{
                    padding: 8px 8px 5px;
                    width: 16px;
                    height: 16px;
                    box-sizing: content-box;
                    background: url('/img/close_icon2.png') no-repeat center/16px 16px;
                    position: absolute;
                    top: 0;
                    right: 12px;
                    cursor: pointer;
                }
                /deep/.ivu-form-item{
                    width: 134px;
                    margin-bottom: 12px;
                    .ivu-form-item-content{
                        line-height: 28px;
                        .ivu-form-item-error-tip{
                            display: none;
                        }
                    }
                    .ivu-input{
                        border: 1px solid #F7F9FC;
                        height: 28px;
                        background-color: #F7F9FC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #222222;
                        padding: 0 32px 0 10px;
                    }
                    .ivu-input::placeholder{
                        font-size: 12px;
                        color: #CCCCCC
                    }
                }
                /deep/.ivu-form-item-error{
                    .ivu-input{
                        border: 1px solid #ed4014;
                    }
                }
            }
            .add_box{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                .add_btn{
                    cursor: pointer;
                    width: 98px;
                    height: 34px;
                    line-height: 34px;
                    text-align: center;
                    border-radius: 5px;
                    border: 1px solid #35E89A;
                    font-weight: 400;
                    font-size: 14px;
                    color: #35E89A;
                    .ivu-icon{
                        margin-right: 3px;
                    }
                }
            }
            .add_item{
                width: 100%;
                padding: 0 12px 21px;
                box-sizing: border-box;
                .add_btn{
                    cursor: pointer;
                    width: 64px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    border-radius: 5px;
                    border: 1px solid #E8E7ED;
                    font-weight: 400;
                    font-size: 14px;
                    color: #999999;
                    .ivu-icon{
                        margin-right: 3px;
                    }
                }
            }
        }
        .phone_list::-webkit-scrollbar {
            width: 0px;
        }
        .phone_err{
            font-weight: 400;
            font-size: 12px;
            color: #FF4E4E;
            line-height: 17px;
            margin-bottom: -15px;
            margin-top: 8px;
        }
        .phone_test_page{
            width: 418px;
            height: 313px;
            background: #FAFAFA;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            .phone_test_tips{
                font-weight: 400;
                font-size: 16px;
                color: #222222;
                line-height: 40px;
                text-align: center;
            }
            .loading_phone{
                width: 418px;
                height: 313px;
                position: absolute;
                top: 0;
                right: 0;
                padding: 40px 62px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                .ai_img{
                    width: 80px;
                    height: 80px;
                    margin: 0 auto;
                    margin-bottom: 8px;
                }
                .name{
                    font-weight: 500;
                    font-size: 16px;
                    color: #222222;
                    line-height: 24px;
                }
            }
        }

        /deep/.ivu-input{
            padding: 12px;
            font-weight: 400;
            font-size: 14px;
            color: #222222;
        }
        /deep/.ivu-input::placeholder{
            font-size: 12px;
            color: #CCCCCC
        }
        .ivu-date-picker{
            width: 100%;
        }
        .reason_list{
            .reason_item{
                width: 345px;
                padding: 15px;
                box-sizing: border-box;
                line-height: 20px;
                background: #F2F2F2;
                border-radius: 15px;
                margin: 15px auto;
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                cursor: pointer;
            }
            .s_reason{
                background: #35E89A;
                color: #222222;
            }
        }
        .confirm_tips{
            font-weight: 500;
            font-size: 16px;
            color: #222222;
            padding: 40px 0 56px 0;
            line-height: 24px;
            text-align: center;
        }
        .btn_group{
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 0;
            .cancel_btn{
                min-width: 122px;
                padding: 0 17px;
                height: 40px;
                border-radius: 10px;
                border: 1px solid #35E89A;
                font-weight: 500;
                font-size: 14px;
                color: #35E89A;
                line-height: 40px;
                text-align: center;
                margin: 0 12px;
                cursor: pointer;
            }
            .confirm_btn{
                min-width: 122px;
                padding: 0 17px;
                height: 40px;
                background: #35E89A;
                border-radius: 10px;
                font-weight: 500;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 40px;
                text-align: center;
                margin: 0 12px;
                cursor: pointer;
            }
        }
    }
}
</style>
