<template>
  <el-container>
    <el-header v-if="isSearch">
      <el-form style="margin: 10px 0" :inline="true">
        <el-form-item label="演习编号：">
          <el-input v-model="drillSn" placeholder="请输入演习编号" />
        </el-form-item>
        <el-form-item label="演习名称：">
          <el-input v-model="planName" 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>
          <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>
          <el-button type="primary" class="el-icon-plus" @click="add">
            新增</el-button
          >
        </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.drillOrganizerName || '-' }}</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" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillDepartmentName || '-' }}</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.drillStatus === 1 ? "未完成" : "已完成" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="300">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="getItem(scope.row.id)">
              查看
            </el-button>
            <el-button type="text" size="mini" @click="setItem(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="title"
      :before-close="addCancel"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        label-position="right"
        label-width="140px"
        :inline="true"
        :rules="rules1"
        style="height: 63vh; overflow: auto"
      >
        <el-form-item label="演习名称：" prop="drillName">
          <el-input
          :disabled="isDisabled"
            v-model="addForm.drillName"
            placeholder="请输入演习名称"
            style="width: 15vw"
          />
        </el-form-item>
        <el-form-item label="演习部门：" prop="drillDepartment">
          <el-cascader
          :disabled="isDisabled"
          :props="{ checkStrictly: true }"
            style="width: 15vw"
            @change="handleChange"
            v-model="addForm.drillDepartment"
            :options="options"
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="演习组织人：" prop="drillOrganizer">
          <el-select
          :disabled="isDisabled"
            style="width: 15vw"
            v-model="addForm.drillOrganizer"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in userOptions"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="演习区域：" prop="drillArea">
          <el-input
          :disabled="isDisabled"
            v-model="addForm.drillArea"
            placeholder="请输入演习区域"
            style="width: 15vw"
          />
        </el-form-item>
        <el-form-item label="演习地点：" prop="drillDeck">
          <el-input
          :disabled="isDisabled"
            v-model="addForm.drillDeck"
            placeholder="请输入演习地点"
            style="width: 15vw"
          />
        </el-form-item>
        <el-form-item label="演习类型：" prop="drillTypeName">
          <el-select
          :disabled="isDisabled"
            style="width: 15vw"
            v-model="addForm.drillTypeName"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="演习时间：" prop="dateList">
          <el-date-picker
          :disabled="isDisabled"
          @change="setTime"
            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
            placeholder="请选择演习人员（可多选）"
          >
            <!-- <el-option
              v-for="item in userOption"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            </el-option> -->
            <el-option
              v-for="item in userOptions"
              :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"
            placeholder="请输入假设事故类型"
            style="width: 38vw"
          />
        </el-form-item>

        <div style="position: relative">
          <p style="margin-left: 20px;">演习过程确认项：</p>
          <div
            class="minBox"
            v-for="(item, index) in addForm.drillProcessList"
            :key="index"
          >
            <!-- <span v-show="!index" class="titleLeft">演习过程确认项：</span> -->
            <el-form-item
              :label="index + 1 + ':'"
              :prop="'drillProcessList.' + index + '.contentInfo'"
              :rules="rules1.contentInfo"
            >
              <el-input
              :disabled="isDisabled"
                v-model="addForm.drillProcessList[index].contentInfo"
                style="width: 35vw"
                type="textarea"
                :autosize="{ minRows: 1 }"
                resize="none"
              />
            </el-form-item>
            <i v-if="!isDisabled && addForm.drillProcessList.length -1" class="del el-icon-remove-outline"  @click="delProblem(index)"></i>
            <i v-if="!isDisabled && index === addForm.drillProcessList.length -1" class="add el-icon-circle-plus-outline" @click="addProblem()"></i>
          </div>

        </div>

        <el-form-item label="演习目的：" prop="drillObjective">
          <el-input
            :disabled="isDisabled"
            type="textarea"
            resize="none"
            :autosize="{ minRows: 4, maxRows: 444 }"
            v-model="addForm.drillObjective"
            placeholder="请输入演习目的"
            style="width: 38vw"
          />
        </el-form-item>

      </el-form>
      <el-row v-if="!isDisabled" style="text-align: right; margin: 60px 30px 0 0">
        <el-button type="primary" @click="addSubmit('addForm')">
          提交
        </el-button>
        <el-button  @click="addCancel"> 取消 </el-button>
      </el-row>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  getLists,
  allList,
  deptUser,
  deptTree,
  deptUsers,
  plan,
  getInfoItem,
  removeDrill
} from "@/api/emergencies";
export default {
  name: "RuoyiAllocation",

  data() {
    return {
      isDisabled: false,
      planName: "",
      addAlert: false,
      isSearch: true,
      pageNum: 1,
      pageSize: 10,
      total: 1,
      title: "",
      drillSn: "",
      list: [],
      userOption: [],
      loading: false,
      addForm: {
        drillName: "",
        drillDepartment: "",
        drillOrganizer: "",
        drillType: "",
        drillArea: "",
        drillDeck: "",
        accidentSituation: "",
        drillObjective: "",
        drillProcessList: [{ contentInfo: "" }],
        dateList: [],
        drillPersonList: [],
      },
      rules1: {
        contentInfo: [
          { required: true, message: "请输入演习类型", trigger: "blur" },
        ],
        drillName: [
          { required: true, message: "请输入演习名称", trigger: "blur" },
        ],
        accidentSituation: [
          { required: true, message: "请输入假设事故类型", trigger: "blur" },
        ],
        drillObjective: [
          { required: true, message: "请输入演习目的", trigger: "blur" },
        ],
        drillDeck: [
          { required: true, message: "请输入演习地点", trigger: "blur" },
        ],
        drillArea: [
          { required: true, message: "请输入演习区域", trigger: "blur" },
        ],
        drillDepartment: [
          { required: true, message: "请选择演习部门", trigger: "change" },
        ],
        drillOrganizer: [
          { required: true, message: "请选择演习组织人", trigger: "change" },
        ],
        drillTypeName: [
          { required: true, message: "请选择演习类型", trigger: "change" },
        ],
        drillPersonList: [
          { required: true, message: "请选择演习人员", trigger: "change" },
        ],
        dateList: [
          { required: true, message: "请选择演习时间", trigger: "change" },
        ],
      },

      typeList: [],
      typeList: [],
      drillType: "",
      addAnnualDrill: false,
      fileList: [],
      year: "",
      options: [],
      userOptions: [],
    };
  },

  mounted() {
    this.getList();
    allList().then((res) => {
      if (res.code === 200) {
        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;
      }
    });
  },

  methods: {
    getItem (id) {
      this.title = '查看详情'
      this.isDisabled = true
      this.getInfoItem(id)
    },
    setItem (id) {
      this.title = '编辑演习计划'
      this.isDisabled = false
      this.getInfoItem(id)
    },
    getInfoItem(id) {
      getInfoItem({id}).then(res => {
        if (res.code === 200) {
          console.log(res.data)
          this.addForm = res.data
          // this.options
          const lists =  res.data.drillDepartmentsList.map(item => item * 1)
          this.$set(this.addForm, 'dateList', [res.data.planStartTime, res.data.planEndTime] )
          this.addForm.drillDepartment =lists
          this.addForm.drillName= res.data.drillName
        this.addForm.drillOrganizer= res.data.drillOrganizer
        this.addForm.drillType= res.data.drillType
        this.addForm.drillArea= res.data.drillArea
        this.addForm.drillDeck= res.data.drillDeck
        this.addForm.id = res.data.id
        this.addForm.accidentSituation= res.data.accidentSituation
        this.addForm.drillObjective= res.data.drillObjective
        this.addForm.drillProcessList= res.data.drillProcessList
        const personList = res.data.drillPersonList.map(item => { return item.drillPerson})
        this.addForm.drillPersonList= personList
          deptUser(lists[lists.length - 1]).then((res) => {
        if (res.code === 200) {
          this.userOptions = res.data;
          this.addAnnualDrill = true
        }
      });
        }
      })
    },
    addProblem() {
      this.addForm.drillProcessList.push({ contentInfo: "" });
    },
    delProblem(index) {
      this.addForm.drillProcessList.splice(index, 1);
    },
    handleChange(value) {
      console.log(value)
      this.addForm.drillOrganizer = ""
      deptUser(value[value.length - 1]).then((res) => {
        if (res.code === 200) {
          this.userOptions = res.data;
        }
      });
    },
    setTime(val) {
      console.log(val)
    },
    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 };
      });
    },
    // 关闭弹框
    cancel() {
      this.year = "";
      this.addAnnualDrill = false;
    },
    handleClose() {
      this.addAnnualDrill = false;
    },
    add() {
      this.addAnnualDrill = true;
      this.title = "新增演习计划";
    },
    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("已取消删除");
        });
    },
    getList() {
      getLists({
        drillType: this.drillType,
        drillName: this.planName,
        drillSn: this.drillSn,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code === 200) {
          this.list = res.rows;
          this.total = res.total;
        }
        console.log(res);
      });
    },
    addSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === '新增演习计划') {
            const list = {
            drillName: this.addForm.drillName,
            drillDepartment: this.addForm.drillDepartment[this.addForm.drillDepartment.length - 1],
            drillDepartmentsList:this.addForm.drillDepartment,
            drillObjective: this.addForm.drillObjective,
            drillOrganizer: this.addForm.drillOrganizer,
            drillDeck: this.addForm.drillDeck,
            planStartTime: this.addForm.dateList[0],
            planEndTime: this.addForm.dateList[1],
            drillType: this.addForm.drillTypeName,
            drillArea: this.addForm.drillArea,
            accidentSituation: this.addForm.accidentSituation,
            drillProcessList: this.addForm.drillProcessList,
            drillPersonList: this.addForm.drillPersonList.map(item => {
              return {drillPerson: item}
            }),
          };
          plan(list).then(res => {
            if (res.code === 200) {
              this.addAnnualDrill = false
              this.getList();
              this.$message.success(res.msg);
            }
          })
          } else {
            const list = {
            drillName: this.addForm.drillName,
            drillDepartment: this.addForm.drillDepartment[this.addForm.drillDepartment.length - 1],
            drillDepartmentsList:this.addForm.drillDepartment,
            drillObjective: this.addForm.drillObjective,
            drillOrganizer: this.addForm.drillOrganizer,
            drillDeck: this.addForm.drillDeck,
            planStartTime: this.addForm.dateList[0],
            planEndTime: this.addForm.dateList[1],
            drillType: this.addForm.drillTypeName,
            drillArea: this.addForm.drillArea,
            accidentSituation: this.addForm.accidentSituation,
            drillProcessList: this.addForm.drillProcessList,
            drillPersonList: this.addForm.drillPersonList.map(item => {
              return {drillPerson: item}
            }),
            id: this.addForm.id
          };
          plan(list).then(res => {
            if (res.code === 200) {
              this.addAnnualDrill = false
              this.getList();
              this.$message.success(res.msg);
            }
          })
          }

        } else {
          return false;
        }
      });
    },
    reset() {
      this.drillType = "";
      this.drillSn = "";
      this.planName = "";
      this.pageNum = 1;
      this.pageSize = 10;
      this.getList();
    },
    addCancel() {
      this.addAnnualDrill = false;
      this.isDisabled = false
      this.addForm =  {
        drillName: "",
        drillDepartment: "",
        drillOrganizer: "",
        drillType: "",
        drillArea: "",
        drillDeck: "",
        accidentSituation: "",
        drillObjective: "",
        drillProcessList: [{ contentInfo: "" }],
        dateList: [],
        drillPersonList: [],
      };
      this.$refs.addForm.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  font-size: 30px;
  margin: 5px 0 0 5px;
}
.del {
  margin: 5px 0 0 5px;
  color: red;
  font-size: 30px;

}
.titleLeft {
  margin-bottom: 5px;
}
.minBox {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
</style>
