<template>
  <el-container>
    <el-header v-if="isSearch">
      <el-form style="margin: 10px 0" :inline="true">
        <el-form-item label="演习名称：">
          <el-input v-model="planName" placeholder="请输入演习名称" />
        </el-form-item>
        <el-form-item label="演习编号：">
          <el-input v-model="planNum" placeholder="请输入演习编号" />
        </el-form-item>
        <el-form-item label="演习类型：">
          <el-select v-model="drillType">
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态：">
          <el-select v-model="drillState">
            <el-option
              v-for="(item, index) in stateList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            style="margin-left: 10px"
            type="primary"
            icon="el-icon-search"
            @click="getList"
          >
            搜索
          </el-button>
          <el-button class="commonBtn" icon="el-icon-refresh" @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <div class="headerTop">
        <div></div>
        <div>
          <right-toolbar :showSearch.sync="isSearch" @queryTable="getList" ></right-toolbar>
        </div>
      </div>
      <el-table
        height="calc(100% - 200px)"
        :data="list"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
        :cell-style="{ 'text-align': 'center', padding: '2px' }"
        style="width: 100%"
      >
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            <span> {{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="演习编号" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillSn || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演习名称" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演习时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.realityStartTime || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演习类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillTypeName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演习区域" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillArea || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演习地点" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillDeck || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演习计划" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="seeInfo(scope.row.id)">
              查看
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="演习图片" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="seePic(scope.row.id)">
              查看
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="演习总结" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.processStatus == 2">-</span>
            <el-button
              v-else
              type="text"
              size="mini"
              @click="editSummary(scope.row.id)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center">
          <template slot-scope="scope">
            <span>{{

                stateList.filter(
                    (item) => item.value == scope.row.processStatus
                  )[0].label

            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.processStatus === 1 && scope.row.drillSummary"
              type="text"
              size="mini"
              @click="audit(scope.row.id)"
            >
              审核
            </el-button>
            <el-button
              v-if="scope.row.processStatus == 2"
              type="text"
              size="mini"
              @click="seeItem(scope.row.id)"
            >
              查看
            </el-button>
            <el-button type="text" size="mini" @click="del(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        @pagination="getList"
      />
    </el-main>
    <el-dialog
      :visible.sync="addAnnualDrill"
      width="50%"
      title="查看演习计划"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        label-position="right"
        label-width="142px"
        :inline="true"
        style="height: 63vh; overflow: auto"
      >
        <el-form-item label="演习名称：" prop="drillName">
          <el-input
            :disabled="isDisabled"
            v-model="addForm.drillName"
            style="width: 15vw"
          />
        </el-form-item>
        <el-form-item label="演习部门：" prop="drillDepartment">
          <el-input
            :disabled="isDisabled"
            style="width: 15vw"
            v-model="addForm.drillDepartmentName"
          ></el-input>
        </el-form-item>
        <el-form-item label="演习组织人：" prop="drillOrganizer">
          <el-input
            :disabled="isDisabled"
            style="width: 15vw"
            v-model="addForm.drillOrganizerName"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="演习区域：" prop="drillArea">
          <el-input
            :disabled="isDisabled"
            v-model="addForm.drillArea"
            style="width: 15vw"
          />
        </el-form-item>
        <el-form-item label="演习地点：" prop="drillDeck">
          <el-input
            :disabled="isDisabled"
            v-model="addForm.drillDeck"
            style="width: 15vw"
          />
        </el-form-item>
        <el-form-item label="演习类型：" prop="drillType">
          <el-input
            :disabled="isDisabled"
            style="width: 15vw"
            v-model="addForm.drillTypeName"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="演习时间：" prop="dateList">
          <el-date-picker
            :disabled="isDisabled"
            style="width: 38vw"
            v-model="addForm.dateList"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="演习人员：" prop="drillPersonList">
          <el-select
            :disabled="isDisabled"
            style="width: 38vw"
            v-model="addForm.drillPersonList"
            clearable
            multiple
          >
            <el-option
              v-for="item in userOption"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="假设事故类型：" prop="accidentSituation">
          <el-input
            :disabled="isDisabled"
            type="textarea"
            resize="none"
            :autosize="{ minRows: 4, maxRows: 444 }"
            v-model="addForm.accidentSituation"
            style="width: 38vw"
          />
        </el-form-item>
        <el-form-item label="演习目的：" prop="drillObjective">
          <el-input
            :disabled="isDisabled"
            type="textarea"
            resize="none"
            :autosize="{ minRows: 4, maxRows: 444 }"
            v-model="addForm.drillObjective"
            style="width: 38vw"
          />
        </el-form-item>
        <div style="position: relative">
          <div
            class="minBox"
            v-for="(item, index) in addForm.drillProcessList"
            :key="index"
          >
            <!-- <span v-show="!index" class="titleLeft">演习过程确认项：</span> -->
            <el-form-item
              :label="!index ? '演习过程确认项：' : ''"
              :prop="'drillProcessList.' + index + '.contentInfo'"
            >
              <span class="titleLeft">{{ index + 1 }}：</span>
              <el-input
                :disabled="isDisabled"
                v-model="addForm.drillProcessList[index].contentInfo"
                style="width: 36.5vw"
                type="textarea"
                :autosize="{ minRows: 1 }"
                resize="none"
              />
            </el-form-item>
          </div>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog
      :visible.sync="seePicAlert"
      width="50%"
      title="查看演习图片"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="height: 700px; overflow-y: auto">
        <el-image
          v-for="item in picList"
          :key="item"
          style="width: 100%; margin-bottom: 20px"
          :src="item"
          :preview-src-list="picList"
        >
        </el-image>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="summaryAlert"
      width="50%"
      :title="title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="addCancel"
    >
    <el-dialog
      width="25%"
      title="驳回原因"
      :visible.sync="turnAlert"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="addCancels"
      append-to-body>
      <div style="height: 200px; overflow-y: auto">
        <el-input
          type="textarea"
          resize="none"
          :autosize="{ minRows: 5, maxRows: 400 }"
          placeholder="请输入驳回原因"
          v-model="turnValue"
        >
        </el-input>
        <el-row style="text-align: right; margin: 30px 0 0 0">
          <el-button @click="addCancels"> 取消 </el-button>
          <el-button type="primary" @click="addTurn"> 确认驳回 </el-button>
        </el-row>
      </div>
    </el-dialog>
      <div style="height: 700px; overflow-y: auto">
        <p>演习总结：</p>
        <el-input
        :disabled="summaryType !== 0"
          type="textarea"
          resize="none"
          :autosize="{ minRows: 4, maxRows: 400 }"
          placeholder="请输入演习总结"
          v-model="drillSummary"
        >
        </el-input>
        <p style="margin-top: 50px">演习过程问题及整改措施：</p>
        <el-table
          height="calc(100% - 350px)"
          :data="summaryList"
          :row-style="{ height: '0px' }"
          :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
          :cell-style="{ 'text-align': 'center', padding: '2px' }"
          style="width: 100%"
        >
          <el-table-column label="序号" align="center" width="50">
            <template slot-scope="scope">
              <span> {{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column label="问题描述" align="center">
            <template slot-scope="scope">
              <span v-show="summaryType">{{ scope.row.problemsInfo || '-' }}</span>
              <el-input v-show="!summaryType" v-model="scope.row.problemsInfo" />
            </template>
          </el-table-column>
          <el-table-column label="整改措施" align="center">
            <template slot-scope="scope">
              <span v-show="summaryType">{{ scope.row.rectificationInfo || '-' }}</span>
              <el-input v-show="!summaryType" v-model="scope.row.rectificationInfo" />
            </template>
          </el-table-column>
          <el-table-column label="责任人" align="center">
            <template slot-scope="scope">
              <span v-show="summaryType">{{ scope.row.personLiableName || '-' }}</span>
              <el-cascader
              v-show="!summaryType"
              :props="{emitPath:false}"
                :show-all-levels="false"
                v-model="scope.row.personLiable"
                :options="userList"
              ></el-cascader>
            </template>
          </el-table-column>
          <el-table-column label="整改期限" align="center">
            <template slot-scope="scope">
              <span v-show="summaryType">{{ scope.row.rectificationTerm || '-' }}</span>
              <el-input v-show="!summaryType" v-model="scope.row.rectificationTerm" />
            </template>
          </el-table-column>
          <el-table-column label="整改人" align="center">
            <template slot-scope="scope">
              <span v-show="summaryType">{{ scope.row.rectificationByName || '-' }}</span>
              <el-cascader
              v-show="!summaryType"
              :props="{emitPath:false}"
                :show-all-levels="false"
                v-model="scope.row.rectificationBy"
                :options="userList"
              ></el-cascader>
            </template>
          </el-table-column>
          <el-table-column label="整改时间" align="center" width="160">
            <template slot-scope="scope">
              <span v-show="summaryType">{{ scope.row.rectificationTime }}</span>
              <el-date-picker
              v-show="!summaryType"
                style="width: 150px"
                value-format="yyyy-MM-dd"
                v-model="scope.row.rectificationTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="" align="center" width="40" >
            <template slot-scope="scope">
              <i
                v-show="summaryList.length > 1 && !summaryType"
                class="el-icon-remove-outline del"
                @click="delSummary(scope.$index)"
              ></i>
            </template>
          </el-table-column>
        </el-table>
        <i class="el-icon-circle-plus-outline adds" @click="addSummary" v-show="!summaryType"></i>
        <el-row style="text-align: right; margin: 20px 30px 0 0" v-if="!summaryType">
          <el-button @click="addCancel"> 取消 </el-button>
          <el-button type="primary" @click="addSubmit"> 提交 </el-button>
        </el-row>
        <el-row style="text-align: right; margin: 20px 30px 0 0" v-else-if="summaryType === 1">
          <el-button @click="turnAlert = true"> 驳回 </el-button>
          <el-button type="primary" @click="transit"> 通过 </el-button>
        </el-row>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  overviewList,
  getInfoItem,
  allList,
  deptTree,
  deptUsers,
  picList,
  getDeptUserTree,
  summary,
  process1,
  removeDrill
} from "@/api/emergencies";
export default {
  name: "RuoyiSummarize",

  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      title: '',
      turnAlert: false,
      turnValue: '',
      //控制是编辑还是审核查看
      summaryType: 0,
      summaryAlert: false,
      summaryList: [
        {
          problemsInfo: '',
          rectificationInfo: '',
          personLiable: '',
          rectificationTerm: '',
          rectificationBy: '',
          rectificationTime: ''
        }
      ],
      drillSummary: '',
      seePicAlert: false,
      addAnnualDrill: false,
      addForm: {},
      isDisabled: true,
      isSearch: true, // 控制搜索栏显示隐藏
      typeList: [], // 演习类型数据
      stateList: [
        {
          value: 1,
          label: "待审核",
        },
        {
          value: 2,
          label: "已审核",
        },
        {
          value: 3,
          label: "已驳回",
        },
      ], // 审核状态数据
      planName: "", // 演习名称
      planNum: "", // 演习编号
      drillType: "", // 演习类型
      drillState: "", //审核状态
      list: [], // 列表数据
      total: 0,
      summaryId: '',
      pageNum: 1,
      pageSize: 10,
      options: [],
      userOption: [],
      userOptions: [],
      picList: [],
      userList: []
    };
  },

  mounted() {
     // 获取部门用户列表
     getDeptUserTree().then((res) => {
      if (res.code === 200) {
       this.userList = this.getUser(res.data)
       console.log(this.userList)
      }
    })
    allList().then((res) => {
      if (res.code === 200) {
        console.log(res.data);
        this.typeList = res.data;
      }
    });
    deptTree().then((res) => {
      if (res.code === 200) {
        this.options = this.getTree(res.data);
      }
    });
    deptUsers().then((res) => {
      if (res.code === 200) {
        this.userOption = res.data;
      }
    });
    this.getList();
  },

  methods: {
    del (id) {
      this.$confirm("确认删除这条演习计划吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          removeDrill(id).then((res) => {
            if (res.code === 200) {
              if (this.list.length === 1 && this.pageNum > 1) {
                this.pageNum -= 1;
              }
              this.getList();
              this.$message.success(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message.error("已取消删除");
        });
    },
    //确认驳回
    addTurn () {
      process1({id: this.summaryId, processOpinion: this.turnValue, processStatus: 3 }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg);
          this.getList();
          this.addCancel()
          this.addCancels()
        }
      })
    },
    //审核通过
    transit () {
      process1({id: this.summaryId, processOpinion: '', processStatus: 2 }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg);
          this.getList();
          this.addCancel()
          this.addCancels()
        }
      })
    },
    //提交演习总结
    addSubmit () {
      console.log(this.summaryList)
      summary({id: this.summaryId, drillRectificationProblemsList: this.summaryList, drillSummary: this.drillSummary}).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg);
          this.addCancel()
          this.getList();
        }
      })
    },
    //查看演习
    seeItem (id) {
      this.summaryType = 2
      this.title = '查看详情'
      getInfoItem({ id: id }).then((res) => {
        if (res.code === 200) {
          if (res.data.drillRectificationProblemsList) {
            this.summaryList = res.data.drillRectificationProblemsList
          }

          this.drillSummary = res.data.drillSummary

        }
      });
      this.summaryAlert = true
    },
    addCancels () {
      this.turnAlert = false
      this.turnValue = ''
    },
    // 取消演习总结弹框
    addCancel () {
      this.summaryAlert = false
      this. summaryList = [
        {
          problemsInfo: '',
          rectificationInfo: '',
          personLiable: '',
          rectificationTerm: '',
          rectificationBy: '',
          rectificationTime: ''
        }
      ]
      this.drillSummary = ''
    },
    //添加演习总结表格
    addSummary () {
      this.summaryList.push(
        {
          problemsInfo: '',
          rectificationInfo: '',
          personLiable: '',
          rectificationTerm: '',
          rectificationBy: '',
          rectificationTime: ''
        }
      )
    },
    // 删除演习总结当前项
    delSummary (index) {
      this.summaryList.splice(index, 1)
    },
    //审核演习总结
    audit (id) {
      this.summaryType = 1
      this.title = '演习审核'
      getInfoItem({ id: id }).then((res) => {
        if (res.code === 200) {
          if (res.data.drillRectificationProblemsList) {
            this.summaryList = res.data.drillRectificationProblemsList
          }

          this.drillSummary = res.data.drillSummary

        }
      });
      this.summaryId = id
      this.summaryAlert = true
    },
    //编辑演习总结
    editSummary (id) {
      this.summaryType = 0
      this.title = '演习总结'
      getInfoItem({ id: id }).then((res) => {
        if (res.code === 200) {
          if (res.data.drillRectificationProblemsList) {
            this.summaryList = res.data.drillRectificationProblemsList
          }

          this.drillSummary = res.data.drillSummary

        }
      });
      this.summaryId = id
      this.summaryAlert = true
    },
    getUsers (data) {
      return data.map(item => {
        return { label: item.nickName, value: item.userId }
      })
    },
    getUser (data) {
      return data.map(item => {
        if (item.children && item.children.length && !item.sysUsers) {
          return {
            label: item.label,
            value: item.id + 'd',
            children: this.getUser(item.children)
          }
        }
        if (item.children && item.children.length && item.sysUsers) {
          return {
            label: item.label,
            value: item.id + 'd',
            children: [
              ...this.getUser(item.children),
              ...this.getUsers(item.sysUsers)
            ]
          }
        }
        if (!(item.children && item.children.length) && item.sysUsers) {
          return {
            label: item.label,
            value: item.id + 'd',
            children: this.getUsers(item.sysUsers)
          }
        }
        if (!(item.children && item.children.length) && !item.sysUsers) {
          return {
            label: item.label,
            value: item.id + 'd',
            children: []
          }
        }
        return { label: item.label, value: item.id + 'd' }
      })
    },
    getTree(list) {
      return list.map((item) => {
        if (item.children) {
          return {
            value: item.id,
            label: item.label,
            children: this.getTree(item.children),
          };
        }
        return { value: item.id, label: item.label };
      });
    },
    seePic(id) {
      picList({ planId: id }).then(res => {
        console.log(res)
        console.log(res, process.env)
        if (res.code === 200) {
          this.picList = res.data.map(item => this.baseUrl + item.picUrl)
          this.seePicAlert = true
        }
      })
    },
    seeInfo(id) {
      getInfoItem({ id: id }).then((res) => {
        if (res.code === 200) {
          console.log(res)
          this.addForm = res.data;
          this.addForm.dateList = [res.data.planStartTime, res.data.planEndTime]
          this.addForm.drillPersonList = res.data.drillPersonList.map(item => {
            return item.drillPerson
          })

          this.addAnnualDrill = true
        }
      });
    },
    getList() {
      overviewList({
        drillStatus: 2,
        drillSn: this.planNum,
        drillName: this.planName,
        drillType: this.drillType,
        processStatus: this.drillState,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.list = res.rows;
          this.total = res.total;
        }
      });
    },
    // 重置搜索
    reset() {
      this.pageNum = 1;
      this.planNum = "";
      this.planName = "";
      this.drillType = "";
      this.drillState = "";
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  position: absolute;
  right: 0;
  bottom: 20px;
  border: 3px solid #1b5782;
  border-radius: 3px;
  padding: 1px 7px 4px 7px;
  margin-left: 6px;
}
.titleLeft {
  margin-bottom: 5px;
}
.adds {
  font-size: 30px;
  color: #1b5782;
  font-weight: 700;
  margin-top: 10px;
}
.del {
  font-size: 20px;
  color: red;
  font-weight: 700;
  margin-top: 10px;
}
.minBox {
  width: 98%;
  min-height: 50px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
</style>
