<template>
    <div style="height:100%;padding:20px">
        <div>
            <div style="display:flex;justify-content: space-between;">
                <el-form :inline="true">
                <el-form-item label="时间">
                    <el-select v-model="queryParams.timeUnit" @change="changeEcharts()"  placeholder="请选择时间">
                        <el-option
                            v-for="item in timeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地区">
                    <el-select v-model="queryParams.area" @change="changeEcharts()" clearable  placeholder="请选择地区">
                        <el-option
                            v-for="item in areaList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公司" v-if="type == 1">
                    <el-select v-model="queryParams.companyName" @change="changeEcharts()" clearable  placeholder="请选择公司">
                        <el-option
                            v-for="item in companyList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="趋势图">
                    <el-select v-model="queryParams.relation" @change="changeRelation()"  placeholder="请选择公司">
                        <el-option
                            v-for="item in relationList"
                            :key="item.value"
                            :label="item.label.xStr+'与'+item.label.yStr"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- <div>
                <el-button type="primary" @click="setting">配置</el-button>
            </div> -->
            </div>

            
        </div>
        <div>
            <component v-if="type == 1" :is="component" :ref="components" :domId="components" :NewForm="form"  @form="getForm"></component>
            <component :is='component' :ref="component"  :NewForm="form" @form="getForm"></component>  
            
        </div>  
        <el-drawer
            title="图表配置"
            :visible.sync="drawer"
            direction="rtl"
            :before-close="handleClose"
            size="500px">
            <div style="width:500px">
               <Style :form="form"></Style> 
            </div>
            
        </el-drawer>
    </div>
</template>
<script>
import { commonMethods } from './echarts'
import Style from '@/views/workspace/components/setting/style.vue'
// import {settingMethod} from '@/views/workspace/components/setting/mixins'
export default {
    mixins:[commonMethods],
    props:['id','type','name'],
    components:{
        Style
    },
    data() {
        return {
            form:{},
            drawer:false,
            height:'400px',
            ChartData:[],
            component:'MultipleLine',
            components:'MultipleLineAll',
            queryParams:{
                timeUnit:0,
                relation:1
            },
            relationList:[
                {
                    label:{
                        x:'marketDate',
                        xStr:'时间',
                        y:'saleTotalMoney',
                        yStr:'销售额'
                    },
                    value:1
                },
                {
                    label:{
                        x:'marketDate',
                        xStr:'时间',
                        y:'customLicenseMoney',
                        yStr:'自定义许可费'
                    },
                    value:2
                },
            ],
            timeList:[
                {
                    value:0,
                    label:'月'
                },
                {
                    value:1,
                    label:'季度'
                },
                {
                    value:2,
                    label:'年'
                },
            ],
            areaList:[],
            companyList:[],
        }
    },
    watch:{
        id(val){
            this.init()
        },
        type(val){},
        name(){}
    },
    mounted() {
        // this.handleAdd()
        this.init()
    },
    methods: {
        getForm(val){
            this.form = val
            this.drawer = true
        },
        handleClose(){
            this.form = JSON.parse(JSON.stringify(this.form))
            this.drawer = false
        },
        setting(){
            this.drawer = true
        },
        changeRelation(){
            var relation = this.relationList.find(i=>{
                return i.value == this.queryParams.relation
            })
            var name = this.name + (this.type==1?'产品类别':'产品') + '趋势图'
           if(this.type==1){
                this.$refs[this.components].open(this.chartData.filter(item=>{
                    return item.productId==0
                }),'趋势总图',relation.label,this.queryParams.timeUnit)
                this.$refs[this.component].open(this.chartData.filter(item=>{
                    return item.productId!=0
                }),name,relation.label,this.queryParams.timeUnit)
            }else{
                this.$refs[this.component].open([this.chartData],name,relation.label,this.queryParams.timeUnit)
            }
        },
        async changeEcharts(){
           var chartData =await this.getData()
           this.chartData = chartData?chartData:[]
        //    if(this.queryParams.timeUnit == 1 && this.type==1){
        //         var arr ={
        //             1:'第一季度',
        //             2:'第二季度',
        //             3:'第三季度',
        //             4:'第四季度',
        //         } 
        //         this.chartData.forEach(item => {
        //             item.saleVOS.forEach(item2=>{
        //                 var str = item2.marketDate.slice(item2.marketDate.length-1,item2.marketDate.length)
        //                 item2.marketDate=item2.marketDate.substring(0,item2.marketDate.length-1)
        //                 item2.marketDate = item2.marketDate + arr[str]
        //             })
        //         });
        //    }
          this.changeRelation()
            
           
        },
       async init(){
            const [chartData,areaList] = await Promise.allSettled([this.getData(),this.getAreaList()])
            this.chartData = chartData.status =='fulfilled'?chartData.value:[]
            this.areaList= areaList.status =='fulfilled'?areaList.value.map(item=>{
                return {
                    value:item,
                    label:item
                }
            }):[]
            if(this.type == 1){
                this.getCompanyList()
            }
            this.changeRelation()
            // var name = this.name + (this.type==1?'产品类别':'产品') + '趋势图'
            // if(this.type==1){
            //     this.$refs[this.components].open(this.chartData.filter(item=>{ return item.productId==0 }),'趋势总图')
            //     this.$refs[this.component].open(this.chartData.filter(item=>{return item.productId !=0}),name)
            // }else{
            //     this.$refs[this.component].open([this.chartData],name)
            // }
            
            
        },
       async getData(){
            if(this.type == 1){
                this.queryParams.categoryId = this.id
                this.queryParams.categoryArea = this.queryParams.area
                return await this.$api.showTrend(this.queryParams)
                    .then( async response=>await response.data)
            }else if(this.type == 2){
                this.queryParams.productId = this.id
                this.queryParams.saleArea = this.queryParams.area
                return await this.$api.ProductShowTrend(this.queryParams).then( async response=>await response.data)
            }
           
            
        },
        getAreaList(){
            var params = {}
            if(this.type == 1){
                params.categoryId = this.id
            }else{
                params.productId = this.id
            }
            return this.$api.getAreaList(params).then(response=> response.data)
        },
        getCompanyList(){
             this.$api.getCompanyList({id:this.id}).then(response=>{
                if(response.code == 200){
                     this.companyList=response.data?response.data.map(item=>{
                        return {
                            value:item,
                            label:item
                        }
                    }):[]
                }
            }
            )
        }
    },
}
</script>