<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="请选择">
            <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>
    </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'
        }
      ],//单据规则表单
      ruleTypeOptions: [
        {
          label: '连接符号',
          value: '1'
        }, {
          label: '字符串',
          value: '2'
        }, {
          label: '日期',
          value: '3'
        }, {
          label: '流水号',
          value: '4'
        }
      ],//单据规则下啦
      receiptsFunData: [
        {
          text: '删除',
          color: 'red'
        }
      ]//单据规则按钮
    }
  },
  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">

</style>
