<template>
  <div v-show="false">
    <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.showRuleEnabled"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('显隐规则')">
      <a href="javascript:void(0);" class="a-link link-oneLind" @click="openDialog">
        <span>{{ optionModel.showRules && optionModel.showRules.length ? "已维护" : "" }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top"></el-divider>
    </el-form-item>
    <el-dialog
      v-if="dialogVisible"
      custom-class="dialog-style list-dialog"
      :title="i18nt('显隐规则')"
      :visible.sync="dialogVisible"
      :show-close="!0"
      :append-to-body="false"
      :modal="false"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="1220px"
      top="5vh"
      v-dialog-drag
    >
      <div class="cont">
        <el-table
          ref="singleTable"
          width="100%"
          :data="tableData"
          height="500"
          border=""
          row-key="columnId"
          stripe=""
        >
          <el-table-column type="index" width="35" fixed="left"></el-table-column>
          <el-table-column :label="i18nt('匹配规则')" width="250" prop="label">
            <template slot-scope="scope">
              <el-select v-model="scope.row.ruleType" @change="changeRuleType(scope.row)">
                <el-option :value="1" label="用户"></el-option>
                <el-option :value="2" label="机构"></el-option>
                <el-option :value="3" label="角色"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('值')" width="300" prop="prop">
            <template slot-scope="scope">
              <el-input
                class="search-input"
                :value="getRowValueName(scope.row)"
                clearable
                @clear="
                  scope.row.value = [];
                "
                v-el-readonly
              >
                <i slot="suffix" class="el-input__icon el-icon-search"
                   @click="openRowValueDialog(scope.row, scope.$index )"></i>
              </el-input>

            </template>
          </el-table-column>
          <el-table-column :label="i18nt('是否可见')" width="150" prop="prop">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.show"></el-switch>
            </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>
    <userDialog v-if="showUserDialog" :visiable.sync="showUserDialog" @confirm="confirmUserDialog"
                multi="true" :rows="operateRows"/>
    <saleOrgDialog v-if="showSaleOrgDialog" :visiable.sync="showSaleOrgDialog" @confirm="confirmSaleOrgDialog"
                   multi="true" :rows="operateRows"/>
    <roleDialog v-if="showRoleDialog" :visiable.sync="showRoleDialog" @confirm="confirmRoleDialog"
                multi="true" :rows="operateRows"/>
  </div>
</template>

<script>
import i18n from "../../../../../components/xform/utils/i18n"
import userDialog from "@base/views/user/user/dialog.vue";
import saleOrgDialog from "@base/views/user/sale_org/dialog.vue";
import roleDialog from "@base/views/user/role/dialog.vue";


export default {
  name: "showRuleFlag-editor",
  components: {
    userDialog,
    saleOrgDialog,
    roleDialog
  },
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ["getReportTemplate"],
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      wfDefItems: [],
      wfNodeMap: {},
      showUserDialog: false,
      showSaleOrgDialog: false,
      showRoleDialog: false,
      operateRows: [],
      operateIndex: 0
    }
  },
  computed: {
    current_prefix() {
      let reportTemplate = this.getReportTemplate();
      return "/" + reportTemplate.serviceName;
    }
  },
  methods: {
    openDialog() {
      let reportTemplate = this.getReportTemplate();
      let showRules = this.optionModel.showRules || [];
      this.dialogVisible = true;
      this.tableData = this.$baseLodash.cloneDeep(showRules)
    },

    addItem() {
      this.tableData.push({
        ruleType: 1,
        value: [],
        show: true
      });
    },
    colSubmit() {
      this.dialogVisible = !1;
      this.optionModel.showRules = this.tableData;
    },
    changeRuleType(row) {
      row.value = [];
    },
    getRowValueName(row) {
      let ruleType = row.ruleType;
      let nameField = null;
      if (ruleType == 1) {
        nameField = 'nickName';
      } else if (ruleType == 2) {
        nameField = 'name';
      } else if (ruleType == 3) {
        nameField = 'name';
      }
      let rows = row.value || []
      return rows.map(item => {
        return item[nameField];
      }).join(',');
    },
    openRowValueDialog(row, rowIndex) {
      let ruleType = row.ruleType;
      this.operateIndex = rowIndex;
      this.operateRows = this.$baseLodash.cloneDeep(row.value || []);
      if (ruleType == 1) {
        this.showUserDialog = true;
      } else if (ruleType == 2) {
        this.showSaleOrgDialog = true;
      } else if (ruleType == 3) {
        this.showRoleDialog = true;
      }
    },
    confirmUserDialog(rows) {
      let item = this.tableData[this.operateIndex]
      item.value.length = 0;
      item.value.push(...rows)
    },
    confirmSaleOrgDialog(rows) {
      let item = this.tableData[this.operateIndex]
      item.value.length = 0;
      item.value.push(...rows)
    },
    confirmRoleDialog(rows) {
      let item = this.tableData[this.operateIndex]
      item.value.length = 0;
      item.value.push(...rows)
    },
  }
}
</script>

<style scoped>

</style>
