<template>
  <el-form
    :model="formData"
    status-icon
    label-width="100px"
    class="demo-ruleForm"
    style="border: solid 1px #e9e9e9; padding: 5px"
  >
    <el-form-item :label="$t1('查询数据权限')">
      <el-radio-group
        v-model="formData.permissions"
        @change="formData.menuRolePermOrgDTOs = []"
      >
        <el-radio :label="1">{{ $t1("创建人") }}</el-radio>
        <el-radio :label="3">{{ $t1("所有") }}</el-radio>
        <el-radio :label="2">{{ $t1("当前与下级所有机构权限") }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item :label="$t1('额外机构')" v-if="formData.permissions == 2">
      <el-tag
        v-for="(item, index) in formData.menuRolePermOrgDTOs"
        :key="index"
        type="warning"
        :disable-transitions="false"
        :closable="true"
        @close="formData.menuRolePermOrgDTOs.splice(index, 1)"
      >
        <el-tooltip
          :enterable="false"
          effect="dark"
          :content="item.saleOrgName"
          placement="bottom"
        >
          <span>{{ item.saleOrgName }}</span>
        </el-tooltip>
      </el-tag>
      <el-button
        icon="el-icon-plus"
        type="warning"
        class="el-button-tag"
        @click="openProjectTagDialog"
      ></el-button>
    </el-form-item>
    <saleOrgsDialog
      v-if="showSaleOrgsDialog"
      :visiable.sync="showSaleOrgsDialog"
      @confirm="confirmSaleOrgsDialog"
    ></saleOrgsDialog>
  </el-form>
</template>
<script>
import saleOrgsDialog from "@base/views/user/sale_org/dialog.vue";
export default {
  props: {
    formData: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    saleOrgsDialog,
  },
  data() {
    return {
      showSaleOrgsDialog: false,
    };
  },
  methods: {
    openProjectTagDialog() {
      this.showSaleOrgsDialog = true;
    },
    confirmSaleOrgsDialog(rows) {
      if (rows.length) {
        let ids = this.formData.menuRolePermOrgDTOs.map((item) => item.saleOrgId);
        let items = rows
          .filter((item) => !ids.includes(item.id))
          .map((item) => {
            return {
              menus: this.formData.id,
              saleOrgId: item.id,
              saleOrgName: item.name,
            };
          });
        if (items.length) this.formData.menuRolePermOrgDTOs.push(...items);
      }
    },
  },
};
</script>
