<template>
  <div>
  <el-table
    :data="siteTypeTable"
    class="type-table"
    header-row-class-name="customer-row"
    row-class-name="customer-row">
    <el-table-column
      label="Site Type With Schedule"
      prop="label"
      width="200px">
      <template slot="header">
        <div>
          <span class="require">*</span>
          Site Type With Schedule
        </div>
      </template>
      <template slot-scope="{row}">
        <span>{{ row.label }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="All Day"
      width="80px">
      <template slot="header">
        <div>
          <span class="require">*</span>
          All Day
        </div>
      </template>
      <template slot-scope="{row, $index}">
        <el-switch
          v-model="row.allDay"
          :disabled="isSiteTypeEnable($index, true)"
          @change="changeAllDay"/>
      </template>
    </el-table-column>
    <el-table-column
      label="Start Time">
      <template slot="header">
        <div>
          <span class="require1">*</span>
          Start Time
        </div>
      </template>
      <template slot-scope="{row, $index}">
        <el-time-picker
          class="time-picker"
          v-model="row.startTime"
          format="HH:mm"
          value-format="HH:mm"
          placeholder="Start Time"
          :disabled="isSiteTypeEnable($index)">
        </el-time-picker>
      </template>
    </el-table-column>
    <el-table-column
      label="End Time">
      <template slot="header">
        <div>
          <span class="require1">*</span>
          End Time
        </div>
      </template>
      <template slot-scope="{row, $index}">
        <el-time-picker
          class="time-picker"
          v-model="row.endTime"
          format="HH:mm"
          value-format="HH:mm"
          placeholder="End Time"
          :disabled="isSiteTypeEnable($index)">
        </el-time-picker>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import site from '@/http/api/site'
export default {
  name: "",
  props: {
    siteTypes: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      isInit: false,
      siteTypeTable: [{
        siteType: "",
        allDay: false,
        startTime: "",
        endTime: ""
      }]
    };
  },
  watch: {
    siteTypes: {
      deep: true,
      handler(n, o) {
        if (n && n.length) {
          this.init();
        }
      }
    },
    siteTypeTable: {
      deep: true,
      handler(n, o) {
        if (this.isInit) {
          this.isInit = false;
          console.log("跳过onChange");
        } else {
          this.onChange();
        }
      }
    }
  },
  mounted() {
    this.getSiteTypeOptions();
  },
  methods: {
    onChange() {
      /*if (this.isAnyAllDay()) {
        this.siteTypeTable.forEach(item => {
          item.startTime = "";
          item.endTime = "";
        })
      }
      console.log("onChange");*/
      this.$emit('change', this.siteTypeTable);
    },
    init() {
      this.isInit = true;
      const types = []
      for (let item of this.siteTypeTable) {
        for (let t of this.siteTypes) {
          if (item.siteType == t.siteType) {
            types.push({
              label: item.label,
              siteType: item.siteType,
              allDay: t.allDay,
              startTime: t.startTime,
              endTime: t.endTime
            })
            break;
          }
        }
      }
      this.siteTypeTable = types;
    },
    changeAllDay(allDay) {
      if (allDay) {
        this.siteTypeTable.forEach(item => {
          item.startTime = "";
          item.endTime = "";
        })
      }
    },
    getSiteTypeOptions() {
      site.getSiteTypeList().then(res => {
        if (res.data && res.data.length) {
          this.siteTypeTable = [];
          res.data.forEach(item => {
            this.siteTypeTable.push({
              label: item.name,
              siteType: item.value,
              allDay: false,
              startTime: "",
              endTime: ""
            })
          })
          if (this.siteTypes && this.siteTypes.length) {
            this.init();
          }
        }
      })
    },
    isAnyAllDay() {
      for (let i = 0; i < this.siteTypeTable.length; i++) {
        let type = this.siteTypeTable[i];
        if (type.allDay) {
          return true;
        } else {
          continue;
        }
      }
      return false;
    },
    /**判断是否应该启用组件
     * @param {Object} index 索引
     * @param {Object} isSwitch 是否是Switch组件
     */
    isSiteTypeEnable(index, isSwitch) {
      for (let i = 0; i < this.siteTypeTable.length; i++) {
        let type = this.siteTypeTable[i];
        if (type.allDay) {
          if (index == i && isSwitch) {
            return false;
          } else {
            return true;
          }
        } else {
          continue;
        }
      }
      return false;
    }
  }
}
</script>

<style scoped lang="scss">
  .type-table {
    width: 100%;
    min-width: 520px;
    max-width: 800px;
    padding-bottom: 10px;
  }
  .type-table:before {
    height: 0;
  }
  .require {
    color: #f56c6c;
    font-size: 14px;
    margin-left: -8px;
  }
  .require1 {
    color: #f56c6c;
    font-size: 14px;
  }
  ::v-deep .customer-row {
    th,td {
      background: #fff;
      border-bottom: none;
    }
    .time-picker {
      width: 100%;
    }
  }
</style>