<template>
  <div class="bmpz-wrap">
    <div class="btn-wrap">
      <el-button type="primary" @click="add" size="small">添加</el-button>
      <el-button type="danger" @click="_delete" size="small">删除</el-button>
    </div>
    <el-form class="table-wrap" :model="form" ref="tableForm" :rules="rules">
      <el-table
        ref="multipleTable"
        @selection-change="selectionChange"
        :data="form.tableData"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="date" label="排序" width="80" align="center">
          <template slot-scope="{ row }">
            <div class="sort-wrap">
              <i class="el-icon-caret-top" @click="sortTop(row)"></i>
              <i class="el-icon-caret-bottom" @click="sortBottom(row)"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type.descp" label="类型" width="130">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.type'"
              :rules="{
                required: true,
                message: '',
                trigger: 'change'
              }"
            >
              <el-select
                @change="settype(scope.row, $event)"
                v-model="scope.row.type"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options.type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容" width="180">
           <template slot-scope="scope">
             <el-form-item
               :prop="'tableData.' + scope.$index + '.content'"
               :rules="{
                 required: true,
                 message: '',
                 trigger: 'change'
               }"
              v-if="scope.row.type!=2"
             >
               <!-- 固定值 -->
               <el-input
                 v-if="scope.row.type == 3"
                 v-model="scope.row.content"
                 placeholder="请输入内容"
               ></el-input>
               <!-- 日期 -->
               <el-select
                 v-if="scope.row.type == 1"
                 v-model="scope.row.content"
                 placeholder="请选择"
               >
                 <el-option
                   v-for="item in options.date"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
                 >
                 </el-option>
               </el-select>
             </el-form-item>
           </template>
        </el-table-column>
        <el-table-column prop="length" label="长度">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.length'"
              :rules="{
                required: true,
                message: '',
                trigger: 'blur'
              }"
              v-if="scope.row.type == 2"
            >
              <el-input
                v-model="scope.row.length"
                placeholder="请输入"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="currentId" label="当前流水">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.currentId'"
              :rules="{
                required: true,
                message: '',
                trigger: 'blur'
              }"
              v-if="scope.row.type == 2"
            >
              <el-input
                v-model="scope.row.currentId"
                placeholder="请输入"
                :maxlength="scope.row.length"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="step" label="步长">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.step'"
              :rules="{
                required: true,
                message: '',
                trigger: 'blur'
              }"
              v-if="scope.row.type == 2"
            >
              <el-input
                v-model="scope.row.step"
                placeholder="请输入"
                :maxlength="scope.row.length"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="说明">
          <template slot-scope="{ row }">
            <el-input v-model="row.remark" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
  export default {
    props: {
      codeConfigurationList: {
        type:Array,
        default:[]
      }
    },
    data () {
      return {
        selectData: [],
        form: {
          tableData: []
        },
        rules: {},
        options: {
          type: [
            {
              value: 1,
              label: '日期'
            },
            {
              value: 2,
              label: '流水号'
            },
            {
              value: 3,
              label: '固定值'
            }
          ],
          date: [
            {
              value: 'yyyy',
              label: '年'
            },
            {
              value: 'yyyyMM',
              label: '年月'
            },
            {
              value: 'yyyyMMdd',
              label: '年月日'
            },
            {
              value: 'yyyyMMddHH',
              label: '年月日时'
            },
            {
              value: 'yyyyMMddHHmmss',
              label: '年月日时分秒'
            },
            {
              value: 'yyyyMMddHHmmssSSS',
              label: '年月日时分秒毫秒'
            }
          ]
        }
      };
    },
    watch: {
       codeConfigurationList(val){
          if(val){
            this.form.tableData = val
          }
       }
    },
    methods: {
      handleEdit(e) {
          let value = e.replace(/^(0+)|[^\d]+/g,''); // 以0开头或者输入非数字，会被替换成空
      },
      selectionChange (selection) {
        // if (selection.length > 1) {
        //   this.$refs.multipleTable.clearSelection();
        //   this.$refs.multipleTable.toggleRowSelection(selection.pop());
        // }
      },

      settype (row, val) {
        // row.type.descp = this.options.type.find((n) => n.value == val).label;
        // 重选初始化数据
        row.content = '';
        row.length = '';
        row.currentId = '';
        row.step = '';
        row.remark = '';
      },

      // 获取选中值
      getSelection () {
        return this.$refs.multipleTable.selection;
      },
      _delete () {
        let selection = this.getSelection();
        if (selection.length > 0) {
          // let itemIndex = this.form.tableData.findIndex((n) => {
          //   return n.sort == selection[0].sort;
          // });
          // if (itemIndex !== -1) {
          //   this.form.tableData.splice(itemIndex, 1);
          //   this.againSort();
          // }
          selection.map(item=>{
              let itemIndex = this.form.tableData.findIndex((n) => {
                return n.sort == item.sort;
              });
              if (itemIndex !== -1) {
                this.form.tableData.splice(itemIndex, 1);
                this.againSort();
              }
          })
        }else{
           this.$message.info('请先勾选需删除的配置项')
        }
      },
      add () {
        this.form.tableData.push({
          // type: {
          //   code: '',
          //   descp: ''
          // },
          type:null,
          content: '',
          length: '', // 长度
          currentId: '', // 当前流水
          step: '', // 步长
          remark: '', // 说明
          sort: this.form.tableData.length + 1
        });
      },
      sortTop (row) {
        if (row.sort <= 1) {
          return;
        }
        let rowN = this.form.tableData.find((n) => n.sort == row.sort - 1);
        rowN.sort += 1;
        row.sort -= 1;
        this.form.tableData.sort((a, b) => {
          return a.sort - b.sort;
        });
      },
      sortBottom (row) {
        if (row.sort >= this.form.tableData.length) {
          return;
        }
        let rowN = this.form.tableData.find((n) => n.sort == row.sort + 1);
        rowN.sort -= 1;
        row.sort += 1;
        this.form.tableData.sort((a, b) => {
          return a.sort - b.sort;
        });
      },
      againSort () {
        this.form.tableData.forEach((n, index) => {
          n.sort = index + 1;
        });
      },
      validateForm (callback) {
        //开始表单校验
        this.$refs.tableForm.validate((valid) => {
          callback(valid);
        });
      },

      // 清空表单校验
      handleReset() {
          this.$refs["tableForm"].resetFields();
          this.form.tableData = []
      },

      // 返回列表数据
      getTableValue(){
         return this.form.tableData
      }
    }
  };
</script>
<style lang="scss" scoped>
  .sort-wrap {
    i {
      font-size: 30px;
      cursor: pointer;
    }
    .el-icon-caret-top {
      color: red;
    }
    .el-icon-caret-bottom {
      color: #157a2c;
    }
  }
  .btn-wrap {
    margin-bottom: 20px;
  }
  :deep(.table-wrap .el-form-item__error) {
    display: none;
  }
</style>
