<template>
    <div class="app-container">
        <div class="title">应用中心</div>
        <div class="list">
            <div class="item" v-for="item in list" :key="item.id" @click="to(item)">
                <img :src="item.coverImg" class="icon">
                <div class="info">
                    <div class="name">{{ item.name }}</div>
                    <div class="intro">
                        {{ item.value }}
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹窗 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
            <el-form :model="forms">
                <el-form-item label="账号：" label-width="100px">
                    <el-input v-model="forms.account" :disabled="title != '绑定数点票账号'" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="项目分类：" label-width="100px">
                    <el-select v-model="forms.article" :disabled="title != '绑定数点票账号'" :filter-method="getindustry"
                        filterable style="width: 100%;" placeholder="餐饮">
                        <el-option :label="item.name" :value="item.name" v-for="(item, index) in getindustryList"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数电发票：" label-width="100px">
                    <el-select v-model="forms.sdType" :disabled="title != '绑定数点票账号'"
                       style="width: 100%;" placeholder="">
                        <el-option :label="item" :value="item" v-for="(item, index) in digitalInvoiceList[0]"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="税率：" label-width="100px">
                    <el-select :disabled="title != '绑定数点票账号'" v-model="forms.taxAmount" style="width: 100%;"
                        placeholder="">
                        <el-option :label="item" :value="item" v-for="(item, index) in digitalInvoiceList[1]"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>

                <div style="text-align: right;" v-if="title == '绑定数点票账号'">联系区域经理开通</div>
                <div style="text-align: center;cursor: pointer;" v-else @click="title = '绑定数点票账号'">更换绑定</div>
            </el-form>
            <span slot="footer" class="dialog-footer" v-if="title == '绑定数点票账号'">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sumbitEvent">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { appCenterGet, getbinding, getindustry, getdigitalInvoice } from "@/api/application";
export default {
    data() {
        return {
            list: [],
            dialogVisible: false,
            forms: {
                article: '餐饮',
                sdType: ""
            },
            title: '绑定数点票账号',
            digitalInvoiceList: [],
            getindustryList: [],
        }
    },
    mounted() {
        this.appCenterGet()
        this.getbinding()
        this.getdigitalInvoice()
        this.getindustry()
    },
    methods: {
        upPop() {
            this.dialogVisible = true
        },
        sumbitEvent() {
            if (this.forms.account) {
                this.getbinding(this.forms)
            }
        },
        // 获取数电发票类型
        async getdigitalInvoice() {
            const res = await getdigitalInvoice()
            this.digitalInvoiceList = res
        },
        // 获取项目分类
        async getindustry(d = '餐饮') {
            const res = await getindustry({ article: d })
            this.getindustryList = res.list
        },
        // 跳转
        to(item) {
            localStorage.setItem('applocation', JSON.stringify(item))
            if (item.absUrl) {

                this.$router.push({
                    name: item.absUrl
                })
            } else {
                this.upPop()
            }
        },
        // 获取应用列表
        async appCenterGet() {
            try {
                const res = await appCenterGet()
                this.list = res
            } catch (error) {
                console.log(error);
            }
        },

        // 开票
        async getbinding(d = "") {
            try {
                const res = await getbinding(d)
                if (res) {
                    this.forms = res.store
                    this.$set(this.forms, 'article', res.article)
                    this.$set(this.forms, 'sdType', res.sdType)
                    this.$set(this.forms, 'taxAmount', res.taxAmount)
                    this.title = '数电票账号已绑定'
                    this.dialogVisible = false
                } else {
                    this.title = '绑定数点票账号'
                    this.forms = {}
                }
            } catch (error) {
                console.log(error);
            }
        }

    }
}
</script>

<style scoped lang="scss">
.title {
    font-size: 24px;
    font-weight: bold;
    padding-top: 10px;
}

.list {
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    .item {
        width: 400px;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        padding: 14px;

        &:hover {
            cursor: pointer;

            .info {
                .name {
                    color: #39D47A;
                }

                .intro {
                    color: #39D47A;
                }
            }
        }

        .icon {
            width: 40px;
            height: 40px;
            object-fit: cover;
        }

        .info {
            flex: 1;
            padding-left: 10px;

            .name {
                font-weight: bold;
            }

            .intro {
                color: #999;
                margin-top: 4px;
            }
        }
    }
}
</style>