<template>
  <div class="chart-auth-wrap">
    <el-dialog
        :visible.sync="showChartAuthPop"
        :close-on-click-modal="false"
        :modal-append-to-body='false'
        @close="handleClose"
        center
        top="30vh"
        v-dialogDrag
        width="800px"
        title="图表权限"
    >

        <div class="chart-auth-content">
            <div class="flex type-box">
                <div style="margin-right:10px">可见ETA图表分类: </div>
                <div v-if="chartAuthClassifyList.length==0">暂无分类，请提醒研究员设置ETA图表权限</div>
                <div v-else>
                    <span v-for="item in chartAuthClassifyList" :key="item.MyChartClassifyId" @click="clickClassifyItem(item)">{{item.MyChartClassifyName}}</span>
                </div>
            </div>
            <div class="flex" style="margin-bottom: 20px;">
                <div style="margin-right:10px">图表阅读时长: </div>
                <div><span style="color:#409EFF">{{getTimeCount()}}</span> 天</div>
            </div>
            <div class="flex" style="margin-bottom: 20px;align-items: center;">
                <div style="margin-right:10px">起止时间: </div>
                <div>
                    <span>{{chartAuthUserInfo.StartTime}} --</span>
                    <el-date-picker
                        v-model="chartAuthUserInfo.EndTime"
                        type="date"
                        :picker-options="timePickerOptions"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                    <span style="color:#999">（结束日期不可晚于客户权限到期日期）</span>
                </div>
            </div>
            <div class="flex" style="margin-bottom: 20px;">
                <div style="margin-right:10px">阅读权限: </div>
                <div>
                    <el-switch
                        v-model="chartAuthUserInfo.auth"
                        active-color="#13ce66"
                        inactive-color="#DCDFE6">
                    </el-switch>
                    <span style="position: relative;top:3px">{{chartAuthUserInfo.auth?'开':'关'}}</span>
                </div>
            </div>
            <div style="text-align:center;margin:30px 0">
                <el-button type="primary" @click="handleSave">保存</el-button>
                <el-button type="primary" plain @click="handleClose">取消</el-button>
            </div>
        </div>
      
    </el-dialog>
  </div>
</template>

<script>
import {mychartInterface,customInterence} from '@/api/api'
import moment from 'moment'
export default {
    props:{
        showChartAuthPop:{
            type:Boolean
        },
        chartAuthClassifyList:[],
        chartAuthUserInfo:{}
    },
    computed:{
        timePickerOptions(){
            let that=this
            let obj={
                disabledDate(time) {
                    if(that.chartAuthUserInfo){
                        return time.getTime()<new Date(that.chartAuthUserInfo.StartTime).getTime()||time.getTime()>new Date(that.chartAuthUserInfo.ExpireDay).getTime()
                    }else{
                        return false
                    }
                }
            }

            return obj
        }
    },
    methods: {
        handleClose(){
            this.$emit('chartAuthClose')
        },

        handleSave(){
            if(!this.chartAuthUserInfo.EndTime){
                this.$message.warning('请选择结束日期')
                return
            }
            this.$emit('chartAuthSave')
        },

        getTimeCount(){
            return moment(this.chartAuthUserInfo.EndTime).diff(this.chartAuthUserInfo.StartTime,'days')+1||0
        },

        clickClassifyItem(item){
            sessionStorage.setItem('myChartOpt',item.MyChartClassifyId)
            sessionStorage.setItem('myChartIspublic',item.IsPublic)
            let routeData = this.$router.resolve({ path: '/mychart', })
            window.open(routeData.href, '_blank');
        }
        
    }
}
</script>

<style lang="scss" scoped>
.chart-auth-wrap{
    .flex{
        display: flex;
    }
    .chart-auth-content{
        font-size: 14px;
        .type-box{
            margin-bottom: 20px;
            
            span{
                display: inline-block;
                margin-right: 10px;
                cursor: pointer;
                color: #409EFF;
            }
        }
    }
}
</style>