<template>
  <el-dialog title="活动日期" :visible.sync="isVisible">
    <el-button size="small" class="el-button el-button--primary" type="button" icon="plus" @click="addTime()">添加</el-button>
    <el-form>
      <el-row>
        <el-col :span="24">
          <el-form-item label="活动天数">
            <el-input style="width: 200px;" v-model="num" type="number" min="1"  placeholder="请输入活动天数" @change="changeNum()"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-for="item in list"
              style="margin: 10px 0;"
              :key="item.id">
        <el-col :span="8">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="item.startTime"
              type="date"
              :disabled="!item.dis"
              @change="changeStartTime(item)"
              format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束时间">
            <el-date-picker
              disabled
              v-model="item.endTime"
              type="date"
              format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="库存">
            <el-input style="width: 150px;" v-model="item.stock" placeholder="请输入库存"></el-input>
            <el-button type="danger" size="small" @click="deleteItem(item)">删除</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="okHandler('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {
    getSonRegionByCodes,
    getRegionByCodes,
  } from 'api/base_info/region/';
  import rsCode from '../../../utils/rsCode';
  import {mapGetters} from 'vuex';
  import {
    formatDate
  } from 'utils/dateFormattor';
  import {
    getAllCompany,
    getAll
  } from 'api/base_info/branch_company/';
  import ElRow from "element-ui/packages/row/src/row";
  import ElInput from "../../../../node_modules/element-ui/packages/input/src/input.vue";
  import ElCol from "element-ui/packages/col/src/col";
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
  import ElForm from "../../../../node_modules/element-ui/packages/form/src/form.vue";
  export default {
    props: ["list", "number"],
    name: 'destinationDialog',
    components: {
      ElForm,
      ElFormItem,
      ElCol,
      ElInput,
      ElRow
    },
    data() {
      return {
        isVisible: false,
        time:"",
        lists: [],
        t: {},
        num: 0
      }
    },
    created() {

    },
    watch: {
      isVisible(newValue, oldValue){
        if(!newValue){
          let arr = [];
          this.list.map(function(item){
            if(item.startTime){
              arr.push(item);
            }
          });
          let params = {
            priceDTOS: arr
          };
          this.$emit('tourDepartTimeEvent', params);
        }
      },
    },
    mounted() {
      let that = this;
      this.num = this.number;
      this.list.map(function(item){
        let arr = [];
        arr.push(item.startTime);
        arr.push(item.endTime);
        item.visible2 = false;
        item.time = arr;
      });
//      this.lists = this.list;
      this.isVisible = true;
    },
    computed: {
      ...mapGetters([
        'elements',
      ])
    },
    methods: {
      /**
       * 删除时间
       * */
      deleteItem(obj){
        this.list.splice(this.list.indexOf(obj),1);
        console.log(obj);
      },
      deleteHandler(){},
      addTime(){
        this.t = {
          startTime:"",
          endTime: "",
          stock: 0
        };
        this.list.push(this.t);
        this.list[this.list.length-1].dis = 'dis'
        console.log(this.list)
      },
      /**
       * 确定
       * */
      okHandler() {
        if(this.num*1<=0){
          this.$notify({
            title: '失败',
            message: '活动时间必须大于0',
            type: 'warning',
            duration: 2000
          });
          return false;
        }
        let arr = [];
        this.list.map(function(item){
          let t = {
            id: item.id?item.id:undefined,
            startTime: item.startTime,
            endTime: item.endTime,
            stock: item.stock
          };
          arr.push(t);
        });
        let params = {
          priceDTOS: arr,
          num: this.num*1
        };
        this.$emit('tourDepartTimeEvent', params);
        console.log(params)
      },
      /**
       * 弹框-取消
       * */
      cancel() {
        let arr = [];
        this.list.map(function(item){
          if(item.startTime){
            arr.push(item);
          }
        });
        let params = {
          priceDTOS: arr
        };
        this.$emit('tourDepartTimeEvent', params);
      },
      dateChange1(val) { this.filters.startDate = val; },
      /**
       * 改变时间
       * */
      changeStartTime(d){
        if(this.num<=0){
          this.$notify({
            title: '失败',
            message: '活动时间必须大于0',
            type: 'warning',
            duration: 2000
          });
          return false;
        } else {
        }
        d.endTime = formatDate(new Date(d.startTime.getTime() + 3600 * 1000 * 24 * this.num), 'yyyy-MM-dd');
        d.startTime = formatDate(d.startTime, 'yyyy-MM-dd');
      },
      /**
       * 改变活动天数-重新计算结束时间
       * */
      changeNum(){
        console.log(this.num);
        let that = this;
        this.num = this.num*1;
        if(this.num>0){
          this.list.map(function(item){
            let t = new Date(new Date(item.startTime).getTime() + 3600 * 1000 * 24 * (that.num-1));
            item.startTime = formatDate(new Date(item.startTime), 'yyyy-MM-dd');
            item.endTime = formatDate(t, 'yyyy-MM-dd');
          });
          console.log(this.list);
        }

      }
    }
  }
</script>
