<template>
  <el-dialog
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :title="`${info.tagName}指标配置`"
    @close="cancelHandle"
    custom-class="tag-relation-dialog"
    center
    width="650px"
    v-dialogDrag
  >
    <div class="dialog-min">
      <ul class="list-ul">
        <li class="list-li" v-for="(item,index) in list" :key="index">
          <label class="variety-name">{{item.varietyName}}</label>

          <selectTarget
            :defaultId="item.edbInfoId"
            :defaultOpt="searchOptions"
            @select="e => selectTargetHandle(e,item)"  
            :filter="false"
            style="max-width: 200px;"
          />
          <el-date-picker
            v-model="item.endDate"
            type="date"
            value-format="yyyy-MM-dd"
            disabled
            style="width:140px;"
            placeholder="最新日期"
          />

          <el-input
            v-model="item.endValue"
            style="width: 100px;"
            disabled
            placeholder="最新值"
          />

        </li>
      </ul>

      <div class="dialog-bot">
        <el-button type="primary" style="margin-right: 20px" @click="saveHandle"
          >保存</el-button
        >
        <el-button type="primary" plain @click="cancelHandle">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { crossVarietyInterface } from '@/api/modules/chartRelevanceApi';
import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
export default {
  components: { selectTarget },
  props: {
    isShow: {
      type: Boolean
    },
    info: {
      type:  Object
    },
    varietyList: {
      type: Array
    }
  },
  watch: {
    isShow(nval) {
      if(!nval) return

      this.getRelationList() 
    }
  },
  data() {
    return {
      list: [],
      searchOptions: []
    }
  },
  methods:{
    selectTargetHandle(e,item) {
      if(!e){
        item.edbName = '';
        item.edbInfoId = '';
        item.endDate = '';
        item.endValue = '';
        return
      } 
      const { EndDate,EndValue,EdbName,EdbInfoId } = e;
      
      item.edbName = EdbName;
      item.edbInfoId = EdbInfoId;
      item.endDate = EndDate;
      item.endValue = EndValue;
    },

    /* 获取标签关联品种列表 */
    async getRelationList() {
      let res = await crossVarietyInterface.getTagRelation({ ChartTagId: this.info.id })
      if(res.Ret!==200) return

      let relationArr = res.Data.List || [];

      this.list = this.varietyList.map(_ => {
        let relationItem = relationArr.length ? relationArr.find(item => item.ChartVarietyId===_.ChartVarietyId) : undefined

        return {
          varietyName: _.ChartVarietyName,
          varietyId: _.ChartVarietyId,
          edbName: relationItem?relationItem.EdbName:'',
          edbInfoId: relationItem?relationItem.EdbInfoId:0,
          endDate: relationItem?relationItem.EndDate:'',
          endValue: relationItem?relationItem.EndValue:''
        }
      })

      this.searchOptions = this.list.map(_ => ({
        EdbName: _.edbName,
        EdbInfoId: _.edbInfoId
      }))
    },

    /* 保存`` */
    saveHandle: _.debounce(async function() {
      let params = {
        ChartTagId: this.info.id,
        VarietyEdb: this.list.map(_ => ({
          ChartVarietyId: _.varietyId,
          EdbInfoId: _.edbInfoId
        })).filter(_ => _.EdbInfoId)
      }
      let res = await crossVarietyInterface.setTagRelationVariety(params)

      if(res.Ret!==200) return
      this.$message.success('配置保存成功')
      this.$emit('refresh')
      this.cancelHandle()
    },300),

    cancelHandle() {
      this.list = [];
      this.searchOptions=[];
      this.$emit('update:isShow',false)
    }
  },
}
</script>
<style scoped lang='scss'>
.dialog-min {
  padding: 30px 0 50px;
  .list-ul{
    padding: 0 15px;
    max-height: calc(100vh - 500px);
    min-height: 300px;
    overflow-y: auto;
    .list-li {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;
      .variety-name {
        /* margin-right: 20px; */
        width: 100px;
      }
    }
  }
  .dialog-bot {
    display: flex;
    margin-top: 30px;
    justify-content: center;
  }
}
</style>
<style lang="scss">
  /* .tag-relation-dialog .el-dialog__body {
    max-height: calc(100vh - 350px);
    min-height: 300px;
    overflow-y: auto;
  } */
</style>
