<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px" class="line-bottom">
      <el-row>
        <el-col :span="6">
          <el-form-item label="演练地点:">
            <el-input v-model="form.exerciseVenue" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="演练日期:">
            <el-date-picker
              v-model="dataValue"
              type="daterange"
              @change="dataChange(dataValue)"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="searchInfo" class="mgt-3" style="margin-left: 20px;">
            <i class="iconfont">&#xe67f;</i>
            查询
          </el-button>
          <!-- <el-button type="primary" class="budgetSubmission-button" @click="clearInfo">清空</el-button> -->
          <!-- <el-button type="primary" class="budgetSubmission-button" @click="modify">新增</el-button> -->
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" v-loading="tableLoading" stripe border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column prop="exerciseObject" label="演练对象" align="center"></el-table-column>
      <el-table-column prop="exerciseVenue" label="演练地点" width="160" align="center"></el-table-column>
      <el-table-column prop="exerciseDate" label="演练时间" width="120" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.exerciseDate?scope.row.exerciseDate.split('T')[0]:''}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="numberOfParticipants" label="参与人数" width="80" align="center"></el-table-column>
      <el-table-column prop="exerciseEffect" label="演练效果" width="100" align="center"></el-table-column>
      <el-table-column prop="typesOfExposureProblems" label="暴露问题" width="100" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="查看" placement="top">
            <el-button
              @click.stop="modifyPop(scope.row,'show')"
              type="primary"
              size="primary"
              class="button operate_show_btn"
            >
              <i class="iconfont">&#xe67e;</i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pag-right clearFix">
      <el-pagination
        class="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="formPage.page"
        :page-sizes="[10,20,30,40]"
        :page-size="formPage.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="formPage.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { budgetSubmissionByPage } from "@/api/emergencyManagement/exerciseAccount/index";

export default {
  data() {
    return {
      dataValue: "",
      form: {
        exerciseVenue: ""
      },
      formPage: {
        page: 1,
        size: 10,
        total: 0
      },
      //列表数据
      tableData: [],
      //列表loading控制
      tableLoading: false
    };
  },
  methods: {
    // 查看
    modifyPop(row, state) {
      this.$router.push({
        path: "exerciseAccountShow",
        query: {
          id: row.id,
          state: state,
          row: row
        }
      });
    },
    dataChange(value) {
      console.log(value);
      if (value) {
        this.form.exerciseStartDate = value[0];
        this.form.exerciseEndDate = value[1];
      } else {
      }
      console.log(this.form);
    },
    //查询
    searchInfo() {
      this.initTableData();
    },
    //清空
    clearInfo() {
      this.initTableData();
    },
    //分页大小
    handleSizeChange(val) {
      this.formPage.size = val;
      this.initTableData();
    },
    //分页页数
    handleCurrentChange(val) {
      this.formPage.page = val;
      this.initTableData();
    },
    //初始化列表数据
    initTableData() {
      this.tableLoading = true;
      budgetSubmissionByPage(this.form, this.formPage).then(response => {
        if (response.infoCode == 200) {
          this.tableData = response.data.list;
          // console.log(this.tableData);
          this.formPage.total = response.data.total;
        } else {
          this.$message({
            type: "error",
            message: response.msg
          });
        }
        this.tableLoading = false;
      });
    }
  },
  created() {
    this.initTableData();
  }
};
</script>
<style scoped>
.el-input,
.el-select {
  width: 100% !important;
}
.outButtonPop {
  padding: 9.2px 27px;
  background: #145b9b;
  border-color: #145b9b;
}
.outButtonPop.el-button--primary:focus,
.outButtonPop.el-button--primary:hover {
  background-color: #038794;
  border-color: #038794;
}
.outButtonPop.el-button--primary.is-disabled,
.outButtonPop.el-button--primary.is-disabled:active,
.outButtonPop.el-button--primary.is-disabled:focus,
.outButtonPop.el-button--primary.is-disabled:hover {
  background-color: #aed6da;
  border-color: #aed6da;
}
.line-bottom {
  /* border-style:solid; */
  border-bottom: solid #1181b1;
  height: 50px;
}
.budgetSubmission-uploadBtn {
  /* margin-left: 10%; */
  display: inline-block;
  /* line-height: normal; */
  padding: 8px 13px;
  font-size: 14px;
  color: #ffffff;
  background-color: #3fa9b5 !important;
  border-color: #3fa9b5;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 8px;
}
.budgetSubmission-uploadBtn input[type="file"] {
  display: none;
}
.budgetSubmission-button {
  padding: 8px 13px;
  background: #3fa9b5;
  border-color: #3fa9b5;
  margin-top: 4px;
  margin-left: 14px;
}
.budgetSubmission-exportButton {
  padding: 8px 13px;
  background: #3fa9b5;
  border-color: #3fa9b5;
  margin-top: 4px;
  margin-left: 8px;
}
#ml-9 {
  margin-left: 9px;
}
.click-css {
  color: #0029ff;
  cursor: pointer;
}
</style>
