<template>
  <div class="analyse-list-page">
    <div class="top">
      <div class="top-left">
        <el-button type="primary" plain v-if="targetData.length" @click="downloadData">下载减产量EXCEL</el-button>
        <template v-if="varietyInfo">
          <span style="margin: 0 40px;">品种:{{varietyInfo.VarietyName}}</span>
          <span>上次更新时间:{{varietyInfo.ModifyTime}}</span>
        </template>
      </div>
      <div>
        <span v-if="varietyInfo">
          年生产天数 
          <el-input v-model="varietyInfo.ProductionDay" type="number" style="width:70px" @change="setDayHandle" :disabled="$route.query.type==='look'"/>天
        </span>
        
        <el-button type="primary" @click="calulateHandle" style="margin-left:10px">计算</el-button>
      </div>
    </div>
    <div class="section" style="border-bottom: 1px dashed #DCDFE6;" v-if="targetData.length">
      <targetTable 
        :data="targetData" 
        @createTarget="createTargetHandle"
      />
    </div>
    <div class="section">
      <plantTable 
        :data="plantData" 
        @editPlant="addPlantHandle"
        @getData="getPlantList"
      />
    </div>

    <!-- 添加装置弹窗 -->
    <addPlantDia
      :isShow.sync="isOpenPlantDialog"
      :form="plantForm"
      @successBack="() => {getPlantDetail(); getPlantList()}"
    />
    
    <!-- 生成指标弹窗  -->
    <createTarget
      :isShow.sync="isCreateTargetDialog"
      :params="targetForm"
      @successBack="() => {getPlantDetail();getTargetList()}"
    />

  </div>
</template>

<script>
import * as supplyApi from '@/api/modules/supplyApi.js';
import plantTable from './components/plantTable.vue';
import targetTable from './components/targetTable.vue';
import addPlantDia from './components/addPlantDia.vue';
import createTarget from './components/createTargetDia.vue'
import * as $calculate from '@/utils/calculate.js'
export default {
  components: { plantTable,targetTable,addPlantDia,createTarget },
  data() {
    return {
      varietyId: this.$route.query.id,
      varietyInfo: null,
      targetData: [],
      plantData: [],

      /* 装置弹窗 */
      isOpenPlantDialog: false,
      plantForm: {},

      /* 生成指标弹窗 */
      isCreateTargetDialog: false,
      targetForm: {}
    }
  },
  computed: {
    downloadUrl() {
      return `${process.env.API_ROOT}/supply_analysis/variety/data/export?VarietyId=${this.$route.query.id}&${localStorage.getItem('auth')}`;
    }
  },

  mounted() {
    this.getPlantDetail();
    this.getTargetList();
    this.getPlantList();
  },

  methods: {
    /* 指标列表 */
    async getTargetList() {
      const res = await supplyApi.targetList({VarietyId: Number(this.varietyId)});
      if(res.Ret !== 200) return
      
      this.targetData = res.Data.List || [];
    },

    /* 获取装置 */
    async getPlantList() {
      const res = await supplyApi.plantList({VarietyId: Number(this.varietyId)});
      if(res.Ret !== 200) return
      
      this.plantData = res.Data.List&&res.Data.List.map(_ => ({
        ..._,
        AverageDailyCapacityReductionTon: $calculate.multiply(_.AverageDailyCapacityReduction,10000)
      })) || [];
    },
    
    /* 品种详情 */
    async getPlantDetail() {
      const res = await supplyApi.varietyDetail({VarietyId: Number(this.varietyId)})
      if(res.Ret !== 200) return
      
      this.varietyInfo = res.Data;
    },

    /* 添加装置 */
    addPlantHandle(params=null) {
      this.plantForm = params || {};
      this.isOpenPlantDialog = true;
    },

    /* 生成指标 */
    createTargetHandle(params) {
      this.targetForm = params;
      this.isCreateTargetDialog = true;
    },

    /* 计算 */
    async calulateHandle() {
      if(!this.plantData.length) return this.$message.warning('请先添加装置')
      const res = await supplyApi.analyseVariety({ VarietyId: Number(this.varietyId)})

      if(res.Ret !== 200) return
      this.$message.success('计算成功')

      this.getTargetList();

      this.getPlantDetail();
    },

    setDayHandle: _.debounce(async function() {
      await supplyApi.setVareityInfo({
        VarietyId: Number(this.varietyId),
        Day: Number(this.varietyInfo.ProductionDay)
      })
    },200),

    downloadData() {
      this.btnload = true;

			const link = document.createElement("a")
			link.href=this.downloadUrl
			link.download=''
			link.click();
      
			setTimeout(()=> {
				this.btnload = false;
			},5000)
    }
  }
}
</script>

<style lang="scss" scoped>
.analyse-list-page {
  min-height: calc(100vh - 180px);
  padding: 20px 30px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top-left {
      display: flex;
      align-items: center;
      color: #666;
    }
  }
  .section {
    margin-top: 30px;
    padding-bottom: 30px;
    .add-cont {
      color: #409EFF;
      margin-top: 15px;
      cursor: pointer;
    }
  }
}
</style>