<template>
<div v-dialogDrag v-show="isShow" >
  <div class="select-target-value-dia el-dialog" >
    <div class="header el-dialog__header">
      <span>选择指标</span>
      <i class="el-icon-close" @click="cancelHandle"/>
    </div>
    <div class="main">
      <selectTarget
        ref="selectRef"
        :selectStyleType="3"
        @select="chooseEdb"
      />

      <ul class="data-cont">
        <template v-if="result.List">
          <li v-for="(item,index) in result.List" :key="index" :class="[{'choose': item.DataTime===result.Date},'data-li']">
            <span>{{item.DataTime}}</span>
            <span style="min-width:150px">{{item.Value}}</span>
          </li>
        </template>
        <tableNoData size="mini" v-else/>
      </ul>

      <div class="dia-bot">
        <el-button type="primary" style="margin-right: 20px" :disabled="!result.Date" @click="insertData"
          >插入值</el-button
        >
        <el-button type="primary" plain @click="cancelHandle">取消</el-button>
      </div>
    </div>
    
  </div>
</div>
</template>
<script>
import * as sheetInterface from "@/api/modules/sheetApi.js";
import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
import { resetDialogCellStyle } from "../common/customTable";
export default {
  props: {
    isShow: {
      type: Boolean,
    }
  },
  components: { selectTarget },
  data() {
    return {
      result: {},
      edbInfo: null,
      chooseItem: {
        edbId: 0,
        value:''
      }
    }
  },
  methods:{
    /* 选择指标和日期获取近5期数据 */
    async chooseEdb(edb) {
      if(!edb){
        this.initData();
        return
      } 

      this.edbInfo = edb;
      
      if(this.$parent.selectCell.DataType !== 1){

        this.$message.warning('请在表格中选择日期')
        this.initData();
        return
      }

      const res = await sheetInterface.getDateLatelyData({ 
        EdbInfoId: edb.EdbInfoId,
        Date: this.$parent.selectCell.ShowValue
      })
      if(res.Ret !== 200) return

      this.result = res.Data;
      if(!this.result.Date) return this.$message.warning('所选指标所选日期无值')
      this.chooseItem = {
        edbId: edb.EdbInfoId,
        value: this.result.Date?this.result.List.find(_ =>_.DataTime===this.result.Date).Value.toString():''
      }

    },

    insertData() {
      this.$emit('insert',this.chooseItem)
      this.cancelHandle();
    },

    initData() {
      this.$refs.selectRef.search_txt='';
      this.result = {};
      this.edbInfo=null;
      this.chooseItem = { edbId: 0,value: '' }
    },

    cancelHandle() {
      this.initData();
      this.$emit('update:isShow',false);
      resetDialogCellStyle();
    }
  },
}
</script>
<style scoped lang='scss'>
@import "~@/styles/theme-vars.scss";
.select-target-value-dia {
  background: #fff;
  position: fixed;
  top: 20%;
  left: 55%;
  width: 500px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 999;
  .header { 
    height: 50px;
    font-size: 16px;
    background: $theme-color;
    color: #fff;
    padding: 0 15px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    span {
      line-height: 50px;
    }
    .el-icon-close {
      font-size: 20px;
      line-height: 50px;
      cursor: pointer;
    }
  }
  .main {
    padding: 20px 15px;
    .data-cont {
      margin: 15px 0;
      border: 1px solid #DCDFE6;
      /* padding: 20px; */
      .data-li {
        display: flex;
        padding: 15px;
        text-align: center;
        justify-content: space-around;
        &.choose {
          background: #ECF5FF;
        }
      }
    }
    .dia-bot {
      margin-top: 20px; 
      display: flex;
      justify-content: center;
    }
  }
}
</style>
