<template>
  <div v-show="true">
    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">显示设置</el-divider>
    </el-form-item>
    <el-form-item :label="i18nt('显示超链接')">
      <el-switch v-model="optionModel.showLinkTextEnabled" @change="changeShowLinkTextEnabled"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('超链接配置')">
      <a href="javascript:void(0);" class="a-link link-oneLind" @click="openLinkConfig">
        <span></span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item :label="i18nt('启用特定用户显示规则设置')">
      <el-switch v-model="optionModel.userTextRuleEnabled"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('特定用户显示规则设置')" v-if="optionModel.userTextRuleEnabled">
      <a href="javascript:void(0);" class="a-link link-oneLind" @click="openDialog">
        <span>{{ optionModel.userTextRuleConfig && optionModel.userTextRuleConfig.length ? "已维护" : "" }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <!--    <el-form-item :label="i18nt('仅显示明文文本')">
          <el-switch v-model="optionModel.showTextEnabled" @change="optionModel.showEncryptTextEnabled=false;optionModel.showLinkTextEnabled=false;"></el-switch>
        </el-form-item>
        <el-form-item :label="i18nt('仅显示密文文本')">
          <el-switch v-model="optionModel.showEncryptTextEnabled" @change="optionModel.showTextEnabled=false;optionModel.showLinkTextEnabled=false;"></el-switch>
        </el-form-item>

        <template v-if="optionModel.showEncryptTextEnabled || optionModel.userTextRuleEnabled">
          <el-form-item label-width="0">
            <el-divider class="custom-divider-margin-top">密文显示规则</el-divider>
          </el-form-item>
          <el-form-item :label="i18nt('全部显示为*')">
            <el-switch v-model="optionModel.textRule1" @change="changeTextRule1"
                       :disabled="optionModel.textRule1 && !optionModel.textRule2 && !optionModel.textRule3"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('前面明文，其他为*')">
            <el-switch v-model="optionModel.textRule2" @change="changeTextRule2"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('前面明文位数')">
            <base-input-number v-model="optionModel.textRule2Number" :scale="0"></base-input-number>
          </el-form-item>
          <el-form-item :label="i18nt('后面明文，其他为*')">
            <el-switch v-model="optionModel.textRule3" @change="changeTextRule3"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('后面明文位数')">
            <base-input-number v-model="optionModel.textRule3Number" :scale="0"></base-input-number>
          </el-form-item>
          <el-form-item label-width="0">
            <el-divider class="custom-divider-margin-top"></el-divider>
          </el-form-item>
        </template>
        -->
    <el-dialog
      v-if="dialogVisible"
      custom-class="dialog-style list-dialog"
      :title="i18nt('特定用户显示规则设置')"
      :visible.sync="dialogVisible"
      :show-close="!0"
      :append-to-body="true"
      :modal="false"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="1220px"
      top="5vh"
      v-dialog-drag
      :fullscreen="true"
    >
      <div class="cont" style="padding-bottom: 8px;">
        <el-table
          ref="singleTable"
          width="100%"
          :data="tableData"
          height="100%"
          border=""
          row-key="columnId"
          stripe=""
          style="margin-bottom: 0px;"
        >
          <el-table-column type="index" width="35" fixed="left"></el-table-column>
          <el-table-column :label="i18nt('组织编码')" width="250">
            <template slot-scope="{ row, $index }">
              <el-input
                class="search-input"
                max="200"
                v-model="row.companyCodes"
                @clear="clearBdCompanyEnv(row)"
                v-el-readonly
                clearable
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="openBdCompanyEnvDialog($index)"
                ></i>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('服务名称')" width="150">
            <template slot-scope="{ row }">
              {{ row.serveName }}
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('角色编码')" width="250">
            <template slot-scope="{row}">
              <el-input v-model="row.roleCodes" clearable></el-input>
            </template>
          </el-table-column>

          <el-table-column :label="i18nt('设置')" width="150">
            <template slot-scope="{row}">
              <el-select v-model="row.type">
                <el-option :value="1" label="明文"></el-option>
                <el-option :value="2" label="密文"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label='加密规则（格式：“3*3”，“3*”，“*3”，“*”，“-”，数值表示明文位数）' width="400">
            <template slot-scope="{row}">
              <el-input v-model="row.encryptFormula" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('designer.setting.actionColumn')" width="100" align="center">
            <template #header>
              <span>{{ i18nt('designer.setting.actionColumn') }}</span>
              <el-button :title="i18nt('designer.setting.addTableColumn')" size="mini" type="" circle=""
                         icon="el-icon-plus" @click="addItem"></el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                :title="i18nt('designer.setting.deleteTableColumn')"
                size="mini"
                type=""
                circle=""
                icon="el-icon-minus"
                @click="tableData.splice(scope.$index,1)"
              ></el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialogVisible = false" class="button-sty" icon="el-icon-close">
          {{ i18nt('designer.hint.cancel') }}
        </el-button>
        <el-button type="primary" @click="colSubmit" class="button-sty" icon="el-icon-check">
          {{ i18nt('designer.hint.confirm') }}
        </el-button>
      </div>
    </el-dialog>
    <bdCompanyEnvDialog
      v-if="showBdCompanyEnvDialog"
      :visiable.sync="showBdCompanyEnvDialog"
      @confirm="confirmBdCompanyEnvDialog"
      :multi="false"
    />
  </div>
</template>

<script>
import i18n from "../../../../../components/xform/utils/i18n"
import bdCompanyEnvDialog from "@base/views/bd/setting/bd_company_env/dialog";

export default {
  name: "textFlag-editor",
  components: {bdCompanyEnvDialog},
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ["openWidgetPropertyDialog"],
  data() {
    return {
      dialogVisible: false,
      tableData: [],

      operateIndex: 0,
      showBdCompanyEnvDialog: false,
    }
  },
  methods: {
    changeTextRule1(val) {
      this.optionModel.textRule2 = false;
      this.optionModel.textRule3 = false;
      this.optionModel.textRule2Number = null;
      this.optionModel.textRule3Number = null;
      this.$forceUpdate()
    },
    changeTextRule2(val) {
      let textRule1 = !this.optionModel.textRule2 && !this.optionModel.textRule3;
      this.optionModel.textRule1 = textRule1;
      this.$forceUpdate()
    },
    changeTextRule3(val) {
      let textRule1 = !this.optionModel.textRule2 && !this.optionModel.textRule3;
      this.optionModel.textRule1 = textRule1;
      this.$forceUpdate()
    },
    openDialog() {
      let userTextRuleConfig = this.optionModel.userTextRuleConfig || [];
      this.tableData = this.$baseLodash.cloneDeep(userTextRuleConfig)
      this.dialogVisible = true;

    },
    addItem() {
      let newItem = {
        type: 2,
        serveType: null,
        serveName: null,
        // loginAccounts: null,
        roleCodes: null,
        // saleOrgCodes: null,
        companyCodes: null,
        encryptFormula: null
      }
      this.tableData.push(newItem);
    },
    colSubmit() {
      // 定义正则表达式
      const pattern = /^(?:\d*\*\d*|-)$/;
      let tableData = this.tableData;
      let map = {};
      for (let i = 0; i < tableData.length; i++) {
        let item = tableData[i];
        if (!item.serveName) {
          this.$message({
            type: "error",
            message: "服务名称不能为空",
          });
          return
        }
        if (!item.companyCodes) {
          this.$message({
            type: "error",
            message: "组织编码不能为空",
          });
          return
        }
        if (!item.encryptFormula) {
          this.$message({
            type: "error",
            message: "加密规则不能为空",
          });
          return
        }
        if (!item.type) {
          this.$message({
            type: "error",
            message: "设置不能为空",
          });
          return
        }

        let serveName = item.serveName;
        let companyCodes = item.companyCodes;
        let key = serveName + "_" + companyCodes;
        if (!map[key]) {
          map[key] = true;
        } else {
          this.$message({
            type: "error",
            message: "[服务+组织]不能重复",
          });
          return;
        }
        if (!pattern.test(item.encryptFormula)) {
          this.$message({
            type: "error",
            message: `第${i}行的加密规则格式错误`,
          });
          return;
        }

      }

      this.dialogVisible = !1;
      this.optionModel.userTextRuleConfig = this.tableData;
    },
    changeShowLinkTextEnabled(val) {
      this.optionModel.widgetTextLinkConfig = null;
      ''
      this.optionModel.showEncryptTextEnabled = false;
      this.optionModel.showTextEnabled = false;
      if (val) {
        this.initLinkWidget();
      }
    },
    initLinkWidget() {
      let widget = null
      let keyName = this.optionModel.keyName;
      let label = this.optionModel.label;
      if (!this.optionModel.widgetTextLinkConfig) {
        widget = this.designer.copyNewFieldWidget(this.designer.getFieldWidgetByType("a-link2"));
        this.$set(this.optionModel, 'widgetTextLinkConfig', widget)
        widget.options.underline = true;
      } else {
        widget = this.optionModel.widgetTextLinkConfig
      }
      // widget.options.label = label;
      // widget.options.keyName = keyName;
      // widget.options.labelHidden = true
      // widget.options.isFormLabel = true
      return widget;
    },
    openLinkConfig() {
      let widget = this.initLinkWidget();
      this.openWidgetPropertyDialog({
        // row: row,
        columnSelectedWidget: widget,
        // index: index,
        // columnEditFields: columnEditFields,
        callback: (columnSelectedWidget) => {
          widget.options = columnSelectedWidget.options;
        },
      });
    },

    clearBdCompanyEnv(row) {
      row.serveName = null;
      row.companyCodes = null;
    },
    openBdCompanyEnvDialog(rowIndex) {
      this.operateIndex = rowIndex;
      this.showBdCompanyEnvDialog = true;
    },
    confirmBdCompanyEnvDialog(rows) {
      if (rows.length) {
        let row = rows[0];
        let item = this.tableData[this.operateIndex];
        item.serveName = row.bdService;
        item.companyCodes = row.bdCompanyCode;
      }
    },

  }
}
</script>

<style scoped>

</style>
