<template>
  <div class="xd-over-add-price" v-if="initStatus">
    <el-input :disabled="disabled" :size="size" v-model="form[keys['min']]" type="number"></el-input>
    <xd-select-list
      :default-value="listDefaultValue"
      :list="uiList"
      :size="size"
      v-model="form[keys['list']]"
      :disabled="disabled"
    ></xd-select-list>
    <div class="xd-over-add-price__price">
      <el-input :disabled="disabled" :size="size" v-model="form[keys['value']]" type="number"></el-input>
      <div>{{unit}}</div>
    </div>
  </div>
</template>

<script>
  /**
   * @description 加价规则
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.io/#/zh-CN/component/checkbox
   * 文档：https://www.npmjs.com/package/gxd-helper
   *
   * @property {Object} defaultValue 已经选中数据  默认：{ min: '',list: '',value: ''}
   * @property {Object} keys 绑定v-model键值   默认：{ min: 'min_price',list: 'price_type',value: 'price'}
   * @property {Array|null} list 列表显示数据 （选填） 默认：null
   * @property {String} size 文本块显示大小  默认：medium  其值：medium / small / mini
   *
   * @v-model this.form
   */
  import XdSelectList from "@/components/XdSelectList";

  export default {
    name: "XdOverAddPrice",
    components: {
      XdSelectList
    },
    props: {
      defaultValue:{
        type: Object,
        default() {
          return {
            min: '',
            list: '',
            value: ''
          }
        },
      },
      keys: {
        type: Object,
        default(){
          return {
            min: 'min_price',
            list: 'price_type',
            value: 'price'
          }
        },
      },
      list:{
        type: Array|null,
        default: null
      },
      size: {type: String, default: 'medium'}, //medium / small / mini
      unit:{type: String, default: ''},
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    data(){
      return {
        uiList: [], //调价类型
        initStatus: true,
        listDefaultValue: '',
        form: {},

        testList: [
          {label: "加价", value: "raise"},
          {label: "下调", value: "reduce"},
          {label: "固定值", value: "fixed"}
        ]
      }
    },
    watch:{
      list(){
        this.init();
      },
      form: {
        handler(){
          this.$emit('input', this.form);
        },
        deep: true
      }
    },

    created() {
      this.init();
    },

    methods:{
      init(){
        if(this.list === null) this.uiList = this.$xdHelper.cloneDeep(this.testList);
        else this.uiList = this.$xdHelper.cloneDeep(this.list);
        this.setContent();
        this.$emit('input', this.form);
      },

      setContent(){
        Object.keys(this.keys).map((key)=>{
          this.$set(this.form, this.keys[key], this.defaultValue[key]);
        });
        this.listDefaultValue = this.defaultValue['list']
      },
    }
  }
</script>

<style scoped lang="scss">
  .xd-over-add-price {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 500px;

    & > * {
      margin-right: 10px;

      &:last-child {
        margin-right: 0;
        font-size: 14px;
      }
    }

    &__price {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 33%;
      flex-shrink: 0;
      & > *:last-child {
        margin-left: 10px;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .xd-over-add-price {
      flex-wrap: wrap;
      & > * {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
</style>
