<template>
  <div v-if="visible">
    <div
      v-for="(item, index) in chargeRates"
      :key="index"
      class="rate-list-view">
      <el-form-item
        label="Group:"
        label-width="60px"
        v-if="isSpecial">
        <el-select
          v-model="item.groupPk"
          class="rate-text-max"
          @change="onChange">
          <el-option
            v-for="item in companyOptions"
            :key="item.groupPk"
            :label="item.groupName"
            :value="item.groupPk">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="Type:"
        label-width="55px">
        <el-select
          v-model="item.chargeTypePk"
          class="rate-text"
          @change="onChange">
          <el-option
            v-for="item in chargeTypeOptions"
            :key="item.chargeTypePk"
            :label="item.chargeType"
            :value="item.chargeTypePk">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="Rate:"
        label-width="55px">
        <el-input
          v-model="item.rate"
          class="rate-text"
          @blur="onChange"/>
      </el-form-item>
      <div class="ratePunit">/</div>
      <el-form-item
        label=""
        label-width="0px">
        <el-select
          v-model="item.rateType"
          class="rate-type"
          @change="onChange">
          <el-option
            v-for="item in rateTypeOptions"
            :key="item.name"
            :label="item.value"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <img
        class="list-item-icon"
        @click="handleClickSubButton(item, index)"
        src="../../../assets/form-list-sub.png"/>
      <img
        v-if="chargeRates.length - 1 === index"
        class="list-item-icon"
        @click="handleClickAddButton"
        src="../../../assets/form-list-add.png"/>
    </div>
  </div>
</template>

<script>
import site from '@/http/api/site'
import driver from '@/http/api/driver'
import group from '@/http/api/group'
import rates from '@/http/api/rates'
export default {
  name: "ChargeRate",
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    isSpecial: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      required: true
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {
      chargeRates: [{
        rate: '',
        rateType: '',
        chargeTypePk: ''
      }],
      companyOptions: [],
      rateTypeOptions: [],
      chargeTypeOptions: [],
      tempChargeRate: {
        rate: '',
        rateType: '',
        chargeTypePk: '',
        //groupPk: ''
      },
      rules: {
        chargeRate: {
          groupPk: {
            required: true,
            trigger: 'change',
            message: 'Group is required',
          },
          chargeTypePk: {
            required: true,
            trigger: 'change',
            message: 'Charge Type is required',
          },
          rate: [{
            required: true,
            trigger: 'blur',
            message: 'Rate is required',
          }, {
            pattern: /^\d+(\.\d+)?$/,
            trigger: 'blur',
            message: 'Please type a correct rate',
          }],
          rateType: {
            required: true,
            trigger: 'change',
            message: 'Rate Type is required',
          }
        }
      }
    };
  },
  watch: {
    value: {
      deep: true,
      handler(n, o) {
        this.chargeRates = n;
      }
    }
  },
  mounted() {
    this.getChargeTypeOptions()
    this.getRateTypeOptions()
    if (this.isSpecial) {
      this.getCompanyOptions()
    }
  },
  methods: {
    onChange() {
      this.$emit('change', this.chargeRates);
    },
    getRateTypeOptions() {
      site.getRateTypeList().then(res => {
        if (res.data) {
          this.rateTypeOptions = res.data
          if (res.data.length > 0) {
            if (!this.chargeRates[0].rateType)
              this.chargeRates[0].rateType = res.data[0].value
            this.tempChargeRate.rateType = res.data[0].value
            this.onChange()
          }
        }
      });
    },
    getChargeTypeOptions() {
      site.getChargeTypeList().then(res => {
        if (res.data) {
          this.chargeTypeOptions = res.data
          if (res.data.length > 0) {
            if (!this.chargeRates[0].chargeTypePk)
              this.chargeRates[0].chargeTypePk = res.data[0].chargeTypePk
            this.tempChargeRate.chargeTypePk = res.data[0].chargeTypePk
            this.onChange()
          }
        }
      });
    },
    getCompanyOptions() {
      group.getAllUserGroups().then(res => {
        if (res.data) {
          this.companyOptions = res.data
          if (res.data.length > 0) {
            if (!this.chargeRates[0].groupPk)
              this.chargeRates[0].groupPk = res.data[0].groupPk
            this.tempChargeRate.groupPk = res.data[0].groupPk
            this.onChange()
          }
        }
      })
    },
    handleClickAddButton() {
      this.chargeRates.push(JSON.parse(JSON.stringify(this.tempChargeRate)));
      //this.onChange();
    },
    handleClickSubButton(item, index) {
      if (item.ratePk || item.dynamicRateItemId) {
        this.$confirm('Are you sure you want to delete this charge rate ?', 'Delete', {
          confirmButtonText: 'Ok',
          cancelButtonText: 'Cancel',
          type: 'warning',
        }).then(() => {
          if (item.ratePk) {
            this.deleteChargeRate(item, index);
          } else if (item.dynamicRateItemId) {
            this.deleteDynamicRate(item, index);
          }
        })
      } else {
        this.chargeRates.splice(index, 1);
        if (this.chargeRates.length == 0) {
          this.handleClickAddButton()
        }
      }
    },
    deleteChargeRate(item, index) {
      site.deleteChargeRate({ ratePk: item.ratePk }).then(() => {
        this.chargeRates.splice(index, 1);
        if (this.chargeRates.length == 0) {
          this.handleClickAddButton()
        }
      }).catch((error) => {
        this.$notify({
          title: 'Delete charge rate failed',
          message: error,
          type: 'error',
        })
      })
    },
    deleteDynamicRate(item, index) {
      rates.deleteDynamicRateItem({ dynamicRateItemId: item.dynamicRateItemId }).then(() => {
        this.chargeRates.splice(index, 1);
        if (this.chargeRates.length == 0) {
          this.handleClickAddButton()
        }
      }).catch((error) => {
        this.$notify({
          title: 'Delete charge rate failed',
          message: error,
          type: 'error',
        })
      })
    }
  }
}
</script>

<style scoped>
.rate-list-view {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.rate-list-view >>> .el-form-item {
  display: flex;
  align-items: center;
}
.rate-list-view >>> .el-form-item__label {
  font-size: 14px;
  color: #606266;
  text-align: left;
  line-height: 40px;
  padding: 0 12px 0 0;
}
.list-item-icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin: 0 10px 22px;
}
.ratePunit {
  height: 39px;
  font-size: 20px;
  margin-left: -5px;
  padding-right: 10px;
}
.rate-text {
  max-width: 150px;
  padding-right: 14px;
}
.rate-type {
  max-width: 100px;
  padding-right: 14px;
}
.rate-text-max {
  max-width: 200px;
  padding-right: 14px;
}
</style>