<template>
  <div class="edit-container">
    <fd-row class="edit-content">
      <fd-form
        :model="genRoleMatchModel"
        status-icon
        :rules="rules"
        ref="genRoleMatchModel"
        label-width="150px"
      >
        <fd-col :span="12">
          <fd-form-item :label="this.$ls('lbl_role_name')" prop="roleName">
            <fd-input
              v-model.trim="genRoleMatchModel.roleName"
              :placeholder="this.$l('lbl_role_name')"
              :disabled="disabledInput"
            ></fd-input>
          </fd-form-item>
        </fd-col>

        <fd-col :span="12">
          <fd-form-item :label="this.$ls('lbl_role_code')" prop="roleCode">
            <fd-input
              v-model.trim="genRoleMatchModel.roleCode"
              :placeholder="this.$l('lbl_role_code')"
              :disabled="disabledInput"
            ></fd-input>
          </fd-form-item>
        </fd-col>

        <fd-col :span="12">
          <fd-form-item :label="this.$ls('pf_lbl_role_limit')" prop="roleLimit">
            <fd-dict-select
              v-model="genRoleMatchModel.roleLimit"
              :options="$getDictionaryListByType('pf_role_limit')"
              :placeholder="this.$l('pf_lbl_role_limit')"
              :disabled="disabledInput"
            >
            </fd-dict-select>
          </fd-form-item>
        </fd-col>

        <fd-col :span="24">
          <fd-form-item :label="this.$ls('lbl_remark')" prop="remark">
            <fd-input
              type="textarea"
              v-model="genRoleMatchModel.remark"
              :placeholder="this.$l('lbl_remark')"
              :disabled="disabledInput"
            ></fd-input>
          </fd-form-item>
        </fd-col>

        <fd-col :span="24">
          <fd-form-item :label="this.$ls('pf_lbl_users')" prop="users">
            <!--<fd-input-->
            <!--@focus="dialogVisible = true"-->
            <!--v-model="genRoleMatchModel.userNames"-->
            <!--:placeholder="this.$l('pf_lbl_users')"-->
            <!--></fd-input>-->
            <el-tag
              v-for="tag in genRoleMatchModel.userModelList"
              :key="tag.id"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag.nickName }}({{ tag.username }})
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >{{ this.$l('lbl_choose_employee') }}</el-button
            >
          </fd-form-item>
        </fd-col>
      </fd-form>
    </fd-row>
    <div :span="24" class="detail-button-box">
      <fd-button
        type="primary"
        @click="onSubmit('genRoleMatchModel')"
        v-bind:disabled="disInput"
        >{{ this.$l('btn_save') }}</fd-button
      >
      <fd-button @click="cancel">{{ this.$l('btn_back') }}</fd-button>
    </div>

    <!--對話方塊-->
    <fd-dialog
      class="dialog"
      top="3%"
      :title="$l('lbl_user_select')"
      :visible.sync="dialogVisible"
      @open="openDialog"
      @close="refesh"
      width="88%"
    >
      <fd-search-form class="table-search">
        <template slot="buttons">
          <fd-button type="primary" @click="bindRoleUser">
            {{ $l('btn_save') }}
          </fd-button>
        </template>
        <template slot="buttons"> </template>
        <template slot="form">
          <fd-row>
            <fd-col :span="6">
              <fd-form-item :label="this.$ls('lbl_userName')">
                <fd-input
                  v-model.trim="userSearchModel.username"
                  :placeholder="$l('lbl_userName')"
                  :maxlength="20"
                  clearable
                ></fd-input>
              </fd-form-item>
            </fd-col>

            <fd-col :span="6">
              <fd-form-item :label="this.$ls('lbl_nickName')">
                <fd-input
                  v-model.trim="userSearchModel.nickName"
                  :maxlength="20"
                  :placeholder="$l('lbl_nickName')"
                  clearable
                ></fd-input>
              </fd-form-item>
            </fd-col>

            <fd-col :span="3">
              <fd-form-item> </fd-form-item>
            </fd-col>

            <fd-col :span="9" class="search-btn">
              <fd-form-item>
                <fd-button type="info" @click="searchDialog">{{
                  $l('btn_search')
                }}</fd-button>
                <fd-button @click="resetDialog">{{
                  $l('btn_reset')
                }}</fd-button>
              </fd-form-item>
            </fd-col>

            <fd-col :span="6"> </fd-col>
          </fd-row>
        </template>
      </fd-search-form>
      <div class="dialog-table" ref="addUsersToRoleTable">
        <fd-table
          :data="tableData"
          height="250"
          stripe
          ref="multipleTable"
          border
          style="width:100%;"
          @selection-change="handleSelectionChange"
        >
          <fd-table-column type="selection" width="55"> </fd-table-column>
          <fd-table-column
            prop="username"
            :label="this.$l('lbl_userName')"
          ></fd-table-column>
          <fd-table-column
            prop="nickName"
            :label="this.$l('lbl_nickName')"
          ></fd-table-column>
          <fd-table-column
            prop="email"
            :label="this.$l('lbl_email')"
            width="200"
          ></fd-table-column>
          <fd-table-column
            prop="mobile"
            :label="this.$l('lbl_mobile')"
          ></fd-table-column>
          <fd-table-column :label="this.$l('lbl_status')">
            <template slot-scope="scope">
              <fd-dict-label
                :value="$getDictionaryLabel('sys_status', scope.row.status)"
              ></fd-dict-label>
            </template>
          </fd-table-column>
        </fd-table>
        <div class="pagination_bar">
          <fd-pagebar
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="userSearchModel.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="userSearchModel.pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="userSearchModel.count"
          >
          </fd-pagebar>
        </div>
      </div>
    </fd-dialog>
  </div>
</template>
<script>
import {
  getUsersByOrgCodeOrProjectCodeAndRoleCode,
  updateUsersByOrgCodeOrProjectCodeAndRoleCode,
  getGenUserList
} from '@/common/api/sys/genroleMatchAPI';
import { ptn } from '@/common/utils/common/validate';
//混入
// import { basePage } from '@/common/mixins/index';
export default {
  // mixins: [basePage],
  data() {
    return {
      inputVisible: false,
      inputValue: '',
      genRoleMatchModel: {
        id: '',
        roleCode: '',
        roleName: '',
        roleLimit: '',
        remark: '',
        userNames: '',
        version: '',
        userModelList: []
      },
      userSearchModel: {
        username: '',
        nickName: '',
        count: 0,
        pageNum: 1,
        pageSize: 20,
        sortBy: '',
        order: -1
      },
      tableData: [],
      usernames: '',
      dialogVisible: false,
      multipleSelection: [], //別選中的記錄資料
      selectedCode: [], //別選中的記錄資料
      selected: [],
      oldUserList: [], //原來的人員資訊
      disInput: false,
      disabledInput: false,
      rules: {
        roleCode: [
          {
            pattern: ptn.en_num_line(1, 20),
            message: this.$l('msg_role_code'),
            required: true,
            trigger: 'blur'
          }
        ],
        roleName: [
          {
            pattern: ptn.all_match(1, 20),
            message: this.$l('msg_role_name'),
            required: true,
            trigger: 'blur'
          }
        ],
        roleLimit: [
          {
            pattern: ptn.all_match(1, 20),
            message: this.$l('msg_role_limit'),
            required: true,
            trigger: 'blur'
          }
        ]
      }
    };
  },
  watch: {
    // multipleSelection: function() {
    //   // this.selected = [];
    //   console.log(this.selected,this.multipleSelection)
    //   for (const i in this.multipleSelection) {
    //     let flag = false;
    //     for (const j in this.selected) {
    //       if (this.selected[j].username == this.multipleSelection[i].username) {
    //         flag = true;
    //       }
    //     }
    //     if (!flag) {
    //       this.selected.push(this.multipleSelection[i]);
    //     }
    //   }
    // }
  },
  mounted: function() {
    this.getDetail();
  },
  methods: {
    handleClose(tag) {
      this.genRoleMatchModel.userModelList.splice(
        this.genRoleMatchModel.userModelList.indexOf(tag),
        1
      );
    },

    showInput() {
      this.dialogVisible = true;
    },

    handleInputConfirm() {
      this.genRoleMatchModel.userModelList.push(this.inputValue);
    },
    handleSelectionChange(val) {
      let copyUserModelList = JSON.parse(
        sessionStorage.getItem('userModelList')
      );
      //先將當前頁選中的元素清空
      this.tableData.forEach(el => {
        copyUserModelList.forEach((dl, i) => {
          if (el.id === dl.id) {
            copyUserModelList.splice(i, 1);
          }
        });
      });

      this.multipleSelection = val;
      let userModelList = copyUserModelList.concat(val);
      let newJson = []; //去重
      for (let item1 of userModelList) {
        let flag = true;
        for (let item2 of newJson) {
          if (item1.id == item2.id) {
            flag = false;
          }
        }
        if (flag) {
          newJson.push(item1);
        }
      }
      this.genRoleMatchModel.userModelList = userModelList = newJson;
      sessionStorage.setItem(
        'userModelList',
        JSON.stringify(this.genRoleMatchModel.userModelList)
      );
    },
    bindRoleUser() {
      this.dialogVisible = false;
    },
    saveRoleUser() {
      this.genRoleMatchModel.userModelList.forEach(li => {
        this.selectedCode.push(li.username);
      });
      const body = {
        roleCode: this.$route.query.roleCode,
        projectCode: this.$route.query.projectCode,
        orgCode: this.$route.query.orgCode,
        userList: this.selectedCode
      };
      updateUsersByOrgCodeOrProjectCodeAndRoleCode(body)
        .then(response => {
          // this.$showSuccess(response.message);
          // this.getDetail();
        })
        .catch(error => {
          console.log(error);
        });
    },
    refesh() {
      sessionStorage.removeItem('userModelList');
    },
    handleCurrentChange(val) {
      this.userSearchModel.pageNum = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.userSearchModel.pageSize = val;
      this.getList();
    },
    openDialog() {
      sessionStorage.setItem(
        'userModelList',
        JSON.stringify(this.genRoleMatchModel.userModelList)
      );
      this.resetDialog();
      this.getList();
    },
    resetDialog() {
      this.$reset(this.userSearchModel);
    },
    getList() {
      getGenUserList(this.userSearchModel)
        .then(response => {
          this.tableData = response.data.content;
          let userModelList = JSON.parse(
            sessionStorage.getItem('userModelList')
          );
          this.userSearchModel.count = response.data.totalElements;
          this.tableData.forEach(row => {
            userModelList.forEach(o => {
              if (row.username == o.username) {
                this.$nextTick(() => {
                  this.$refs.multipleTable.toggleRowSelection(row);
                }, 1000);
              }
            });
          });

          this.userSearchModel.count = response.data.totalElements;
        })
        .catch(error => {
          console.log(error);
        });
    },
    initVMDialog() {
      this.userSearchModel.pageNum = 1;
    },
    searchDialog() {
      this.initVMDialog();
      this.getList();
    },
    getDetail() {
      let genRoleMatchQueryModel = {
        roleCode: '',
        orgCode: '',
        projectCode: ''
      };
      //角色編碼
      genRoleMatchQueryModel.roleCode = this.$route.query.roleCode
        ? this.$route.query.roleCode
        : '';
      //專案編碼
      genRoleMatchQueryModel.orgCode = this.$route.query.orgCode
        ? this.$route.query.orgCode
        : '';
      //組織編碼
      genRoleMatchQueryModel.projectCode = this.$route.query.projectCode
        ? this.$route.query.projectCode
        : '';
      if (
        (genRoleMatchQueryModel.roleCode !== '' &&
          genRoleMatchQueryModel.orgCode !== '') ||
        (genRoleMatchQueryModel !== '' && genRoleMatchQueryModel !== '')
      ) {
        this.disabledInput = true;
        getUsersByOrgCodeOrProjectCodeAndRoleCode(genRoleMatchQueryModel)
          .then(response => {
            if (response.code === '2000') {
              this.genRoleMatchModel = response.data;
              console.log(response.data);
              console.log(this.genRoleMatchModel);
              this.oldUserList = response.data.userModelList;
            } else {
              this.$showError(response.message);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },

    onSubmit(formName) {
      if (!this.$validateRule(this.$refs[formName])) {
        return;
      }
      this.disInput = true;
      // TODO
      let genRoleMatchQueryModel = {
        roleCode: '',
        orgCode: '',
        projectCode: ''
      };
      //角色編碼
      genRoleMatchQueryModel.roleCode = this.$route.query.roleCode
        ? this.$route.query.roleCode
        : '';
      //專案編碼
      genRoleMatchQueryModel.orgCode = this.$route.query.orgCode
        ? this.$route.query.orgCode
        : '';
      //組織編碼
      genRoleMatchQueryModel.projectCode = this.$route.query.projectCode
        ? this.$route.query.projectCode
        : '';
      //人員資訊
      genRoleMatchQueryModel.userList = [];
      updateUsersByOrgCodeOrProjectCodeAndRoleCode(genRoleMatchQueryModel)
        .then(response => {
          if (response.code === '2000') {
            this.saveRoleUser();
            // this.requeryPageWithParam('GenRoleMatchList'); //重新整理頁面
            this.$router.go(-1);
            this.$showSuccess(response.message);
          } else {
            this.$showError(response.message);
          }
        })
        .catch(error => {
          this.disInput = false;
          this.$showError(error.message);
        });
    },
    cancel() {
      // this.returnPage('GenRoleMatchList');
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
@import '~@/common/styles/detail.scss';
</style>