<template>
    <view style="background-color: #fff;">
        <view class="head" @click="goUserBase">
            <image v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
            <image v-else src="../../../static/img/head.svg" mode=""></image>

            <view class="name">
                <view class="userName">
                    {{ auth.authInfo.realName }}
                </view>
                <view class="userInfo">
                    个人基本信息
                </view>
            </view>
            <image src="../../../static/img/right.svg" mode=""></image>
        </view>

        <view class="title">
            <view class="title_text">
                我的职业技能
            </view>
            <image v-if="mySkills.length < 2" src="../../../static/img/add.gray.svg" mode="" @click="goAdd"></image>
        </view>

        <view class="listBody">
            <m-slide-list @controller-reg="controller.reg" @controller-moving="controller.moving"
                @controller-opened="controller.opened" @controller-closed="controller.closed"
                @remove="removeSkills(item.id, index)" v-for="(item, index) in mySkills" :key="item.id"
                :button="buttonList">
                <view class="list">
                    <view class="list_text">
                        {{ item.worktypes }}、{{ item.skills }}
                    </view>
                    <view>
                        <image src="../../../static/img/left_right.png" mode=""></image>
                    </view>
                </view>
            </m-slide-list>
        </view>
        <!-- <view class="jobcontent" @click="goSetCity">
			<view class="jobinfo">
				<view
					v-bind:class="['jobAddress', { 'input-error': !myResume.city.id && !myResume.city.workplace && isShowBorder }]">
					您想工作的地点
				</view>
				<view v-bind:class="['jobText']">
					{{ myResume.city !== "{}" ? myResume.city.id ? getCity(myResume.city.id) : myResume.city.workplace : '请选择'
					}}
				</view>
			</view>
			<image src="../../../static/img/right.svg" mode=""></image>
		</view> -->
        <view class="jobcontent" @click="areaModal.addressShow = true">
            <view class="jobinfo">
                <view
                    v-bind:class="['jobAddress', { 'input-error': !myResume.city.id && !myResume.city.workplace && isShowBorder }]">
                    我想工作的地点
                </view>
                <view v-bind:class="['jobText']">
                    {{ myResume.city !== "{}" ? myResume.city.id ? getCity(myResume.city.id) : myResume.city.workplace :
			'请选择'
					}}
                </view>
            </view>
            <image src="../../../static/img/right.svg" mode=""></image>
        </view>
        <view class="jobcontent" @click="showPickerFunc('education')">
            <view class="jobinfo">
                <view v-bind:class="['jobAddress', { 'input-error': !myResume.education.label && isShowBorder }]">
                    我的学历
                </view>
                <view v-bind:class="['jobText']">
                    {{ myResume.education !== "{}" ? myResume.education.label : '请选择' }}
                </view>
            </view>
            <image src="../../../static/img/right.svg" mode=""></image>
        </view>
        <view class="jobcontent" @click="showPickerFunc('wage')">
            <view class="jobinfo">
                <view v-bind:class="['jobAddress', { 'input-error': !myResume.wage && isShowBorder }]">
                    我的期望薪资
                </view>
                <view v-bind:class="['jobText']">
                    {{ myResume.wage ? myResume.wage : '请选择' }}
                </view>
            </view>
            <image src="../../../static/img/right.svg" mode=""></image>
        </view>
        <view class="jobcontent">
            <view class="jobinfo">
                <view v-bind:class="['jobAddress', { 'input-error': !myResume.phone && isShowBorder }]">
                    我的联系方式
                </view>
                <u--input :value="myResume.phone" @focus="setPhoneFunc1" @change="setPhoneFunc" type="number"
                    placeholder="请输入您的电话" border="none" clearable></u--input>
            </view>
        </view>
        <view class="workexperience">
            工作经历
            <view class="workexperience-right" @click="cardaddshow = true; gzInfo = {}">+</view>
        </view>
        <view class="border"></view>
        <view class="card" v-for="(item, index) in gzList" :key="index" @click="updataGz(item)"
            @longtap="removeGz(item)">
            <view class="card-title">
                {{item.name}}
                <view class="card-right">{{item.stime}}-{{item.etime}}</view>
            </view>
            <view class="card-subTitle">
                <view class="card-sub1">{{item.work}}</view>
                <view class="card-sub1">{{item.department}}</view>
            </view>
            <view class="card-content">
                {{item.content}}
            </view>
        </view>
        <custom-popup :content-h="100" :visible="cardaddshow" :hide="0" @onClose="cardaddshow = false; gzInfo = {}">
            <view class="s-header">
                <view class="heade-lf" @click="cardaddshow = false; gzInfo = {}">取消</view>
                <view class="heade-ri" @click="confimPopup1">确认</view>
            </view>
            <u--form style="padding: 6px 14px;" labelPosition="left" :model="gzInfo" ref="form1">
                <u-form-item label="企业名称:" labelWidth="80" prop="name" borderBottom>
                    <u--input v-model="gzInfo.name" placeholder="请输入企业名称"></u--input>
                </u-form-item>
                <u-form-item label="工作岗位:" labelWidth="80" prop="work" borderBottom>
                    <u--input v-model="gzInfo.work" placeholder="请输入工作岗位"></u--input>
                </u-form-item>
                <u-form-item label="开始时间" labelWidth="80" prop="stime" borderBottom
                    @click="showStime = true; hideKeyboard()" ref="item1">
                    <u--input v-model="gzInfo.stime" disabledColor="#ffffff" placeholder="请选择开始时间"
                        border="none"></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item label="结束时间" labelWidth="80" prop="etime" borderBottom
                    @click="showEtime = true; hideKeyboard()" ref="item2">
                    <u--input v-model="gzInfo.etime" disabledColor="#ffffff" placeholder="请选择结束时间"
                        border="none"></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item label="部门:" labelWidth="80" prop="department" borderBottom>
                    <u--input v-model="gzInfo.department" placeholder="请输入部门"></u--input>
                </u-form-item>
                <u-form-item label="工作内容:" labelWidth="70" prop="content" borderBottom>
                    <u--textarea v-model="gzInfo.content" placeholder="请输入工作内容"></u--textarea>
                </u-form-item>
            </u--form>
        </custom-popup>


        <view v-if="isShowButton" class="saveWrapper">
            <u-button @click="subMitResume" type="primary" shape="circle" text="保存"></u-button>
        </view>


        <u-picker @confirm="pickerButtonFunc" @cancel="showPicker = false" :show="showPicker" :columns="columns"
            keyName="label"></u-picker>

        <u-toast ref="uToast"></u-toast>

        <u-datetime-picker :show="showStime" :value="birthday" mode="date" closeOnClickOverlay @confirm="stimeConfirm"
            @cancel="stimeClose" @close="stimeClose"></u-datetime-picker>
        <u-datetime-picker :show="showEtime" :value="birthday" mode="date" closeOnClickOverlay @confirm="etimeConfirm"
            @cancel="etimeClose" @close="etimeClose"></u-datetime-picker>
        <!-- 省市 -->
        <data-picker :show="areaModal.addressShow" @confirm='confirmAddress' @cancel='areaModal.addressShow = false'
            @close='areaModal.addressShow = false' :defaultNames="areaModal.defaultNames" :indexs="areaModal.indexs"
            :defaultIds="areaModal.defaultIds" :showToolbar="false" :showBottombar="true"
            :labelName="areaModal.labelName"></data-picker>
    </view>
</template>

<script>
    import {
        GoLogin
    } from '@/untils/AxiosUtils.js';
    import {
        mapGetters
    } from 'vuex'
    import {
        mySkills,
        myResume,
        removeSkills,
        setCity,
        setLearn,
        setResume
    } from '@/api/resume.js';
    import mSlideList from '@/components/mark-slide-list/mark-slide-list.vue';
    import controller from '@/components/mark-slide-list/controller';
    import customPopup from '@/components/custom-popup/custom-popup.vue'
    import {
        cloneDeep,
        forIn
    } from 'lodash';
    const validateForm = {
        name: '请输入企业名称',
        work: '请输入工作岗位',
        stime: '请输入开始时间',
        etime: '请选择结束时间',
        department: '请输入部门',
        content: '请输入工作内容',
    }
    export default {
        components: {
            mSlideList,
            customPopup
        },
        data() {
            return {
                controller: new controller(),
                cardaddshow: false,
                showStime: false,
                showEtime: false,
                gzInfo: {},
                gzList: [],
                myResume: {
                    city: {},
                    education: {},
                    wage: "",
                    phone: "",
                },
                mySkills: [],
                id: undefined,
                // id: '',
                buttonList: [{
                    title: '删除',
                    background: '#ff3b32',
                    clickName: 'remove'
                }],
                showPicker: false,
                showType: "",
                columns: [
                    []
                ],
                canSubMit: false,
                isShowButton: false,
                isShowBorder: false,
                isShowAddSkill: true,
                birthday: Number(new Date()),
                areaModal: {
                    address: '',
                    addressShow: false,
                    title: 'Hello',
                    // indexs: [0, 0, 8],
                    // defaultIds: [1, 110000, 110106],
                    defaultNames: ['北京市', '北京市', '东城区'],
                    labelName: "areaName"

                },
            }
        },
        onShow() {
            if (!this.$api.haslogin()) {
                GoLogin()
                return
            }
            this.getSkill()
        },
        created() {
            this.getResume()
        },
        computed: {
            ...mapGetters(['userInfo', 'auth'])
        },
        watch: {
            myResume: {
                handler: function(newVal, oldVal) {
                    if (newVal.city && newVal.education && newVal.wage && newVal.phone) {
                        this.canSubMit = true;
                    } else {
                        this.canSubMit = false;
                    }
                },
                deep: true
            }
        },
        methods: {
            removeGz(item) {
                const that = this
                uni.showModal({
                    content: '删除该条工作经历?',
                    success(res) {
                        if (res.confirm) {
                            that.isShowButton = true
                            that.gzList = that.gzList.filter((vItem) => item.id !== vItem.id)
                        }
                    },

                })
            },
            updataGz(item) {
                this.cardaddshow = true
                this.gzInfo = item
            },
            confimPopup1() {
                const copy = cloneDeep(this.gzInfo)
                const keys = Object.keys(validateForm)
                console.log(keys, copy)
                for (let i = 0; i < keys.length; i++) {
                    if (!copy[keys[i]]) {
                        return this.$api.msg(validateForm[keys[i]])
                    }
                }
                if (copy.id) {
                    this.gzList = this.gzList.map((item) => {
                        if (item.id === copy.id) {
                            return copy
                        } else {
                            return item
                        }
                    })
                } else {
                    copy.id = Date.now()
                    this.gzList.push(copy)
                }
                this.isShowButton = true
                this.cardaddshow = false
            },
            stimeClose() {
                this.showStime = false
            },
            stimeConfirm(e) {
                this.showStime = false
                this.gzInfo.stime = uni.$u.timeFormat(e.value, 'yyyy.mm.dd')
            },
            etimeClose() {
                this.showStime = false
            },
            etimeConfirm(e) {
                this.showEtime = false
                this.gzInfo.etime = uni.$u.timeFormat(e.value, 'yyyy.mm.dd')
            },
            hideKeyboard() {
                uni.hideKeyboard()
            },
            getResume() {
                myResume().then(res => {
                    const data = res.data.data
                    if (data.workExperience) {
                        this.gzList = JSON.parse(data.workExperience)
                    }
                    this.myResume = {
                        city: {
                            workplace: data.workplace
                        },
                        education: {
                            label: data.education
                        },
                        wage: data.wage,
                        phone: data.telephone
                    }
                    this.isShowButton = false;
                    if (data && data.id) {
                        this.id = data.id
                        console.log(this.id, '-----------------------------');
                    }
                });
            },
            getSkill() {
                mySkills().then(res => {
                    this.mySkills = res.data.data;
                })
            },
            goWantSkill: function() {
                uni.$off('getWantSkill')
                uni.$once('getWantSkill', (cb) => {
                    cb(this.myResume.learnSkill)
                })
                uni.$off('setWantSkill')
                uni.$once('setWantSkill', ({
                    skill,
                    done
                }) => {
                    setLearn(this.id, skill).then(res => {
                        uni.navigateBack()
                    }).catch(() => {
                        done && done()
                    })
                    this.getResume()
                })
                uni.navigateTo({
                    url: './setWskill?id=' + this.id
                })
            },
            goSetCity: function() {
                uni.$off('setCity')
                uni.$on('setCity', ({
                    detail
                }) => {
                    console.log(detail, '---------------');
                    this.isShowButton = true
                    this.myResume.city = detail
                    // setCity(this.id, detail.parentLabel + '-' + detail.label).then(res => {
                    // 	this.myResume.cityId = detail.id
                    // 	this.getResume()
                    // })
                })
                uni.navigateTo({
                    url: `/pages/setCity/setCity?maxLayer=2`
                })
            },
            goAdd: function() {

                uni.navigateTo({
                    url: './addSkill'
                })
            },
            goUserBase: function() {
                uni.navigateTo({
                    url: '../userBase'
                })
            },
            getCity: function(val) {
                if (val) {
                    let areas = this.$store.getters.getAreaParents(val)
                    if (areas.length) {
                        return areas[0].label + '-' + areas[1].label
                    }
                }
            },
            removeSkills: function(id, index) {
                removeSkills(id).then(res => {
                    uni.showToast({
                        title: '操作成功',
                        icon: 'none'
                    });
                    this.mySkills.splice(index, 1)
                })
            },
            showPickerFunc(type) {
                this.showType = type;
                switch (type) {
                    case "education":
                        this.columns = [
                            [{
                                    label: 'MBA/EMBA',
                                    value: 0
                                }, {
                                    label: '博士',
                                    value: 1
                                }, {
                                    label: '硕士',
                                    value: 2
                                }, {
                                    label: '本科',
                                    value: 3
                                },
                                {
                                    label: '大专',
                                    value: 4
                                }, {
                                    label: '高中',
                                    value: 5
                                }, {
                                    label: '中专/中技',
                                    value: 6
                                }, {
                                    label: '初中及以下,',
                                    value: 7
                                },
                                {
                                    label: '不限',
                                    value: 8
                                }
                            ]
                        ]
                        break;
                    case "wage":
                        this.columns = [
                            ['10-15元/小时', '16-20元/小时', '21-25元/小时', '26-30元/小时', '30元/小时以上', '100-150元/天',
                                '151-200元/天', '201-250元/天', '251-300元/天', "300元/天以上", "2000元（含）以下/月",
                                "2000-5000元（含）/月", "5000-8000元（含）/月",
                                "8000-10000元（含）/月", "10000-15000元（含）/月", "15000-20000元（含）/月", "20000-25000元（含）/月",
                                "25000-30000元（含）/月", "30000元以上/月", "面议、暂无要求"
                            ]
                        ]


                        break;

                    default:

                        break;
                }
                this.isShowButton = true;
                this.showPicker = true;
            },
            pickerButtonFunc(e) {
                console.log(e, this.myResume, this.myResume[this.showType]);
                this.myResume[this.showType] = e.value[0];
                this.showPicker = false;
            },
            setPhoneFunc(e) {
                this.myResume.phone = e;
            },
            setPhoneFunc1(e) {
                this.isShowButton = true;
            },
            showToast(text) {
                this.$refs.uToast.show({
                    type: 'error',
                    icon: false,
                    title: '失败主题',
                    message: text,
                    iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
                })
            },

            subMitResume() {
                console.log(this.myResume);
                this.isShowBorder = true;
                if (!this.canSubMit) return;
                const {
                    city,
                    education,
                    phone,
                    wage
                } = this.myResume
                // 中国大陆手机号码正则表达式
                const mobileRegex = /\b(1[3-9]\d{9})\b/;
                // 中国大陆座机号码正则表达式
                const landlineRegex = /\b(0\d{2,3}-\d{7,8}(-\d{1,4})?)\b/;

                const workList = JSON.stringify(this.gzList)

                if (mobileRegex.test(phone) || landlineRegex.test(phone)) {
                    // 电话号码格式正确
                    console.log(phone, "电话号码格式正确");
                    setResume({
                        id: this.id,
                        education: education.label,
                        workplace: city.workplace ? city.workplace : city.parentLabel + '-' + city.label,
                        telephone: phone,
                        wage,
                        workExperience: workList
                    }).then(res => {
                        this.isShowButton = false;
                        this.getResume()
                        this.$store.dispatch('getResumeInfo')
                        this.$api.msg('保存成功')
                    })
                } else {
                    // 电话号码格式不正确
                    console.log(phone, "电话号码格式不正确");
                    this.showToast("电话号码格式不正确");
                }
                return;




            },

            confirmAddress(val) {
                console.log(val);
                var valArr = val.value;
                // this.areaModal.address = [...new Set(val.value)].join(' / ')
                this.isShowButton = true
                this.myResume.city.workplace = [...new Set(val.value)].join('/')
                console.log(this.areaModal.address);
                this.areaModal.addressShow = false
            },
        }
    }
</script>

<style lang="scss" scoped>
    .s-header {
        display: flex;
        justify-content: space-between;
        text-align: center;
        font-size: 13px;
        padding: 10px 14px 0 14px;

        .heade-lf {
            line-height: 24px;
            width: 38px;
            height: 24px;
            border-radius: 4px;
            border: 1px solid #666666;
            color: #666666;
        }

        .heade-ri {
            line-height: 24px;
            width: 38px;
            height: 24px;
            border-radius: 4px;
            border: 1px solid #57ff36;
            background-color: #57ff36;
            color: #FFFFFF;
        }
    }

    .workexperience {
        font-weight: bold;
        padding: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;


        .workexperience-right {
            border-radius: 50%;
            width: 16px;
            height: 16px;
            line-height: 13px;
            text-align: center;
            font-size: 20px;
            color: #666666;
            border: 1px solid #666666;
        }
    }

    .card {
        display: flex;
        flex-direction: column;
        padding: 14px;


        .card-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;

            .card-right {
                font-size: 12px;
                color: #666666;
                position: relative;
                padding: 0 10px;
                text-wrap: nowrap;
            }

            .card-right::after {
                position: absolute;
                content: '';
                right: 0;
                top: 5px;
                width: 6px;
                height: 6px;
                border-top: 1px solid #666666;
                border-right: 1px solid #666666;
                transform: rotate(45deg);
            }

            .card-right:active {
                color: #e8e8e8;
            }
        }

        .card-subTitle {
            margin-top: 6px;
            display: flex;
            justify-content: flex-start;
            font-size: 12px;
            color: #666666;

            .card-sub1 {
                margin-right: 10px;
            }
        }

        .card-content {
            margin-top: 4px;
            font-size: 13px;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            color: #666666;
            text-indent: 2em;
            border-bottom: 1rpx solid #f2f2f2;
        }
    }

    .card:active {
        background-color: #f2f2f2;
    }
</style>
<style>
    .border {
        margin-left: 30rpx;
        width: 720rpx;
        border: 1rpx solid #f2f2f2;

        /* 	height: 1rpx;
		background-color: #ddd; */
    }

    .jobText {
        font-family: PingFangSC-Regular;
        font-size: 32rpx;
        color: #666666;
    }

    .jobAddress {
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #999999;
    }

    .nochoose {
        /* color: #ccc; */
    }

    .jobcontent {
        padding: 30rpx;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 63rpx;
        border: 1px solid #fff;
    }

    .jobcontent image {
        width: 40rpx;
        height: 40rpx;
    }

    .listBody {}

    .list_text {
        font-family: PingFangSC-Regular;
        font-size: 32rpx;
        color: #666666;
        background: #ffffff;
        overflow-y: auto;
        /* white-space: nowrap; */
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .list image {
        width: 40rpx;
        height: 40rpx;
        margin-left: auto;
    }

    .list {
        padding: 0 15px 0 30rpx;
        height: 126rpx;
        /* line-height: 126rpx; */
        background: #fff;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .title image {
        width: 40rpx;
        height: 40rpx;
    }

    .title {
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #999999;
        display: flex;
        padding: 25rpx 30rpx;
        /* 		padding-top: 30rpx; */
        background-color: #fff;
        align-items: center;
        justify-content: space-between;
        border: 1rpx solid #f2f2f2;
    }

    .userInfo {
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #999999;
    }

    .name {
        margin-left: 20rpx;
        font-family: PingFangSC-Medium;
        font-size: 36rpx;
        color: #333333;
        line-height: 50rpx;
    }

    .head image:last-child {
        width: 40rpx;
        height: 40rpx;
        margin-left: auto;
    }

    .head image {
        width: 100rpx;
        height: 100rpx;
    }

    page {
        background-color: #FFFFFF;
    }

    .head {
        padding: 30rpx;
        width: 690rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .saveWrapper {
        width: 80%;
        padding: 20rpx;
        margin: 0 auto;
        padding-bottom: 60rpx;
    }


    .input-error {
        color: red;
    }
</style>