<template>
  <el-container>
    <el-main>
      <div class="headerTop">
        <div>
          <el-button type="primary" class="el-icon-plus" @click="addSave">
            新增</el-button
          >
        </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" width="80px">
          <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.drillObjective || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演练时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillTime || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演练地点" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillPlace || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演练依据" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillBasis || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="see(scope.row.id)">
              推演
            </el-button>
            <el-button type="text" size="mini" @click="edit(scope.row.id)">
              编辑
            </el-button>
            <el-button
              style="color: red"
              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="addAlert"
      width="30%"
      :title="title"
      :show-close="false"
    >
      <el-form
        ref="formData"
        :model="formData"
        label-position="right"
        :rules="rules"
        style="padding: 0 20px; height: 250px; overflow: auto"
        label-width="140px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="演练目的：" prop="drillObjective">
              <el-input
                style="width: 90%"
                v-model="formData.drillObjective"
                maxlength="50"
                placeholder="请输入演练目的"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="演练时间：" prop="drillTime">
              <el-date-picker
                style="width: 90%"
                v-model="formData.drillTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择演练时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="演练地点：" prop="drillPlace">
              <el-input
                style="width: 90%"
                v-model="formData.drillPlace"
                maxlength="11"
                placeholder="请输入演练地点"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="演练依据：" prop="drillBasis">
              <el-input
                style="width: 90%"
                v-model="formData.drillBasis"
                maxlength="50"
                placeholder="请输入演练依据"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row style="margin-top: 10px">
        <el-col align="right">
          <el-button @click="handleClose"> 取消 </el-button>
          <el-button type="primary" @click="handleSave"> 确定 </el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <Condition v-if="isCondition" @close="close" :itemId="itemId" />
  </el-container>
</template>

<script>
import { getList, remove, save, getDetails } from "@/api/homes.js";
import Condition from './condition.vue'
export default {
  name: "RuoyiHomes",
  components: {
    Condition
  },
  data() {
    return {
      itemId: '', //推演当前项id
      isCondition: false,//控制条件页面
      total: 0, //总数
      pageNum: 1, //页码数
      pageSize: 10, //每页条数
      list: [], //表格数据
      addAlert: false, //新增弹框显示隐藏
      formData: {
        //储存新增/编辑数据
        drillObjective: "", //演练目的
        drillTime: "", //演练时间
        drillPlace: "", //演练地点
        drillBasis: "", //演练依据
      },
      title: "新增",
      //校验表单
      rules: {
        drillObjective: [
          { required: true, message: "请输入演练目的", trigger: "blur" },
        ],
        drillTime: [
          { required: true, message: "请选择演练时间", trigger: "change" },
        ],
        drillPlace: [
          { required: true, message: "请输入演练地点", trigger: "blur" },
        ],
        drillBasis: [
          { required: true, message: "请输入演练依据", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    //关闭条件
    close() {
      this.isCondition = false
    },
    //获取列表数据
    getList() {
      getList({ pageNum: this.pageNum, pageSize: this.pageSize }).then(
        (res) => {
          if (res.code === 200) {
            this.list = res.rows;
            this.total = res.total;
          }
        }
      );
    },
    //新增按钮
    addSave() {
      this.addAlert = true;
      this.title = "新增";
    },
    // 取消添加/编辑
    handleClose() {
      this.addAlert = false;
      this.formData = {};
      this.$refs.formData.resetFields();
    },
    //确认提交/编辑
    handleSave() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          save(this.formData).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.addAlert = false;
              this.formData = {};
              this.$refs.formData.resetFields();
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    //删除列表项
    del(id) {
      this.$confirm("是否确认删除当前项？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          remove(id).then((data) => {
            if (data.code === 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getList();
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {
          // 取消后退出
        });
    },
    see (id) {
      this.itemId = id
      this.isCondition = true
    },
    //编辑当前项
    edit(id) {
      getDetails({ id }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.formData = res.data;
          this.title = "编辑";
          this.addAlert = true;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
