<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-select v-model="item.name" filterable placeholder="请选择">
              <el-option
                v-for="iitem in allCompaniesArr"
                :key="iitem.value"
                :label="iitem.name"
                :value="iitem.id">
              </el-option>
            </el-select>
          </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:"",
        t: {},
        lists:[],
        num: 0,
        obj:{},//新增项
        allCompaniesArr:[],
      }
    },
    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){
        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;
        let c = that.objDeepCopy(item);
        arr.push(c);
      });
      this.lists = arr;
      this.isVisible = true;
    },
    computed: {
      ...mapGetters([
        'elements',
      ])
    },
    methods: {
      changeDeparture(item){
        let select = {};
        this.allCompaniesArr.map(function(ii){
          if(ii.id == item.name){
            select = ii;
          }
        });
        this.lists.map(function(iitem){
          if(iitem.id == item.id){
            iitem.name = select.name;
            iitem.address = select.address;
            iitem.companyId = select.id;
            iitem.addrProvince = select.addrProvince;
            iitem.addrCity = select.addrCity;
            iitem.longitude = select.longitude;
            iitem.latitude = select.latitude;
          }
        });
      },
      /**
       * 深拷贝
       */
      objDeepCopy (source) {
        var sourceCopy = source instanceof Array ? [] : {};
        for (var item in source) {
          sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item];
        }
        return sourceCopy;
      },
      addTime(){
        let t = {
          addrCity: undefined,
          addrDetail: undefined,
          addrProvince: undefined,
          id: undefined,
          companyId: undefined,
          latitude: undefined,
          longitude: undefined,
          name: "",
          zoneId: undefined,
          departTime: 28800,
        };
        this.lists.push(t);
      },
      /**
       * 改变出发时间
       * */
      onEditorBlur(val){
        let arr = val.departTimeNew.split(":");
        val.departTime = arr[0]*3600+ arr[1]*60;
        console.log(val);
      },
      /**
       * 删除分公司出发地
       * */
      deleteItem(obj){
        this.lists.splice(this.lists.indexOf(obj),1);
        console.log(obj);
      },
      /**
       * 确定
       * */
      okHandler() {
        let arr = [];
        let that = this;
//        this.list.map(function(item){
//          // 时间转时间戳
//          let hour = item.departTime_new.getHours();
//          let sec = item.departTime_new.getMinutes();
//          item.departTime = hour*3600+ sec*60;
//        });

        this.lists.map(function(item){
          let departTime = item.departTime;
          let select = {};
          that.allCompaniesArr.map(function(ii){
            if(ii.id == item.name){
              let provinceObj = getRegionByCodes([ii.addrProvince]);
              let cityObj = getRegionByCodes([ii.addrCity]);
              item.provinceName = provinceObj[0].name;
              item.cityName = cityObj[0].name;
              item.addrProvince =  ii.addrProvince;
              item.address = ii.addrDetail,
              item.addrCity =  ii.addrCity;
              item.addrTown = ii.addrTown;
              item.name = ii.name;
              item.companyId = ii.id;
              item.longitude = ii.longitude;
              item.latitude = ii.latitude;
              item.departTime =  departTime;
            }
          });
        });
//        this.lists.map(function)
        this.$emit('departureEvent', this.lists);
        console.log( this.lists)
      },
      /**
       * 弹框-取消
       * */
      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);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.name.indexOf(queryString.toLowerCase()) != -1);
        };
      },
    }
  }
</script>
