<template>
    <div class="multinput">
        <ul>
            <li v-for="(item, index) in dataSource" :key="index">
                <div class="left">
                    <div class="label" v-if="!onlyContent" :style="{width:'30%'}">
                        <Input v-model="item[rowKey.label]"/>
                    </div>
                    <div class="middle" v-if="!onlyContent">
                        <span>:</span>
                    </div>
                    <div class="content" :style="{ width: onlyContent?'100%':'70%'}">
                        <!--普通不带中英文-->
                        <template v-if="ordinary">
                            <Input v-model="item[rowKey.content]" :placeholder="placehHolder">
                                <Icon slot="suffix" type="edit" @click="modalShow(item,rowKey.content)"/>
                            </Input>
                        </template>
                        <!--非普通带中英文-->
                        <template v-else>
                            <para-labels v-model="item[rowKey.content]"></para-labels>
                        </template>
                    </div>
                </div>
                <div class="reduce" v-if="limit>1">
                    <Button type="primary" style="width: 100%" @click="reduceRow(index)">-</Button>
                </div>
            </li>
            <li v-show="limit > dataSource.length ">
                <Button type="primary" style="width: 100%" @click="addRow">+</Button>
            </li>
        </ul>
        <a-modal v-model="visible" :maskClosable="false" :keyboard="false" :footer="null">
            <Input-textArea v-model="modelText[testKey]" :placeholder="placehHolder" :rows="20" style="resize: none; margin: 30px 0 0 0;"></Input-textArea>
        </a-modal>
    </div>
</template>

<script>
  import {Input, Button, Icon, Modal} from 'ant-design-vue';
  import {$deepClone} from '@chenxihub/sweet';
  import paraLabels from '../para-labels/para-labels.vue';

  export default {
    name: 'inidex',
    props: {
      value: {},
      limit: {
        type: Number,
        default: Infinity,
        validator(value) {
          // 这个值必须匹配下列字符串中的一个
          return value > 0;
        }
      },
      onlyContent: {
        type: Boolean,
        default: false
      },
      rowKey: {
        type: Object,
        default: () => ({
          label: 'name',
          content: 'ctx'
        })
      },
      // 是否是返回数组格式 false 对象格式
      typeArray: {
        type: Boolean,
        default: true
      },
      // 普通 没有带中英文的
      ordinary: {
        type: Boolean,
        default: true
      },
      placehHolder: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        ordinarytemp: {},
        nonordinarytemp: {},
        temp1: '',
        dataSource: [],
        visible: false,
        modelText: {},
        testKey:''
      };
    },
    created() {
      this.setTemp();
      if (this.value) {
        if (this.value instanceof Array) {
          // 数组格式
          if (this.value.length) {
            // 存在数据
            this.value.forEach((item, index) => {
              const arrkeys = Object.keys(item);
              if (this.limit > index) {
                if (this.onlyContent) {
                  this.dataSource.push({[this.rowKey.label]: '', [this.rowKey.content]: item});
                } else {
                  this.dataSource.push({
                    [this.rowKey.label]: arrkeys[0],
                    [this.rowKey.content]: item[arrkeys[0]]
                  });
                }
              }
            });
          } else {
            this.dataSource.push($deepClone(this.temp1));
          }
        } else {
          // 对象格式
          // eslint-disable-next-line no-lonely-if
          if (this.onlyContent) {
            const val = this.value;
            if (this.ordinary) {
              // 普通
              this.dataSource.push({[this.rowKey.label]: '', [this.rowKey.content]: val});
            } else {
              // 非普通
              this.dataSource.push({[this.rowKey.label]: '', [this.rowKey.content]: val});
            }
          } else {
            const keys = Object.keys(this.value);
            keys.forEach((item, index) => {
              if (this.limit > index) {
                this.dataSource.push({[this.rowKey.label]: item, [this.rowKey.content]: this.value[item]});
              }
            });
          }
        }
      } else {
        this.dataSource.push($deepClone(this.temp1));
      }
      /* if (this.value.length) {
         // eslint-disable-next-line no-empty
         if (this.limit) {
           this.dataSource = this.value.slice(0, this.limit);
         }
       } else {
         this.dataSource.push(this.temp1);
       } */
    },
    methods: {
      setTemp() {
        if (this.ordinary) {
          this.ordinarytemp[this.rowKey.label] = '';
          this.ordinarytemp[this.rowKey.content] = '';
          // 创建副本
          this.temp1 = $deepClone(this.ordinarytemp);
        } else {
          this.nonordinarytemp[this.rowKey.label] = '';
          this.nonordinarytemp[this.rowKey.content] = {};
          // 创建副本
          this.temp1 = $deepClone(this.nonordinarytemp);
        }
      },
      addRow() {
        this.dataSource.push($deepClone(this.temp1));
      },
      reduceRow(index) {
        if (this.dataSource.length <= 1) return;
        this.dataSource.splice(index, 1);
      },
      modalShow(model,key) {
        this.modelText = model;
        this.testKey = key;
        this.visible = true;
      }
    },
    watch: {
      dataSource: {
        deep: true,
        /* eslint-disable */
        handler: function () {
          // 抛出数据
          if (this.typeArray) {
            // 数组
            if (this.onlyContent) {
              let temp = [];
              this.dataSource.forEach((item, index) => {
                temp.push(item[this.rowKey.content]);
              });
              this.$emit('input', temp);
            } else {
              let temps = [];
              this.dataSource.forEach((item, index) => {
                temps.push({[item[this.rowKey.label]]: item[this.rowKey.content]});
              });
              this.$emit('input', temps);
            }
          } else {
            // 对象
            if (this.onlyContent) {
              let temp = [];
              this.dataSource.forEach((item, index) => {
                temp.push(item[this.rowKey.content]);
              });
              this.$emit('input', temp);
            } else {
              let temps = {};
              this.dataSource.forEach((item, index) => {
                temps[item[this.rowKey.label]] = item[this.rowKey.content];
              });
              this.$emit('input', temps);
            }
          }
        }
      }
    },
    components: {
      Input,
      InputTextArea: Input.TextArea,
      aModal: Modal,
      Icon,
      Button,
      paraLabels
    }
  };
</script>

<style scoped lang="less">
    @import "_para-multbox";
</style>
