<template>
    <div class="apply">
        <div class="state"
            style="width: 95%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 10px;"
            v-if="form.state == 0 || form.state == 1 || form.state == 2">
            <van-tag type="warning" size="large" v-if="form.state == 0">待审核</van-tag>
            <van-tag type="success" size="large" v-if="form.state == 1">已通过</van-tag>
            <van-tag type="danger" size="large" v-if="form.state == 2">已拒绝</van-tag>
            <div style="overflow-y: scroll; width: 100%; margin-top: 10px; font-size: 16px; color: #EB4E3F;"
                v-if="form.state == 2">拒绝原因： {{ form.refusalCause }}</div>
        </div>
        <div class="card">
            <div class="top">
                <div class="icon"></div>
                <div class="title">单位信息</div>
            </div>
            <div class="bottom">
                <van-cell-group>
                    <van-field v-model="form.name" name="单位名称" input-align="right" label="单位名称"
                        :readonly="form.state == 1 ? true : false" clearable required placeholder="输入单位名称">
                    </van-field>
                    <van-field v-model="form.socialCreditCode" name="社会信用代码" input-align="right" label="社会信用代码"
                        :readonly="form.state == 1 ? true : false" clearable required placeholder="输入统一社会信用代码">
                    </van-field>
                    <van-field v-model="form.areaName" name="辖市区" input-align="right" label="辖市区"
                        :disabled="form.state == 1 ? true : false" @click="showPicker = true" readonly clearable
                        required placeholder="选择辖市区">
                    </van-field>
                    <van-popup v-model="showPicker" position="bottom" round v-if="form.state != 1">
                        <van-picker show-toolbar :columns="
                            columns.map((item) => {
                                return item.label;
                            })
                        " title="辖市区" @cancel="showPicker = false" @confirm="onConfirm" />
                    </van-popup>
                    <van-field v-if="form.areaName" :value="form.street" label="街道(乡镇)" input-align="right"
                        :disabled="form.state == 1 ? true : false" @click="showPicker2 = true" readonly required
                        placeholder="请选择当前所在街道(乡镇)">
                    </van-field>
                    <van-popup v-model="showPicker2" position="bottom" round v-if="form.state != 1">
                        <van-picker show-toolbar :columns="
                            columns2.map((item) => {
                                return item.label;
                            })
                        " title="街道(乡镇)" @cancel="showPicker2 = false" @confirm="onConfirm2" />
                    </van-popup>
                    <van-field v-model="form.address" name="详细地址" input-align="right" label="详细地址"
                        :readonly="form.state == 1 ? true : false" clearable required placeholder="输入详细地址">
                    </van-field>
                    <van-field label="统一社会信用代码附件（加盖公章）" input-align="right" :readonly="form.state == 1 ? true : false"
                        required>
                        <template #input>
                            <van-uploader :after-read="afterRead" :disabled="form.state == 1 ? true : false"
                                v-model="fileList" :max-count="1" />
                        </template>
                    </van-field>
                </van-cell-group>
            </div>
        </div>
        <div class="card">
            <div class="top">
                <div class="icon"></div>
                <div class="title">单位联系人信息</div>
            </div>
            <div class="bottom">
                <van-cell-group>
                    <van-field v-model="form.contactUser" name="姓名" input-align="right" label="姓名"
                        :readonly="form.state == 1 ? true : false" clearable required placeholder="输入姓名">
                    </van-field>
                    <van-field v-model="form.contactMobile" name="手机号码" input-align="right" label="手机号码"
                        :readonly="form.state == 1 ? true : false" clearable required placeholder="输入手机号码">
                    </van-field>
                </van-cell-group>
            </div>
        </div>
        <div style="font-size: 14px; line-height: 1.5; color: #EB4E3F;">完成权限后，请先申请场所通行码以便于为员工赋权，如已生成场所通行码可直接赋权。</div>
        <van-button class="button" @click="submit()" v-if="form.state != 0 && form.state != 1">提交</van-button>
    </div>
</template>

<script>
import Vue from 'vue';
import { Button, Field, CellGroup, Icon, Cell, Popup, Picker, Uploader, Tag, Dialog } from 'vant';
Vue.use(Button).use(Field).use(CellGroup).use(Icon).use(Cell).use(Popup).use(Picker).use(Uploader).use(Tag).use(Dialog);
import { uploadFile, queryEnterpriseInfo, addEnterprise, updateEnterprise } from "@/api/reverse.js";
export default {
    data() {
        return {
            form: {
                name: '',
                socialCreditCode: '',
                address: '',
                areaName: '',
                street: '',
                picture: '',
                contactUser: '',
                contactMobile: '',
                userId: '',
                code: '',
                state: 3
            },
            value: '',
            showPicker: false,
            showPicker2: false,
            columns: [
                {
                    id: "10001",
                    label: "京口区",
                },
                {
                    id: "10002",
                    label: "润州区",
                },
                {
                    id: "10003",
                    label: "丹徒区",
                },
                {
                    id: "10004",
                    label: "镇江新区",
                },
                {
                    id: "10005",
                    label: "镇江高新区",
                },
                {
                    id: "10006",
                    label: "扬中市",
                },
                {
                    id: "10007",
                    label: "丹阳市",
                },
                {
                    id: "10008",
                    label: "句容市",
                },
            ],
            columns2: [],
            fileList: [],
            userInfo: {}
        }
    },
    methods: {
        init() {
            queryEnterpriseInfo({
                uid: this.userInfo.userId,
            }).then((res) => {
                // alert(JSON.stringify(res))
                if (res.code == 200) {
                    this.fileList = []
                    if (res.data) {
                        this.form = res.data;
                        this.fileList.push({ url: res.data.picture })
                    }
                }
            });
        },
        onConfirm(value, index) {
            this.value = value;
            // this.areaCode = this.columns[index].id;
            this.form.areaName = this.columns[index].label;
            this.showPicker = false;
            this.form.street = "";
            if (this.form.areaName == "京口区") {
                this.columns2 = [
                    { label: "正东路街道" },
                    { label: "健康路街道" },
                    { label: "大市口街道" },
                    { label: "四牌楼街道" },
                    { label: "象山街道" },
                    { label: "谏壁街道" },
                    { label: "京口工业园区" },
                    { label: "新民洲临港产业园" },

                ];
            } else if (this.form.areaName == "润州区") {
                this.columns2 = [
                    { label: "宝塔路街道" },
                    { label: "和平路街道" },
                    { label: "金山街道" },
                    { label: "七里甸街道" },
                    { label: "官塘桥街道" },
                    { label: "韦岗街道" },
                    { label: "南山街道" },

                ];
            } else if (this.form.areaName == "丹徒区") {
                this.columns2 = [
                    { label: "高资街道" },
                    { label: "高桥镇" },
                    { label: "辛丰镇" },
                    { label: "谷阳镇" },
                    { label: "上党镇" },
                    { label: "宝堰镇" },
                    { label: "世业镇" },
                    { label: "宜城街道" },
                    { label: "江心洲生态农业园区" },
                    { label: "荣炳盐资源区" },

                ];
            } else if (this.form.areaName == "镇江新区") {
                this.columns2 = [
                    { label: "丁卯街道" },
                    { label: "大港街道" },
                    { label: "姚桥镇" },
                    { label: "大路镇" },
                    { label: "丁岗镇" },

                ];
            } else if (this.form.areaName == "镇江高新区") {
                this.columns2 = [{ label: "蒋乔街道" },];
            } else if (this.form.areaName == "扬中市") {
                this.columns2 = [
                    { label: "三茅街道" },
                    { label: "新坝镇" },
                    { label: "油坊镇" },
                    { label: "八桥镇" },
                    { label: "西来桥镇" },
                    { label: "兴隆街道（经开区）" },

                ];
            } else if (this.form.areaName == "丹阳市") {
                this.columns2 = [
                    { label: "云阳街道" },
                    { label: "曲阿街道" },
                    { label: "司徒镇" },
                    { label: "延陵镇" },
                    { label: "珥陵镇" },
                    { label: "导墅镇" },
                    { label: "皇塘镇" },
                    { label: "吕城镇" },
                    { label: "陵口镇" },
                    { label: "访仙镇" },
                    { label: "界牌镇" },
                    { label: "丹北镇" },

                ];
            } else if (this.form.areaName == "句容市") {
                this.columns2 = [
                    { label: "华阳街道" },
                    { label: "崇明街道" },
                    { label: "黄梅街道" },
                    { label: "下蜀镇" },
                    { label: "白兔镇" },
                    { label: "茅山镇" },
                    { label: "后白镇" },
                    { label: "郭庄镇" },
                    { label: "天王镇" },
                    { label: "宝华镇" },
                    { label: "边城镇" },
                    { label: "赤山湖风景区" },
                    { label: "茅山风景区" },

                ];
            }
            console.log(this.columns2);
        },
        onConfirm2(value, index) {
            this.value = value;
            this.form.street = this.columns2[index].label;
            this.showPicker2 = false;
        },
        afterRead(file) {
            console.log(file);
            file.status = "uploading";
            file.message = "上传中...";
            let param = new FormData();
            param.append("file", file.file);
            this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "上传图片中..."
            });
            uploadFile(param)
                .then(res => {
                    this.$toast.clear();
                    if (res.code == 200) {
                        file.status = "done";
                        file.message = "上传成功";
                        file.url = res.data;
                        console.log(this.fileList[0].url)
                    }
                })
                .catch(err => {
                    console.log(err);
                    file.status = "failed";
                    file.message = "上传失败";
                });
        },
        submit() {
            // alert(JSON.stringify(this.form))
            this.form.picture = this.fileList[0]?.url
            this.form.userId = this.userInfo.userId
            if (!this.form.contactUser) {
                return this.$toast('请填写姓名')
            }
            if (!this.form.contactMobile) {
                return this.$toast('请填写手机号码')
            }
            if (!/^1[3456789]\d{9}$/.test(this.form.contactMobile)) {
                return this.$toast('请输入正确的手机号码')
            }
            if (!this.form.name) {
                return this.$toast('请填写单位名称')
            }
            if (!this.form.socialCreditCode) {
                return this.$toast('请填写统一社会信用代码')
            }
            if (!this.form.address) {
                return this.$toast("请填写详细地址");
            }
            if (!this.form.areaName) {
                return this.$toast('请选择辖市区')
            }
            if (!this.form.street) {
                return this.$toast('请选择街道（乡镇）')
            }

            if (!this.form.picture) {
                return this.$toast('请上传附件')
            }
            console.log(this.form)
            Dialog.confirm({
                title: '提交',
                message: '确认提交吗？',
            })
                .then(() => {
                    const a = this.$toast.loading({
                        duration: 0,
                        message: '提交中...',
                        forbidClick: true
                    })
                    if (this.form.state == 3) {

                        addEnterprise(this.form).then((res) => {
                            a.clear()
                            if (res.code == 200) {
                                this.$toast.success(res.data)
                                this.$router.go(-1)
                                this.init()
                            }
                        }).catch((err) => {
                            a.clear()
                            console.log(err)
                            this.$toast(err.message)
                        })

                    } else {
                        updateEnterprise(this.form).then((res) => {
                            a.clear()
                            if (res.code == 200) {
                                this.$toast.success(res.data)
                                this.$router.go(-1)
                                this.init()
                            }
                        }).catch((err) => {
                            a.clear()
                            console.log(err)
                            this.$toast(err.message)
                        })
                    }
                }).catch(() => {
                    this.$toast('您已取消提交')
                })
        },
        // 初始化获取userInfo
        JSBgetUserInfo() {
            if (window.android !== undefined) {
                const res = window.android.getUserInfo(); // 这是一个json字符串
                sessionStorage.setItem("ZJCD-UserInfo", res);
                this.userInfo = JSON.parse(res);
            } else if (window.webkit) {
                window.webkit &&
                    window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
            } else {
                window.receiveLocation(
                    JSON.stringify({ code: 0, data: { lat: 39.983744, lng: 116.276063 } })
                );
                this.$toast("请先登录镇合意app");
            }
        },
        getUserInfo(res) {
            sessionStorage.setItem("ZJCD-UserInfo", res);
            this.userInfo = JSON.parse(res);
        },
    },
    created() {
        this.JSBgetUserInfo();
        this.init();
    },
    mounted() {
        window.getUserInfo = this.getUserInfo;
    },
}
</script>

<style lang="stylus" scoped>
.apply{
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
    .card{
        width: 100%;
        background: #FFFFFF;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
        border-radius: 8px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        padding: 20px;
        box-sizing: border-box;
        .top{
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            .icon{
                width: 4px;
                height: 24px;
                background: #EB4E3F;
                box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
                border-radius: 2px;
            }
            .title{
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #333333;
                text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
                margin-left: 15px;
            }
        }
        .bottom{
            height 100%;
        }
    }
    .button{
        margin: 30px 0;
        width: 608px;
        height: 88px;
        background: linear-gradient(311deg, #EB4E3F 0%, #FF8138 100%);
        box-shadow: 0px 15px 18px -2px rgba(235, 78, 63, 0.2);
        border-radius: 49px;
        color: #fff;
    }
}
</style>