<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="风险等级" prop="assessmentLevel">
        <el-select v-model="queryParams.assessmentLevel" placeholder="请选择风险等级" style="width: 100%">
          <el-option
            v-for="dict in levelOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="承诺时间" prop="commitmentDate">
        <el-date-picker
          v-model="dateRange"
          value-format="yyyy-MM-dd HH:mm:ss"
          size="small"
          style="width: 220px"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </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 style="width: 75px"
          type="primary"
          plain
          size="mini"
          @click="handleAdd"
        >承诺</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="announcementList">
      <el-table-column label="序号" align="center" type="index" width="100"/>
      <el-table-column label="风险等级" align="center" prop="assessmentLevel" :formatter="levelFormate"/>
      <el-table-column label="承诺人" align="center" prop="keyPerson" />
      <el-table-column label="承诺时间" align="center" prop="commitmentDate" width="180" />
      <el-table-column label="承诺状态" align="center" prop="status" >
        <template slot-scope="scope">
          <span v-if="scope.row.status == '0'">已承诺</span>
        </template>
      </el-table-column>
      <el-table-column label="是否签字" align="center" prop="signOrNot" >
        <template slot-scope="scope">
          <span v-if="scope.row.signOrNot == '0'">未签字</span>
          <span v-if="scope.row.signOrNot == '1'">已签字</span>
        </template>
      </el-table-column>
      <el-table-column label="签字时间" align="center" prop="signTime" >
        <template slot-scope="scope">
          <span v-if="scope.row.signTime == null">-</span>
          <span v-else>{{scope.row.signTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="查看报告" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDetail(scope.row)"
          >安全承诺报告</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改安全承诺公告对话框 -->
    <el-dialog :title="title" center :visible.sync="open" width="1200px" append-to-body @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="160px">
        <el-row>
          <el-col :span="24">
            <span style="font-weight: bold">企业状态</span>
            <el-divider></el-divider>
          </el-col>
        </el-row>
        <el-row>
          <div v-show="!operate">
            <el-row>
              <el-col :span="8">
                <el-form-item label="生产装置" prop="productionUnit">
                  <el-input v-model="form.productionUnit" placeholder="0" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="运行装置" prop="runningDevice">
                  <el-input-number :min="0" v-model="form.runningDevice" placeholder="请输入运行装置数量" @change="unitSum"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="停产装置" prop="shutdownDevice">
                  <el-input-number :min="0" v-model="form.shutdownDevice" placeholder="请输入停产装置数量" @change="unitSum"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="检修装置" prop="maintenanceDevice">
                  <el-input-number :min="0" v-model="form.maintenanceDevice" placeholder="请输入检修装置数量" @change="unitSum"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="动火作业" prop="hotWork">
                  <el-input v-model="form.hotWork" placeholder="0" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="特殊动火作业" prop="specialHotWork">
                  <el-input-number :min="0" v-model="form.specialHotWork" placeholder="请输入特殊动火作业数量" @change="workSum"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="一级动火作业" prop="classOneHotWork">
                  <el-input-number :min="0" v-model="form.classOneHotWork" placeholder="请输入一级动火作业数量" @change="workSum"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="二级动火作业" prop="classTwoHotWork">
                  <el-input-number :min="0" v-model="form.classTwoHotWork" placeholder="请输入二级动火作业数量" @change="workSum"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="风险等级" prop="assessmentLevel">
                  <el-select v-model="form.assessmentLevel" placeholder="请选择风险等级" style="width: 100%">
                    <el-option
                      v-for="dict in levelOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="进入受限空间作业" prop="isConfinedSpace">
                  <el-select v-model="form.isConfinedSpace" placeholder="是否进入受限空间作业" style="width: 100%">
                    <el-option
                      v-for="dict in options"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否处于试生产" prop="isTrialProduction">
                  <el-select v-model="form.isTrialProduction" placeholder="是否处于试生产" style="width: 100%">
                    <el-option
                      v-for="dict in options"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="罐装、仓库等重大危险源是否处于安全状态">
                  <el-select v-model="form.isSecurityStatus" placeholder="是否处于安全状态" style="width: 100%">
                    <el-option
                      v-for="dict in options"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div v-show="operate">
            <el-col :span="18">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="生产装置：" prop="productionUnit">
                    <span>{{form.productionUnit}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="运行装置：" prop="runningDevice">
                    <span>{{form.runningDevice}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="停产装置：" prop="shutdownDevice">
                    <span>{{form.shutdownDevice}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="检修装置：" prop="maintenanceDevice">
                    <span>{{form.maintenanceDevice}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <br/>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="动火作业：" prop="hotWork">
                    <span>{{form.hotWork}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="特殊动火作业：" prop="specialHotWork">
                    <span>{{form.specialHotWork}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="一级动火作业：" prop="classOneHotWork">
                    <span>{{form.classOneHotWork}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="二级动火作业：" prop="classTwoHotWork">
                    <span>{{form.classTwoHotWork}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <br/>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="进入受限空间作业：" prop="isConfinedSpace">
                    <span v-if="form.isConfinedSpace == '0'">是</span>
                    <span v-if="form.isConfinedSpace == '1'">否</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否处于试生产：" prop="isTrialProduction">
                    <span v-if="form.isTrialProduction == '0'">是</span>
                    <span v-if="form.isTrialProduction == '1'">否</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="罐装、仓库等重大危险源是否处于安全状态：">
                    <span v-if="form.isSecurityStatus == '0'">是</span>
                    <span v-if="form.isSecurityStatus == '1'">否</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="5" style="margin:20px; border:1px solid #DCDFE6; border-radius: 10px">
              <div style="text-align: center; margin-top:50px; padding:20px">
                <img src="@/assets/images/assessmentLevel.png">
              </div>
              <div style="text-align: center; margin-bottom:50px; padding:20px">
                风险等级：
                  <span v-if="form.assessmentLevel == '1'">低风险</span>
                  <span v-if="form.assessmentLevel == '2'">一般风险</span>
                  <span v-if="form.assessmentLevel == '3'">较高风险</span>
                  <span v-if="form.assessmentLevel == '4'">高风险</span>
              </div>
            </el-col>
          </div>
        </el-row>

        <el-row>
          <el-col :span="24">
            <span style="font-weight: bold">企业承诺</span>
            <el-divider></el-divider>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="主要负责人" prop="keyPerson">
              <el-input v-show="!operate" v-model="form.keyPerson" placeholder="请输入主要负责人" />
              <span v-show="operate">{{form.keyPerson}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="承诺日期" prop="commitmentDate">
              <el-date-picker clearable size="small" disabled v-show="!operate"
                              v-model="commitmentDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择承诺日期">
              </el-date-picker>
              <span v-show="operate">{{parseTime(form.commitmentDate, '{y}-{m}-{d}')}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="承诺公告" prop="announcement">
              <el-input v-show="!operate" v-model="form.announcement" type="textarea" placeholder="请输入内容" />
              <span v-show="operate">{{form.announcement}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="!operate" type="primary" @click="submitForm">确 定</el-button>
        <el-button v-show="!operate" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAnnouncement, getCurrent, getAnnouncement, delAnnouncement, addAnnouncement, updateAnnouncement, exportAnnouncement } from "@/api/safetyManagement/announcement";

export default {
  name: "Announcement",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 日期范围（默认当日0点到当前时间）
      dateRange: [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0,0,0), new Date()],
      // dateRange: [],
      levelOptions: [],
      options: [{
          value:"0",
          label:"是"
        },{
          value:"1",
          label:"否"
        }],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 安全承诺公告表格数据
      announcementList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //详情控制
      operate: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        assessmentLevel: null
      },
      // 表单参数
      form: {},
      commitmentDate: new Date(),
      // 表单校验
      rules: {
        keyPerson: [
          { required: true, message: "主要负责人不能为空", trigger: "blur" }
        ],
        announcement: [
          { required: true, message: "承诺公告不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.getDicts("assessment_level").then(response => {
      this.levelOptions = response.data;
    });
  },
  methods: {
    /** 查询安全承诺公告列表 */
    getList() {
      this.loading = true;
      let params = [];
      console.log("this.dateRange", this.dateRange);
      if(this.dateRange != null && typeof this.dateRange[0] != "string") {
        let begin = this.dateRange[0],
            end = this.dateRange[1];
        params = [begin.getFullYear()+'-'+(begin.getMonth()+1)+'-'+begin.getDate()+' '+begin.getHours()+':'+begin.getMinutes()+':'+begin.getSeconds(),
                  end.getFullYear()+'-'+(begin.getMonth()+1)+'-'+end.getDate()+' 23:59:59'];
        console.log(begin, end);
        console.log("params", params);
      }else{
        params = this.dateRange;
      }
      listAnnouncement(this.addDateRange(this.queryParams, params)).then(response => {
        this.announcementList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    levelFormate(row){
      console.log("this.levelOptions",this.levelOptions);
      return this.levelOptions.find(item => item.dictValue == row.assessmentLevel).dictLabel;
    },
    unitSum(){
      if(isNaN(this.form.runningDevice)){
        this.form.runningDevice = 0;
      }
      if(isNaN(this.form.shutdownDevice)){
        this.form.shutdownDevice = 0;
      }
      if(isNaN(this.form.maintenanceDevice)){
        this.form.maintenanceDevice = 0;
      }
      this.form.productionUnit = this.form.runningDevice + this.form.shutdownDevice + this.form.maintenanceDevice;
    },
    workSum(){
      if(isNaN(this.form.specialHotWork)){
        this.form.specialHotWork = 0;
      }
      if(isNaN(this.form.classOneHotWork)){
        this.form.classOneHotWork = 0;
      }
      if(isNaN(this.form.classTwoHotWork)){
        this.form.classTwoHotWork = 0;
      }
      this.form.hotWork = this.form.specialHotWork + this.form.classOneHotWork + this.form.classTwoHotWork;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.operate = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        productionUnit: null,
        runningDevice: null,
        shutdownDevice: null,
        maintenanceDevice: null,
        hotWork: 0,
        specialHotWork: null,
        classOneHotWork: null,
        classTwoHotWork: null,
        isConfinedSpace: "1",
        isTrialProduction: "1",
        isSecurityStatus: "1",
        assessmentLevel: "1",
        keyPerson: null,
        announcement: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0,0,0), new Date()];
      // this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      getCurrent().then(response => {
        let list = response.data;
        console.log(list,"list");
        if(list === undefined || list.length ===0) {
          this.reset();
          this.open = true;
          this.title = "安全承诺公告";
        }else{
          this.msgError("今日已录入安全承诺");
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {

            addAnnouncement(this.form).then(response => {
              this.msgSuccess("提交成功");
              this.open = false;
              this.getList();
            });

        }
      });
    },
    handleDetail(row) {
      getAnnouncement(row.id).then(response => {
        if(response.code == 200) {
          this.form = response.data;
          this.open = true;
          this.operate = true;
          this.title = "安全承诺公告报告";
        }else{
          this.msgSuccess("查看失败");
        }
      });
    },
  }
};
</script>