<template>
  <el-dialog
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    custom-class="variety-set-dialog"
    top="10vh"
    v-dialogDrag
    :title="form.VarietyPlantId ? '编辑装置':'添加装置'"
		width="650px"
  >
    <div class="main">
      <el-form
        ref="form"
        inline
        class="form-cont"
        label-position="left"
        hide-required-asterisk
        label-width="100px"
        :model="formData"
        :rules="formRules"
      >
        <el-form-item label="地点" prop="address">
          <v-distpicker 
            :province="formData.address[0]"
            :city="formData.address[1]"
            :province-source="province_sorce"
            :city-source="city_sorce"
            hide-area 
            @selected="selectAddress"
          />
        </el-form-item>
        <el-form-item label="工厂" prop="factory">
          <el-input
            v-model="formData.factory"
            style="width: 350px"
            placeholder="请输入工厂"
          />
        </el-form-item>
        <el-form-item label="装置/产线" prop="productionLine">
          <el-input
            v-model="formData.productionLine"
            style="width: 350px"
            placeholder="请输入装置/产线"
          />
        </el-form-item>
        <el-form-item label="年产能" prop="annualOutput">
          <el-input
            v-model="formData.annualOutput"
            type="number"
            style="width: 350px"
            placeholder="请输入年产能"
            @change="changeParams"
          />
        </el-form-item>
        <el-form-item label="检修日期" prop="overhaulDate">
          <el-date-picker
            v-model="formData.overhaulDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请输入检修日期"
            style="width: 350px"
            @change="changeDate"
          />
        </el-form-item>
        <el-form-item label="复产日期" prop="resumeDate">
          <el-date-picker
            v-model="formData.resumeDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请输入检修日期"
            style="width: 350px"
            @change="changeDate"
          />
        </el-form-item>
        <el-form-item label="降负系数" prop="declineCoefficient">
          <el-input
            v-model="formData.declineCoefficient"
            type="number"
            style="width: 350px"
            placeholder="请输入降负系数"
            @change="changeParams"
          />
        </el-form-item>
        <el-form-item label="日均产量减量" prop="dayilyDeclineOutout">
          <el-input
            v-model="formData.dayilyDeclineOutout"
            type="number"
            style="width: 350px"
            placeholder="请输入日均产量减量"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="dia-bot">
			<el-button type="primary" style="margin-right: 20px" @click="saveHandle">保存</el-button>
			<el-button type="primary" plain @click="cancelHandle('cancel')">取消</el-button>
		</div>
  </el-dialog>
</template>

<script>
import{province_sorce,city_sorce} from '@/utils/distpicker';
import * as supplyApi from '@/api/modules/supplyApi.js';
export default {
  props: {
    isShow: {
      type: Boolean
    },
    form: {
      type: Object
    }

  },

  watch: {
    isShow(nval) {
      if(!nval) return
      if(this.form.VarietyPlantId) {
        const { Province,City,Coefficient,FactoryName,PlantName,ResumptionDate,MaintenanceDate,AnnualCapacity,AverageDailyCapacityReduction } = this.form;
        this.formData = {
          address: [Province,City],
          factory: FactoryName,
          productionLine: PlantName,
          annualOutput: AnnualCapacity,
          overhaulDate: MaintenanceDate,
          resumeDate: ResumptionDate,
          declineCoefficient: Coefficient,
          dayilyDeclineOutout: AverageDailyCapacityReduction
        }
      }
    }
  },
  data() {
    return {
      province_sorce,
      city_sorce,
      formData: {
        address: [],
        factory: '',
        productionLine: '',
        annualOutput: '',
        overhaulDate: '',
        resumeDate: '',
        declineCoefficient: 1,
        dayilyDeclineOutout: ''
      },
      formRules: {
        // address: [ { required: true, message: '地址不能为空', trigger: 'blur' } ],
        // factory: [ { required: true, message: '工厂不能为空', trigger: 'blur' } ],
        productionLine: [ { required: true, message: '装置产线不能为空', trigger: 'blur' } ],
        annualOutput: [ { required: true, message: '年产能不能为空', trigger: 'blur' } ],
        overhaulDate: [ { required: true, message: '检修日期不能为空', trigger: 'blur' } ],
        resumeDate: [ { required: true, message: '复产日期不能为空', trigger: 'blur' } ],
        declineCoefficient: [ { required: true, message: '降负系数不能为空', trigger: 'blur' } ],
        dayilyDeclineOutout: [ { required: true, message: '日均产量减量不能为空', trigger: 'blur' } ],
      }
    }
  },

  methods: {
    changeParams() {
      const { declineCoefficient,annualOutput }  = this.formData;
      this.formData.dayilyDeclineOutout = annualOutput/365*declineCoefficient;
    },

    selectAddress({province,city}) {
      this.formData.address = [province.value,city.value]
    },

    changeDate() {
      const { overhaulDate,resumeDate }  = this.formData;
      if(overhaulDate && resumeDate && new Date(resumeDate).getTime() <= new Date(overhaulDate).getTime()) {
        this.$message.warning('复产日期不得早于检修日期 ')
        this.formData.resumeDate = '';
        return
      } 
    },

    init() {
      this.$refs.form.resetFields();
      this.formData = {
        address: [],
        factory: '',
        productionLine: '',
        annualOutput: '',
        overhaulDate: '',
        resumeDate: '',
        declineCoefficient: 1,
        dayilyDeclineOutout: ''
      }
    },

    cancelHandle() {
      this.init();
      this.$emit('update:isShow',false)
    },
    

    /* 保存 */
    async saveHandle() {
      await this.$refs.form.validate();
      const { 
        address,
        factory,
        productionLine,
        annualOutput,
        overhaulDate,
        resumeDate,
        declineCoefficient,
        dayilyDeclineOutout 
      } = this.formData;

      let params = {
        Province: address[0],
        City: address[1],
        FactoryName: factory,
        PlantName: productionLine,
        MaintenanceDate: overhaulDate,
        ResumptionDate: resumeDate,
        AnnualCapacity: Number(annualOutput),
        Coefficient: Number(declineCoefficient),
        AverageDailyCapacityReduction: Number(dayilyDeclineOutout)
      }

      const res = this.form.VarietyPlantId
        ? await supplyApi.editPlant({ VarietyPlantId: this.form.VarietyPlantId,...params})
        : await supplyApi.addPlant({VarietyId: Number(this.$route.query.id), ...params})

      if(res.Ret !== 200) return
      this.$message.success('保存成功');
      this.cancelHandle();
      this.$emit('successBack');
    },
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 0 50px;
}
.dia-bot {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}
</style>
<style lang="scss">
.variety-set-dialog {
  .el-cascader .el-input {width: 100% ;}
}
</style>