<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 style="margin: 10px 0;"  v-for="item in lists"
              :key="item.id">
        <el-col :span="8">
          <el-form-item label="出发地"  >
            <el-autocomplete
            class="inline-input"
            style="margin-left: 10px;"
            v-model="item.name"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出发时间">
            <el-input style="width: 150px;" v-model="item.departTimeNew" @blur="onEditorBlur(item)" placeholder="请输入出发时间"></el-input>
            <div>格式0:0,8:0,8:30</div>
            <!--<el-time-picker-->
              <!--v-model="item.departTime"-->
              <!--value-format="HH:mm"-->
              <!--format="HH:mm"-->
              <!--@change="changeTime(item)"-->
              <!--placeholder="任意时间点">-->
            <!--</el-time-picker>-->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排序">
            <el-input style="width: 150px;" type="number" min="0" v-model="item.rank" placeholder="请输入排序"></el-input>
            <el-button type="danger" size="small" @click="deleteItem(item)">删除</el-button>
          </el-form-item>
        </el-col>
        <!--<el-col :span="3">  <el-button type="danger" size="small" @click="deleteItem(item)">删除</el-button></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"],
    name: 'destinationDialog',
    components: {
      ElForm,
      ElFormItem,
      ElCol,
      ElInput,
      ElRow
    },
    data() {
      return {
        isVisible: false,
        time:"",
        lists: [],//新增项
        t: {},
        num: 0,
        obj:{}//新增项
      }
    },
    created() {
      getAll()
        .then(response => {
          this.allCompaniesArr = response.data;
        });
      getAllCompany(codeAndBranchCompany => {
        this.allCompanies = codeAndBranchCompany;
      });
    },
    watch: {
      isVisible(newValue, oldValue){
        if(!newValue){
          this.$emit('departureEvent', false);
        }
      },
    },
    mounted() {
      let that = this;
      let arr = [];
      this.list.map(function(item){debugger
        item.h = parseInt(item.departTime / 3600);
        item.s = (item.departTime-item.h*3600)/60;
        item.departTimeNew = item.h+":"+item.s;
        item.rank = item.rank?item.rank:0;
        item.visible2 = false;
        arr.push(item);
      });
      this.lists = arr;
      this.isVisible = true;
    },
    computed: {
      ...mapGetters([
        'elements',
      ])
    },
    methods: {
      deleteHandler(){},
      addTime(){
        this.t = {
          name: "",
          rank: 0,
          departTime: 28800,
        };
        this.lists.push(this.t);
      },
      /**
       * 改变出发时间
       * */
      onEditorBlur(val){
        let arr = val.departTimeNew.split(":");
        val.departTime = arr[0]*3600+ arr[1]*60;
        console.log(val);
      },
      changeTime(val){
//        if(typeof val == "object"){
//          let hour = val.departTime.getHours();
//          let sec = val.departTime.getMinutes();
//          val.departTime = hour*3600+ sec*60;
//          console.log(val.departTime);
//        }
      },
      /**
       * 删除分公司出发地
       * */
      deleteItem(obj){
        this.lists.splice(this.lists.indexOf(obj),1);
        console.log(obj);
      },
      /**
       * 确定
       * */
      okHandler() {
        let arr = [];
//        this.lists.map(function(item){
//          // 时间转时间戳
//          let hour = item.departTime_new.getHours();
//          let sec = item.departTime_new.getMinutes();
//          item.departTime = hour*3600+ sec*60;
//        });
        this.$emit('departureEvent', this.lists);
        console.log( this.list)
      },
      /**
       * 弹框-取消
       * */
      cancel() {
        this.$emit('departureEvent', false);
      },
      querySearch(queryString, cb) {
        let selectArry = [];
        this.allCompaniesArr.map(function(item){
          item.value = item.name;
          selectArry.push(item);
        });
        this.selectArry = selectArry;
        var results = queryString ? selectArry.filter(this.createFilter(queryString)) : selectArry;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      handleSelect(item) {
        this.lists.splice(this.lists.indexOf(item),1);
        item.departTime = 28800;
        this.lists.push(item);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.name.indexOf(queryString.toLowerCase()) != -1);
        };
      },
    }
  }
</script>
