<template>
  <div class="ruleAddTable">
    <BaseTable
      ref="receiptsTable"
      :showIndex="true"
      :tableData="ruleAddTableData"
      :tableColumn="receiptsTableColumn"
      :border="false"
      :funData="receiptsFunData"
      tableHeight="60vh"
      @onFunc="receiptsOnFunc"
    >
      <template #dbType="{row}">
        <el-select v-model="row['dbType']" placeholder="请选择"
                   @change="(val)=>ruleTypeSeleceChangHandle(val,row)"
        >
          <el-option
            v-for="item in ruleTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
      <template #dbValue="{row}">
        <div v-if="!row['dbType']">请选择格式类型</div>
        <div v-else-if="row['dbType'] === '1'">{{ row.dbValue }}</div>
        <div v-else-if="row['dbType'] === '2'">
          <el-input v-model="row.dbValue"></el-input>
        </div>
        <div v-else-if="row['dbType'] === '3'">
          <el-select v-model="row.dbValue" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div v-else-if="row['dbType'] === '4'">
          <el-input v-model="row.dbValue" @input="(val)=>integerNumber(val,row)"></el-input>
        </div>
      </template>
      <template #operation="{row}">
        <div class="deleBtn" @click="receiptsOnFunc(row)">
          <img src="./images/删除.png" alt="">
        </div>
      </template>
    </BaseTable>
    <div class="receiptsAddRow" style="margin-top: 30px;
  border: 1px dotted #ccc;
  text-align: center;
  height: 50px;
  line-height: 50px;"
    >
      <el-link
        type="primary"
        @click="receiptsAddRow"
        :underline="false"
      >+ 添加
      </el-link>
    </div>
  </div>
</template>

<script>
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'

export default {
  name: 'ruleAddTable',
  components: { BaseTable },
  data() {
    return {
      receiptsTableData: [],//单据规则表单
      ruleAddTableData: [],//单据规则添加用表单
      receiptsTableColumn: [
        {
          title: '类型',
          id: 'dbType'
        },
        {
          title: '格式规则',
          id: 'dbValue'
        },
        {
          title: '操作',
          id: 'operation',
          width: 70
        }
      ],//单据规则表单
      ruleTypeOptions: [
        {
          label: '连接符号',
          value: '1'
        }, {
          label: '字符串',
          value: '2'
        }, {
          label: '日期',
          value: '3'
        }, {
          label: '流水号',
          value: '4'
        }
      ],//单据规则下啦
      receiptsFunData: [],//单据规则按钮
      dateOptions: [
        {
          label: 'yyyy-MM-dd',
          value: 'yyyy-MM-dd'
        }, {
          label: 'yyyyMMdd',
          value: 'yyyyMMdd'
        }, {
          label: 'yyyy-MM-dd HH:mm:ss',
          value: 'yyyy-MM-dd HH:mm:ss'
        }, {
          label: 'yyyyMMddHHmmss',
          value: 'yyyyMMddHHmmss'
        }, {
          label: 'yyyyMMddHHmmssSSS',
          value: 'yyyyMMddHHmmssSSS'
        }
      ]
    }
  },
  methods: {
    //规则表格删除
    receiptsOnFunc(row) {
      this.ruleAddTableData.splice(row.index, 1)
    },
    //单据规则添加行
    receiptsAddRow() {
      this.ruleAddTableData.push({})
    },
    //单据规则下拉改变事件
    ruleTypeSeleceChangHandle(val, row) {
      this.$set(row, 'dbValue', '')
      if (val === '1') {
        row['dbValue'] = '-'
      }
    },
    //流水号修改事件
    integerNumber(val, row) {
      row['dbValue'] = row['dbValue'].replace(/[^\d]/g, '')
    }
  }
}
</script>


<style scoped lang="scss">
.deleBtn {
  cursor: pointer;
  margin-left: 10px;
  width: 24px;
  height: 24px;
  background: #EBEBED;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;

  > img {
    width: 10px;
    height: 10px;
  }
}
</style>
