<template>
  <el-dialog
  :modal-append-to-body='false'
  title="图例名称设置" 
  :visible.sync="isEditLegend"
  :close-on-click-modal="false"
  @close="cancelHandle"
  center
  v-dialogDrag 
  width="620px">
    <div class="dialog-legend">
      <div v-for="(item,index) in legendListCopy" :key="item.Name" class="legend-item">
        <div class="legend-item-color" :style="{backgroundColor:seasonColor[index]}"></div>
        <el-input v-model.trim="item.Value" placeholder="请输入图例名称" style="width: 295px;"></el-input>
      </div>
      <div class="legend-box-hint">默认取该曲线最新日期的数据年份作为图例名称，手动编辑为其他格式，则不再自动更新</div>
    </div>
    <div class="dia-bot">
      <el-button plain @click="cancelHandle" style="width: 120px;">取消</el-button>
      <el-button type="primary" style="width: 120px;margin-left:30px" @click="saveHandle">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {seasonOptions} from "@/utils/defaultOptions.js" 
import _ from 'lodash';
export default {
name:'',
props: {
  isEditLegend: {
    type: Boolean,
    required:true
  },
  legendList:{
    type: Array,
    required:true
  }
},
computed:{
  seasonColor(){
    return seasonOptions.colors.slice(-this.legendList.length)
  }
},
data () {
  return {
    legendListCopy:[]
  };
},
watch: {
  // isEditLegend(val) {
  //   if(val) {
  //     // 数据没加载出来时 打开弹窗 legendListCopy 会为空
  //     this.legendListCopy = _.cloneDeep(this.legendList)
  //   }
  // },
  legendList(val){
    if(val){
      this.legendListCopy = _.cloneDeep(this.legendList)
    }
  }
},
methods: {
  saveHandle() {
    if(this.legendListCopy.some(item=> !item.Value)){
      this.$message.error("所有图例名称都不能为空")
      return
    }
    this.$emit('saveLegend',this.legendListCopy)
  },
  cancelHandle() {
    this.$emit('cancel')
  }
}
}
</script>
<style lang='scss' scoped>
.dialog-legend{
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .legend-item{
    margin-bottom:8px ;
    display: flex;
    align-items: center;
    .legend-item-color{
      width: 30px;
      height: 2px;
      margin-right: 20px;
    }
  }
  .legend-box-hint{
    margin-top: 10px;
    color: #C0C4CC;
    font-size: 14px;
    font-weight: 100;
  }
}
.dia-bot{
  margin: 30px 0;
}
</style>