<template>
    <!-- <el-card class="box-card" 
    title="页面设置"
    :visible.sync="$store.state.app.showSettings"
    direction="rtl"
    append-to-body
    custom-class="settings-drawer"
  > -->
    <div class="drawer-container">
        <div class="drawer-item">
            <span class="item-deder">设置框架布局类型:</span>
            <ul class="layout">
                <li @click="changeSetting({ layout: 'layout1' })">
                    <img src="../../../../assets/layout/layout1.svg" alt="layout1" />
                    <i v-show="settings.layout === 'layout1'" class="el-icon-check" />
                </li>
                <li @click="changeSetting({ layout: 'layout2' })">
                    <img src="../../../../assets/layout/layout2.svg" alt="layout2" />
                    <i v-show="settings.layout === 'layout2'" class="el-icon-check" />
                </li>
                <li @click="changeSetting({ layout: 'layout3' })">
                    <img src="../../../../assets/layout/layout3.svg" alt="layout3" />
                    <i v-show="settings.layout === 'layout3'" class="el-icon-check" />
                </li>
                <li @click="changeSetting({ layout: 'layout4' })">
                    <img src="../../../../assets/layout/layout4.svg" alt="layout4" />
                    <i v-show="settings.layout === 'layout4'" class="el-icon-check" />
                </li>
            </ul>
        </div>
        <el-button @click="AddClick" type="primary" icon="el-icon-plus">新增</el-button>
        <el-table style="margin-top: 10px" stripe :data="tableData" border highlight-current-row :height="vh + 'px'"
            header-cell-class-name="table_header">
            <el-table-column align="center" prop="name" label="主题名称" min-width="220"></el-table-column>
            <!-- <el-table-column align="center" prop="code" label="主题编号"></el-table-column> -->

            <el-table-column min-width="220" align="center" prop="remark" label="描述"></el-table-column>
            <el-table-column align="center" min-width="80" label="主题logo" prop="logoUrl">
                <template slot-scope="scope">
                    <img :src="scope.row.logoUrl" class="sidebar-logo" style="width: 22px; height: 22px" />
                    <!-- <img v-if="scope.row.logo==='njcn.png'" :src="njcn" class="sidebar-logo" style="width:35px;height:35px"> -->
                </template>
            </el-table-column>
            <el-table-column align="center" min-width="80" label="网页ico" prop="faviconUrl">
                <template slot-scope="scope">
                    <img :src="scope.row.faviconUrl" class="sidebar-logo" style="width: 22px; height: 22px" />
                    <!-- <img v-if="scope.row.ico==='njcn.ico'" src="" class="sidebar-logo" style="width:35px;height:35px"> -->
                </template>
            </el-table-column>

            <!-- <el-table-column 
        align="center"
        prop="color"
        label="主题色值"
      >
    </el-table-column> -->
            <el-table-column align="center" prop="color" label="主题颜色">
                <template slot-scope="scope">
                    <span :style="'border-radius:50% 50%;width:30px;background:' +
                        scope.row.color +
                        ';color:' +
                        scope.row.color
                        ">
                        OO
                    </span>

                    <span :style="'line-height:30px;color:' + scope.row.color" type="primary" size="small">
                        {{ scope.row.color }}
                    </span>
                </template>
            </el-table-column>
            <!-- <el-table-column
        align="center"
        prop="color"
        label="主题"
      >
      <template slot-scope="scope">
          <span v-if="scope.row.color === '#006565'" type="primary" size="small"
            >网公司绿</span
          >
          <span v-if="scope.row.color === '#003078'" type="primary" size="small"
            >灿能蓝</span
          >
          <span v-if="scope.row.color === '#000'" type="primary" size="small"
            >历史大事</span
          >
          <span v-if="scope.row.color === '#08576e'" type="primary" size="small"
            >默认</span
          >
        </template>
    </el-table-column> -->
            <el-table-column align="center" prop="active" label="激活状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.active === 0" type="primary" size="small">未激活</span>
                    <span v-if="scope.row.active === 1" type="primary" size="small">激活</span>
                </template>
            </el-table-column>
            <!-- <el-table-column align="center" prop="state" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0" type="primary" size="small"
            >删除</span
          >
          <span v-if="scope.row.state === 1" type="primary" size="small"
            >正常</span
          >
        </template>
      </el-table-column> -->
            <el-table-column align="center" label="操作" min-width="180">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.active === 0" @click="activateClick(scope.row)" type="primary"
                        size="mini" icon="el-icon-finished">
                        激活
                    </el-button>
                    <el-button @click="EditClick(scope.row)" type="primary" size="mini" icon="el-icon-edit">
                        修改
                    </el-button>

                    <!-- <el-button  v-if="scope.row.active===1"  type="primary" size="mini" icon="el-icon-success">激活</el-button> -->

                    <el-button @click="DeleteClick(scope.row)" type="danger" size="mini" icon="el-icon-delete">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--新增与修改-->
        <el-dialog class="update" :close-on-click-modal="false" :title="rowName" :visible.sync="dialogFormVisible"
            width="30%">
            <!-- <el-dialog :close-on-click-modal="false" :title="rowName" :visible.sync="dialogFormVisible" width="30%" center> -->
            <el-form :model="formData" label-width="110px">
                <el-form-item label="系统名称:">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="主题颜色:" class="top">
                    <el-select v-model="formData.color" placeholder="请选择主题" style="width: 100%">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="top" label="颜色选择:">
                    <el-color-picker :value="settings.themeColor || '#4451B2'" :predefine="[
                        '#4451B2',
                        '#12B1B1',
                        '#409EFF',
                        '#E84B16',
                        '#fa541c',
                        '#EBA313',
                        '#4CB418',
                        '#2f54eb',
                        '#722ed1'
                    ]" popper-class="theme-picker-dropdown" style="position: absolute; height: 26px"
                        class="theme-picker" @change="themeColorChange" />
                </el-form-item>
                <el-form-item label="主题描述:" class="top">
                    <el-input v-model="formData.remark" type="textarea" :rows="2"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="24" style="height: 175px;">
                        <el-form-item label="主题logo:" class="top boder">
                            <el-upload ref="upload" class="upload-demo" action="" :headers="headers" accept="image/**"
                                name="file" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"
                                :before-upload="beforeAvatarUpload1" :auto-upload="false" :limit="1" :multiple="false"
                                list-type="picture">
                                <el-button size="small" type="primary">log上传</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                            <!-- <el-upload
            ref="upload"
            action="#"
            accept="image/**"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false"
            :before-upload="beforeAvatarUpload1"
            :limit="1"
            :multiple="false"
            list-type="picture-card"
          >
            <el-button slot="trigger" size="small" type="primary"
              >上传logo图片</el-button
            >
            <el-button v-if="false" style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> 
            <div slot="tip" class="">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload> -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="主题ico:" class="boder">
                            <!-- <el-upload
            ref="upload2"
            action="#"
            accept="image/**"
            :on-preview="handlePreview1"
            :on-remove="handleRemove1"
            :file-list="fileList1"
            :auto-upload="false"
            :before-upload="beforeAvatarUpload"
            :limit="1"
            :multiple="false"
            list-type="picture-card"
          >
            <el-button slot="trigger" size="small" type="primary"
              >上传ico图片</el-button
            >
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="">只能上传ico文件，且不超过500kb</div>
          </el-upload> -->

                            <el-upload ref="upload2" class="upload-demo" action="#" :headers="headers" accept="image/**"
                                name="file" :on-preview="handlePreview1" :on-remove="handleRemove1"
                                :file-list="fileList1" :auto-upload="false" :before-upload="beforeAvatarUpload"
                                :limit="1" :multiple="false" list-type="picture">
                                <el-button size="small" type="primary">ico上传</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="submitEvent">确 定</el-button>
            </span>
        </el-dialog>
        <div class="drawer-item">
            <span class="item-deder">主题色预览:</span>
            <el-select v-model="value" placeholder="请选择主题" @change="changeColor" style="width: 230px">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
            <el-color-picker :value="settings.themeColor || '#4451B2'" :predefine="[
                '#4451B2',
                '#12B1B1',
                '#409EFF',
                '#E84B16',
                '#fa541c',
                '#EBA313',
                '#4CB418',
                '#2f54eb',
                '#722ed1'
            ]" popper-class="theme-picker-dropdown" style="position: absolute; height: 26px; margin-top: 3px"
                class="theme-picker" @change="themeColor => changeSetting({ themeColor })" />
        </div>
        <!-- <div class="drawer-item">
      <span class="item-deder">布局大小</span>
      <el-select style="width:120px"
        size="mini"
        class="drawer-select"
        :value="settings.size"
        @change="sizeChange"
      >
        <el-option label="小" value="mini" />
        <el-option label="中" value="small" />
        <el-option label="大" value="medium" />
      </el-select>
    </div> -->

        <!-- <div class="drawer-item">
        <span>开启页签</span>
        <el-switch
          :value="settings.tagsView"
          class="drawer-switch"
          @input="tagsView=>changeSetting({tagsView})"
        />
      </div>

      <div class="drawer-item">
        <span>固定头部</span>
        <el-switch
          :value="settings.layout !== 'layout2' && settings.layout !== 'layout1' ? true : settings.fixedHeader"
          class="drawer-switch"
          :disabled="settings.layout !== 'layout2' && settings.layout !== 'layout1' "
          @input="fixedHeader=>changeSetting({fixedHeader})"
        />
      </div> -->
    </div>
    <!-- </el-card> -->
</template>

<script>
import { mapActions } from 'vuex'
import { addClass } from '@/utils/className.js'
import { removeClass } from '@/utils/className'
import { addTheme, getAllThemes, deleteTheme, activateTheme, updateTheme } from '@/api/admin/user'

export default {
    name: 'themeanagement',
    data() {
        return {
            headers: {
                Authorization: window.sessionStorage.getItem('cntoken')
            },
            vh: null,
            dialogFormVisible: false,
            formLabelWidth: '80px',
            rowName: '',
            fileList: [],
            fileList1: [],
            logo: require('../../../../assets/login/logo1.png'),
            njcn: require('../../../../assets/login/njcn.png'),
            formData: {
                id: undefined,
                name: '',
                color: '#08576e',
                remark: ''
            },
            StateOption: [
                { value: 0, label: '删除' },
                { value: 1, label: '正常' }
            ],
            activeOption: [
                { value: 0, label: '未激活' },
                { value: 1, label: '激活' }
            ],
            tableData: [],
            // tableData:[{
            //   id:'00k-100-12',
            //   name:'网公司',
            //   code:'001',
            //   logo:'gw.png',
            //   ico:'gw.ico',
            //   color:'#006565',
            //   active:1,
            //   remark:'国家电网',
            //   state:0
            // },{
            //   id:'00k-100-13',
            //   name:'南京灿能',
            //   code:'002',
            //   logo:'njcn.png',
            //   ico:'njcn.ico',
            //   color:'#003078',
            //   active:0,
            //   remark:'灿能电力',
            //   state:0
            // }],
            options: [
                {
                    value: '#006565',
                    label: '墨绿色'
                },
                {
                    value: '#003078',
                    label: '灿能蓝'
                },
                {
                    value: '#08576e',
                    label: '默认颜色'
                },
                {
                    value: '#000',
                    label: '历史大事'
                }
            ],
            value: '',
            input: '',
            optionstitle: [
                {
                    value: '电能质量监测系统',
                    label: '电能质量监测系统'
                },
                {
                    value: '灿能电能质量监测系统',
                    label: '灿能电能质量监测系统'
                }
            ],
            value2: '',
            optionslogo: [
                {
                    value: '电能质量监测系统',
                    label: '电能质量监测系统'
                },
                {
                    value: '灿能电能质量监测系统',
                    label: '灿能电能质量监测系统'
                }
            ],
            value1: '',
            device: 1,
            logoFile: undefined,
            icoFile: undefined,
            logoFile2: undefined,
            icoFile2: undefined,
            t: undefined,
            row: null
        }
    },
    computed: {
        settings() {
            return this.$store.state.settings
        }
    },
    created() {
        // this.device=window.devicePixelRatio
        this.queryData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        ...mapActions({
            changeSetting: 'settings/changeSetting'
        }),
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 260
        },
        themeColorChange(val) {
            // console.log(val);
            this.formData.color = val
        },
        changeColor(val) {
            this.changeSetting({ themeColor: val })
        },
        changeTitle(val) {
            this.changeSetting({ title: val })
        },
        sizeChange(size) {
            this.$ELEMENT.size = size
            // console.log(`PAGE_SIZE-${this.settings.size}`);
            removeClass(document.body, `PAGE-SIZE-${this.settings.size}`)
            addClass(document.body, `PAGE-SIZE-${size}`)
            this.changeSetting({ size })
            this.refreshView()
            this.$message({
                message: '切换布局大小成功',
                type: 'success'
            })
        },
        refreshView() {
            // In order to make the cached page re-rendered
            this.$store.dispatch('tagsView/delAllTags')

            const { fullPath } = this.$route

            this.$nextTick(() => {
                this.$router.replace({
                    path: '/redirect' + fullPath
                })
            })
        },
        AddClick() {
            this.fileList = []
            this.fileList1 = []
            this.logoFile = null
            this.icoFile = null
            this.formData = {}
            this.dialogFormVisible = true
            this.rowName = '主题新增'

            this.t = 'add'
        },
        EditClick(row) {
            this.row = row
            this.fileList = []
            this.fileList1 = []

            this.rowName = row.name + '主题修改'
            let p = {
                name: 'logo.png',
                url: row.logoUrl
            }
            let d = {
                name: 'logo.ico',
                url: row.faviconUrl
            }
            this.fileList.push(p)
            this.fileList1.push(d)

            // this.fileList.push(this.base64ImgtoFile(row.logoUrl))
            // console.log("imgFile", this.fileList);
            this.t = 'edit'
            this.formData = {
                id: row.id,
                color: row.color,
                name: row.name,
                remark: row.remark
            }
            setTimeout(() => {
                this.dialogFormVisible = true
            }, 300)
        },
        DeleteClick(row) {
            let id = row.id
            if (row.active == 0) {
                this.$confirm('当前主题处于未激活状态', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        deleteTheme(id).then(response => {
                            if (response.code == 'A0000') {
                                this.$message.success('删除成功')
                                this.queryData()
                            }
                        })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            }
            if (row.active == 1) {
                this.$confirm('当前主题处于已经激活状态,删除会导致主题失效', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        deleteTheme(id).then(response => {
                            if (response.code == 'A0000') {
                                this.$message.success('删除成功')
                                this.queryData()
                            }
                        })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            }

            // alert('根据id删除主题'+id)
        },
        activateClick(row) {
            let id = row.id
            activateTheme(id).then(response => {
                if (response.code == 'A0000') {
                    this.$message.success('激活成功')
                    this.queryData()
                }
            })
        },
        submitEvent() {
            this.$refs.upload.submit()
            this.$refs.upload2.submit()
            if (this.t === 'add') {
                const theme = new FormData()
                theme.append('logoFile', this.logoFile)
                theme.append('faviconFile', this.icoFile)
                theme.append('color', this.formData.color)
                theme.append('name', this.formData.name)
                theme.append('remark', this.formData.remark)
                // var arr = [this.logoFile,this.logoFile]
                // console.log(theme);
                var p = this.formData
                addTheme(theme).then(response => {
                    if (response.code == 'A0000') {
                        this.$message.success('新增成功')
                        this.queryData()
                    }
                })
            }
            if (this.t == 'edit') {
                if (this.logoFile2 == undefined && this.icoFile2 == undefined) {
                    this.logoFile2 = this.base64ImgtoFile(this.row.logoUrl)
                    this.icoFile2 = this.base64ImgtoFile(this.row.faviconUrl)
                } else {
                    this.logoFile2 = this.logoFile
                    this.icoFile2 = this.icoFile
                }
                const theme2 = new FormData()
                theme2.append('id', this.formData.id)
                theme2.append('logoFile', this.logoFile2)
                theme2.append('faviconFile', this.icoFile2)
                theme2.append('color', this.formData.color)
                theme2.append('name', this.formData.name)
                theme2.append('remark', this.formData.remark)
                updateTheme(theme2).then(response => {
                    if (response.code == 'A0000') {
                        this.$message.success('修改成功')
                        this.queryData()
                    }
                })
            }
            this.dialogFormVisible = false
        },
        queryData() {
            getAllThemes().then(response => {
                if (response.code == 'A0000') {
                    this.tableData = response.data
                }
            })
        },
        handleRemove(file, fileList) {
            this.fileList = []
            this.logoFile = null
        },
        handlePreview(file) { },
        handleRemove1(file, fileList) {
            this.fileList1 = []
            this.icoFile = null
        },
        handlePreview1(file) { },
        beforeAvatarUpload(file) {
            this.icoFile = file
            //this.icoFile2 = this.icoFile;
        },
        beforeAvatarUpload1(file) {
            this.logoFile = file
            //this.logoFile2 = this.logoFile;
        },
        //转换图片文件
        base64ImgtoFile(dataurl, filename = 'file') {
            let arr = dataurl.split(',')
            let mime = arr[0].match(/:(.*?);/)[1]
            let suffix = mime.split('/')[1]
            let bstr = atob(arr[1])
            let n = bstr.length
            let u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], `${filename}.${suffix}`, {
                type: mime
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
</style>
<style lang="scss" scoped>
.drawer-container {
    padding: 10px 10px 10px 10px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;

    .drawer-item {
        padding: 12px 0;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);

        .layout {
            margin-top: 16px;

            &>li {
                position: relative;
                display: inline-block;
                width: 52px;
                height: 45px;
                margin-right: 10px;

                img {
                    width: 100%;
                    height: 100%;
                }

                i {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    font-size: 22px;
                    font-weight: bold;
                    color: #409eff;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    .drawer-switch {
        float: right;
    }

    .drawer-select {
        float: right;
        width: 60px;
    }
}

.theme-picker ::v-deep .el-color-picker__trigger {
    width: 26px !important;
    height: 26px !important;
    padding: 2px;
}
</style>
<style lang="scss" scoped>
.theme-picker-dropdown {
    z-index: 99999 !important;
    zoom: 1;
}

.theme-picker-dropdown2 {
    z-index: 99999 !important;
    zoom: 1.25;
    margin-top: -3%;
}

.settings-drawer {
    width: 250px !important;
}

.box-card {
    height: 90vh;
}

.item-deder {
    color: $themeColor;
    font-weight: bold;
}

::v-deep .update .el-dialog .el-dialog__body {
    // height: 65vh !important;
    padding: 20px 110px 20px 65px !important;
    // overflow-y: auto;
}

::v-deep .boder {
    border: 1px dotted #ccc !important;
    height: 160px !important;
    padding: 10px !important;
    border-radius: 5px 5px !important;
}
</style>
