<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.timeType" @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>
            </div>
        </div>
        <div>
            <component :is='component' :ref="component" v-bind="$attrs"></component> 
        </div>
    </div>
</template>
<script>
import { commonMethods } from './echarts'
export default {
    mixins:[commonMethods],
    props:{
        searchQuery:{
            default:()=>{
                return {
                    startNumber:1,
                    endNumber:0,
                    isDelete:[],
                    isAdd:[]
                }
            }
        },
        patentNo:{
            default:null
        }
    },
    components:{
    },
    data() {
        return {
            height:'400px',
            ChartData:[],
            component:'MultipleLine',
            components:'MultipleLineAll',
            queryParams:{
                timeType: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:[],
        }
    },
    watch:{
        patentNo(val){
            this.init()
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        changeRelation(){
            var option = {
                customLicense:'预估许可价值',
                licenseFee:'已发生的许可费用',
                saleMoney:'营销数据'
            }
            this.$refs[this.component].open(this.chartData,'价值曲线',option,this.queryParams.timeType)

        },
        async changeEcharts(){
            await this.getData()
            this.changeRelation()
        },
       async init(){
           await this.getData()
            this.changeRelation()
            // const [areaList] = await Promise.allSettled([this.getAreaList()])
            // this.areaList= areaList.status =='fulfilled'?areaList.value.map(item=>{
            //     return {
            //         value:item,
            //         label:item
            //     }
            // }):[]
            
        },
       async getData(){
            // this.queryParams.saleArea = this.queryParams.area
            var params = {
                ...this.searchQuery,
                ...this.queryParams
            }
            if(this.patentNo){
                params.isAdd = [this.patentNo]
            }
            await this.$api.selectValueCurve(params).then(response=>{
                    if(response.code == 200){
                        this.chartData = response.data.data
                    }
            })
           
            
        },
        getAreaList(){
            var params = {
                patentNoList:this.patentNo
            }
            return this.$api.getAreaList(params).then(response=> response.data)
        },

    },
}
</script>