<template>
  <div class="mainCss">
    <a-card title="督查整改阶段开关" class="box-card" style="width:100%;height: 100%;">
      <div class="text item">
        <a-form ref="form" :model="form" :label-col="{ span: this.roleIndex ? 16 : 4 }" style="max-width: 100%;">
          <a-form-item label="市级经办人下发整改">
            <a-switch v-model:checked="form['20']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('20')" @click="onAddRole('20')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['20'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['20']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="整改单位经办人整改中">
            <a-switch v-model:checked="form['22']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('22')" @click="onAddRole('22')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['22'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['22']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="整改单位审核人复核">
            <a-switch v-model:checked="form['22-1']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('22-1')" @click="onAddRole('22-1')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['22-1'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['22-1']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="市级经办人审核">
            <a-switch v-model:checked="form['24']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('24')" @click="onAddRole('24')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['24'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['24']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="市级审核人复核">
            <a-switch v-model:checked="form['24-1']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('24-1')" @click="onAddRole('24-1')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['24-1'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['24-1']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="稽查类问题初核">
            <a-switch v-model:checked="form['26']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('26')" @click="onAddRole('26')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['26'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['26']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="稽查类问题复核">
            <a-switch v-model:checked="form['26-1']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('26-1')" @click="onAddRole('26-1')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['26-1'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['26-1']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="省级业务处室经办人审核">
            <a-switch v-model:checked="form['25']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('25')" @click="onAddRole('25')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['25'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['25']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="省级业务处室审核人复核">
            <a-switch v-model:checked="form['25-1']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('25-1')" @click="onAddRole('25-1')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['25-1'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['25-1']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="省级经办人复核">
            <a-switch v-model:checked="form['27']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('27')" @click="onAddRole('27')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['27'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['27']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="省级审核人归档复核">
            <a-switch v-model:checked="form['27-1']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('27-1')" @click="onAddRole('27-1')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['27-1'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['27-1']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="省级经办人初审">
            <a-switch v-model:checked="form['27-2']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('27-2')" @click="onAddRole('27-2')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft" >
                <template #title>
                  {{ (roleList['27-2'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['27-2']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item label="省级问题销号">
            <a-switch v-model:checked="form['28']" @change="changeStatus" :disabled="readOnlyRole=='hide'" />
            <span class="add-role" :class="showChecked('28')" @click="onAddRole('28')">+</span>
            <div class="role-display" v-if="!this.roleIndex">
              <a-tooltip placement="topLeft">
                <template #title>
                  {{ (roleList['28'] || []).map(item => item.roleName ).join( ' ，' ) }}
                </template>
                <div class="display-item" v-for="(i, key) in roleList['28']" :key="key">{{ i.roleName }}</div>
              </a-tooltip>
            </div>
          </a-form-item>
        </a-form>
      </div>
      <div class="item-role" v-if="this.roleIndex">
        <a-form ref="form" layout="inline">
          <a-form-item label="角色名称" >
            <a-input v-model:value="searchObj.roleName" allow-clear />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" :style="{ marginLeft: '8px' }" @click="getRoleList()">查询</a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="onConfirm">确定</a-button>
          </a-form-item>
        </a-form>
        <a-table
          :data-source="tableData"
          :columns="columns"
          :pagination="false"
          row-key="id"
          style="width: 100%;"
          :style="{ height: tableHeight + 'px' }"
          :scroll="{ x: true, y: tableHeight - 60 }"
          bordered>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'roleName'">
              <span style="display: inline-block; width: 200px;">{{ record.roleName }}</span>
              <a-checkbox :checked="onCheckbox(record.id)" @change="onChange(record)" />
            </template>
          </template>
        </a-table>
        <a-pagination
          show-size-changer
          v-model:pageSize="searchObj.pageSize"
          :total="total"
          :page-size-options="['10', '20', '30', '40']"
          :show-total="total => `共${total}条`"
          @showSizeChange="handleSizeChange"
          @change="handleCurrentChange"
          style="margin-top: 10px;" />
      </div>
      <!-- <div class="item-role" >
        <div class="" v-for="(item, index) in roleList" :key="index">
          <div class="display-item" v-for="(i, key) in item" :key="key">{{ i.roleName }}</div>
        </div>
      </div> -->
    </a-card>
  </div>
</template>

<script>
import { apiBatchSave, apiGetRole } from '@/api/xiTongGuanLi/shglManage';
import request from '../../utils/gw_ajax_request.js';
export default {
  data() {
    return {
      form: {},
      total: 0,
      checked: true,
      searchObj: {
        roleName: '',
        pageSize: 10,
        pageNum: 1,
      },
      columns: [
        {
          title: '角色名称',
          dataIndex: 'roleName',
          width: 100,
        },
      ],
      privDict: {
        systemFlag: [],
        roleDutyList: [],
      },
      tableData: [],
      roleList: {},
      roleIndex: '',
      tableHeight: window.innerHeight - 259,
      readOnlyRole: localStorage.getItem('readOnlyRole'),
    };
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
    orgId() {
      return localStorage.getItem('guid') ? localStorage.getItem('guid') : '';
    },
  },
  created() {
    this.getRole();
  },
  mounted() {
    this.getDict();
    this.getRoleList();
    this.initForm();
    this.getData();
  },
  methods: {
    showChecked(id) {
      return (id === this.roleIndex && 'checked') || '';
    },
    onCheckbox(id) {
      let state = false;
      if (!this.roleIndex) return state;
      const roleArr = this.roleList[this.roleIndex] || [];
      for (var i = 0; i < roleArr.length; i++) {
        const item = roleArr[i];
        if (item.roleId === id) {
          state = true;
          break;
        }
      }
      return state;
    },
    initForm() {
      this.form = {
        20: false,
        22: false,
        '22-1': false,
        24: false,
        '24-1': false,
        25: false,
        '25-1': false,
        26: false,
        '26-1': false,
        27: false,
        '27-1': false,
        '27-2': false,
        28: false,
      };
    },
    getRole() {
      apiGetRole().then((res) => {
        this.roleList = res.data;
      });
    },
    changeStatus() {
      this.submitData();
    },
    submitData() {
      var arr = [];
      var data = {
        configKey: 'dc.zg.state',
        configValue: '',
      };
      for (var k in this.form) {
        if (this.form[k]) {
          arr.push(k);
        }
      }
      data.configValue = arr.join(',');
      request
        .post(`/sys/config`, data)
        .then((res) => {
          if (res.success) {
          } else {
            this.getData();
            this.$message.warning(res.message);
          }
        })
        .catch((error) => {
          this.getData();
          this.$message.error(error);
        });
    },
    getData() {
      this.initForm();
      request
        .get(`/sys/config/getDcZgState`)
        .then((res) => {
          if (res.success) {
            if (res.data.configValue) {
              var arr = res.data.configValue.split(',');
              arr.forEach((cur, index, arr) => {
                this.form[cur] = true;
              });
            }
          } else {
            this.$message.warning(res.message);
            this.initForm();
          }
        })
        .catch((error) => {
          this.$message.error(error);
          this.initForm();
        });
    },
    onAddRole(index) {
      if (this.roleIndex === index) {
        this.roleIndex = '';
      } else {
        this.roleIndex = index;
      }
    },
    getRoleList() {
      this.searchObj['id'] = this.persId;
      this.searchObj.operateType = '1';
      request.post(`/sys/roles/list-by-user`, this.searchObj).then((res) => {
        if (res.success) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    systemFilter(item) {
      if (!item) {
        return '';
      }
      let system;
      this.privDict.systemFlag.forEach((ele) => {
        if (item == ele.value) {
          system = ele.name;
        }
      });
      return system;
    },
    getDict() {
      request
        .get(`/sys/privs/getSysFlagByUserId?userId=${this.persId}`)
        .then((res) => {
          if (res.success) {
            this.privDict.systemFlag = res.data;
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch((error) => {
          this.$message.warning(error.message);
        });
    },
    onChange({ id, roleName }) {
      if (!this.roleIndex) return;
      const roleArr = this.roleList[this.roleIndex] || [];
      let index = -1;
      for (let i = 0; i < roleArr.length; i++) {
        const item = roleArr[i];
        if (item.roleId === id) {
          index = i;
          break;
        }
      }
      if (index !== -1) {
        this.roleList[this.roleIndex].splice(index, 1);
      } else {
        this.roleList[this.roleIndex].push({
          roleId: id,
          roleName,
        });
      }
    },
    handleSizeChange(size, val) {
      this.searchObj.pageSize = val;
      this.getRoleList();
    },
    handleCurrentChange(val) {
      this.searchObj.pageNum = val;
      this.getRoleList();
    },
    onConfirm() {
      if (!this.roleIndex) return;
      const param = {
        workflowStat: this.roleIndex,
        roles: this.roleList[this.roleIndex].map((item) => item.roleId),
      };
      apiBatchSave(param).then((res) => {
        this.roleIndex = '';
        this.$message.warning(res.message || '操作成功');
      });
    },
  },
};
</script>

<style lang='less' scoped>
:deep(.ant-form-item) {
  margin: 0 0 12px;
}
.mainCss{
  overflow: hidden;
  .add-role{
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid  #BFBFBF;
    color: #BFBFBF;
    border-radius: 50%;
    font-size: 15px;
    line-height: 17px;
    text-align: center;
    margin-left: 5px;
    cursor: pointer;
  }
  .checked.add-role{
    color: #1890FF;
    border: 1px solid #1890FF;
  }
  .item-role{
    flex: 9;
  }
  .item{
    flex: 3;
  }
  .box-card :deep(.ant-card-body){
    display: flex;
  }
  .role-display{
    display: inline-block;
    vertical-align: top;
    line-height: 25px;
    margin: 6.5px 0;
    white-space: nowrap;
    overflow: hidden;
    width: 60vw;
    text-overflow: ellipsis;
    flex: 1;
  }

  .display-item{
    height: 25px;
    line-height: 25px;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #555555;
    color: #555555;
    border-radius: 8px;
    padding: 0px 10px;
    margin-left: 5px;
  }
  :deep(.ant-form-item-children){
    display: flex;
    align-items: center;
  }
}

</style>
