<template>
  <el-tabs type="border-card">
    <el-tab-pane label="属性">
      <el-form ref="form" disabled label-width="82px">
        <el-row :gutter="15">
          <el-col :span="13">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="描述" prop="remark">
              <el-input v-model="form.remark" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="长度" prop="length">
              <el-input v-model="form.length"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="间隔符" prop="delimiter">
              <el-input v-model="form.delimiter"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="粗规则" prop="roughRuleName">
              <el-input v-model="form.roughRuleName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="细规则" prop="fineRuleName">
              <el-input v-model="form.fineRuleName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="创建人" prop="createUserName">
              <el-input v-model="form.createUserName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="创建时间" prop="createTime">
              <el-input v-model="form.createTime"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="修改人" prop="updateUserName">
              <el-input v-model="form.updateUserName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="修改时间" prop="updateTime">
              <el-input v-model="form.updateTime"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="码值" >
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="tableList"
        height="calc(100vh - 335px)"
        full-height="calc(100vh - 116px)"
        tool-class="ele-toolbar-form"
        cache-key="systemOrgUserTable"
        :needPage="false"
      >
        <template v-slot:action="scoped">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此码值吗？"
            @confirm="remove(scoped.$index)"
          >
            <template v-slot:reference>
              <el-button type="danger"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
        <template v-slot:value="{ row }">
          <el-input v-model="row.value" @change.native="valueChange(row)">
            <template slot="append" v-if="!isReg(row)">
              <img title="码值不符合规则" src="../../../assets/error.png" />
            </template>
          </el-input>
        </template>
        <template v-slot:remark="{ row }">
          <el-input v-model="row.remark" @change="valueChange(row)"></el-input>
        </template>
        <template v-slot:toolbar v-if="form.roughRule!=4">
          <el-button type="primary" @click.native="openEdit('add')">
            增加
          </el-button>
        </template>
      </ele-pro-table>
    </el-tab-pane>
  </el-tabs>
  <!-- 数据表格 -->
</template>
   
  <script>
import { roughRule, fineRule } from '@/enum/dict.js';
import { saveSegment } from '@/api/businessCode';

export default {
  props: {
    // 上级
    parentData: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      form: {
        roughRuleName: '',
        fineRuleName: '',
        name: '', //码段名称
        businessCodeCategoryId: '', //分类id
        length: '', //长度
        delimiter: '', //间隔符
        roughRule: '', //粗规则
        fineRule: '', //细规则
        value: [],
        remark: '' //描述
      },
      tableList: [],
      // 表格列配置
      columns: []
    };
  },
  created() {},
  // watch: {
  //   parentData(){
  //     this.init()
  //   }
  // },
  methods: {
    reload() {
      this.form = JSON.parse(JSON.stringify(this.parentData));
      this.tableList = this.form.value;
      this.form['roughRuleName'] = roughRule.find(
        (item) => item.value == this.form.roughRule
      )?.label;
      let _fineRule = fineRule.filter(
        (item) => item.pid == this.form.roughRule
      );
      this.form['fineRuleName'] = _fineRule.find(
        (item) => item.value == this.form.fineRule
      )?.label;
      this.setColumns();
    },
    setColumns() {
      this.columns = [
        {
          width: 45,
          type: 'selection',
          columnKey: 'selection',
          align: 'center'
        },
        {
          label:
            '编码值' +
            '(规则：' +
            this.form.fineRuleName +
            '，长度：' +
            (this.form.length||'') +
            ')',
          prop: 'value',
          width: 240,
          slot: 'value',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'remark',
          slot: 'remark',
          label: '描述',
          showOverflowTooltip: true
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 200,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ];
    },
    valueChange(row) {
      console.log(this.isReg(row), 'this.isReg(row)');
      if (this.isReg(row)) {
        this.save();
      }
    },
    isReg(row) {
      let _fineRule = fineRule.filter(
        (item) => item.pid == this.form.roughRule
      );
      let reg = _fineRule.find((item) => item.value == this.form.fineRule)?.reg;
      let regexp = '/^' + reg + '{' + this.form.length + '}$/';
      return RegExp(eval(regexp)).test(row.value);
    },
    /* 显示编辑 */
    openEdit() {
      this.tableList.push({
        value: '',
        remark: ''
      });
    },
    /* 保存编辑 */
    save() {
      this.form.value = this.tableList;
      saveSegment(this.form)
        .then((msg) => {
          this.$message.success('操作成功');
          this.$emit('done', this.form);
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    /* 删除 */
    remove(index) {
      this.tableList.splice(index, 1);
      this.save()
    },
    done() {
      this.$emit('done', this.parentData);
    }
  }
};
</script>
  