<template>
  <div class="detail-wrap">
    <el-form ref="editForm">
      <div class="d-header clearfix">
        <div class="fl">
          <i class="el-icon-info"/>
          {{ $t1('查看工作区用户') }}
        </div>
        <div class="fr">
          <el-button type="primary" plain class="button-sty" @click="$baseReload()" icon="el-icon-refresh-right">
            {{ $t1('重置') }}
          </el-button>
          <el-button type="primary" class="button-sty" icon="el-icon-check" @click="saveData">{{ $t1('保存') }}
          </el-button>
        </div>
      </div>
      <baseTabs :showNav="false">
        <baseTabPane :label="$t1('基本信息')">
          <template #default>
            <table class="table-detail">
              <tbody>
              <tr>
                <th>
                  <em class="f-red">*</em>
                  {{ $t1('工作区编码') }}
                </th>
                <td>
                  {{ fileStoreArea.storeAreaCode }}
                </td>
                <th>
                  <em class="f-red">*</em>
                  {{ $t1('工作区名称') }}
                </th>
                <td>
                  {{ fileStoreArea.storeAreaName }}
                </td>
              </tr>
              </tbody>
            </table>
          </template>
        </baseTabPane>
        <baseTabPane :label="$t1('用户信息')">
          <template #button>
            <el-button class="button-sty" @click="showUserDialog = true" icon="el-icon-search">{{
                $t1('选择用户')
              }}
            </el-button>
          </template>
          <template #default>
            <vxe-grid
              ref="m1Grid"
              :data="fileStoreAreaUserListDTO.fileStoreAreaUserDTOs"
              v-bind="m1Option"
              @resizable-change="$vxeTableUtil.onColumnWitchChange"
              @custom="$vxeTableUtil.customHandle"
            ></vxe-grid>
          </template>
        </baseTabPane>
      </baseTabs>
    </el-form>
    <userDialog v-if="showUserDialog" :visiable.sync="showUserDialog" @confirm="confirmInsertUser"></userDialog>
  </div>
</template>

<script>
import userDialog from '../../../views/user/user/dialog'

export default {
  name: 'wfParamEdit',
  props: {
    fileStoreArea: Object
  },
  components: {
    userDialog
  },
  data() {
    return {
      tabIndex: 0,
      isEdit: false,
      m1Option: {},
      fileStoreAreaUserListDTO: {
        fileStoreAreaUserDTOs: []
      },
      showUserDialog: false
    };
  },
  created() {

  },
  mounted() {
    this.initM1Table();
  },
  methods: {
    saveData() {
      this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
        var url = USER_PREFIX + `/file_store_area_user/saveUpdate`;
        this.$http({
          url: url,
          method: `post`,
          data: this.fileStoreAreaUserListDTO,
          isLoading: true,
          success: res => {
            this.$message({
              message: res.content,
              type: 'success',
              duration: 500,
              onClose: t => {
                this.$baseReload();
              }
            });
          }
        });
      });
    },
    initM1Table() {
      const tableOption = {
        vue: this,
        tableRef: 'm1Grid',
        tableName: 'editParam-m1Grid',
        columns: [
          {type: 'checkbox', fixed: 'left', width: 48, resizable: false},
          {title: this.$t1('用户姓名'), field: 'nickName', width: 350},
          {
            width: 47,
            fixed: 'right',
            title: '',
            sortable: false,
            slots: {
              default: ({row, rowIndex, $table}) => {
                return [
                  <a
                    href="javascript:void(0);"
                    class="a-link"
                    onclick={() => {
                      this.fileStoreAreaUserListDTO.fileStoreAreaUserDTOs.splice(rowIndex, 1);
                    }}
                  >
                    <el-tooltip enterable={false} effect="dark" content={this.$t1('删除')} placement="top"
                                popper-class="tooltip-skin">
                      <i class="el-icon-delete"/>
                    </el-tooltip>
                  </a>
                ];
              }
            }
          }
        ]
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
        this.m1Option = opts;
      });
      this.$http({
        url: USER_PREFIX + '/file_store_area_user/list',
        method: `post`,
        data: {
          stringOne: this.fileStoreArea.storeAreaCode
        },
        isLoading: true,
        modalStrictly: true,
        success: res => {
          let fileStoreAreaUserListDTO = {
            storeAreaCode: this.fileStoreArea.storeAreaCode,
            fileStoreAreaUserDTOs: res.objx || []
          }
          this.fileStoreAreaUserListDTO = fileStoreAreaUserListDTO;
        }
      });
    },
    confirmInsertUser(rows) {
      if (rows.length > 0) {
        const tableData = this.fileStoreAreaUserListDTO.fileStoreAreaUserDTOs;
        const map = {};
        tableData.forEach(function (item) {
          map[item.userId] = 1;
        });
        var items = [];
        rows.forEach(row => {
          const item = {
            storeAreaCode: this.fileStoreArea.storeAreaCode,
            storeAreaName: this.fileStoreArea.storeAreaName,
            userId: row.id,
            nickName: row.nickName
          };
          if (!map[item.userId]) {
            items.push(item);
          }
        });
        this.fileStoreAreaUserListDTO.fileStoreAreaUserDTOs.push(...items);
      }
    }
  }
};
</script>
