<template>
  <div
    class="xd-add-express"
    v-if="expressList.length > 0"
    :style="{width: width}"
  >
    <div class="xd-add-express__form">
      <div class="xd-add-express__form-item" v-for="(item,index) in expressContent" :key="item.key">
        <div class="xd-add-express__form-item-company">
          <xd-select-list
            :size="size"
            :default-value="item.company"
            v-model="item.company"
            placeholder="请选择快递"
            :list="expressList"
          ></xd-select-list>
        </div>
        <div class="xd-add-express__form-item-number">
          <el-input placeholder="输入快递单号" :size="size" v-model="item.number"></el-input>
        </div>
        <div class="xd-add-express__form-item-comment" v-if="isComment">
          <el-input placeholder="描述" :size="size" v-model="item.comment"></el-input>
        </div>
        <el-button
          v-if="(expressContent.length -1) === index"
          @click="add"
          :size="size"
          type="primary"
          icon="el-icon-circle-plus-outline"></el-button>
        <el-button
          v-else
          :size="size"
          @click="remove(index)"
          type="danger"
          icon="el-icon-remove-outline"></el-button>
      </div>
    </div>
    <div class="xd-add-express__btn" v-if="isSubmit">
      <el-button
        @click="onSubmit(true)"
        :size="size"
        type="primary"
      >{{btnName}}
      </el-button>
    </div>
  </div>
</template>

<script>
  import XdSelectList from "@/components/XdSelectList";

  /**
   * @description 添加快递插件
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.cn/#/zh-CN/component/installation
   * 文档：https://www.npmjs.com/package/gxd-helper
   *
   * @property {Array} defaultValue 显示默认数据列表 默认: []
   * @property {Array|null} express 数据列表数据 默认: null  null=>使用测试数据列表
   * @property {Array} btnName 提交按钮名称  默认: []
   * @property {Array} width 插件显示默认宽度 默认：100%
   * @property {String} size 文本块显示大小  默认：medium  其值：medium / small / mini
   *
   * @event {Function} onConfirm 选中改变事件 参数：{expressContent}
   * @v-model 绑定数据
   */


  export default {
    name: "XdAddExpress",
    components: {
      XdSelectList
    },
    props: {
      defaultValue: {
        type: Array,
        default() {
          return [
            // {"company": 7, "name": "EMS", "number": "9885360910887", "comment": ""},
            // {"company": 7, "name": "EMS", "number": "9885360910888", "comment": ""}
          ];
        }
      },

      isComment: {
        type: Boolean,
        default: true
      },

      size: {
        type: String,
        default: 'medium' // medium / small / mini
      },

      width: {
        type: String,
        default: '100%'
      },

      express: {
        type: Array | null,
        default: null
      },

      btnName: {
        type: String,
        default: '确定'
      },

      isSubmit: {
        type: Boolean,
        default: true
      }
    },

    watch: {
      express(val) {
        if (val === null) this.expressList = this.$xdHelper.cloneDeep(this.testExpressList);
        else this.expressList = this.$xdHelper.cloneDeep(val);
      }
    },

    data() {
      return {

        expressList: [], //快递列表
        expressEmptyItem: {
          company: '',
          number: '',
          comment: '',
        },
        expressContent: [], //当前填写快递内容

        //快递公司列表
        testExpressList: [
          {"label": "顺丰", "value": 1},
          {"label": "中通", "value": 2},
          {"label": "申通", "value": 3},
          {"label": "圆通速递", "value": 4},
          {"label": "百世", "value": 5},
          {"label": "韵达", "value": 6},
          {"label": "EMS", "value": 7},
          {"label": "邮政快递", "value": 16},
          {"label": "EMS小包", "value": 8},
          {"label": "德邦快递", "value": 9}
        ],
        newKey: 0,
      }
    },
    created() {
      let expressContent = this.expressContent.concat(this.defaultValue);

      //数据为空自动添加一条数据
      if (expressContent.length === 0) {
        expressContent.push(this.$xdHelper.cloneDeep({
          ...this.expressEmptyItem,
          key: this.$xdHelper.randomChar(40)
        }));
      }

      this.expressContent = expressContent.map(item => {
        if (!item.key) return {...item, key: this.$xdHelper.randomChar(40)}
        return item;
      })


      if (this.express === null) this.expressList = this.$xdHelper.cloneDeep(this.testExpressList);
      else this.expressList = this.$xdHelper.cloneDeep(this.express);


      this.onSubmit(false);

    },

    methods: {
      add() {
        this.expressContent.push(this.$xdHelper.cloneDeep({
          ...this.expressEmptyItem,
          key: this.$xdHelper.randomChar(40)
        }));
        this.$emit('input', this.expressContent)
      },
      remove(index) {
        this.expressContent.splice(index, 1);
        this.$emit('input', this.expressContent)
      },

      onSubmit(flag) {
        if (this.isSubmit) {
          this.$emit('input', this.expressContent)
          if (flag) {
            this.$emit('onConfirm', this.expressContent);
          }
          return;
        }
        this.$emit('input', this.expressContent)
        return this.expressContent

      }

    }
  }
</script>

<style scoped lang="scss">

  .xd-add-express {
    &__form {
      &-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        padding: 5px 0;

        &:first-child {
          padding-top: 0;
        }

        & > * {
          margin-right: 10px;
        }

        & > *:last-child {
          flex-shrink: 0;
          margin-right: 0;
        }

        & > *:first-child {
          flex-shrink: 0;
          max-width: 120px;
        }
      }
    }

    &__btn {
      width: 40%;
      margin-top: 5px;

      & > * {
        width: 100%;
        max-width: 200px;
      }
    }
  }


  @media screen and (max-width: 450px) and (orientation: portrait) {
    .updatePrice-item {
      display: block;
    }

    .updatePrice-item > * {
      display: inline-block;
      min-width: 100%;
    }
  }

  @media screen and (max-width: 800px) and (orientation: landscape) {
    .updatePrice-item {
      display: block;
    }

    .updatePrice-item > * {
      display: inline-block;
      min-width: 100px;
    }

  }

  /**checkbox**/
</style>
