<template>
  <div>
    <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.widgetShowRuleEnabled"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('显隐规则设置')">
      <a href="javascript:void(0);" class="a-link link-oneLind" @click="openDialog">
        <span>{{ optionModel.widgetShowRuleConfig && optionModel.widgetShowRuleConfig.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="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=""
          stripe=""
          style="margin-bottom: 0px;"
        >
          <el-table-column type="index" width="35" fixed="left"></el-table-column>
          <!-- <el-table-column :label="i18nt('服务类型')" width="150">
            <template slot-scope="{row}">
              <el-select v-model="row.serveType" @change="changeServeType(row)">
                <el-option :value="1" label="正式"></el-option>
                <el-option :value="2" label="UAT"></el-option>
                <el-option :value="3" label="测试"></el-option>
                <el-option :value="4" label="自定义"></el-option>
                <el-option :value="5" label="默认"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('服务名称')" width="150">
            <template slot-scope="{row}">
              <el-input v-model="row.serveName" clearable :disabled="row.serveType!==4"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('组织编码')" width="250">
            <template slot-scope="{row,$index}">
              <el-input v-model="row.companyCodes" clearable :disabled="row.serveType==5"></el-input>
            </template>
          </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="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 "@base/components/xform/utils/i18n";
import bdCompanyEnvDialog from "@base/views/bd/setting/bd_company_env/dialog"

export default {
  name: "widgetShowRuleFlag-editor",
  components: {bdCompanyEnvDialog},
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      showBdCompanyEnvDialog: false
    }
  },
  methods: {
    openDialog() {
      let tableData = this.optionModel.widgetShowRuleConfig || [];
      this.dialogVisible = true;
      this.tableData = this.$baseLodash.cloneDeep(tableData)
    },
    addItem() {
      let newItem = {
        type: 1,
        serveType: 3,
        serveName: null,
        roleCodes: null,
        companyCodes: null
      }
      this.tableData.push(newItem);
    },
    colSubmit() {

      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.roleCodes) {
          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;
        }
      }

      this.dialogVisible = !1;
      this.optionModel.widgetShowRuleConfig = this.tableData;
    },
    changeServeType(row) {
      // modelKey
      let map = {
        1: "prod",
        2: "uat",
        3: "dev"
      }
      let serveName = null;
      let serveType = row.serveType;
      if (serveType && map[serveType]) {
        serveName = map[row.serveType];
      }
      if (serveType === 5) {
        row.companyCodes = null
      }
      row.serveName = serveName;
    },

    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>
