<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="公司">
                    <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" :height="height"></component> -->
            <component :is='component' :ref="component" :height="height" :form="form" v-bind="$attrs"></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,settingMethod],
    props:['patentNo'],
    components:{
        Style
    },
    data() {
        return {
            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:{
        patentNo(val){
            this.init()
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        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 option = {
                customLicenseMoney:'预估许可价值',
                licenseFee:'已发生的许可费用',
                saleTotalMoney:'营销数据'
            }
            this.$refs[this.component].open(this.chartData,'价值曲线',option,this.queryParams.timeUnit)

        },
        async changeEcharts(){
            await this.getData()
            this.changeRelation()
            // this.$refs[this.component].open(this.chartData,'价值曲线')
        },
       async init(){
           await this.getData()
        //    this.$refs[this.component].open(this.chartData,'价值曲线')
        this.changeRelation()
            const [areaList] = await Promise.allSettled([this.getAreaList()])
            this.areaList= areaList.status =='fulfilled'?areaList.value.map(item=>{
                return {
                    value:item,
                    label:item
                }
            }):[]
            if(this.type == 1){
                this.getCompanyList()
            }
            
            
        },
       async getData(){
            this.queryParams.patentNoList =this.patentNo
            this.queryParams.saleArea = this.queryParams.area
            await this.$api.PatentWorth(this.queryParams).then(response=>{
                    if(response.code == 200){
                        this.chartData = response.data
                    }
            })
           
            
        },
        getAreaList(){
            var params = {
                patentNoList:this.patentNo
            }
            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>