<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="岗位名称" prop="riskPostName">
        <el-input v-model="queryParams.riskPostName" placeholder="请输入岗位名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['system:currentRiskPost:add']">添加岗位</el-button>
      </el-col>
    </el-row>
    <div id="xrdcard" v-if="currentRiskPostList.length">
      <el-col :span="5" class="ssss" v-for="(item, index) in currentRiskPostList" :key="index">
        <!--内容-->
        <div class="box-wrap">
          <!-- 上部 -->
          <div class="box-top">
            <!-- 头像 -->
            <div class="top-avator">
              <img src="../../../assets/images/u8518.png">
            </div>
            <!-- 锁 -->
            <div class="top-lock">
              <!--  <img src="${ctx}img/patrol/lock.svg">-->
            </div>
          </div>
          <!-- 下部 -->
          <div class="box-bottom">
            <div class="row">
              <!-- 职位和数据 -->
              <el-col :span="16">
                <div class="con-role"><span class="span-title" :data-myTitle="item.riskPostName">{{ item.riskPostName ?
      (item.riskPostName.length > 15 ? item.riskPostName.substring(0, 15) + '...' : item.riskPostName) :
      '暂无数据' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <!-- <div class="con-record">{{item.finalTypeCount}}类/{{item.finalCount}}条</div> -->
              </el-col>
              <!-- 说明 -->
              <el-col :span="24">
                <div class="con-explain"><span class="span-title" :data-myTitle="item.riskPostDesc">{{ item.riskPostDesc
      ? (item.riskPostDesc.length > 15 ? item.riskPostDesc.substring(0, 15) + '...' : item.riskPostDesc) :
      '暂无数据' }}</span>
                </div>
              </el-col>
              <!-- 姓名 -->
              <el-col :span="24">
                <div class="con-user"><span class="span-title" :data-myTitle="item.nickName">{{ item.nickName ?
      (item.nickName.length > 15 ? item.nickName.substring(0, 15) + '...' : item.nickName) : '暂无数据'
                    }}</span>
                </div>
              </el-col>
              <!-- 操作 -->
              <el-col :span="24">
                <div class="con-operation">
                  <img class="edit-hover" src="../../../assets/images/edit.svg" @click="handleUpdate(item)">
                  <img class="delete-hover" src="../../../assets/images/delete.svg" @click="handleDelete(item)">
                </div>
              </el-col>
            </div>
          </div>
        </div>
      </el-col>
    </div>
    <div v-else class="noData">
      <img src="../../../assets/images/u8460.png">
      <p>暂无数据请通过添加方式创建巡查岗位</p>
    </div>
    <!-- 添加或修改现状风险岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-tabs v-model="activeName" @tab-click="tabChange">
        <el-tab-pane label="基础信息" name="first">
          <el-form ref="form" :model="form" :rules="rules" label-width="84px">
            <el-form-item label="岗位名称" prop="riskPostName">
              <el-input v-model="form.riskPostName" placeholder="请输入岗位名称" />
            </el-form-item>
            <!-- <el-form-item label="岗位类型" prop="patrolType">
            <el-select v-model="form.patrolType" placeholder="请选择岗位类型" style="width:100%">
              <el-option
                v-for="dict in patrolTypeList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item> -->
            <el-form-item label="岗位描述" prop="riskPostDesc">
              <el-input type="textarea" v-model="form.riskPostDesc" placeholder="请输入岗位描述" />
            </el-form-item>
            <el-form-item label="岗位成员" prop="userId">
              <el-select v-model="form.userId" placeholder="请输入岗位成员" style="width:100%" multiple>
                <el-option v-for="dict in userList" :key="dict.userId" :label="dict.nickName"
                  :value="dict.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="清单匹配" name="second">
          <el-form ref="listForm" :model="listForm" :rules="listRules" label-width="120px" label-position="top">
            <el-form-item label="匹配模式" prop="postState">
              <el-radio-group v-model="listForm.postState" @input="radioChange">
                <el-radio label="0">一岗一人巡查模式</el-radio>
                <el-radio label="1">一岗多人巡查模式</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="岗位清单配置" prop="currentRiskTypeList" v-if="listForm.postState == '0'"
              id="currentRiskTypeList">
              <!-- <el-input v-model="listForm.currentRiskTypeList" style="width:80%;margin-right:20px"></el-input> -->
              <div
                style="display:inline-block;width:80%;margin-right:20px;border:1px solid #eee;padding:5px 10px;min-height:40px">
                <span
                  style="display:inline-block;margin-right:10px;line-height:15px;background-color:#1890FF;padding:5px 10px;color:#fff;"
                  v-for="(item, index) in listForm.currentRiskTypeList" :key="index">{{ item.type ||
      item.currentRiskType }}</span>
              </div>
              <el-button type="primary" @click="getPatrolLibrary" style="height:35px">风险台账</el-button>
            </el-form-item>
            <el-form-item label="岗位清单配置" prop="hdType" v-if="listForm.postState == '1'">
              <el-table :data="listUserTabel" empty-text="暂无数据，请先在‘基础信息’中选择岗位成员！">
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column label="姓名" align="center" prop="userName" width="140" :show-overflow-tooltip="true" />
                <el-table-column label="状态" align="center" prop="status" width="140">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" @change="statusChange(scope.$index, $event)">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="巡查清单" align="center" prop="postNameShow" :show-overflow-tooltip="true">

                  <template slot-scope="scope">
                    <el-button size="mini" type="text" v-for="(item, index) in scope.row.postNameShow" :key="index">{{
      item.type || item.currentRiskType }}</el-button>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="140">

                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit"
                      @click="selectList(scope.row, scope.$index)">清单库选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <p> <span style="color: red;">系统提示：可根据实际情况任意增加或减少巡查类型及巡查内容。</span></p>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择隐患清单库" :visible.sync="patrolLibraryOpen" width="60%" append-to-body>
      <el-table :data="libraryList" @selection-change="handleSelectionChange" ref="libraryListTabel" :key="isUpdate"
        row-key="id">
        <el-table-column type="selection" width="55" :reserve-selection="true">
        </el-table-column>
        <el-table-column label="场所位置" width="200" show-overflow-tooltip align="center">

          <template slot-scope="scope">{{ scope.row.buildingName }}{{ scope.row.floorName }}{{ scope.row.roomName
            }}</template>
        </el-table-column>
        <el-table-column label="风险源" width="120" align="center">

          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="辨识标准" width="120" show-overflow-tooltip align="center">

          <template slot-scope="scope">{{ scope.row.referenceBasis }}</template>
        </el-table-column>
        <el-table-column label="存在部位" width="120" align="center">

          <template slot-scope="scope">{{ scope.row.presenceLocation }}</template>
        </el-table-column>
        <el-table-column label="风险类型（GB6441）" width="120" show-overflow-tooltip align="center">

          <template slot-scope="scope">{{ scope.row.type }}</template>
        </el-table-column>
        <el-table-column label="风险等级" width="120" align="center">

          <template slot-scope="scope">{{ scope.row.level }}</template>
        </el-table-column>
        <el-table-column label="周期" width="120" align="center" prop="cycle">

          <template slot-scope="scope">
            <el-select v-model="scope.row.cycle" placeholder="请选择" @change="cycleSelChange">
              <el-option v-for="(item, index) in cycleList" :key="index" :label="item.name" :value="item.cycle">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="libraryTotal > 0" :total="libraryTotal" :page.sync="libraryParams.pageNum"
        :limit.sync="libraryParams.pageSize" @pagination="getlibraryList" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="patrolLibrarySubmit">确 定</el-button>
        <el-button @click="patrolLibraryOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCurrentRiskPost, userCurrentRiskPost, getlibraryListFun, saveCurrentPost, delCurrentRiskPost, getCurrentRiskPatrol } from "@/api/system/currentRiskPost";

export default {
  name: "projectPost",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 现状风险岗位表格数据
      currentRiskPostList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      patrolLibraryOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 9999,
        riskPostName: null,
      },
      libraryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      form: {},
      patrolTypeList: [],// 岗位类型
      userList: [],
      rules: {
        riskPostName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }]
      },
      activeName: 'first',
      listRules: {
        postState: [{ required: true, message: '请选择匹配模式', trigger: 'change' }]
      },
      listForm: {//清单匹配
        postState: '0',
        currentRiskTypeList: []
      },
      listUserTabel: [],
      libraryList: [],
      libraryTotal: 0,
      currentRiskList: [],
      multipleSelection: [],
      cycleList: [
        {
          name: '日查',
          cycle: '0'
        },
        {
          name: '周查',
          cycle: '1'
        },
        {
          name: '月查',
          cycle: '2'
        },
        {
          name: '季查',
          cycle: '3'
        },
        {
          name: '年查',
          cycle: '4'
        },
      ],
      isUpdate: false,
      postList: [],
      userId: '',
      userIndex: ''
    };
  },
  created() {
    if (this.$route.params.id) {
      this.queryParams.projectId = this.$route.params.id;
    }
    this.getList();
  },
  methods: {
    /** 查询现状风险岗位列表 */
    getList() {
      this.loading = true;
      listCurrentRiskPost(this.queryParams).then(response => {
        this.currentRiskPostList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询人员列表 */
    getUserList() {
      this.loading = true;
      userCurrentRiskPost(this.queryParams).then(response => {
        this.userList = response.rows;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.postList = []
      this.listForm.currentRiskTypeList = []
    },
    // 表单重置
    reset() {
      this.form = {}
      this.activeName = 'first'
      this.listForm = {//清单匹配
        postState: '0',
        currentRiskTypeList: []
      }
      this.listUserTabel = []
      this.libraryParams = {
        pageNum: 1,
        pageSize: 10,
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.reset();
      this.getUserList()
      this.title = "添加现状风险岗位";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      if (typeof row.userId == 'string') {
        let arr = row.userId.split(',')
        let arr2 = []
        arr.forEach(i => {
          i = Number(i)
          arr2.push(i)
        });
        row.userId = arr2
      }
      this.form = row
      this.listForm.postState = this.form.patrolType
      this.getUserList()
      this.open = true;
      this.title = "修改现状风险岗位";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let params = {
            "projectId": this.$route.params.id,
            "riskPostCode": this.form.riskPostCode,
            "riskPostName": this.form.riskPostName,
            "riskPostDesc": this.form.riskPostDesc,
            "userId": this.form.userId.join(),
            "patrolType": this.listForm.postState,
            "list": this.postList
          }
          if (this.listForm.postState == '0') { // 一岗一人巡查模式
            params.list = this.postList
          } else {
            let arr = []
            this.listUserTabel.forEach((item) => {
              arr = [...item.postName, ...arr]
            })
            params.list = arr
          }
          // console.log('params==>>',params)
          if (this.form.id != null) {
            params.id = this.form.id
            saveCurrentPost(params).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            saveCurrentPost(params).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除？').then(function () {
        return delCurrentRiskPost(row.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    // 匹配模式radio
    radioChange(e) {
      if (e == '1') {
        this.listUserTabel = []
        let arr = this.form.userId
        arr.forEach((item, index) => {
          let data = {
            userName: this.userList.find(i => i.userId == item).nickName,
            postName: [],
            postNameShow: [],
            userId: item,
            status: true
          }
          this.listUserTabel.push(data)
        })
        // console.log('this.listUserTabel==>>',this.listUserTabel)
      }
    },
    // 一岗一人巡查模式 清单库
    getPatrolLibrary() {
      this.patrolLibraryOpen = true
      this.getlibraryList()
    },
    getlibraryList() {
      getlibraryListFun(this.libraryParams).then(response => {
        this.libraryList = response.rows;
        this.libraryList.forEach((item) => {
          item.cycle = '0'
        })
        this.libraryTotal = response.total;

        // if (this.listForm.postState == '0') {
        //   console.log('翻页postList==>>',this.postList)
        //   this.$nextTick(()=>{
        //     for (let i = 0; i < this.libraryList.length; i++) {
        //       for (let j = 0; j <this.postList.length; j++) {
        //         //两个数组做比对,选中的做勾选
        //         if(this.libraryList[i].id===this.postList[j].id)
        //         {
        //           this.$refs.libraryListTabel.toggleRowSelection(this.libraryList[i]);
        //         }
        //       }
        //     }
        //   })
        // }else{
        //   this.$nextTick(()=>{
        //     for (let i = 0; i < this.libraryList.length; i++) {
        //       for (let j = 0; j <this.listUserTabel[this.userIndex].postName.length; j++) {
        //         //两个数组做比对,选中的做勾选
        //         if(this.libraryList[i].id===this.listUserTabel[this.userIndex].postName[j].id)
        //         {
        //           this.$refs.libraryListTabel.toggleRowSelection(this.libraryList[i]);
        //         }
        //       }
        //     }
        //   })
        // }
      });
    },
    // 选择清单库确定
    patrolLibrarySubmit() {
      if (this.listForm.postState == '0') {
        this.postList = []
        this.listForm.currentRiskTypeList = []
      } else {
        this.listUserTabel[this.userIndex].postName = []
        this.listUserTabel[this.userIndex].postNameShow = []
      }
      console.log('this.multipleSelection==>>', this.multipleSelection)
      this.multipleSelection.forEach((item) => {
        if (this.listForm.postState == '0') { // 一岗一人巡查模式
          let data = {
            id: item.id,
            patrolType: item.cycle,
          }
          this.postList.push(data)
          if (!this.listForm.currentRiskTypeList.some(items => items.type === item.type)) {
            this.listForm.currentRiskTypeList.push(item)
          }
          // console.log('清单库确定postList==>>',this.postList)
        } else { // 一岗多人巡查模式
          let data = {
            id: item.id,
            patrolType: item.cycle,
            userId: this.userId,
            status: this.userStatus ? '0' : '1'
          }
          this.listUserTabel[this.userIndex].postName.push(data)
          if (!this.listUserTabel[this.userIndex].postNameShow.some(items => items.type === item.type)) {
            this.listUserTabel[this.userIndex].postNameShow.push(item)
          }
          // console.log('清单库确定listUserTabel==>>',this.listUserTabel)
        }
      })
      this.$refs.libraryListTabel.clearSelection()
      this.patrolLibraryOpen = false

    },
    // 状态切换
    statusChange(num, e) {
      // console.log('num==>>', num)
      this.listUserTabel.forEach((item, index) => {
        if (index == num) {
          item.postName.forEach((items) => {
            items.status = e ? '0' : '1'
          })
        }
      })
      console.log(',this.listUserTabel==>>', this.listUserTabel)
    },
    // 一岗多人巡查模式  清单库
    selectList(row, index) {
      // console.log('row==>>',row)
      this.patrolLibraryOpen = true
      this.userId = row.userId
      this.userIndex = index
      this.userStatus = row.status
      this.multipleSelection = []
      this.libraryParams = {
        pageNum: 1,
        pageSize: 10,
      }
      this.getlibraryList()
    },
    // tabs切换
    tabChange(tab, event) {
      // console.log('tab==>>',tab.name)
      if (tab.name == 'second' && this.title == '修改现状风险岗位') { //清单匹配  
        // 岗位用户巡查清单列表
        this.listUserTabel = []
        this.getCurrentRiskPatrol()
      } else {
        this.listForm.postState = '0'
      }
    },
    getCurrentRiskPatrol() {
      this.listForm.currentRiskTypeList = []
      let params = {
        postId: this.form.id,
        pageNum: 1,
        pageSize: 9999,
      }
      getCurrentRiskPatrol(params).then(response => {

        if (this.listForm.postState == '0') { // 一岗一人巡查模式
          this.postList = []
          this.listForm.currentRiskTypeList = []
          response.rows.forEach((item) => {
            let data = {
              id: item.currentRiskId,
              patrolType: item.patrolType,
            }
            this.postList.push(data)
            if (!this.listForm.currentRiskTypeList.some(items => items.currentRiskType === item.currentRiskType)) {
              this.listForm.currentRiskTypeList.push(item)
            }
          })
          // console.log('postList==>>',this.postList)
        } else { // 一岗多人巡查模式
          this.listUserTabel = []
          // this.listUserTabel[this.userIndex].postNameShow = []s
          let arr = this.form.nickName.split(',')
          arr.forEach((item, index) => {
            let data = {
              userName: item,
              postName: [],
              postNameShow: [],
              userId: this.userList.find(i => i.nickName == item).userId,
              status: ''
            }
            this.listUserTabel.push(data)
          })
          for (const val of response.rows) {
            this.listUserTabel.forEach((item) => {
              if (item.userId == val.userId) {
                item.status = val.status == '0' ? true : false
                if (!item.postNameShow.some(items => items.currentRiskType === val.currentRiskType)) {
                  item.postNameShow.push(val)
                }
                let data = {
                  id: val.currentRiskId,
                  patrolType: val.patrolType,
                  userId: val.userId,
                  status: val.status
                }
                item.postName.push(data)
              }
            })
          }
          // console.log('this.listUserTabel==>>',this.listUserTabel)
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    cycleSelChange() {
      this.isUpdate = !this.isUpdate
    }
  }
};
</script>

<style lang="scss" scoped>
#xrdcard {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.noData {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.ssss {
  margin-right: 30px;
  // display: flex;
  // justify-content: space-between;
  // padding-left: 0 !important;
  // padding-right: 0 !important;
}

.top-avator img {
  width: 90px;
  height: 90px;
}

.box-wrap {
  padding: 20px 0px 20px 0px;
}

.box-top {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #3f9f9f;
  border: 1px solid #e1e1e1;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.top-lock {
  position: absolute;
  top: 10px;
  right: 10px;
}

.box-bottom {
  padding: 15px 10px 10px;
  background-color: #ffffff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid #e1e1e1;
  border-top: none;
}

.row {
  height: 100%;
  overflow: hidden;
}

.con-role {
  color: #8c8c8c;
  font-size: 16px;
  font-weight: bold;
  line-height: 35px;
}

.con-record {
  font-size: 12px;
  color: #b3becd;
  text-align: right;
}

.con-explain {
  color: #b3becd;
  font-size: 12px;
  margin-top: 10px;
  cursor: default;
}

.con-user {
  margin-top: 25px;
  color: #1d9bd5;
  cursor: default;
}

.con-operation {
  margin-top: 20px;
  text-align: right;
}

.con-operation img {
  width: 18px;
  height: 19px;
  margin-left: 10px;
  cursor: pointer;
}

::v-deep .el-form-item--medium .el-form-item__content {
  margin-left: 20px;
}

#currentRiskTypeList ::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
